资讯频道 → Web前端
阅读更多

11顶
0踩

Web前端

转载新闻 优秀设计师应当知道的20大UI设计原则

2012-08-07 16:02 by 正式记者 小枫晚亭 评论(4) 有6937人浏览
ui 设计
世界级图形设计大师Paul Rand（保罗.兰德）曾经说过：“设计绝不是简单的排列组合与简单地再编辑，它应当充满着价值和意义，去说明道理，去删繁就简，去阐明演绎，去修饰美化，去赞美褒扬，使其有戏剧意味，让人们信服你所言……”，由此可见，设计绝非轻而易举之事，优秀的设计更是难上加难。界面设计师Joshua Porter博客当中有这样一篇文章——《Principles of User Interface Design》，文中列举了20大UI设计原则，对于刚入门的初级设计师是一个很好的学习机会。全文编译如下：

1.  清晰度是首要工作

清晰度是界面设计中的第一步，也是最重要的工作。要想你设计的界面有效并被人喜欢，首先必须让用户能够识别出它，让用户知道为什么会使用它。比如当用户使用时，能够预料到发生什么，并成功的与它交互。有的界面设计得不是很清晰，虽然能够满足用户一时的需求，但并非长久之计，而清晰的界面能够吸引用户不断地重复使用。

2.  界面是为促进交互而存在的

界面的存在，促进了用户和我们的世界之间的互动。优秀的界面不但能够让我们做事有效率，还能够激发、唤起和加强我们与这个世界的联系。

3.  保护和尊重用户的注意力

我们在阅读的时候，总是会有许多事物分散我们的注意力，使得我们很难集中注意力安静地阅读。因此，在进行界面设计的时候，能够吸引用户的注意力是很关键的，所以千万不要将应用的周围设计得乱七八糟分散人的注意力，谨记屏幕整洁能够吸引注意力的重要性。如果你非要显示广告，那么请在用户阅读完毕之后再显示。尊重用户的注意力，不仅让用户更快乐，而且你的广告效果也会更佳。因此要想设计好的界面，保护和尊重用户的注意力是先决条件。

4.  让界面处在用户的掌控之中

人类往往对能够掌控自己和周围的环境感到很舒心。不考虑用户感受的软件往往会让这种舒适感消失，迫使用户不得不进入计划外的交互，这会让用户很不舒服。保证界面处在用户的掌控之中，让用户自己决定系统状态，稍加引导，我想你会达到你希望的目标。

5.  直接操作的感觉是最好的

当我们能够直接操作物体时，用户的感觉是最棒的，但这并不太容易实现，因为在界面设计时，我们增加的图标往往并不是必须的，比如我们过多的使用按钮、图形、选项、附件等等其他繁琐的东西以便我们最终操纵UI元素而不是重要的事情。而最初的目标就是希望简化而能够直接操纵……因此在进行界面设计时，我们要尽可能多的了解一些人类自然手势。理想情况下，界面设计要简洁，让用户有一个直接操作的感觉。

6.  每个屏幕需要一个主题

我们设计的每一个画面都应该有单一的主题，这样不仅能够让用户使用到它真正的价值，也使得上手容易，使用起来也更方便，在必要的时候更容易进行修改。如果一个屏幕支持两个或两个以上的主题，立马会让整个界面看起来混乱不堪。正如文章应该有一个单一的主题以及强有力的论点，我们的界面设计也应该如此，这也是界面存在的理由。

7.  勿让次要动作喧宾夺主

每个屏幕包含一个主要动作的同时，可以有多个次要动作，但尽量不要让它们喧宾夺主！文章的存在是为了让人们去阅读它，并不是让人们在Twitter上面分享它。所以在设计界面的时候，尽量减弱次要动作的视觉冲击力，或者在主要动作完成之后再显示出来。

8.  自然过渡

界面的交互都是环环相扣的，所以设计时，要深思熟虑地考虑到交互的下一步。考虑到下一步的交互是怎样的，并且通过设计将其实现。这就好比我们的日常谈话，要为深入交谈提供话由。当用户已经完成该做的步骤，不要让他们不知所措，给他们自然而然继续下去的方法，以达成目标。

9.  外观追随功能（类似于形式追随功能）

人总是对符合期望的行为最感舒适。当其他人、动物、事物或者软件的行为始终符合我们的期望时，我们会感到与之关系良好。这也是与人打交道的设计应该做到的。在实践中，这意味着用户只要看一眼就可以知道接下来将会有什么的动作发生，如果它看上去像个按钮，那么它就应该具备按钮的功能。设计师不应该在基本的交互问题上耍小聪明，要在更高层次的问题上发挥创造力。

