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

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

【编者按】界面设计时,我们不能强调所有元素,否则将毫无重点。正如所有人都大声呐喊,一片杂乱,我们将听不到任何信息一样。当界面设计面对很多元素时,如何调配各元素之间的关系,这时需要把握住三点:优先级、焦点、内容层级。《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链接设计为比下方文字更为显眼,但是为了不过于影响观感重点,我没有使用更加鲜艳的亮红色。

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

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

写在最后

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

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

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

时间: 2024-08-08 01:28:28

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

移动端界面设计之尺寸篇

移动端界面设计之尺寸篇 作者其它设计文章:PS图层样式之高级混合(1)PS图层样式之高级混合(2)手机音乐界面设计分析AE动画设计基础篇移动端界面设计之尺寸篇 作者在写这篇文章时候还没有出iphone6,所以把这一部分的给补上,相关的尺寸请点下面2篇文章查看. 移动端界面设计之尺寸篇(淘宝版) iPhone6 & 6 Plus 视觉设计适配说明 h5移动端页面设计学习文档

android开发之-Android 开发之4.0界面设计原则-整理

设计原则: 一.让人着迷: 1.给人惊喜:使用漂亮的界面.精心的动画.适时的音乐. 2.真实的对象比按钮和菜单更有趣 这句话的意思是:使用描述描述性的图标作为快捷方式,界面美观 当然这个快捷方式是描述一个实体的,像一个人,不是扁平化的 3.个性化设计 提供个性化设计,提高亲切感和控制感.多设计几套个性化方案 4.记住人们的使用习惯,不要重复问 记住人们的使用习惯,不要重复问.多使用可以自动记住的控件,Autocomplete控件,不要每次询问操作 二.简单我的生活 1.使用简单词.短句子. 人们

如何搞定界面设计之构图篇(转)

人家设计得真好!”可是好在什么地方呢,却说不出来.这是阻挡你成为优秀设计师的一大障碍.设计是我们的本行,不会用设计语言来解构画面,是说不过去的. 移动互联网设计发展到今天,有很多传统的设计规律可以遵循,也提出了新的挑战.因为手持设备屏幕较小,如何在有限的页面内呈现或引导有效信息,又不显得杂乱臃肿,考验着设计师的能力. 为什么有的主题或App界面就那么舒服,那么清新,那么有情怀?里面蕴含着哪些最基础的版式设计理念,让我们一块梳理梳理,给初入ui设计的同学做个参考. 想成为一个合格的ui设计师,光会

Habse中Rowkey的设计原则——通俗易懂篇

Hbase的Rowkey设计原则 一. Hbase介绍 HBase -> Hadoop Database,HBase是Apache的Hadoop项目的子项目.HBase不同于一般的关系数据库,它是一个适合于非结构化数据存储的数据库.另一个不同的是HBase基于列的而不是基于行的模式,主要用来存储非结构化和半结构化的松散数据(列存NoSQL数据库) 二. 设计原则 2.1 Rowkey长度原则 Rowkey是一个二进制码流,Rowkey的长度被很多开发者建议设计在10-100个字节,不过建议是越短

[转]微观SOA:服务设计原则及其实践方式

转了收藏,以后再看... 出处 上:http://kb.cnblogs.com/page/505537/ 下:http://kb.cnblogs.com/page/505538/ 大量互联网公司都在拥抱SOA和服务化,但业界对SOA的很多讨论都比较偏向高大上.本文试图从稍微不同的角度,以相对接地气的方式来讨论SOA,集中讨论SOA在微观实践层面中的缘起.本质和具体操作方式,另外也用相当篇幅介绍了当今互联网行业中各种流行的远程调用技术等等,比较适合从事实际工作的架构师和程序员来阅读. 为了方便阅读

架构师内功心法之设计原则

一.架构师内功心法之设计原则 1.为什么要学习软件架构设计原则 1.1.课程目标 通过对节课内容的学习,了解设计原则的重要性. 掌握七大设计原则的具体内容. 1.2.内容定位 学习设计原则,学习设计模式的基础.在实际开发过程中,并不是一定要求所有代码都遵循设计原则,我们要考虑人力.时间.成本.质量,不是刻意追求完美,要在适当的场景遵循设计原则,体现的是一种平衡取舍,帮助我们设计出更加优雅的代码结构. 1.3.七大设计原则 [x] 第1章 Open-Closed Principle 开闭原则 [x

界面设计必须要权衡的三个要素

界面设计师通常都会犯一种毛病,那就是非常纠结对一个产品设计出稿时对三个方面之间取得权衡,然而这个三个要素的权衡却是打造出具有整体性的APP有着关键性的影响.那我们现在来说说这三个要素要怎样权衡. 显而易见的 话说回来,难道“明显”不是所有功能都应该具备的基本特征吗?恩,除非你的产品足够简单到只做一件事,就像曲别针那样,否则你没办法使所有东西都具 有相同的视觉优先性并全部以明显的形式呈现出来.纠结的地方就在这里,对于稍复杂的产品,你必须决定哪些东西应该始终保持显而易见,哪些需要相对易用,而 又有哪

【转】优秀界面设计需要遵从的一些原则

无论采用怎样的风格,优秀的界面设计都需要遵从一些共通的设计原则: 一致性 通过具有一致性的设计模式及视觉风格,为用户建立起完整一致的心智模型,使产品更加易用,提升整体体验. 对比 通过对配色.尺寸和布局的调整,使可点击的界面元素在视觉上与其他元素形成鲜明的对比. 布局 可以尝试使用960gs一类的网格布局为界面设定视觉规范,使用户的视线可以跟随内容本身所界定出的路径自然的移动,增强界面的视觉平衡. 层级化 最重要的东西要比相对次要的东西更容易被看到.关于这个话题我可以写一整篇文章出来,简单的说,

组件设计原则之概念篇(四)

http://blog.csdn.net/lovelion/article/details/8539543   稳定抽象原则SAP是六个组件设计原则中的最后一个,它通常与稳定依赖原则SDP结合在一起,用于创建具有较高质量的组件依赖结构.终于是最后一个了,. 稳定抽象原则(The Stable-Abstractions Principle, SAP) A component should be as abstract as it is stable.组件的抽象程度应该与其稳定程度一致. SAP将组