网页设计需要注意什么?基础入门_设计基础入门

1、在不同设备上采用相似的设计用户可以通过不同类型的设备访问你的网站,这些设备包括:电脑、平板、手机、音乐播放器、甚至是智能手表等。无论用户使用什么设备访问你的网页,确保他们具有类似的体验,这是用户体验设计中的一条重要标准。2、导航的设计要简单易用、清晰明了导航设计是网页可用性的基石。记住,如果用户在你的网站里找不到导航,那么无论你的网站有多少都没用用。这也

网页设计需要注意什么?基础入门

1、在不同设备上采用相似的设计

用户可以通过不同类型的设备访问你的网站,这些设备包括:电脑、平板、手机、音乐播放器、甚至是智能手表等。无论用户使用什么设备访问你的网页,确保他们具有类似的体验,这是用户体验设计中的一条重要标准。

网页设计需要注意什么?基础入门_设计基础入门

2、导航的设计要简单易用、清晰明了

导航设计是网页可用性的基石。记住,如果用户在你的网站里找不到导航,那么无论你的网站有多少都没用用。这也是导航设计要遵循以下原则的原因:

用户以最少的点击次数,最快地到达他们想要浏览的网页。这才是导航设计的目的。

3、 改变访问过的链接的颜色

链接是导航的一个关键因素。假如用户点击过的链接没有改变颜色,很可能导致用户多次点击同一个链接。

如果用户知道自己过去访问的链接和现在还未访问过的链接,那么用户会更容易决定自己下一次要点击什么。

4、让页面浏览变得更容易

用户浏览我们的网页时,并不是通读所有的内容,而是快速地扫描整个网页。因此,如果用户来到这个网站,是为了寻找特定的内容或者是完成某个任务,那么他们会先浏览整个网页,直到用户找到了自己想要去的地方。因此,作为网页设计者的我们,应该通过设计网站可视化的层级架构帮助这些用户尽快达成自己的目的。可视化的层级架构意味着网页上每个元素的摆放或呈现都具有权重。

我们在设计网站时,要确保网页标题、登录注册按钮、导航栏或其它同等重要的元素放在用户很容易看到的地方,以减少用户寻找的时间。

5、仔细检查所有的链接

当用户点击网站上的一个链接,界面上却出现404的错误页面时,用户很容易变得沮丧。当用户在网站上寻找内容时,他们希望自己点击过的每个链接都是自己正在寻找的那个,而不是出现404的错误页面、或者点进去后,却发现不是自己寻找的那个页面。

6、确保能点击的元素让用户看起来就能点击

一个物体的样子会告诉用户如何使用它。看起来像按钮或链接的视觉元素却不能点击,很容易困扰用户,这些视觉元素包括:文字下划线并不代表链接、拥有动画效果的元素也不是超链接。用户想要知道界面上哪些区域是纯静态内容,哪些区域是可以点击的。让可以点击的元素明显一点。

7、合理的页面版式

设计网页时,一定要注意页面版式的合理性。一个合理的版式和让人一目了然的网页能够给人带来舒适的感觉,并且会让人愿意花时间去了解。注重版式的设计,不要板块冗杂;页面版式的搭配,注重协调简洁。合理地搭配设计页面中的版式,呈现一个清新的网页。

8、舒缓的色彩设计

无论哪个行业的网页,在设计过程中都不要一味地追求视觉刺激,做出奇异的色彩搭配。在设计网页的过程中,设计者一定要注重页面色彩的搭配,多用暖色调,协调搭配冷暖色。只有色彩足够协调、舒缓,才能够让人有继续停留的念头。

9、新颖的网页内容

网页中的内容,犹如人的灵魂不可或缺。设计一个网页,肯定都是想要宣传某个企业或产品,而网页中的内容更是不能够缺少的。现今,想要用内容吸引用户,就一定需要有新颖的内容,从文字或者其他形式的内容出发,注重原创和内容的新颖。

10、减少使用特殊字符

设计网页时,尽量少用特殊字符。在不同的计算机或者不同的平台中,看到的情况有时候有一些差别,如果使用了特殊字符,很可能会有比较糟糕的展示效果,所以应当尽量减少特殊字符的使用。

11、不要让促销广告遮住内容

现实生活中广告已经让人比较反感了,如果你的网页中广告居然挡住了主要内容,这几乎是逼着你的用户生气关闭页面,这样换来的广告营收从某种意义上也是饮鸩止渴。

另外一方面,长时间的互联网浏览经验会培养出用户的另外一种广告应对策略,当他们看到广告的时候会主动忽略它。这对于广告的转化率同样是毁灭性的打击。

12、不要适得其反

不要为了漂亮而牺牲网站的可用性。比较晃眼的文本和广告本身体验不佳,它们会让人分心,在网页设计中,字体的处理与颜色、版式、图形化等其他设计元素的处理一样非常关键。网页设计的外观不应该影响它本身的可用性。不能为了美观而牺牲内容的可读性和对比性。

海计划公众号
(0)
上一篇 2020/04/03 19:36
下一篇 2020/04/03 19:36

