说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

界面设计原则之一篇:权衡优先级 突出焦点 划分好内容层级

HTML文档下载 WORD文档下载 PDF文档下载
界面设计时,如果面临太多元素,如何调节各元素以使客户满意呢?需要把握住三点,即综合考量各元素的优先级;抓住焦点,突出最主要元素;按浏览者获取信息的先后次序,对内容按主次进行排序。

【编者按】界面设计时,我们不能强调所有元素,否则将毫无重点。正如所有人都大声呐喊,一片杂乱,我们将听不到任何信息一样。当界面设计面对很多元素时,如何调配各元素之间的关系,这时需要把握住三点:优先级、焦点、内容层级。《Design Principles: Dominance, Focal Points And Hierarchy》一文对该设计原则进行了详细解释。CSDN对该文进行了翻译,内容如下:

欢迎加入CSDN用户体验交流群:190426269,进行行业探讨。


在进行界面设计时,特别是有多个元素的时候,如何调节各个元素以使客户满意是需要技巧的。

优先级

例如现在有两个表现元素,那么谁是重点,谁是客户最看中的,这就涉及到优先级的问题。除了最常见的大小关系,在考虑优先级的时候还需要对下列因素进行综合考量:

  • 大小
  • 形状
  • 颜色
  • 深度
  • 纹理
  • 厚度
  • 饱和度
  • 方向
  • 留白
  • 兴趣点
  • 物理关系

如果想通过方向的方法来表现优先级应该如何处理呢?—可以使用箭头、渐变线等指向元素(多个)共同指向需要突出的元素,达到聚焦的目的。

主要元素

主要元素是我们的设计根基,这决定了阅览者的视觉重点。所以进行设计时,第一件事就是把要表现的主要元素放在设计首位。无论我们需要对用户表达什么信息,都必须是清晰的,并且要尽量靠近主要元素。但是要把握好尺度,例如把其它元素都覆盖了或者充满了整个画面反而变成没有了重点。

焦点

焦点可以是主要元素集合或主要区域,但是画面中应该有最主要元素。例如下图,最大最明亮的圆点是该设计中的最主要元素,与另外三个暗红色的正方形共同构成了焦点区域。


可见对比是创造出焦点区域的好方法,通过大小、形状、冷暖色、位置等来进行。

优先级别

如果焦点区域由多个元素组成,各个元素之间应该有主次之分,那么应该划分为多少层比较恰当呢?我的建议是三个。因为对于大众来说,对某个事物的认识一般是三个程度:最熟悉,最不熟悉,两者之间。

  • 最主要

该级别的元素应该拥有最多的视觉权重。这通常是一个单一的前景元素,横幅或置顶图。

  • 主要

该级别的元素是焦点元素,权重仅次于最主要元素,但是要比次要元素突出。

  • 次要

该级别元素拥有最小的视觉权重,充当的是背景衬托角色。这通常可以是文字表述。

如果还想加入更多层次,那么请注意这会影响到不同元素之间的对比度,所以要花更多的心思去设计才不至于导致主次不分。

视觉层级

视觉层级的划分决定了浏览者获取信息的先后次序。这有助于我们把最想表达的信息传达出去,层级顶层(主要元素)应第一时间解答出浏览者首次访问时可能提出的问题。随后,浏览者应该可以获取到重点信息和页面主要信息。分配给重点信息更多视觉权重是个不错的选择。如果浏览者会停留更长时间,我们应该把主要元素、次要元素按序铺排好,使浏览者获取到更丰富的信息。

倒三角写作法

在设计中划分层级与记者撰写新闻是有异曲同工之妙的。最重要的新闻信息通常位居段落1或2,内容包括时间,地点,人物,发生什么,为什么发生,如何进行等。


随后应该把重要信息进行详写。例如进行背景介绍或进行更多细节描述。收尾部分则可以进行综述或总结,但不用详写。可见,三层划分法是最普遍最安全的做法。

实例分析

An Event Apart 

An Event Apart网站的主要元素是首页的置顶图像。图像是人在开会的场景,图中的粗体文字用白色显示,很好地与背景图形成对比从而引起视觉关注。


文字内容“网站创作者的设计会”是想让访客第一时间知道这个网站是做什么的,交待得非常清楚直接。

焦点元素包括有网站Logo,最新资讯(Upcoming Events)的黑色底色以及较大粗体显示的用户评语。

如果继续浏览该网站,可以发现它主要使用了颜色和大小对比来增添额外焦点以及视觉层次。重要信息用粗体大号文字显示,同时以图片作为视觉冲击点。

Paid to Exist 

Paid to Exist的首页主要元素是顶部的背包图片,其占据了最大的视觉权重,同时由于不规则造型和图片兴趣点特质,很容易就与其它元素区分开来。


焦点元素包括有左上方的网站名,背包图片右侧的粗体大号文字,以及绿色的下载按钮。页面右边的悬浮社交分享栏是另一个焦点区域。

