`

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

阅读更多

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

优先级 

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

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


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

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

焦点 

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


 


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

优先级别 

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

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

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

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

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

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

倒三角写作法 

在设计中划分层级与记者撰写新闻是有异曲同工之妙的。最重要的新闻信息通常位居段落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链接设计为比下方文字更为显眼,但是为了不过于影响观感重点,我没有使用更加鲜艳的亮红色。 

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

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

写在最后 

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

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

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

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

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

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

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

写在最后 

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

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

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

分享到:
评论

相关推荐

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

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

    快速划分测试用例的优先级快速划分测试用例的优先级

    2. **优先级划分原则**: - **业务影响**:优先处理对核心业务流程影响大的用例。 - **风险评估**:评估功能的风险性,风险越高,优先级越高。 - **依赖关系**:考虑用例之间的依赖关系,先执行那些依赖于其他...

    软件界面设计和易用性基本原则.doc

    (十八)权衡:软件界面设计的最后结果应该是基于一系列设计原则相互碰撞权衡的结果,人们的需求总是凌驾于技术之上。 软件界面设计应该遵循这些基本原则,以提高用户的使用体验和软件的整体质量。

    解析Java虚拟机器开发:权衡优化、高效和安全的最优方案.pdf

    ### 解析Java虚拟机器开发:权衡优化、高效和安全的最优方案 #### Java虚拟机(JVM)概览 Java虚拟机(JVM)是一种能够执行编译后的Java字节码的虚拟机环境。它提供了运行Java应用程序所需的基础平台,并且在设计上...

    30.如何制定产品优先级 ?.pdf

    例如,在Facebook,产品经理们遵循的原则之一就是“权衡取舍要无情”,并且这一原则被贴在公司墙上,提醒每位员工。 产品经理在制定优先级时的另一个挑战是与其他部门的优先级保持一致。产品经理并不总是直接管理...

    OLED_ROSC中断优先级.zip

    总的来说,“OLED_ROSC中断优先级”是SYD8801芯片在设计和优化时需要考虑的关键因素之一。理解并正确配置中断优先级,能够有效提高系统的响应速度,保证系统的稳定性和可靠性。开发者需要对中断系统有深入理解,才能...

    51单片机中断优先级调整.zip

    在51单片机系统中,中断是处理外部事件或定时任务的重要机制。中断系统允许CPU在执行正常程序的同时,能够...通过熟练掌握中断优先级配置和中断管理,可以更好地设计和优化51单片机的应用程序,提高系统的整体性能。

    数据库反规范化:权衡与应用的艺术

    反规范化是数据库设计中的一种权衡策略,它可以在提高查询性能和简化应用逻辑方面带来好处,但同时也增加了数据冗余和一致性维护的复杂性。在实施反规范化时,应该仔细评估其对系统性能和数据一致性的影响,并采取...

    进程调度模拟设计--优先级法、最高响应比优先调度算法

    在操作系统中,进程调度是核心功能之一,它决定了系统如何在多任务环境下高效地分配处理器资源。本项目聚焦于两种常见的调度策略:优先级法和最高响应比优先(HRN)调度算法。这两种方法在现代操作系统中都有广泛的...

    模拟技术中的高速ADC前端设计的挑战和权衡因素(一)

    这篇文章的意图不是要给出一个关于高速ADC前端设计的“公式”,而是要说明,利用变压器或放大器优化设计时有许多因素需要权衡。转换器及其拓扑结构有许多类型,本文针对的是采样速率为10MSPS或更高的缓冲型和无缓冲...

    8将原则贯穿于设计.ppt

    在设计过程中,当这些原则发生冲突时,设计师需要权衡和决策。例如,通过设立优先级和加权系数,明确首要目标,然后根据各个原则的相对重要性分配分数,以综合评估得出最佳设计方案。这种策略可以帮助设计师在复杂的...

    ChatGPT技术的对话优先级处理方法.docx

    2. 挑战:确定对话优先级也面临一些挑战,例如自动判断对话的优先级需要深入的自然语言处理技术和大量语料库的训练,对话优先级的确定也涉及主观因素,需要综合考虑多个因素和权衡。 四、结论 本文探讨了ChatGPT...

    安全性设计原则.docx

    3. **安全性评价与平衡原则**:设计安全体系时需权衡安全性与可用性,根据用户需求和系统环境设定合理的安全水平。这涉及到风险管理和成本效益分析,确保安全措施既有效又可行。 4. **标准化与一致性原则**:为了...

    61条面向对象分析设计的经验原则.txt

    8. **原则七:一个类只负责一件事情** - **概述:** 单一职责原则,一个类应该只有一个引起其变化的原因。 - **解读:** 这意味着一个类的功能应该尽可能单一化,这样当需求发生变化时,只需修改相应的类即可,而...

    APS排程优先级算法.docx

    APS(Advanced Planning and Scheduling,高级计划与排程)是一种应用于制造业的优化工具,用于制定生产计划和排程。APS排程优先级算法是其中的关键技术,它涉及到多个因素,如交货期、工序长度、资源利用率等,以...

    某对日项目设计文档(详细设计、界面设计、sql)

    在本项目中,我们面临的是一个对日的外包项目,其设计文档包含了详细设计、界面设计和SQL语句等关键内容。这样的文档是确保软件开发过程中各阶段有序进行的重要参考资料,对于理解和实施该项目至关重要。 首先,...

    时间片及最短优先级算法

    在操作系统设计中,任务调度是核心功能之一,用于决定如何在多任务环境下高效地分配处理器资源。本项目探讨了两种重要的调度策略:时间片轮转(Time-Slice)和最短优先级(Shortest Job First, SJF)算法,它们在C++...

Global site tag (gtag.js) - Google Analytics