【技巧分享1期】好的用户界面设计

1 尽量使用单列而不是多列布局

单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮。

080939289469539

 

2 放出礼品往往更具诱惑力

给用户一份精美小礼品这样的友好举动再好不过了。具体来讲,送出礼品也是之有效的获得客户忠诚度的战术,这是建立在人们互惠准则上的。而这样做所带来的好处也是显而易见的,会让你在往后的活动进展(不管是推销,产品更新还是再次搞活动)中更加顺利。

080939423111258

 

3 合并重复的功能而使界面简洁

在整个产品开发期间我们会有意无意地创建很多模块,版面或者元素,而它们的功能可能有些是重叠的。此种情况表明界面已经过度设计了。时刻警惕这些冗余的功能模块,它无用且降低了电脑性能。此外,界面上模块越多,用户的学习成本就越大。所以请考虑重构你的界面使它足够精简。

080939482794468

 

4 客户的评价好过自吹自擂

在获得项目机会或提高项目转化率时客户的好评是一种极为有效的手段。当潜在客户看到其他人对你的服务给予好评时,项目机会会大增。所以试着提供一些含金量高的证据证明这些好评是真实可信的。

080939582975274

 

5 频繁展示你的主旨来加深印象

多次重复主旨口号这种方法适用于界面很长或者分页的情况。首先你肯定不想满屏刷出相同的信息,这样会让人生厌。但当页面足够长的时候这些重复就显示自然多了并且也不显得拥挤。所在在页面顶部放一个按钮然后在页面底部再适当放个突出的按钮的做法没有什么不妥。这样当用户到达页面底部在思考接下来该做什么的时候,你提供的按钮就可以获得一个潜在的合同或者即使用户不需要你的服务这个按钮也可以起到过滤的作用。

080940058729426

 

6 将选项与按钮区分开来

诸如颜色,层次及模块间的对比这些视觉上的设计可以很好地帮助用户使用产品:他时刻知道当前所处的页面以及可以转到哪些页面。要传达这样一个好的界面,你就需要将可点击的元素(比如连接,按钮),可选择的元素(比如单选多选框)以及普通的文字明显区分开来。在下图的例子中,我将点击操作的元素设置为蓝色,选中的当前元素为黑色。这样适当的设计可以让用户很方面地在产品的各模块间切换。但千万不要把这三种元素设计得混乱不堪。

080940123168092

 

7 给出推荐而不是让用户来选择

当展示许多项服务时,给出一个重磅的推荐项是个不错的做法,尽管推荐的设置无法满足所有用户。这么做是有理论依据的,一些研究已经揭示了这么一种现象:当面临的选择越多时,用户就越难做出决定。所以你可以高亮某个选项来帮助用户做出选择。

080940191795159

 

8 给出撤销操作来代替确定操作

假设你刚点击了一个连接或者按钮,撤销操作可以让操作流畅自然,这也符合人类的本能。而每次操作都弹一个确定框则好像是在质问用户你明白不明白这个操作会产生什么后果。我还是更习惯假设用户每次操作都是正确的,其实只有极少数情况下才会发生误操作。所以,为了防止误操作而设计的确认窗口其实是不人性化的,用户每次操作都需要进行毫无意义的确定。所以请考虑在你的产品里实现撤销操作来增加用户的操作友好度吧。

080940256708810

 

9 指出产品适用人群而不是做成全年龄

你是想把产品做成大众化的呢还是有精确的适用人群?在产品定位上你需要更精确些。通过不断了解目标客户的需求及标准,你能把产品做得更好得到更多与客户交流的机会,并且让客户觉得你很专业,在这方面是独家提供的优质服务。把产品定位得精确的风险就是可能缩小了目标潜在客户的范围,也使自身变得不那么全能。但这种做得更专业的精神却反过来会赢得信任,权威。

(贴士:喜欢下图中可爱的小人物造型么?去了解MicroPersonas吧)

080940327823807

 

10 试着直接果断而不要唯唯诺诺