顺着页面往下看是三个较大的数字圆点,这引起了视觉兴趣以及激发了阅读的动力。圆点,不同颜色的段落句首,统一的浅灰色内容表述,不正好符合了前述的三层划分法?

Mandy Sims

Mandy Sims是一个单页面网站。于我而言,Mandy的肖像以及最大字号的Mandy Sims全名是主要元素。


顺着导航栏往下点,每点开一层,当前层标题的字体都是最大字号的,因而这就成了焦点区域,这正是我要特别指出的。

此外,页面右边的用户评论是另一块焦点区域,其背景色与选中菜单栏的背景色一致。即使不详细看每节内容,我们都可从用户反馈中知道Mandy为用户了提供了令人满意的服务。

Vanseo Design

最后一个实例是我个人的博客网站。页面的主标题是主要元素,我希望人们多阅读我的文章,因此明确地告诉读者他将得到什么。


配图同样吸引眼球,甚至你会认为这更加突出,但这并不需要在每篇文章中呈现。

最左上角的Logo以及最右上的RSS链接设计为比下方文字更为显眼,但是为了不过于影响观感重点,我没有使用更加鲜艳的亮红色。

画面左侧是有关本站的介绍以及标签信息,我使用了较大的行距以及加粗字体,以便用户一眼就看清楚博客的主要内容与分类。对于超链接,我不希望它成为强迫用户点击的工具,而是用户在需要的时候自行决定;因此做了特殊处理—斜体字和低明度低饱和度的蓝色字体。

我的出发点是当用户第一次访问该博客或阅读我的文章时,能够很快地知道文章主要内容以及本站信息(如网站或我的名字)而不用把文章从头至尾都阅读才知道。

写在最后

对于有限的页面空间,我们必须做好管家的角色。我觉得最关键的是要避免面面俱到,而是要有的放矢。把自己最想要表达的用不同的突出手法处理好就可以了。

但是请记得要跟用户多沟通,避免造成误会。

透过不同事物的对比法能很好地做到这一点。三层划分法是最普遍安全的做法,能够使用户一步步地掌握到我们想表达的信息。三思而后行,多观摩别人的优秀作品可以让我们获益良多。(译者:伍昆 责编:陈秋歌)

原文来自:Smashing Magazine

