译者:Q_misky
概要共 1908 字,写作须要 4 两分钟
———— / BEGIN / ————
页面结构设计是两件很繁杂的事,即使在结构设计时要考量许多事。为的是精简页面结构设计整件事,责任编辑列出了每一中文网站结构设计者都假如考量的准则,主要包括能做甚么,无法做甚么。安心,那些准则都是许多很单纯的准则。
结构设计中文网站时,假如做甚么
1. 在相同电子设备上选用相近的结构设计
采用者能透过相同类别的电子设备出访你的中文网站,那些电子设备主要包括:笔记本电脑、智能化智能手机、智能手机、音乐创作MP3、即使是智能化手环等。
不论采用者采用甚么电子设备出访你的页面,保证她们具备类似于的新体验,这是采用者新体验结构设计中的两条关键国际标准。
2. 导航系统的结构设计要单纯功能强大、明晰明了
导航系统结构设计是页面易用性的终极目标。
记住:假如采用者在你的中文网站里找不出导航系统,所以不论你的中文网站有多弊病都不行。这也是导航系统结构设计要遵循以下准则的原因:
单纯。每一中文网站都假如有尽可能单纯的结构。
明晰。导航系统的每项对采用者而言,都假如是清楚的。
一致。系统的导航系统页在每一页中都假如是相同的。
采用者以最少的点击次数,最快地到达她们想要浏览的页面。这才是导航系统结构设计的目的。
3. 改变出访过的链接的颜色
链接是导航系统的一个关键因素。假如采用者点击过的链接没有改变颜色,很可能导致采用者多次点击同一个链接。
假如采用者知道自己过去出访的链接和现在还未出访过的链接,所以采用者会更容易决定自己下一次要点击甚么。
4. 让页面浏览变得更容易
采用者浏览我们的页面时,并不是通读所有的内容,而是快速地扫描整个页面。
因此,假如采用者来到这个中文网站,是为的是寻找特定的内容或者是完成某个任务,所以她们会先浏览整个页面,直到采用者找到了自己想要去的地方。
因此,作为页面结构斯特默的我们,假如透过结构设计中文网站可视化的层级架构帮助那些采用者尽快达成自己的目的。
可视化的层级架构意味着页面上每一元素的摆放或呈现都具备权重(比如说,我们的结构设计决定了采用者先看到哪个,再看到哪个,最后看到哪个)。
我们在结构设计中文网站时,要保证页面标题、登录注册按钮、导航系统栏或其它同等关键的元素放在采用者很容易看到的地方,以减少采用者寻找的时间。
采用者的视线是Z字形的。
5. 仔细检查所有的链接
当采用者点击中文网站上的一个链接,界面上却出现404的错误页面时,采用者很容易变得沮丧。
当采用者在中文网站上寻找内容时,她们希望自己点击过的每一链接都是自己正在寻找的那个,而不是出现404的错误页面、或者点进去后,却发现不是自己寻找的那个页面。
6. 保证能点击的元素让采用者看起来就能点击
一个物体的样子会告诉采用者如何采用它。
看起来像按钮或链接的视觉元素却无法点击,很容易困扰采用者;那些视觉元素主要包括:文字下划线并不代表链接、拥有动画效果的元素也不是超链接。
采用者想要知道界面上哪些区域是纯静态内容,哪些区域是能点击的。
让能点击的元素明显一点。
如上图,你认为那个橙色的框是个按钮吗?相信许多人都觉得它看起来像个按钮,但其实它并不是。
结构设计中文网站时,不应做甚么
1. 不要让采用者等
中文网站采用者的耐心和注意力是非常小的。根据NNGroup的研究,10秒是采用者集中注意力完成一个任务的极限。
当采用者在等待内容加载时,她们很可能会变的沮丧。假如加载速度很慢,采用者很可能会离开这个中文网站,即使是足够漂亮的加载动画结构设计也无法改变这个结果。
2. 在新标签页打开链接
在新标签页打开链接的结构设计让采用者无法采用“返回”按钮返回之前的页面。这是非常不好的结构设计。
3. 整个中文网站充斥着广告
促销和广告会掩盖中文网站里的内容,也会让采用者很难集中注意力去完成任务,更不用说那些看起来像广告的事常常会被采用者忽略(这种现象被称为:旗帜盲点)。
4. 滚动劫持(Hijack scrolling)
滚动劫持是指:中文网站的结构斯特默或开发者控制滚动条,从而使得采用者在滚动鼠标时,会在中文网站上看到相同的效果,主要包括动画效果、固定的滚动点、即使是重新结构设计过的滚动条。
滚动劫持是采用者最不喜欢的结构设计之一,因此,它夺取了采用者控制滚动条的权利。
当你结构设计中文网站时或结构设计采用者界面时,你假如让采用者自己决定自己浏览的页面或APP的位置。
如上图,这个页面就选用了这个结构设计效果。它采用单页面平行布局的方式,用右边的点来代替每一页面。
5. 自动播放视频(有声音)
在后台自动播放视频、音乐创作或声音文件,都是采用者难以接受的结构设计方式。
采用者很少采用那些元素,除非是在适当的时候。
Facebook会在页面上自动播放视频,但是在静音状态。但是当采用者意识到自己在看视频时,采用者能自己点击屏幕决定声音的有无以及大小。
6. 为的是中文网站的美观牺牲中文网站的易用性
一个中文网站或采用者界面的结构设计不假如即使内容影响采用者的消费能力。最好不要在文字后采用繁重的背景、也不要采用让采用者很难写作或颜色对比不明显的配色方案。
如上图,低对比的配色方案很难看清楚界面上的字。
7. 采用闪烁的文字或广告
闪烁的内容或闪烁会导致易感人群的癫痫病。这样的结构设计不仅能引发癫痫,而且还会因吸引采用者的注意力而惹恼采用者。
不要采用闪烁的文字
假如你有更多的建议,请在评论区留言。
———— / END / ————
原文:Do’s and Don’ts of Web Design(要翻墙哦~)
译者:Nick Babich
责任编辑由 @Q_misky 翻译发布于人人都是产品经理。未经许可,禁止转载