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

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

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

开发者眼中的代码审查“真相” 互联网产品设计的12个理念 Pair、Between、小恩爱:妹纸装个情侣应用吧? 横跨四大操作系统:3DMark将挑战所有智能设备 美国碰壁欧洲得意 华为获CERN青睐 应用数据分析新标准:Flurry增应用崩溃分析功能 Twitter被黑客入侵,25万用户信息可能被窃 16亿美元超级计算机项目助力解读人脑 卡巴斯基发现新型Android恶意软件 可入侵Windows 谷歌发布基于B-Tree的C++模板库 开源产品系列:高性能Web框架Zend Framework LiFi是否会取代WiFi? 1月浏览器排行:IE10突破1% Chrome连续3月下滑 Wine让Android也能运行Windows软件 Cory Ondrejka,是这位工程师拯救了Facebook! 三星争夺企业市场的三大痛点与对策 Xcode更新至4.6 支持iOS 6.1 工程师揭秘:NVIDIA如何锻造Android掌机 VMware掌控Puppet 老用户会被锁定吗? 试图领导创新:三星创新中心11亿美元建基金 基于WebRTC Chrome与Firefox实现视频通话 将OpenStack私有云部署到Hadoop MapReduce环境 Web设计师必备的10款最佳排版工具 诺基亚CEO谈平板计划 Android为候选系统 244亿美元!戴尔公司正式完成私有化 对抗苹果 Facebook或推Find My Friends应用 前谷歌工程团队负责人:如何打造一个完美的产品 好消息!Google Drive可存储共享JavaScript等网站 Android Rivers:用Kotlin语言写出的新闻应用 辞旧迎新 老牌游戏开发商的移动进化之路 iSuppli:硬盘市场持续萎缩 大数据应用成重要市场 有关使用JAVA技术来操作ZIP文件的一个问题,很急的!!!!!! 了解足球网站的兄弟讨论一下 简单问题,急需一个链接SQL SERVER 2000的字符串!!! 求助 求一时间函数 用VC做一个IE的ActiveX,要求能通过Internet访问数据库,该怎么弄啊?有例程吗? JDBC如何访问Oracle存储过程返回的结果集? 虚心请教个简单问题!怎样根据数据库读出的的代码(DM),动态匹配出代码意义(DMYY)?急!!! 我有简体的程序代码,也装了繁体98,想转换为繁体版,请帮我提供解决方案把 请问有哪位高人配置过JBuilder编译javabean 怎么读出上传的文件内容,(根据文件路径)? 在Win2003里用属于Administrator用户组但不是Administrator的用户建一个ADSL上网连接,为什么这个用户自己无权使用呢?怎么才能使它有使 设备文本重画的问题 求 <<ibm pc 匯編語言程序設計>>一書, 送400分. 下载文件时不提示我? JB中写代码时光标的问题 vbscript,如何在客户判断EMAIL正确格试! 西风到底怎么样啊? 众为高手好,小弟下载了个电影,打开时有声音,但是显示不了 ACCESS可以用中文作为表名,但不能读取表? 从0-22 抽出 5个数 这几个数不能相同。怎么版。啊。。 求救! 在窗体中如何对ACCESS数据库中的表格进行访问?--在线求助!! 怎么在程序中使用另一个目录下的class?在线等 如何在datagrid绑定后修改datagrid 的header.text的值? 谁知道在PB8下为什么树型控件无法正确显示汉字,急,马上就给分,在线等候! delphi的系统分析员请进来。 关于输入法的聚焦问题!! 病毒通过附件传播的问题 ORACLE不能自动启动的问题 关于提取字符串的问题 indy 9控件的安装,有没有发布版下载! 菜鸟问题,我这个触发器错在哪里? 郁闷!!!帮帮先!!! 急,表怎么添加不了数据??? 怎样实现MDI框架下,桌面窗体总在所有窗体的最后面? 关于html登录表单 想创业的进来看看! 郁闷!!帮忙先 “上网上了一半,突然间网页全部自动关闭?” 急死了,这是怎么回事? delphi的系统分析员请进来。 许多网页底部都有Disclaimer,请问这个词该怎么理解?谢谢! asp连接 orale进行分页时老出错? 请教:如何从XML文件中动态读出对应的信息?万分感谢 delphi的系统分析员请进来。 在Win2k Server中,如何判断当前用户(或应用)是否有SE_SHUTDOWN_NAME权限?在线... 表单连动怎么写呢?用asp。 一个简单问题,却快让我发疯了,请大家帮忙看看 各位大哥又有问题请教了,现在看到很多网页做成左右2个FrameSet,当中通过一个类似箭头的图片,当点击后,可以缩进一个FrameSet,请问大哥 简单问题求教 急!!!如何在MSHFlesGrid中实现Tab键的功能? “啊,黄河!你一泻千里,浩浩荡荡.”的修辞手法 防溺水要哪几点 你的微笑带走了我的心 用英语怎么翻译 他的创作热情犹如奔腾的黄河,一泻千里,仅用了六,.《黄河大合唱》初稿就完成了 不耻下问的故事 微笑 由心而生 翻译成英文 请问雪橇犬究竟分几种?如题~如何辨别啊...性格啊还有外形什么的最好还弄几张图上来看看 不耻下问小故事急用 神级人物呢? 雪橇犬有哪几种?为什么本人觉得哈士奇和阿拉斯加很难区分? 怎么防溺水 为科学奉献终身的名人有哪些短点 雪橇犬有几种 ( ) ( come) have please.用适当形式填空 胜多欺少(词语接龙) 有几种雪橇犬,哪种最听话、 用负荆请罪、千方百计、攻无不克造句 那时,我总是不由得想起那位“耳聋”的老人 改为双重否定句怎么改啊? 平行四边形的对角相等,那么它的对边也相等. while和as的区别( )modeling business is by no means easy to get into,the good models will always be in demand.A.while B.as 为什么选A而不选B呢? 已知△ABC的两边AB、AC的长是关于x的一元二次方程X²-(2m+3)x+m²+3m+2=0的两个实数根,且第三边长为5.(1)是否存在实数m,使△ABC是以AB为底边的等腰三角形?若存在,求出m的值;若不存在,说明 《南极大冒险》中的雪橇犬是西伯利亚雪橇犬(哈士奇)还是阿拉斯加雪橇犬 平行四边形有无数条高,并且所有的高都相等. 这句话对不对?急急急,快点啊!!! 人琴俱亡中 你认为王子猷 月余亦卒 的原因是. 大家帮我看看这是那种雪橇犬? 平行四边形有几个高4条吗 形象表达的句子,如:快刀斩乱麻 设a,b,c,是△ABC的三条边,方程(b+c)x2+√2(a-c)x-3/4(a-c)=0有两个相等的实数根,设a,b,c,是△ABC的三条边,方程(b+c)x2+√2(a-c)x-3/4(a-c)=0有两个相等的实数根,且满足a-5b+2c=0.(1)求证三角形是等腰三角 一组对边相等一组对角也相等的平行四边形是平行四边形这句话对不对啊 while与as的区别 把下面词语补充完整:半( )三( ) 一( )两( ) 一( )百() 一()万() 《路》揭示了怎样的生活哲理? as 和 while 的区别... “儿孙自有儿孙福,莫把儿孙当马牛”的意思是什么? Richard Goolie是什么意思 这道题目怎么写?体积是多少? 如何理解"妈妈"的妈字一个女旁,加一个马字,一辈子为儿女做牛做马.可另有儿孙自有儿孙福,莫为儿孙作马牛. 比喻新鲜事物蓬勃出现的成语 急需“做一个热爱生活热爱工作的人”的演讲稿 雪橇犬怎么养才健康? 考点同步解读 必修1 人教版的答案 小偷的英语 请问四川适合养雪橇犬么?比较纯的价格大概在多少? 什么是病毒?病毒是如何与宿主相互作用的?病毒可能引起那些疾病?在日常生活中如何阻断传播? 小偷英语怎么写 怎么养雪橇犬?我无意中捡到了一条雪獒犬可我不知道要怎么养 现在只吃香肠 力争上游突出一个(jìng)字 强生健体突出一个(jìng)字 把拼音改成恰当的字 小偷的英文单词是什么? 雪橇犬 再东北好养吗 雪橇犬有几种? 环境整洁突出一个“净”字;禁止喧哗突出一个“( )”字;力争上游突出一“( )”字;讲文明礼貌突出一个“( )”字;强身健体突出一个“( )”字.十万火急! 如何看待“儿孙自有儿孙福”拜托各位大神有的人给儿子买了房,这样的人有,有的人说儿孙自有儿孙福,意思是你自儿奔吧,能奔个样是个什么样 天宇雪橇犬基地的狗是纯种的吗? 力争上游突出一个什么字 若2√﹙2-a﹚/6与6√﹙2a-3﹚/4 是同类二次根式,则a的值是多少?3Q 已知两个数的和为6,积为7,则这两个数为多少? 亲们,我需要步骤,11题 设ab是两个数 规定a△b=4b-(a+b)÷2 求3△(4△6)拜托各位了 3Q 用一个字形容黄河 并指出为什么? 大雨过后,春笋生长旺盛.比喻新生事物蓬勃涌现.是什么成语. 关于献身科学的名言警句 俄罗斯建议在莫斯科与叙利亚政府和反对悉尼两名男子无故捅死陌生少年被判30悉尼16岁男孩参加学校活动摔下悬崖昏澳大利亚100只被困小狗被解救 狗场Facebook承认传闻:年轻人已开芬兰计划实施新禁烟法 拟禁居民在阳台“免费”医疗让俄罗斯进退两难联合国首次主动攻击非洲叛军 或抛弃被\"深井救人\"事迹在百姓中传颂 王\"歼20\"战斗机现身沪昆高速?路刘恺威《喋血孤岛》11月1日浙江教育浙江临海户外休闲用品业节俭办展 小投宁波住博会盛行低碳环保风 市民“凑热安永:中国矿企面临海外并购“机会之窗土库曼斯坦货币20年 发行金银纪念币老司机雾中迷路高速逆行 交警支招大雾温州关停淘汰159家电镀企业 10人美新书爆料奥巴马怕应酬克林顿 难独自肯尼亚少女遭多人强奸 嫌犯仅被罚剪草摩根大通:今明两年中国跨境并购将非常美国务卿回应监听活动:某些方面“太过央视男主播穿西装配红裤衩录新闻独家评论:孙杨和宁泽涛不会重复刘翔的央行回应修改中间价机制:人民币汇率与国际空间站粉红温室内生菜丰收 宇航员唐山警方提醒学生及家长开学之际谨防7中医专家提醒:游泳时如何避免染上皮肤唐山开平“10分钟廉政微课堂”活动显山西省煤炭工业厅原厅长吴永平被“双开中国数字文化集团有限公司监事会副主席唐山高新区打造“指尖上的廉政课堂”西藏官员批外媒指责:从未强迫藏人官方战神怒吼!中国先进火箭炮火炮震撼射击韩连续37天无MERS新增病例 最快国办:鼓励有条件单位夏季休周末两天半乌克兰政府:顿巴斯炮击造成乌军1死1唐山开平“10分钟廉政微课堂”活动显创投品牌GirlUp一周年 专注女唐山高新区打造“指尖上的廉政课堂”中日竞争印尼高铁进入关键时期 中方承朝鲜女足夺东亚杯冠军凯旋 20多万平中日围棋擂台纪念赛闭幕 中国队整体实
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