支付宝风控系统对外输出 联合机构建支付安全生态圈 不同设备不同界面:Windows 9正在逼近! 福特联手英特尔 为汽车打造智慧感应系统 《近匠》环信:标准化即时通讯与未来社交构想 支持Swift!全新“四步测”BDD框架Quick诞生 中国式移动办公 纷享销客完成B轮融资千万美元 打造完美用户体验:“天翼平台开放日”沙龙纪实 我的编程认知:多思考、多编码、多测试 聚焦应用开发 2014年微信开发者大会即将召开 继续补Bug,jQuery Mobile发布1.4.3版本 手游SDK服务商棱镜公司获A轮投资 东方弘道领投 广而告之:Databricks终止Shark项目,转至Spark SQL DeNA China副总裁黄雪斌:IP战国时代的生存法则 巴别时代首席执行官赵暕:从页游到手游的完美转身 Oracle借助RESTFUL API扩展移动端版图 优秀求职者应主动问的5个问题 高德LBS智能硬件编程马拉松:硬件复兴,等你挑战! 首届bong线上黑客马拉松:运动数据分析应用bong+获大奖 英特尔推出基于WebRTC的协同通讯方案 凸显本土创新“软”实力 一周消息树:不同设备不同界面的Windows 9正在逼近! 乐卓网络CEO李澄澄:移动游戏IP是把双刃剑 高性能动画!HTML5 Canvas JavaScript框架KineticJS Swift最酷炫的七大功能 微信开发者大会讲师介绍:柳峰与你一起玩转公众平台应用开发 TIOBE 2014年7月编程语言排行榜:仅发布1月,Swift进Top 20! 艾格拉斯CEO王双义:手游自研引擎的荣耀之路 以招行为例,深圳云软黄榕振谈微信公众帐号企业应用高级开发 来自前苹果高管Heidi Roizen的经验之谈 【短讯】Dropbox、微软OneDrive打不开,国内用户该如何应对? 5分钟弄懂Docker! RakNet:被OculusVR收购的跨平台游戏网络引擎 谁能谈谈XP的激活问题!? 有问题的问题1 有问题的问题 安装visual studio.net 2003 的问题? 急件!请教了,如何在一个字符串中提取第n次出现的字符? weblogic及EJB属于中间层的吗? 到水园第一件事就是看看斑竹有没有换,嘻嘻,还有谁也是这样的? win2000装好后,设了本地连接的属性,和别的机器一样的设,可就是PING 不通网关 哪有“VB.NET高级编程”和“ADO.NET高级编程”下载?? 请各位帮忙找一个用asp.net写的日历,急用 小弟是菜鸟,请问一下svrmgrl是什么,9I中有吗? 文章分页,而且文章中有大小不等的图片,该如何去做 求《三国霸业2》简体版下载地址? 诸位高手,我碰到一个很棘手ASPNETMENU的问题!急需解决!!(100分)献上! vfw下的视频采集和图象截取的问题请教! 求 《家园-惊世浩劫》简体版 关于浏览器的问题 pb如何调用word文挡? 在使用mfc时选择不同语言,怎么最后编译执行时有??符号(在菜单中) 网络共享安全问题!!!!!!!!!!!!! 我是第一次尝试做网站,碰到了问题,能帮帮我吗? 电话号码的正确性问题? 求教c#中datagrid表格设置 高分求远程开机源代码 希望大家给出: 时间的各种单位(包括汉字名称和英文缩写)及它们的进率关系; 专家近来看一下,很有针对性! 对《c# Primer Plus中文版》书的批判!!!!! 谁能提供teechart在pb中的使用帮助 是否有记录传真机传真的资料(包括传真号码,传真时间,内容) 是否有记录传真机传真的资料(包括传真号码,传真时间,内容) 急救:如何回复fdisk删除的分区 请各位帮忙找一个用asp.net写的日历,急用 我想了解‘Bug 列表‘是怎么回事,最好有例子 各位大哥请帮帮我,如何将下面的vbs转换到c#,不胜感激! 如何控制DataList显示的记录数 请教做过基于snmp方式的入侵检测系统的哥们 !!!!!!! 架构模式知多少? 请教做过基于snmp方式的入侵检测系统的哥们 !!!!!!! 请教各位大侠一个问题?? 请教做过基于snmp方式的入侵检测系统的哥们 !!!!!!! 一个初学者的麻烦! 帮忙写个求时间的函数, 请教做过基于snmp方式的入侵检测系统的哥们 !!!!!!! 二叉查找树的问题(好难啊!求救) 怎么在网页中添加一个生成EXCEL按钮 请教做过基于snmp方式的入侵检测系统的哥们 !!!!!!! 堆的一个问题?? 关于对话框的处理问题!!!!!!!!! 笔记本电脑如何进CMOS设置?我按Del不行,我想设光区启动,机子是联想的。急 2000说有文件被替换为不可识别的格式。? 关于vs中的水晶报表版权的问题 请问比如"嗳丄""儍苽"这些字体是什么字?是不是现代流行的字?叫什么字? 告诉你,我很看不惯 的作文怎么写 需要什么原料,具体步骤是什么, 需要什么原料,具体步骤是什么, 松籽鲈鱼怎么做 糯米网订单如何取消”我在糯米网团购的东西不想要了能退订吗?_百度知道你可以打糯米团的客服电话,或者联系一下这家酒店,联系糯米团的业务员,说你要退订, 假如我去年的营业额是1万,然后我今年的是1万2,那我今年的同比增长多少?怎么计算的?告诉我计算公式才好 这个句子先行词是哪个?We should take pride in the "China craze" by foreigners,which originates from the increasing prestige of China.中的which是修饰哪个词啊?which前不是foreigners么?怎么会修饰的是"China craze"? 为什么灵敏电流计的0刻度在中间物理 字体效果英文怎么读 老师级的才能解出了`首先图形是这样了,有一小车,这个小车上边不是长方形的,而是睡到的L.L顺时针转个90度下面再加上两个个轮子,换句话说就是,L这个字母的左边加上两个轮子,你理解了么? 田文林:沙特抵制安理会是“茶杯里的风好声音姚贝娜有望与导师那英同登春晚杭州十大赏秋处出榜 灵隐路杨公堤龙井《中国好声音》将唱响长沙 两季学员同CBA测折返跑孙悦轻松达标 马布里场中国铁建回应“天价招待费”今年招待费美白宫称政治僵局令就业人数少增加12女子遇劫匪镇定应对 谈人生谈理想要回统计局:经济稳中有升稳中向好 不确定法国媒体再曝美国监听法国驻美和联合国广州一镇计生办“视频脱衣”检查在外工达安基因控股股东增持引热捧罗马豪取六连胜?有戏!公办幼儿园保教费每月最高750元邓老凉茶助力中国登月工程家门口的惬意之旅:川岛风光旖旎 碉楼孙泱:影视从业者都应多读书芙蓉姐姐雕塑惊现上海南京路张杰喊爱娜姐姜山看台脸红 李娜幽默回格策蒙面支持多特蒙德黄花岗七十二烈士陵园每日分出一半绿化中小微企成功经验与发展困境超级因果抽奖仪极限速病毒的誓言大秦血魂辰主披荆十洲风云志飞升系统重生镇元道武败天下盖代魔主北部湾广场旅游西樵黄大仙祠旅游大青沟旅游珠日河草原旅游振风塔旅游徽园旅游徽文化民俗博物馆旅游龙王塘樱花园旅游天津热带植物观光园旅游九寨沟喜来登国际大剧院旅游关闸旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