你可以通过不确定而颤抖的声音来表达传递自己的意思,当然也可以通过很自信的方式表达。如果你在界面中的表述用语多以问号结束,比如"也许","可能","感兴趣?" 或者"想要试试么?",那么你完全还可以把语气变得更坚定一些。不过万事无绝对,或许适当放松措词让用户有自行思考的余地也是可以的。

080940408179185

 

11 界面要有鲜明对比让人容易区分

把主要功能区从界面中突出显示出来效果会好很多。使你的主要口号醒目有很多种方法。通过明暗色调的对比来突显。通过为元素添加阴影渐变等效果让界面富有层次感来张显主题。最后,你甚至可以在色相环上专门选择互补色(比如黄色与紫色)来设计你的界面,以达到突出重心的目的。综合所有这些,最后得到的界面会使你的主要意图与界面其他元素有明显的区分,得到完美的呈现。

080940498271866

 

12 指明产地

指明你的地区,所提供的服务,产品来自哪里意义重大,同时也将与客户的沟通引入了一个更具体带有地域特色的场景中。指出具体来自哪里,国家,省分及城市,也是一种在进行自我介绍或产品展示时被常常提及的。当你在界面设计中实现这点时,让人觉得非常友好。同时指明区域也会隐形提高产品的声誉,好上加好。

080940573069344

 

13 精简表单内容

人生性就懒惰,在填写表单时也是同样的道理,没人愿意填写一大堆表单字段。表单中每个字段都会有失去用户的风险。不是每个人打字都很快速的,并且在移动设备上进行输入更是相当麻烦的事情。问下自己表单中是不是每个字段都必需,然后尽量减少表单中的字段。如果你确实需要一大堆信息让用户填写,试着将它们分散在不同页面,在表单提交后还可以继续补充。过多字段很容易让整个表单显示臃肿,当然想简洁也很容易,只放少数字段。

080941062894566

 

14 暴露选项而不要将操作隐藏

你使用的任何一个下拉框都会对用户造成信息的隐藏而需要额外的操作才能显示。如果这些信息是贯穿整个操作所必需的,那你最好把它展示出来做得更显而易见一点。下拉框最好用在选择日期,省份等约定俗成的地方。对于程序中重要的选项最好还是不要做成下拉形式。

080941132845833

 

15 把界面做得环环相扣要好过直白的排版

一个平淡无奇行文无疑会让用户失去兴趣而继续阅读。是的,单列滚动的长页面是不错的,但是我们应该适当地设置一些小节,并且环环相扣,来提高用户的兴趣使其继续阅读。但需要注意的是节与节之间的留白不要太大。

080941223735256

 

16 不要放太多链接分散用户注意力

为了满足各式用户的需求,在页面上放些链接链到这里链到那里是常见的做法。如果你的主要目的是想让用户点击页面最后那个下载按扭什么的话,就需要三思了。因为用户可能点击了其他链接离开页面了。所以你需要注意页面的链接数量,最好将用于导航与用于操作的链接用样式区分开。尽量移除页面不需要的链接会让用户点击到你的功能按钮。

080942157112858

 

17 将操作的状态或者进度呈现出来

现如今大多界面当中已经呈现了各色样式的进度条或者标明状态的图标,比如邮件有已读或未读的状态,电子帐单有支付或未支付的状态。而在界面上呈现这样的状态对于用户来说是很有必要的。这样用户就可以知道某些操作是否成功,接下来准备进行怎样的操作。

080942219857510

 

18 不要让用户觉得是在完成任务

试想界面上有这样两个按钮:一个是"获取折扣",另一个是"立即注册"。我敢打赌大多数人会点击第一个,因为第二个按扭让人感觉不到有利可图,并且"注册"让人联想到填不完的表单。也就是说让用户感受到获利的按钮更有可能被点击。这种让用户感到好处的文字信息也可放在按钮旁边,不一定要做为按钮的标题。当然,正常的按钮还是有用处的,一般用于重复性操作频繁的地方。

080942280734450

 

19 让操作直观而不是让人觉得找不到上下文

