《设计规划|用户体验设计技能(二)》

接上一篇《需求分析|用户体验设计技能(一)》

在上一篇文章中梳理了如何做需求分析,那么接下来说说如何进行设计规划。

在确定需求之后,设计师并不是马上打开软件开始画图,任何优秀的设计都要经历充足的规划过程。

我们根据需求来确定提供哪些必要的信息给用户,然后将信息分类、组织起来,并以导航的形式展现在界面上,让用户可以快速找到想要的信息。

设计师根据需求设计相关的信息和任务,通过组织信息架构、引导用户完成任务得到一系列关联的界面草图,再细化草图为具体界面。也即:需求→信息/任务→草图→界面

一、信息组织与任务设定

我们在拿到需求以后就开始试着用软件画界面,但这往往会在设计过程中发现某个界面细节逻辑不通,到最后页面逻辑一塌糊涂。

症结就在于对信息的组织和任务的设定,只有搞好信息分类、导航设计、任务设计,才能快速绘制出草图。

1.信息分类

1-1亚马逊官网

今天暂且拿亚马逊来分析。比如要买件女装T恤,我们平时在商场往往是先进入女装区域,再在摆放上衣的货架上挑选T恤。那么在电商网站上也是同理,按照“女装>上衣>T恤”的逻辑,换成“上装>女装>T恤”是不是有些奇怪?这就涉及到逻辑归类。我们可以使用人们在生活中熟悉的分类逻辑对内容进行组织。

2.导航设计

设计师认为导航逻辑清晰,就是搞不懂为什么用户很难找到自己想要的内容。很大程度上是因为导航设计出了问题。这也就是设计师为什么经常会面临一个问题:用户习惯和产品逻辑,到底哪个更重要?

首先是导航能否做到自我解释,为用户解释“我从哪里来”,“我现在哪里”,“我能去哪里”。就像前面的[图1-1],网站左上方的Logo告诉用户正在访问亚马逊官网,Logo下面的标题“全部商品分类”告诉用户整个页面属于这个分类下,“全部商品分类”下面的导航栏里标亮了“服装/鞋靴/箱包”,表明了用户现在的准确位置,用户可以选择与“服装/鞋靴/箱包”平级的类目,也可以寻找更细分类目下的女装。

另外就是导航的深度和广度。导航的信息组织中层级的数目就是导航的深度,每一层级中包含的菜单项数就是导航的广度。如果导航深度过深,用户就需要耗费多次点击才能找到所需的信息,而每多一次点击操作就会流失掉一批用户。如果一些细小的信息隐藏得过于深入,用户可能很难找到。所以导航的深度广度需要再三斟酌。

1-2淘宝的分类导航

为重要功能和常用功能设置快捷入口也很重要。以淘宝为例,“购物车”从逻辑上应是包含在“我的淘宝”中,但是淘宝却把“购物车”拉出来列为与“我的淘宝”平级的项目。因为无论是对用户购物来说,或是从网站销售目标来说,“购物车”显然都起着至关重要的作用。用户在使用时只希望能够立刻找到自己想要的功能,并不会考虑到产品逻辑。但要注意的是,若是设置的快捷入口过多,反而会降低用户的使用效率。

3.任务设计

1-3某网站界面

不要担心浪费空间,过于“贪心”导致出现如[图1-3]的情况。要解决这个问题就需要我们确定主要任务和次要任务。那具体怎么设计任务流程呢?

首先设计主线(主行为流),即把杂乱无章功能点根据用户的期望即目标正确的次序组织起来的过程,来告诉用户需要先做什么,再做什么。至于支线(次要行为流),得看此行为流能否对主行为流有所帮助。

在任务流程确定以后,就可以通过草图表现出来,就得到了任务流和页面流设计,然后再慢慢细化具体的界面。


二、界面的设计与规划

下面说一些技巧,用以设计出更易用的界面,减少用户理解和操作的成本。

1.简化操作

由于人们处理信息和记忆细节的能力是有限的,如果想要减少用户所耗费的注意力和理解力,我们就要试着减少多余步骤和干扰项。

1-4两款闹钟

比如上图的两款闹钟,你会更倾向哪一款?很显然第二款更简单明了,大大较少了用户的操作成本。

再比如下图[图1-5],我们经常出现视频看到一半掉线的现象,然后白白浪费了流量。所以适时提供合适的首选项、适时帮助、及时反馈、提供合理的默认值等等,都可以帮助用户降低出错几率,使用户有更顺畅的使用体验。

1-5某视频软件播放界面

在页面设置上我们要页面层次不言而喻,在视觉呈现上,突出信息模块之间的逻辑关系。逻辑相关的在视觉上分为一组,利用“接近原则”,因为物体之间的相对距离会影响我们对组织方式的感知。

内容或重要程度不同的在视觉上体现出差异。利用“差异原则”,强化差异对比。

逻辑上有包含关系的在视觉上进行嵌套。逻辑相关的内容,在视觉上也要呈现出相关性,使用户一目了然。


三、快速表达:纸面原型

纸面原型其实更具有可塑性,能够快速修改重建,也不需要什么高级的工具,使用马克笔等等的线条粗细表现出界面的层次关系即可。如果是团队合作也可以在白板上绘制,如下图。

纸面原型最需要关注的是框架、流程、基本功能和内容,设计细节可以忽略。对于界面的逻辑关系,可以用绘制的深浅和颜色来表现。如下图。

今天就写这么多啦,好像每天晚上都是越写越困,明天继续更新~晚安。

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

推荐阅读更多精彩内容