10.  区分重点

如果屏幕元素各自的功能不同，那么它们的外观也理应不同。反之，如果功能相同或相近，那么它们看起来就应该是一样的。为了保持一致性，初级设计师往往对应该加以区分的元素采用相同的视觉处理效果，其实采用不同的视觉效果才是合适的。

11.  强烈的视觉层次感

如果要让屏幕的视觉元素具有清晰的浏览次序，那么应该通过强烈的视觉层次感来实现。也就是说，如果用户每次都按照相同的顺序浏览同样的东西，视觉层次感不明显的话，用户不知道哪里才是目光应当停留的重点，最终只会让用户感到一团糟。在不断变更设计的情况下，很难保持明确的层次关系，因为所有的元素层次关系都是相对的：如果所有的元素都突出显示，最后就相当于没有重点可言。如果要添加一个需要特别突出的元素，为了再次实现明确的视觉层级，设计师可能需要重新考虑每一个元素的视觉重量。虽然多数人不会察觉到视觉层次，但这是增强设计的最简单的方法。

12.  恰当的组织视觉元素，减轻用户的认知负荷

正如著名设计师John Maeda在其著作《Simplicity》中所言，恰当地组织视觉元素能够化繁为简，帮助他人更加快速简单地理解你的表达，比如内容上的包含关系。用方位和方向上的组织可以自然地表现元素间的关系。恰如其分地组织内容可以减轻用户的认知负荷，他们不必再琢磨元素间的关系，因为你已经表现出来了。不要迫使用户做出分辨，而是设计者用组织表现出来。

13.  色彩不是决定性的因素

物体的色彩会随光线改变而改变。艳阳高照与夕阳西沉时，我们看到的景物会有很大反差。换句话说，色彩很容易被环境改变，因此，设计的时候不要将色彩视为决定性因素。色彩可以醒目，作为引导，但不应该是做区别的唯一元素。在长篇阅读或者长时间面对电脑屏幕的情况下，除了要强调的内容，应采用相对暗淡或柔和的背景色。当然，视读者而定，也可采用明亮的背景色。

14.  循序展现

每个屏幕只展现必需的内容。如果用户需要作出决定，则展现足够的信息供其选择，他们会到在下一屏找到所需细节。避免过度阐释或把所有一次展现，如果可能，将选择放在下一屏以有步骤地展示信息。这会使你的界面交互更加清晰。

15.  内嵌“帮助”选项

在理想的用户界面，“帮助”选项是不必要出现的，因为用户界面能够有效地指引用户学习。类似“下一步”实际上就是在上下文情境中内嵌的“帮助”，并且只在用户需要的时候出现在适当的位置，其他时候都是隐藏的。

设计者的任务不是在用户有需要的地方建立一个帮助系统，把发现用户需要的义务推诿给用户，让用户去在帮助系统中寻找他们问题的答案。而是应该确保用户知道如何使用你提供的界面，让用户在界面中得到指导并学习。

16.  关键时刻：零状态

用户对一个界面的首次体验是非常重要的，而这常常被设计师忽略。为了更好的帮助用户快速适应我们的设计，设计应该处于零状态，也就是什么都没有发生的状态。但这个状态不是一块空白的画布，它应该能够为用户提供方向和指导，以此来帮助用户快速适应设计。在初始状态下的互动过程中会存在一些摩擦，一旦用户了解了各种规则，那将会有很高的机会获得成功。

17.  针对现有问题去完善界面

人们总是寻求各种方案去解决已经存在的问题，而不是潜在的或者未来的问题。所以，不要为假设的问题设计界面，我们应该观察现有的行为和设计，解决现存的问题。这确实不是件能够让人兴奋的事情，但却是最有价值的事情，因为一旦你的用户界面愈加完善，会有更多的用户愿意使用你的界面。

18.  优秀的设计是无形的

优秀的设计有个古怪的属性，它通常会被它的用户所忽略。其中的一个原因是这个设计非常成功，以至于它的用户专注于完成自己的目标而忽略了自己面对的界面，用户顺利达成自己的目标后，他们会很满意地退出界面。但是作为设计师，这可能会有点不公平，当我们的设计很优秀的时候，我们不会受到很多阿谀奉承。当然，优秀的设计师不会去介意这些，因为他们心里明白，满意的用户往往都是沉默的。