不用说直接在元素身上进行操作是更直观明了的方式。比如在一个列表中,我们想让用户对每个条目进行操作那么就把按钮放到当前条目上,而不要把放到列表之外。再比如就是直接点击元素就进入编辑状态(比如页面上的地址信息点击后可以进行编辑)。这种方式比传统的选中再点击相应的按钮进行操作要简洁省事得多。当然,对于一般性的操作本身就不需要有什么上下文的,就没必要这么做了,比如页面上的前进,后退按扭。

080942344737129

20 尽量显示全部内容而不要额外页面

在一个足够大的宽屏界面上最好还是直接给出表单,这比点击按钮再弹出表单要好很多。首先减少了点击操作,流程变得简洁也节省了时间。其次,直接呈现出表单可以让用户知道表单有多长,其实也是在告诉用户注册花不了多少时间。当然,这条规则适合注册表单非常简单的情况。

080942462064079

转载:刘哇勇的部落格   英文:Good UI

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/9982/

(0)
TinadminTinadmin
上一篇 2015-10-10
下一篇 2015-10-12

相关推荐

  • 搞定设计版本控制!一份超详细的 Sketch git 插件使用指南

    一份超详细的 Sketch git 插件使用指南

    2016-05-31
  • sktch打造knob开关icon 附sketch破解下载!

    小编:今天带来的是由小乔分享的knob拟物小教程,对于想学习sketch小伙伴们或者已经在用的同学们 练习起来都是不错的选择,当然没有mac用photoshop也是可以能设计出来的哟,快来开动你们的脑筋和动手能力吧!(附sk…

    2015-12-23
  • Apple Watch应用设计案例-QQ空间

    一、初期方案 设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。 二、竞品分析 我们对Instagram和Twitter进行了研究,整体上是手…

    2015-07-15
  • 2016 年 UI 设计的新趋势

    移动应用 1. 各平台 (Android/iOS/HTML5/Web) 的标准设计语言接近一致 部分原生控件上只存在风格上的差异,对用户无显著影响。 Material Design 不会大兴其道,更不可能逆袭(用 Material Design 设计的 App 在 iOS…

    2016-01-09
  • 交互密度与最小交互区域

    体验优秀的App之所以优秀,往往是因为他们能让用户快速访问到各项功能。这里就涉及到多点触摸的交互密度,一个较大的触摸区域,在常规操作下十分好用。 或许对于一些用户来说,触控区域的大区块,视觉上可能有点难…

    2016-06-08
  • 布局&构图&版式设计-木卫艾欧网-交互设计学堂

    编者按:想成为一个合格的UI设计师,光会画图标可不行,今天360的@Micu设计小哥从头帮你补上版式这一课,分享他的界面构图三板斧,此外,你还能学会如何用设计语言解构画面,这可是设计师的必备职业能力呦!

    2015-01-06
  • 一“平”到底

    随着 IOS8 的更新,以及更多 APPLE 产品的出现,扁平化设计已经成为了 UI 类设计的大方向。抛开扁平大战拟物的观点,让我们看看扁平设计之路应该如何越走越远。正好因为这个风格的流行,花瓣上也积累了非常多设计师朋友们的 素材 ,来看看他们都收藏了哪些精致好素材吧。

    2015-01-04
  • Coolors极简配色推荐

    设计人为本,颜色舒适人眼才不会造成视觉疲劳。 在设计网页的时候难免总会盲目的选择颜色然后加以尝试,难免会造成很多无用功。 对于新手设计师coolors帮了很大的忙。 这是一个超级简单的颜色搭配生成器。 进入的时…

    2015-01-02
  • 【设计作品分享】一个让你丢掉负能量的产品——BICH

    作者:梁雅婵,授权载于我是UE网。

    2015-11-27
  • 网络和辅助线的使用- Sketch从入门到精通

    设计师一般在作图的时候都离不开网格和辅助线,以前在PS或AI里的时候辅助线你必须手动去调整辅助线的位置,有的时候也难免会有误差或者半像素的偏离。但在Sketch 3里面,辅助线极大的避免了失误,并且提高了效率。 …

    2015-07-13