您可能感兴趣的内容

  • 推荐几款常用的微信公众号排版工具零基础入门_微信基础教程

    作为一个新媒体小编,我们常接触的几个工具,莫过于排版、素材、图片这几个了。今天天天主要是想给大家介绍几款我常用的微信排版工具,希望对大家有用。常用微信排版工具第一款:135编辑器(www.135editor.com)市场上用于微信排版的编辑器有很多种,为什么我会第一款就推荐135编辑器呢,这个可能是跟我的个人习惯有关。哈哈哈哈~ 对于刚入行的小伙伴们,可以试

    2020/04/03
  • I Remember入门教程_通过互联网向人们分享自己的回忆

    I Remember入门教程 官方网址:http://i-remember.fr/ 简介描述:通过互联网向人们分享自己的回忆 这款网站设计的真的很美,该网站是通过互联网向人们分享自…

    2020/03/08
  • 轮询、长轮询、长连接、socket连接、WebSocket小白入门_socket使用帮助

    轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。优点:后端程序编写比较容易。缺点:请求中有大半是无用,浪费带宽和服务器资源。(而每一次的 HTTP 请求和应答都带有完整的 HTTP 头信息,这就增加了每次传输的数据量)实例:适于小型应用。长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息

    2020/03/26
  • 你想知道的关于 Refs 的知识都在这了菜鸟教程网_refs基础教程

    Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。Refs 使用场景在某些情况下,我们需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个 React 组件的实例,也可能是一个 DOM 元素,例如:管理焦点,文本选择或媒体播放。触发强制动画。集成第三方 DOM 库。设置 Refs1. create

    2020/03/23
  • Js深浅拷贝原理指南教程_原理基础指南

    如果拷贝的值是基本数据类型,拷贝的是基本类型的值。如果是引用类型拷贝的是内存地址。浅拷贝只解决了第一层的问题,拷贝第一层的基本类型值,以及第一层的引用类型地址。也就是说:只能保证第一层数据为基本数据类型时,不会随原数据改变。原数据中包含子对象时,随原数据变化。1.1 浅拷贝的使用场景1. Object.assign()该方法用于将所有可枚举属性的值从一个或多

    2020/03/24
  • vue 循环取值日期格式化,字符串截取处理使用帮助_日期小白基础

    用vue取值页面遍历时,每次都搜索js日期格式化和字符串长度截取,这次记录下来,以后从这里直接拿即可。html代码如下

    • <a href="javascript:void
    2020/03/26
  • 为什么要使用状态管理小白攻略_状态使用指南

    我们平时开发的大部分项目,由于复杂度不够, 很少使用 Vuex、Redux 等状态管理库,就算引入了 Vuex 这些库,也只是当作一个全局数据引用,并非对应用状态进行管理。但一旦页面的复杂度比较高,必然要引入状态管理,今天就聊聊我理解中的状态管理。如果涉及到举例,由于我对Vuex更熟悉,团队内也大多比较熟悉Vue,因此会使用Vuex作例子。到底什么时候应该使

    2020/03/29
  • 原生js逻辑测试题及答案基础知识_测试入门基础

    01、屏幕打印2000到3000之间的所有的数。for (var i = 2000; i < 3001; i++){document.write(i+"
    “) }
    02、求450到550之间所有奇数的和。va

    2020/03/23
  • CSS3中background-clip背景裁切属性菜鸟攻略_背景基础入门

    CSS中的background属性想必大家已经用了无数遍,但是对于CSS3属性background-clip你可能还不太了解,那么今天我们就专门来聊聊这个属性。
    clip,英文意为 “裁切,修剪”,所以很显然,background-clip属性肯定与背景裁切有关,而事实也正是如此。
    background-clip存在以下四个属性值,他们分别是: border

    2020/03/26
  • vue路由history模式刷新页面出现404问题基础知识教程_404小白攻略

    vue hash模式下,URL中存在’#’,用’history’模式就能解决这个问题。但是history模式会出现刷新页面后,页面出现404。解决的办法是用nginx配置一下。
    在nginx的配置文件中修改方法一:location /{root /data/nginx/html;index index.html index.htm;if (!-e $r

    2020/04/03
  • vue知识点总汇入门知识_vue小白攻略

    1.vue的生命周期生命周期钩子描述beforeCreate在实例初始化前,数据观测和event/watcher事件配置之前被调用created实例被创建完成后调用。在这一步,实例已经完成以下配置:数据观测,属性和方法的运算,watcher/event事件的回调。挂载阶段还没开始,$el属性不可见beforeMount在挂载之前调用,相关的render首次被

    2020/03/24
  • 页面加载完成事件 -onload的五种写法基础指南_加载使用教程

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。1:使用jQuery的$(function){};2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式。两个是document加载完成后就执行方法。3:使用j

    2020/03/26
  • feather icons入门攻略_免费开源的简单而美丽的ICON图标集合

    feather icons入门攻略 官方网址:https://feathericons.com GitHub:https://github.com/feathericons/fea…

    2020/03/06
  • css两列布局之基于BFC规则实现入门指南_布局小白攻略

    css要实现常见的自适应两列布局的方式方法挺多。这里讲的是利用设置overflow不为visible时会形成新的BFC来实现。至于什么是BFC,可以搜搜看先,基本都讲的差不多了。等有更多空余时间,专门给讲讲BFC以及实例的东西。就这样吧,上代码:

    <html

    2020/03/30
  • 你真的理解了比较运算符吗?菜鸟知识_运算小白指南

    平常我们都是不建议在代码上编写一些比较难理解的代码,例如 x == y 和 ‘A’ > ‘B’ 。这篇文章或许不能给你带来什么大的帮助,但是却可以让你了解一些你可能没接触到的知识点。由于有些参考资料来源于 ECMA 规范,所以感兴趣的可能需要先看《读懂 ECMAScript 规格》这篇文章,当然也可以忽略。类型之间的转换表首先我们需要先了解基本的类型转换规则

    2020/03/23
  • 从零实现TypeScript版Koa指南教程_Koa入门百科

    这篇文章会讲些什么?如何从零开始完成一个涵盖Koa核心功能的Node.js类库从代码层面解释Koa一些代码写法的原因:如中间件为什么必须调用next函数、ctx是怎么来的和一个请求是什么关系我们知道Koa类库主要有以下几个重要特性:支持洋葱圈模型的中间件机制封装request、response提供context对象,方便http操作异步函数、中间件的错误处理

    2020/03/29