UI设计师非学不可的十大易用性原则 | 人人都是产品经理
QQ讨论组 6月11日上海 5月31日已结束红点直播 5月24日已结束
【起点学院】产品经理实战训练营，北京、上海、广州、深圳、成都、杭州同时开课啦！ 身为 RD 的你受过太多 UI 的气吗？老是发现逻辑不通需要打掉重练被延误时程吗？常被 UI 嫌念理工的没有美感都不懂吗？报仇的时间到了。这篇文虽然说是「十大易用性原则」，也可以说得上是：「教你如何捅 UI 」。RD 最擅长讲理，就来跟 UI 讲理！从易用性下手找 UI 麻烦，没有几位 UI 不中刀的…易用性（Usability）指的是使用者能够使用某样工具来达到某个特定目标的容易程度，常见的中文翻译有优使性、使用性、易用度、易用性、好用 性、可用性等等，其中较常见的为优使性和可用性。优使性感觉上像是优越的使用、还是优化过的使用，在词汇上模棱两可有模糊地带；可用性的说法则像是仅分成 可以用和不能用两种状况。Usability 翻译成易用性，清楚指出「容易使用」的特点较为贴切。易用性毕竟是个较抽象的名词，因此 Jakob Nielsen 提出十大易用性原则，详细说明所谓「易用」需要符合易于学习、快速使用、相对无错这三个部分。一、系统状态的能见度（ Visibility of system status）软件应该保持相同的模式，透过适当的反应，在合理的时间内通知使用者，让使用者了解正在发生的事情。最常见的就是按钮状态。在计算机上浏览网页时常常会发现某些地方在光标移过去时颜色会有所改变，提示你这里可以被点击。在 iPhone 上没有光标，所以会以更浅显易懂的方式告诉你这里可以被操作，像是更立体的按钮、或是仿真实体开关的图象。（App：Money Book，选中的项目底色变成鲜艳的蓝色。） 用户点击按钮，会出现按钮被按下去的凹陷感，提示你已经点击到了。（App：Reach，拟真的开关设计与下方明显凹陷可点击的 TabBar。） 另一种常见的系统状态响应就是需要用户等一下，现在正「读取中」、「下载中」。在等待时如果没有任何提示，就会产生「自从点了这个按钮后画面就不动了，我的操作到底有没有被执行呢？不晓得要等多久…」的感受。进度条就是为了降低使用者的不耐感、告诉用户现在处理进度如何、大约还需要多少时间而存在。透过进度条，用户可以知道他的操作正在执行中，现在完成 多少部份，再等多久就可以结束。（App：Evernote，同步时右上角的 icon 会转动，在所有记事标题下方有目前进度百分比。） 二、系统与真实世界的关联性（Match between system and the real world）系统应该要运用用户的语言，使用他们熟悉的词句、短语、概念，而不是专业术语。因应该族群的习惯进行开发，像 iOS 用户会觉得左上角的按钮通常是「回前页」一样，若你将「回前页」放到右上角，会增加他们操作错误的机会。 试着将 Android 手机给 iOS 惯用者操作，会发现他们不晓得怎么样回到上一页，也不知道回到主画面的 Home 键在哪里，对于实体按键的功能一无所知。举个我家发生的真实的例子：女儿教父亲怎么操作家庭计算机，当她说「请把鼠标移到开始」时，父亲拿起手上的鼠标左右翻看了一下，便将整只鼠标对准屏 幕上的「开始」敲下去，屏幕被鼠标撞击发出抠抠抠的声音……女儿问父亲，为什么会把鼠标拿起来敲屏幕，明明只要在桌上移动鼠标就可以操作，父亲说：「妳叫 我把鼠标移到开始的啊！」女儿的认知里，拿鼠标敲屏幕无法完成任何操作，鼠标只是为了控制光标而存在，所以将鼠标移到开始同等于「操作鼠标以控制屏幕上的光标、并将光标移到 开始」。但对父亲而言，因为不熟悉计算机操作，他尚未建立鼠标等于光标的概念，光标是光标、鼠标是鼠标，所以会发生拿鼠标敲屏幕的爆笑情况。你觉得大家都应该要知道的事情，其实不一定都会晓得。虽说这种说词对「父亲」很失礼，但请把所有使用者都当成是「父亲」那类型的人物。什么样的用语 才能让第一次接触 App 的人没有误会的快速上手呢？（App：Weightbot，用于记录每日体重，仿真现实生活中的体重计刻度。） 三、使用者的操控自由（User control and freedom）用户时常以「尝试错误」来选择系统功能，他们需要一个明显的「离开」来结束使用者不需要的状态。并且支持复原步骤与重复步骤。易于犯错且修正错误代价高昂的高风险情形将导致使用者不愿意多研究这个软件。良好的设计能让使用者降低出错率，在提供取消和重做的功能前先减少用户出错的机会。Ctrl+z（复原）是最容易被记住的快捷键，也因为有复原的存在，使用者才会大胆去尝试各种不熟悉的操作。他们心想：「反正做错了重来一遍就好了 嘛！」如果一出错就表示要从新开始，使用者会感到迷惘并且觉得压力太大。（想看看 Diablo 的专家级模式，人物死亡不能重来。在这种模式下哪个玩家不是备感压力战战兢兢小心翼翼的？）用户操作 App 是为了完成他预期的目标，根据八二法则，你的使用者有 80% 都是使用最初阶的操作，只有 20% 人会想要更专业进阶的功能。越轻松简单无压力越受大部份使用者青睐，不过是想透过 App 完成某项目的，用不着压力这么大的挑战自我极限吧？（App：Awesome Note 的设定页面，许多进阶功能都放在这里。） 初学者和RD很容易在这个原则犯下错误，不是所有的功能全部摊到第一层就代表丰富好用。所有的功能都很重要就代表没有一个功能是重要的。就像期末考前把课本每个字句都划上荧光笔强调，根本没有重点，有划跟没划一样。凡事都有轻重缓急， 就像一位血流不止、骨折又长期咳嗽的病人在眼前，是要先止血、先处理骨折、还是先治疗咳嗽一样。最重要的事情需标明出来，可以暂缓不急的事之后再说。功能的优先级也是如此，最重要、最常用的功能放在最显眼易触碰的位置，较次级非必备的功能就摆到下一层或是干脆挪到某个进阶选单里去吧。（App：Gmail 的侧边栏，这种选单无论主要还是次要的功能，都能排序整理得很漂亮。） 四、一致性和标准（Consistency and standards）使用者不应该猜测不同的字汇、状态、动作是不是代表同一件事。考虑到浏览器的兼容性。App 必须采取用户的语言、并运用他们熟悉的单词、短语和概念，而不是程序语言或专有名词。接口中的控制组件、命令、设定的功能应该清晰明确。操作软件不应该需 要透过排除法进行演绎推理。也不要让使用者所执行的操作和他们的目标没有明显的关连。（App：Priority List，下方各个 icon 的含意要稍微想一下才能理解，且实际操作和预期的有落差。） 依现实生活常见的习惯，让讯息在自然且有逻辑顺序的情况下产生。为了达到这个目标，有时需开发一个词典。这个词典最好由团队的技术编写者来管理和实 施、监视文件档案和软件中出现的术语一致性。支持目标工作领域中的问题该如何解决，它应该最大限度地减少或消除用户花费时间解决软件技术层面中的问题需 求。属性、参数、设定、设置、资源。或者是寻找、搜寻、搜索、搜查、寻求…等等，这些词指的都是同一个功能，对用户来说他不会知道 App 上写的「设定」和「属性」其实是同一件事。如果将所有的字词统一有困难，可以干脆直接使用图示代表。（App：My Wonderful Goals，简单易懂的 icon 设计，画面干净清爽。） 五、预防错误（Error prevention）比起提供用户明确易懂的错误讯息，更重要的是如何防止使用者发生错误。像是消除容易出错的条件或是自动检查确认选项。或是让使用者确认他们接下来要做的行动。越是让使用者自行输入的字段越容易出现错误，明明只能输入数 字的地方就是有人会想打英文字母。摆明说了账号只能使用英文或数字，还是会有人用上特殊符号。比起使用者填完所有字段按了送出后再告诉他哪些地方有误，不 如在输入错误时就挡住他、在输入正确数据前无法进入下个步骤。如果能在字段旁边实时反应验证状态是再好不过的。在 iPhone 上最方便的就是内建数种键盘。在输入电话号码的字段时只跳出数字键盘、输入日期时使用 Picker。（App：联络信息，输入只有数字的字段时，就跳出数字键盘。） 在小小的手机屏幕上打字是非常辛苦的一件事，按钮小不好按、又容易出错，最好也最贴心的作法是连输入都简化了，最好点点手指就解决。像是 Google 的实时搜寻，打入第一个字时就将热门选项列出来供用户选择，但有可能不是使用者需要的。或像是 Facebook，输入一个关键词就将所有包含这个关键词的朋友列出。（App：App Store，在使用者边输入时实时搜寻有可能的关键词。） 六、辨识而非记忆（Recognition rather than recall）尽量减少用户需要记忆的事情、行动以及可见的选项。使用者没办法记住太多步骤。App 如果有使用说明介绍，应该放在显眼且可轻易使用的位置。如果软件把数据当作讯息，把数据都丢给用户，要用户自己查看数据代表他们的注意力会被分散，产生错 误的机会就会增加。软件应该将用户的注意力集中到重要的数据上，并帮助用户从中取得讯息，而不是未经过筛选要使用者花时间思考。像是为了酷炫而特别设计的操作接口，与众不同让人眼睛一亮，但使用者在初次接触后再度使用，要花多少时间才能找到上次操作过的功能？相信很多人都有 边自言自语「我记得这个 App 有 xxx 功能啊，在哪里呢…」边将某个 App 所有按钮选单翻一遍的经验。（App：Yoritsuki，非常漂亮精致的 App，下方选单与上方提示一目了然。） 七、弹性与使用效率（Flexibility and efficiency of use）功能与易用性之间通常存在一个平衡，对于软件中的每个特性、功能、或能力，都必须提供一种途径让使用者调用或控制。如果用户的目标是可预测而且常用的，使用者不应该为了实现这个目标而必须做很多工作。做少量的工作、得到很多结果，才是使用者想要的。简单来说就是要思考「有多少用户」和「使用频率如何」的问题。越频繁使用的功能，需要点击的次数应该要越少。越多用户使用某功能，它就应该越明显。且要为核心情况设计，不要为「边缘」情况付出太多。快捷键就是这个易用性准则的最佳代表，在 App 上没有快捷键的设计，可以透过手势来完成各式各样的操作。例如浏览列表页，已卷到最下方后想回到顶端不需要一直滑动手指、只需轻点一下 StatusBar，列表会自动卷回最顶端。（App：Day One，对撰写日记来说，拍照和新增是最常用的功能。） 八、美观与简化设计（Aesthetic and minimalist design）为了防止用户出错，可以在软件设计上就尽量减少用户的记忆负担。将功能、操作及选项设计得显而易见。对于不相关或是很少需要的讯息或功能要隐藏起来，仅突出重点在软件设计上非常重要。像是注册新会员，如果一开始就要使用者填写一长串的个人资料，相信许多人在这个阶段就打退堂鼓。简化注册流程就可以增加用户成为会员的意愿，最好只 要一个按钮就能完成注册。有的 App 会串接 Facebook，使用者只要同意授权就完成注册手续。或者是只让用户填写必备的数据如账号密码等，其他非必备资料如生日、所在城市等，使用者可以在登入 后去个人设定页自行填写。 （App：Pose，使用 Facebook 登入，或是输入账号密码。） 九、帮助使用者认识、侦错并从错误中恢复（Help users recognize, diagnose, and recover from errors）帮助使用者识别、诊断、并从错误中恢复，将损失降到最低。如果无法自动挽回，则提供详尽的说明文字和指导方向，而非难以理解的代码。最好能在告知使用者发生错误的同时一并提供解决方法。使用者不会想知道「404」代表什么意思，直接说明「找不到网页」比简短的错误代号更能理解。比起找不到网页的文字，如果能说明找不到网页的原因、 并加上如何解决更能帮助使用者排除错误。就以网络断线这个例子来说，iOS 可以侦测用户目前对于网络的设定，是因为没有开启网络功能、还是网络联机质量不佳所以无法开启网页。前者可以请使用者去设定将 Wifi 或 3G 功能开启，后者能告知使用者换个联机环境或是稍后再试。（App：书报摊，删除数据时会提示将删除所有数据。） 十、帮助与说明文件（Help and documentation）一个软件在完美的情形下不需要任何说明文件使用者就能够操作，但就算是最好的软件也需要提供帮助与说明文件。当用户寻求帮助时，此类讯息应该容易被搜索查询。完美的接口即使没有任何说明提示下，使用者仍然能够流畅操作。为了预防还是有少数使用者搞不清楚状 况，常见的作法除了设制说明页之外，初次开启 App 直接进入说明教学，强迫使用者阅读完毕后才可开始操作。（App：i Track My Time，永远出现在首页的操作方式说明。） 以上文章是我根据 Jakob Nielsen 的十大易用性原则翻译（不怎么精准）加上个人经验所写（其实写完很久了，截图有点旧。），有兴趣的人建议去看原文。这10条讲起来很简单，真要实行却非常困难。iOS 和 Android 平台特性不同，若很坚持要根据这10条原则将接口设计到好，Guideline 应该要熟到掰碎吃到肚子里的程度吧。像是第一条的「反应」，iOS 能透过 RD 设定按钮按下去时颜色会变得较黑，所以按钮切图出 1 张未点击时就好。Android 没有内建这种功能只好乖乖出 2 张图，诸如此类。偏偏 RD 对 Guideline 通常都比 UI 熟，科科。（理工生很习惯是字的厚砖书，念设计的有大半不喜欢看没几张图又生硬难啃的文章。）这 10 条原则都是 UI 在规划接口时应该考虑进去的部份，不只 UI 需要劳记，RD 多多少少心里有个底，如果看 UI 不顺眼，在讨论会议上慢条斯理把接口各个组件拆分出来一项项比对原则，捅死 UI 效果奇佳…原文地址：blog.akanelee.me 作者：@Akane_Lee<div class="count" id="ludouVA_count_<div class="count" id="ludouVA_count_<div class="count" id="ludouVA_count_
分享到微信朋友圈
运营我是互联网的搬运工。
人人都是产品经理社区（）是中国最大、最活跃、最具人气产品经理学习、交流、分享平台，微信公众号woshipm。成立5年以来举办线上活动500余场，线下活动数百场，覆盖北京、上海、广州、深圳、成都、杭州等30多个城市，在互联网业内得到了广泛关注和高度好评。社区目前拥有300万忠实粉丝，其中产品经理占比50万， 中国75%的产品经理都在这里。如何成为ui设计师？ui设计师需要学什么？
9:14:00 | 点击861次 | 有0条评论，
文章正文：　　如何成为ui设计师?想做一个好的UI设计师除了应该具有一定的审美能力，还要了解整个产品的开发过程，因为目前国内的行业还不能对 UI 设计形成应有的重视程度，所以对我们的要求就更高了。你要能作出夺人眼球的东西，还要站在用户的角度充分了解他们的需求和使用习惯，因为一般的软件公司的 UI设计师只有一个或者几个也都是孤军奋战，而且经常会碰见没有经验的team leader,不懂得协调你和其他团队成员的工作，所以你还要与团队成员充分沟通，来获得设计中所需要的基本信息，要有耐心有好脾气……　　UI设计在我们这叫美工(咋听上去象 “民工”)，所以做界面设计的工具一般有photoshorp、Illustrator/FreeHand/CorelDraw/c4d/3dmax(至少一个)、 Dreamweaver、Flash、Html。编程方面最好能跟程序员同步，懂一点ASP、JSP等软件开发语言、还有开发环境、服务器种类…… 还要耐的住寂寞，漫长的项目开发过程中，你的工作可能只是前期，到了后面可能会有很多的空闲时间，用来学习充电是不错的选择。 还有一条，就是要常来这里和大家多多交流，了解行业新动向，给别人鼓劲，给自己加油，让UI设计有更瑰丽的发展前景。　　ui设计师需要学什么?需要的基础就是一些简单的基础和基础，要求也不算高，你这个情况应该没问题，编程不太需要。　　一般流程是这样的，大致5个阶段，都会培训你一些基本需要的基础。 PS ，Illustrator ，DW，InDesign都会用到。　　第一阶段，UI用户设计基础(UI行业发展及UI设计师职业规划，美术基础，平面设计基础，图形与创意设计，基础，交互式网站)，软件：Photoshop、Illustrator　　第二阶段，移动界面设计(图标创意思路与方法，图标的创作设计，主题图标设计，Ios系统Android系统Windows phone系统，UI设计实训课程)　　第三阶段，交互类(UCD，交互设计高级技术)　　第四阶段，流程设计(界面开发对接，流程，移动媒体综合开发实训)　　第五阶段，综合项目实训及阶段(根据所学内容，选择一种移动平台 (IOS/Android/Winphone)，软件界面，WUI类型设计，完成初稿设计。依据项目初期确定的需求进行验收，并签署验收报告。欢迎您对本篇文章【如何成为ui设计师？ui设计师需要学什么？】，谢谢。
资讯来源：
【相关教育考试资讯】1. 原创2. 图原创3. 图原创4. 图5. 图原创6. 图原创7. 8. 9. 10. 11. 图12. 图13. 图14. 15. 16. 图17. 18. 19. 20. 图高手指引，UI设计师需要学习的知识
[问题点数：20分]
高手指引，UI设计师需要学习的知识
[问题点数：20分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
2015年2月 .NET技术大版内专家分月排行榜第二2015年1月 .NET技术大版内专家分月排行榜第二2014年11月 .NET技术大版内专家分月排行榜第二2014年5月 .NET技术大版内专家分月排行榜第二2014年4月 .NET技术大版内专家分月排行榜第二2012年2月 多媒体/设计/Flash/Silverlight 开发大版内专家分月排行榜第二
2015年4月 .NET技术大版内专家分月排行榜第三2014年12月 .NET技术大版内专家分月排行榜第三2014年10月 .NET技术大版内专家分月排行榜第三2014年9月 .NET技术大版内专家分月排行榜第三2014年1月 .NET技术大版内专家分月排行榜第三2013年12月 .NET技术大版内专家分月排行榜第三2013年10月 .NET技术大版内专家分月排行榜第三2013年5月 .NET技术大版内专家分月排行榜第三2011年9月 .NET技术大版内专家分月排行榜第三2011年2月 .NET技术大版内专家分月排行榜第三2010年2月 .NET技术大版内专家分月排行榜第三
2015年2月 .NET技术大版内专家分月排行榜第二2015年1月 .NET技术大版内专家分月排行榜第二2014年11月 .NET技术大版内专家分月排行榜第二2014年5月 .NET技术大版内专家分月排行榜第二2014年4月 .NET技术大版内专家分月排行榜第二2012年2月 多媒体/设计/Flash/Silverlight 开发大版内专家分月排行榜第二
2015年4月 .NET技术大版内专家分月排行榜第三2014年12月 .NET技术大版内专家分月排行榜第三2014年10月 .NET技术大版内专家分月排行榜第三2014年9月 .NET技术大版内专家分月排行榜第三2014年1月 .NET技术大版内专家分月排行榜第三2013年12月 .NET技术大版内专家分月排行榜第三2013年10月 .NET技术大版内专家分月排行榜第三2013年5月 .NET技术大版内专家分月排行榜第三2011年9月 .NET技术大版内专家分月排行榜第三2011年2月 .NET技术大版内专家分月排行榜第三2010年2月 .NET技术大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。杭州北大青鸟武林门校区
您现在的位置： >>
>> 浏览文章
windowsUINX
服务专区SETVICE
学UI怎么样？UI设计师有什么要求?
发布来源：&&&&发布时间：日&&&&浏览次数：
文章摘要：&#160;&#160;&#160;&#160;&#160;&#160;学UI怎么样？UI设计师有什么要求?近几年，“UI”这个新名词开始屡见报端，“UI设计师”这一职业作为IT行业一种新兴职业走进人们的视线。UI设计前景怎么样？2013《纽约时报》的报道已经指出，&l...
& & & & & &学UI怎么样？UI设计师有什么要求?近几年，&UI&这个新名词开始屡见报端，&UI设计师&这一职业作为IT行业一种新兴职业走进人们的视线。UI设计前景怎么样？2013《纽约时报》的报道已经指出，&UI设计师&已经成为苹果、谷歌、微软等全球知名IT企业招聘的热门岗位。国内UI设计起步稍晚，但阿里巴巴、百度、腾讯等国内一流IT企业已经开始意思到UI设计的重要性，因而不惜开出20-40万的年薪来招揽人才。UI设计已逐渐成为年轻人所追捧的热门职业方向。
& & & & & &UI设计是什么？&UI&的本义是用户界面，UI设计师则指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。随着网络技术的发展和移动互联网的普及，一款软件产品无论其后台如何，用户第一时间看到都是这款产品的&界面&即UI，UI设计的好坏决定用户对产品的第一印象，设计良好的界面可以引导用户自己完成相应操作，起到向导作用。界面设计拥有吸引用户的直接优势，IT企业如果能让用户获得完美的体验，将在很大程度上其软件产品的市场竞争&软实力&。所以说目前企业对UID设计人才的竞争需求是很大的。
& & & & & &UI设计师有什么要求?要一名优秀的UI设计师我们在了解了产品的需求之后更深入了解这个产品的使用环境和用户群体的使用习惯。UI设计不单单从事美术绘画，更需要对软件使用者、使用环境、使用方式进行定位，并最终为软件用户服务。UI设计师进行的是集科学性与艺术性于一身的设计，他们需要完成的，正是一个不断为用户设计视觉效果使之满意的过程。在职业要求上主要体现在三个方面：
&& & & & &&1、是具备很高的专业素养。从业人员熟悉html、CSS、javascript，精通Photoshop、Illustrator、Flash等图形软件，html、 & & & & & & & & &Dreamweaver等网页制作工具。能够独立完成设计工作。
&& & & & & 2、是具备良好的审美能力、有较强的平面设计和网页设计能力和深厚的美术功底。
&& & & & &&3、是具有敏锐的用户体验观察力，富有创新精神。这方面来说，有相关的学习和工作经历是很大优势。
& & & & & &看到这里我们不难发现，要从事设计绝非有兴趣有热情或是仅仅靠自己自学就可以实现的，UI设计在薪资待遇和发展前景各方面都是非常不错的，但相对的对于从业者的要求也会比较高。所以如果真的有意愿从事这样行业，建议还是先去进行专业的技术培训。这个方面的培训北大青鸟就做的不错，有兴趣可以登陆，找老师了解一下。
上一篇：下一篇：没有了
<a href="/class/netx/" title=".NET课程.NET课程
400-711-2828}