产品设计

页面表达原则

问题2. “脱掉”按钮不易找到

“脱掉”按钮在框的右 下角,很多时候会出现在预览区以外,看不到,并且文字超小,无法阅读。

实例二:

“您还没有登录”所以 “请先登录”。这是很清楚的逻辑关系。

“原因可能是长时间未操作而失效,谢谢合作!” 是什么事情需要解释?其实这是在说另外一个事情:“您很奇怪刚才登录过,现在为什么又要登录吗?我告诉您:原因可能是长时间未操作而失效…”

这 里的表述过于追求文字上的简练了,把两个问题混为一谈,没有表述清楚。

5. 操作可识别
链接应 该象链接,按钮应该象按钮。蓝色、带下划线的文字是目前链接文字通用的表现方式。按钮应当是有立体感的,看上去就感觉像是可以点击的。
操作可识别 原则是为了保证用户触发操作的有可能性。

QQ空间中有个不好的例子:

有输入框,但却看不到验 证码图片。 “没看到图片我怎么知道要输入什么?”“不知道要输入什么,我就不去不输入啦。”操作前表达的不够清楚,会影响触发操作的可能性。
(上 面那行温馨提示算是个补救措施,但并不能解决问题。如果都靠提示就可以了,那么就不需要设计师了,有作家就够了。)

6. 操作前,结果可预知。
未进行一个操作之前,应该让用户大致能猜测到操作后会是什么样的结果。或者说,操作的设计应该和用户的期 望相同。那些只写成“返回”“上一步”“下一步”的链接,如果可能,最好还是写清楚些为好。比如写成:“下一步 进入购物车”、“返回首页”…

实 例一.

如果将右上角的链接直 接写做:更多品牌专区,用户则不需要纵观整块内容,直接就能看懂这个链接指向哪个页面。更快、更容易的看懂这个链接,会使得更多用户去点击,类似下面这 样:

实例二.


两个 按钮都叫“复活Ta”,但其实操作后的效果并不一样,前面一个按钮是打开另外一个页面,而后面一个按钮是真的实现“复活”操作。用相同的按钮表示不同的操 作,使得用户更不容易猜到操作的后果。

还有些时候,让结果变的不可预知是设计者故意的:

点击标题,不是进入这篇 文章,而是进入“图领风骚”栏目,如下图:

这篇文章属于这个“图领 风骚”栏目,并且在第一屏看不到这篇文章。

7. 操作时,操作有反馈。
进行了一个操作后,需要页面上有反应。

应该引 导用户将挂件放在页面比较靠上的位置,所以item的默认位置在第一屏,为了确保用户点击了一个item后能看到这个item出现在了页面上,QQ空间商 城的页面很短。


QQ秀商城左侧固定, 右侧可滚动,确保了用户能看到点击一个item后的变化—左侧预览图上出现了变化。

确保操作有反馈还应当避免链接指向当前页。
指向 当前页的链接,点击后,只是页面刷新,并没有明确的告知用户刚才的点击操作产生了什么样的后果。(除非链接就叫做“刷新当前页”。)

不好的 例子:个性域名

之前的问题:当输入的 个性域名不合要求时点击“查询”,页面没有反应。

现在的设计:

当焦点进入第二个输入 框后,变红。

当时现在仍旧存在问题:

此时点击“查询”页面 还是没有反应。

8. 操作后,操作可撤销。
执行一个操作后,应当允许撤销,允许用户反悔。

实 例一:

不想进去了,怎么办?

实 例二:



要不 想发表回复了怎么办?

9. 让用户知道身处何地—页面标题、导航

让用户知道自己当前身处 何地是个很基本的诉求。清楚的表明当前页面是什么,在哪里,可以很大程度上降低用户的恐惧感。
目前能实现这个要求的方法主要有两个:页面标题和导 航

页面标题是整个页面的说明,可以最直接的表示出当前页面是什么。

其中的 “World News”是页面标题。

其中的“Audio, TV & Home Theater”是页面标题。

页面标题写在一个页面的最上面,并且通常是一个页面中最大字号的文字。

希望看到您的想法,请您发表评论x