19.  多领域学习，借鉴其他学科

视觉、平面设计、排版、文案、信息结构以及可视化，所有的这些知识领域都应该是界面设计应该包含的内容，设计师对这些知识都应该有所涉猎或者比较专长。不要看不起这些知识，要从中获取许多值得学习的东西，以此来提高你的工作能力。设计师的眼光要长远，要能从看似无关的学科中学习，比如出版、编程、装订、滑板、消防甚至空手道。

20.  界面的存在必须有所用途

在大多数设计领域，界面设计成功的要素就是有用户使用它。打个比方，一把漂亮的椅子，虽然精美但坐着不舒服，那么用户不会选择使用它，它也就是失败的设计。因此，界面设计不仅仅是设计一个使用环境，还是创造一个值得使用的艺术品。界面设计仅仅能够满足其设计者的虚荣心是不够的：它必须要有用！
来自: 雷锋网
11
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 PetriNet 2012-08-09 00:14
没有栗子，空洞乏味，等同于垃圾文章。
3 楼 duxitao 2012-08-08 17:33
给个例子啊
2 楼 lsjinpeng 2012-08-08 15:37
分类很细，以后会用到
1 楼 huang_yong 2012-08-08 13:18
已阅，收藏！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 优秀设计师应当知道的几大UI设计原则（一）

    你想你设计的界面有效并且让客户喜欢，首先你要让用户能够识别它、让用户知道为什么会使用它。比如当用户使用时，预料到能发生什么，并与它成功交互。有的界面设计得不太清晰，这样只能满足用户一时的需求，但并非...

  • 优秀设计师应当知道的几大UI设计原则（二）

    我们设计的每一个画面都应该有一个主题，这样不仅能够让用户了解并使用它的价值，也很容易上手，使用起来更方便，在必要的时候更容易修改。如果一个屏幕设计了两个或两个以上的主题，这样会使整个界面看起来混乱不堪...

  • 坚持这几个原则，助你成为优秀的UI设计师

    设计是一个不断发展和变革的领域，很多时候，看似熟悉的...苏州学码思小编小编就分享三个UI设计原则，助你成为优秀的UI设计师。 一、视觉设计原则 1、可靠 APP的视觉风格应让用户感觉到这款应用是安全可信的。同一...

  • 20大UI设计原则

    它应当充满着价值和意义，去说明道理，去删繁就简，去阐明演绎，去修饰美化，去赞美褒扬，使其有戏剧意味，让人们信服你所言……”，由此可见，设计绝非轻而易举之事，优秀的设计更是难上加难。

  • JEDEC SPEC 最新版 合集 DDR2/DDR3/DDR4/DDR5/LPDDR2/LPDDR3/LPDDR4(X)/LPDDR5(X)

    JESD79-2F DDR2 JESD79-3F DDR3 JESD79-4D DDR4 JESD79-5C DDR5 JESD209-2F LPDDR2 JESD209-3C LPDDR3 JESD209-4E LPDDR4 JESD209-4-1A LPDDR4X JESD209-5C LPDDR5(X)

  • COMSOL二维光子晶体角态研究：单胞与超胞能带计算及边界态与角态特性分析,COMSOL二维光子晶体角态研究：单胞与超胞能带计算及边界态与角态特性分析,comsol二维光子晶体角态 单胞能带，超胞能

    COMSOL二维光子晶体角态研究：单胞与超胞能带计算及边界态与角态特性分析,COMSOL二维光子晶体角态研究：单胞与超胞能带计算及边界态与角态特性分析,comsol二维光子晶体角态。 单胞能带，超胞能带，边界态以及角态计算。 ,comsol;二维光子晶体;角态;单胞能带;超胞能带;边界态计算,基于Comsol的二维光子晶体角态及能带边界计算研究

  • 六自由度机械臂抓取动作仿真与代码解析：抓取动画、关节参数变化及轨迹图解详解,六自由度机械臂抓取动作仿真指南：掌握两套代码实现动画与轨迹图模拟学习攻略,六自由度机械臂抓取动作仿真-8 两套关于抓取动作的

    六自由度机械臂抓取动作仿真与代码解析：抓取动画、关节参数变化及轨迹图解详解,六自由度机械臂抓取动作仿真指南：掌握两套代码实现动画与轨迹图模拟学习攻略,六自由度机械臂抓取动作仿真-8 两套关于抓取动作的代码，包括抓取动画、关节角、角速度、角加速度的变化仿真、以及抓取轨迹图 简单易懂好上手～ ,六自由度机械臂;抓取动作仿真;抓取动画;关节角变化;角速度角加速度;抓取轨迹图;两套代码;简单易懂好上手,六自由度机械臂抓取动作仿真演示：代码与轨迹图解

  • ITC网络广播工具软件

    ITC网络广播工具软件

  • Multisim四位密码锁电路仿真设计：设定、开锁与声光报警功能演示资料包,Multisim四位密码锁电路仿真设计：设定、输入、开锁与报警功能详解，附源文件、原理说明书与演示视频,multisim四位

    Multisim四位密码锁电路仿真设计：设定、开锁与声光报警功能演示资料包,Multisim四位密码锁电路仿真设计：设定、输入、开锁与报警功能详解，附源文件、原理说明书与演示视频,multisim四位密码锁电路仿真设计 功能： 1.通过拨码开关1进行初始密码设定。 2.通过拨码开关2输入密码，实现开锁判断。 3.如果密码正确，LED绿灯亮，表示开锁。 4.如果密码不正确，LED红灯亮，蜂鸣器鸣叫，声光报警。 资料包含：仿真源文件+原理说明书+演示视频 ,四位密码锁电路、Multisim仿真设计、初始密码设定;拨码开关输入;开锁判断;LED灯显示;声光报警;仿真源文件;原理说明书;演示视频,Multisim四位密码锁电路仿真设计：初始密码设置与智能解锁功能的声光报警展示

  • 上班摸鱼打卡模拟器微信小程序源码.zip

    俗话说，摸鱼摸的好，上班没烦恼，毕竟谁能拒绝带薪拉屎呢（手动狗头） 这是一个云开发职场打工人专属上班摸鱼划水微信小程序源码，没有后台 直接导入微信开发者工具即可运行，UI简约大气漂亮，只需登录微信公众平台配置完合法域名即可轻松上线。 用户进入摸鱼小程序，可以自由设置薪资，上班时间、下班时间、发薪日、 月工作天数以提醒自己摸鱼，全民打酱油，让自己成为摸鱼冠军，《商鞅摸鱼哲学》 摸鱼不是自我放纵，而是个人实力的积蓄，我们的小目标是晚睡晚起 小程序中的今日待办会提醒用户带薪拉屎和闲逛，下方展示的是距离休息日的天数，距离下一次发工资的天数和节日的天数。

  • 【毕业设计】基于Java的开发的一个集合校园二手交易、拼车、失物招领等功能的app_pgj.zip

    【毕业设计】基于Java的开发的一个集合校园二手交易、拼车、失物招领等功能的app_pgj

  • PICkit3离线烧录流程

    个人记录：PICkit3离线烧录流程 使用软件：MPLAB X IDE v5.30 记录时间：20250215

  • 基于Matlab代码的电力系统状态估计与实验仿真研究：扩展卡尔曼滤波和无迹卡尔曼滤波在电力系统动态状态估计中的应用及效果分析,Matlab仿真实验研究：基于扩展卡尔曼滤波器与无迹卡尔曼滤波器对电力系统

    基于Matlab代码的电力系统状态估计与实验仿真研究：扩展卡尔曼滤波和无迹卡尔曼滤波在电力系统动态状态估计中的应用及效果分析,Matlab仿真实验研究：基于扩展卡尔曼滤波器与无迹卡尔曼滤波器对电力系统状态估计的影响及验证,状态估计 电力系统状态估计 Matlab代码 实验仿真研究 电力系统由于测量值和传输误差，还有测量噪声的影响，会对状态估计产生影响。 因此，需要对嘈杂的测量进行滤波，以获得准确的电力系统运行动态。 本文使用扩展卡尔曼滤波器（EKF）和无迹卡尔曼滤波器（UKF）来估计电力系统的动态状态。 扩展卡尔曼滤波EKF、无迹卡尔曼滤波UKF 利用扩展的无迹卡尔曼滤波器估计了动力系统的动态状态。 对WECC 3机9总线系统和新英格兰10机39总线系统进行了案例研究。 结果表明EKF和UKF都能准确地估计电力系统的动态状态。 ,核心关键词：状态估计; 电力系统状态估计; Matlab代码; 实验仿真; 测量值误差; 测量噪声; 扩展卡尔曼滤波器(EKF); 无迹卡尔曼滤波器(UKF); 动力系统; 动态状态估计; WECC 3机9总线系统; 新英格兰10机39总线系统。,Matlab

  • springboot在线考试--.zip

    springboot在线考试--

  • 台达DVP EH3与MS300 PLC&变频器通讯程序的全面解决方案,台达DVP EH3与MS300通讯程序：稳定可靠的频率控制与启停管理系统,台达DVP EH3与台达MS300通讯程序(TDEH-9

    台达DVP EH3与MS300 PLC&变频器通讯程序的全面解决方案,台达DVP EH3与MS300通讯程序：稳定可靠的频率控制与启停管理系统,台达DVP EH3与台达MS300通讯程序(TDEH-9) 可直接用于实际的程序，程序带注释，并附送触摸屏程序，有接线方式和设置，通讯地址说明等。 程序采用轮询，可靠稳定 器件：台达DVP EH3系列PLC，台达MS300系列变频器，昆仑通态7022Ni 功能：实现频率设定，启停控制，实际频率读取，加减速时间设定。 资料：带注释程序，触摸屏程序，接线和设置说明，后续有技术咨询。 ,核心关键词：台达DVP EH3; 台达MS300; 通讯程序(TDEH-9); 轮询; 稳定; 频率设定; 启停控制; 实际频率读取; 加减速时间设定; 触摸屏程序; 接线方式; 设置说明; 技术咨询。,台达PLC与变频器通讯程序（带注释、触摸屏控制）

  • 【python毕设】p100基于Pytorch+springboot+vue的声纹识别系统.zip

    项目资源包含：可运行源码+sql文件 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。项目具有较高的学习借鉴价值，也可拿来修改、二次开发。 个人账户管理：支持用户注册、登录与个人信息编辑；提供密码找回及账号安全保护措施。 声纹采集：利用麦克风设备录制用户的声纹样本；支持多种录音格式和质量调整，确保采集到清晰、准确的声纹数据。 声纹模板库管理：建立和维护一个安全的声纹模板库；支持声纹模板的添加、删除、更新和查询操作。 声纹比对与识别：运用深度学习算法对输入的声纹数据进行特征提取和匹配；实现快速、准确的声纹身份验证。 多场景应用支持：适用于多种场景，如门禁系统、移动支付、远程登录等；可根据实际需求定制开发相应的应用场景。 实时监控与报警：实时监控系统运行状态，包括声纹识别成功率、处理速度等指标；当出现异常情况时，及时发出报警信息。 数据分析与报告生成：收集并分析声纹识别过程中的数据，如识别准确率、处理时间等；根据用户需求输出包含详细图表说明的专业级文档供下载打印保存。 社区互动交流：设立论坛版块鼓励用户分享心得体会讨论热点话题；定期邀请行业专家举办线上讲座传授实用技巧知识。 音乐筛选与推荐：集成音乐平台API，根据用户的浏览习惯和情绪状态推荐背景音乐，增强用户体验。 数据可视化：提供交互式的数据可视化面板，使非技术用户也能轻松理解复杂的数据集，从而做出更明智的决策。

  • 三相与多相开绕组永磁同步电机仿真模型的先进控制策略探讨与实现,三相与多相开绕组永磁同步电机的Simulink仿真模型与先进控制策略研究,开绕组电机，开绕组永磁同步电机仿真模型、simulink仿真 共

    三相与多相开绕组永磁同步电机仿真模型的先进控制策略探讨与实现,三相与多相开绕组永磁同步电机的Simulink仿真模型与先进控制策略研究,开绕组电机，开绕组永磁同步电机仿真模型、simulink仿真 共直流母线、独立直流母线，两相容错，三相容错控制，零序电流抑制，控制策略很多 三相开绕组永磁同步电机，六相开绕组永磁同步电机 五相开绕组永磁同步电机，五相开绕组电机 ,开绕组电机; 永磁同步电机仿真模型; simulink仿真; 共直流母线; 独立直流母线; 两相容错; 三相容错控制; 零序电流抑制; 控制策略; 六相开绕组永磁同步电机; 五相开绕组永磁同步电机,开绕组电机仿真研究：共直流母线与独立直流母线的容错控制策略

  • 【毕业设计】基于Java的开发的网上汽车租赁管理系统_pgj.zip

    【毕业设计】基于Java的开发的网上汽车租赁管理系统_pgj

  • python打开csv文件

    csv 模块是 Python 的标准库，无需额外安装。 运行结果如下图： ['姓名', '年龄', '城市'] ['张三', '25', '北京'] ['李四', '30', '上海'] ['王五', '22', '广州']

Global site tag (gtag.js) - Google Analytics