页面优化Check List(二)-框架层#产品经理的设计课#

本文为转载整理的学习笔记,编号有所改动。关于框架层的优化将会陆续整理更新到这一篇。

文章来自@谢尔鱼翻译并授权人人都是产品经理社区发布

原文地址:http://goodui.org/

1.尝试使用一列布局代替多列

一列布局会让你对全局有更好的掌控。它也能让你的用户预先对整体的内容从上到下有一个大致的了解。然而多列布局则会让用户从页面的核心内容上分散注意力从而增加额外的风险。最好的方法是用一个有逻辑的叙述然后在文末加上一个行动的口号来引导用户。

2.尝试合并相似的功能,而不是支离破碎的UI

在产品开发期间,我们很容易在无意中创建多个功能一样的模块,元素及专题。随着时间的推移,界面变得支离破碎。留意相同的功能以多种方式展示,因为它容易给你的客户带来压力。通常,UI碎片越多,你的客户的学习成本就越高。偶尔考虑通过合并相似的功能来重构你的UI。

3.尝试用推荐来代替罗列相同的选项

当展示多种服务时,一个强力的推荐或许是个好主意,因为用户有时候需要一点推动。一些心理学的研究表明,选择性越多,用户将想法付诸实践并行动起来的概率就越低。为了消除这种选择障碍,试着强调和突出显示某些选项。

4.尝试保持焦点而不是滥用链接

为了尽可能满足更多客户的需求,很容易在一个页面上创建得到处都是链接。如果我们的重点是长文本底部那个行动口号的话,那就得三思了。其它任何链接都有可能使用户离开页面。注意你页面上链接的数量,尽可能平衡导航页面上的风格(更少的链接以及更高的转化率)。删除无关的链接更有可能让用户点击那个最重要按钮。

5.尝试显示进度状态

在用户界面上我们经常显示有不同状态的元素。邮件有已读、未读状态,发票有已付、未付的状态,等等。通知用户每一条记录的特殊状态,是提供信息反馈的好方法。界面状态能帮助用户很好地理解他们之前的操作是否成功执行,以及接下来的操作怎么处理。

6.尝试直接操作而不是无上下文的菜单

有时候,直接在元素上进行操作比无相关的菜单罗列要更有用。举个例子来说,当展示数据列表的时候,我们通常允许用户在列表的项上进行相关的操作。在列表项上点击,或者是鼠标滑过都能被用来表达一种特定的操作(删除,重命名,等等)。直接操作的另一个例子是点击一个数据项(例如说一串文本地址)后,然后文本框变成可编辑的状态。使用这样的交互,减少了一些不必要的步骤。不过对于一些一般性的操作(比如说前进、后退),使用无上下文的菜单是没有错的。

7.尽量显示全部内容而不是创建额外的页面

当创建登录页面时,在转换页面上显示全部表单字段会更好。与单独创建额外的注册页相比,将注册表单与登录页合并有更多的好处。首先,我们减少了流程操作中的额外步骤,这样操作将花费更少的时间。其次,通过显示表单字段的数量,我们也向客户展示了注册表单的实际长度。当然,前提是我们的表单比较短(当然表单也应该尽量简短)。

8.尝试遵守约定俗成的规则,而不是新建标准

统一的约定是一致性的好伙伴。如果我们在界面上保持元素的相似性,用户使用起来就不会特别困难。另一方面,如果我们尽可能地保持多个界面上的元素的相似性,这就进一步降低了用户的学习成本。有了统一的UI约定,我们就知道屏幕右上角的叉是用来关闭窗口的。当然这种约定随着时间推移可能也会改变。不过记住,当需要打破这种约定的时候,明确自己的意图,并保证出发点是好的。

9.尝试营造视觉层次,而不是平淡无奇

良好的视觉层次能区分重要的元素与不太重要的元素。视觉层次可以通过对齐、距离、颜色、色调、缩进、字体大小、元素大小、填充、间距等方式来体现。当这些视觉语言元素被正确运用,他们能在页面上抓住用户的注意力,提高页面的可读性。视觉层次结构可以产生视觉摩擦,放慢我们从上到下浏览整个页面的速度。通过一个好的视觉层次,我们可能会多花点时间在页面上,最后的结果可能是我们注册了更多的项目。就像是一次公路旅行,你可以走高速公路,很快地到达目的地(页面底部);你也可以走风景优美的路线,放慢行程,沿路记住更多有趣的事物。给眼睛一个停留的地方。

10.尝试将相关的项目分组,而不是杂乱无序

将相关的项目分组在一起是增加产品可用性的一种基本方式。我们大多数人都知道刀和叉是放在一起的,同理打开和关闭功能通常也是在一起的。将相关的项目放在一起符合逻辑,也更符合用户对产品的整体的认知。用户通常都不太乐意浪费时间到处找东西。

57.尝试友好地进行比较,而不是混乱不堪

有时候我们需要在界面上对有改变的内容进行比较(比如diff工具),或者对产品特性进行比较(比如产品比较图表)。有几种方法可以使比较更易理解和更易用。首先,限制同时进行比较的元素数量,两个是减少困惑的最佳数。通过对齐和排版来将两项对比项放在一起就能进一步减少困惑,这种方式一看就知道是什么跟什么进行比较了。其次,清楚地标注“更好”或“最近”版本也可以减少猜测。最后,清楚地标明哪些属性改变了,哪些没有。换句话说,标明哪些是添加的(或是更好的),哪些是删除的(或是较差的),最后哪些是保持不变的。

58.尝试设置集合,而不是单独的项目

收集东西能激发用户的积极性。不管是实体的还是虚拟的,收集一整套的东西可以为用户建立一个行动的目标。通常在获取完整一套物品的过程中可以通过添加相应的好处来进一步激励用户(一个完整的蛋糕看起来比单块蛋糕更大更漂亮)。或许,显示已经收集的物品,通过显示过去行为的成就也可以进一步强化用户的行为。最后,如果一套物品的数量是有限的(强调稀缺性),收集完整一套物品的想法就会更加强烈。

62.尝试预测用户的意图,而不是只看眼下

当用户发出“是的,这就是我正在找的东西”这种感叹时,或许正是因为我们已经在界面上对用户操作意图进行了预测。做一个正确对用户行为进行预测的UI,或许会收获用户更多的微笑和订单成交(或者至少会少一些不愉快)。举个例子,Amazon.com(请按英文原版的亚马逊对号入座,中文亚马逊就不说了哈)已经在许多下拉菜单上实现了这种微观的交互。预测用户意图,通过一些有趣的几何和前端技术来显示子菜单。它为用户避免了徒劳无功的痛苦——将鼠标移动到所需的对角线上的子菜单,然后发现子菜单已经变化了或者干脆消失了。事先预测用户的意图也是一种平衡操作的便捷性与代码的简洁性的一种方法。进一步进行用户行为预测是一种更高级的意图预测,可能需要更强大的人工智能。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容