产品之路--产品设计之八项基本原则

 概览 


       作为刚入行的产品新人(包括我自己),在产品设计之初,会遇到不知某个按钮如何放置,导航如何设计,页面内容如何分类,标签如何定义等问题;或是看了很多竞品,知道怎么设计,却不知道这么做背后的逻辑,甚至有时在与UI,交互,开发沟(shi)通(bi)时,明知道该这样做,却有如困兽之斗,哑言于群雄,这归结于不了解或只了解产品设计之“术”,不明白设计之“道”。虽然零碎阅读了一些文章,但没有系统性去研究过,于是,决定去寻找产品设计之“道”,经推荐,开始阅读:锦绣蓝图:怎样规划让人流连忘返的网站这本书。

       本书写作于2001年左右,最新版本为2009,书中大量案例虽已近十年,但对比目前很多产品设计书籍,各大社区论坛里作者分享的文章来看,文中的观点依旧不过时,甚至可作为支撑这些观点的指导性原则,就好比建筑设计伴随人类一直发展至今,现代很多建筑设计方法仍然沿用古时人们的设计思想。

       在阅读此书的同时,我也不断反思自己在产品设计中是否遵循或违背文中的设计原则,受益匪浅,本文将分享书中的第一章内容----八项基本原则,接下来将不断更新其他章节的分享。

1.本书结构


       本书首先定义了信息架构师的概念,以此为出发点,点到为止的描述如何设计好一个让人流连忘返的网站, 分别介绍了建立信息架构的基本原则和平衡法则,并重点强调组织系统和元数据在信息架构中的作用,同时举例指出设计搜索和导航功能时需要考虑的问题和方法,以及角色和场景建立的策略,并通过大量例子来辅助说明书中的观点。

注:元数据指构成产品中内容的基础数据,分为固有性元数据,管理性元数据和描述性元数据,详情请参照本书。

(本书结构图)      

2.八项基本原则


八项基本原则结构图

2.1 标识导引设计

       用一个我们生活中的例子,女司机一直被我们冠名为马路杀手,除了性别因素之外,研究报告称,女性司机在马路上主要依靠路标来导航,而男司机主要靠方位感和空间感,其实,处于互联网上的我们都是女司机,当我们走进一个产品时,物理因素决定了我们只能通过一系列导航和标识来引导和提醒我们从哪里来,要去哪里,这里借用了建筑设计里标识导引概念,其作用如下:

a.提醒我们身在何处

LOGO图标,提示访问者正在访问哪一家网站。

面包絮轨迹或一个视觉标志,告诉作者处在系统的什么位置。

简明的页面标题,指出访问者正在浏览什么页面。

b.我们寻找的东西在哪里

访问这个网站的人究竟想要什么 ,首先要知道用户使用我们产品的目的,只有知道用户需要什么,我们才能有的放矢。

希望访问者能轻松找到哪些东西,明白用户想要什么之后,还要用一种轻松的方式让用户感知,比如可用一些易于识别的标签,文字说明,导引等元素让用户轻松抵达而不是废了九牛二虎之力才能看到用户最想看到的内容

c.如何寻找到我们所需的东西

巧妙的导航设计:导航就像是我们坐地铁时的路标,试想,第一次来北京地铁1号线里没有路标的话,奔涌的人流将会覆盖掉你的视线和判断力,你会不断徘徊在复杂的地铁系统里回不去,也出不来,网页也一样,没有一个好的导航设计,将让人无从知晓每个页面的关系和进出口;

好的导航设计链接看上去是可以点击的 :导航一般都有可点击性,而好的导航要用户一眼看上去是可点击的;

类似的链接会分为一组:当信息达到一定规模时,如何有效的分类组织信息将直接影响用户的使用体验,而分组是其中十分有效的方式,相同或相似的文字或链接放在一起可以减少用户的阅读成本;

d.他们已经到过哪里了

     通过链接来标记,Internet的创始人之一Tim Berners-Lee曾说过:要清楚的区分链接的'过去'和'现在'的状态,要显示被点击过的链接,这里的链接包含了可跳转的按钮,导航条,标签,模块标题等。

2.2 设定期望并提供反馈

         一些链接,例如提交表单,按钮按下后,用户并不知道会发生什么,需要给用户清楚的反馈,包括点击有什么预期结果以及点击后真正的结果。动作没发生之前,让用户知道动作尚未发生,例如一些在线编辑照片工具,当用户在编辑照片时,会把原始图放在右下角,时刻提醒用户原始照片未被修改,可随时点击返回和取消编辑,消除用户认为每一次点击和修改会造成不可逆修改的顾虑。

        提醒用户正处在过程中的哪个阶段,例如,以购物车的状态提醒为例,在线购物时包含了查询商品,选择商品,加入购物车,支付基本流程,每个过程需要给予提示,特别是购物车的状态,需要放在显眼的位置,以提醒用户买了什么,花了多少钱。

        还有搜素过程,加载过程中的圆点动画,以提醒用户计算机正在运行,并没有死机或断开,当我们在搜索或打开一个页面时,需要有从服务器取数据的加载过程,好的设计需要把这个加载过程告诉用户,并提醒用户系统在运行,以免因加载文件过大,网速过慢让用户认为系统死机或断开,微信在打开一个页面时,最开始会做一个加载很快的动作,进度条很快就到了最末端,让用户感知系统在运行且速度较快,经过这样'聪明'的设计之后,让本来浮躁的用户变得有耐心。

2.3 基于人类工程学设计

        在面向互联网产品设计时,一定要记住每个人都有身体,不同的身体条件千差万别,常见的有手,眼,耳朵等要素;比如要考虑用户是左手操作还是右手操作,页面的滚动距离和滚动频率要考虑到对手的重复性压迫损伤;眼 ,分析你的用户,然后尽量在满足主要用户的前提下,兼顾着为全盲 ,色盲,近视 ,远视的用户进行个性化设计,iphone的操作系统为听力患者做了很好的示范;耳,比如考虑到耳聋患者 ,还有在嘈杂环境中的页面音效设计等。

2.4 保持一致,考虑标准

       设计产品前,先浏览同类和相关产品,看看有哪些最佳的设计模式可借鉴,正所谓不必要重复造轮子,尽量设计符合用户习惯的操作,如果你确定你所设计的东西具有巨大创新,且用户能够适应,那你可以挑战下创新,这条原则无论是用在产品设计上,还是其他设计上,都是通用的,每一项新发明其实并非前所未有,是在一点点的积累和量变,最终行成巨大的创新。我在产品设计过程中,也会出现界面元素不统一,风格不统一,文案标注不统一的情况。

2.5 提供纠错支持,包括预防,保护和通知

       人生并不完美,人总会犯错误 。好的产品要能够预防,保护并通知用户错误的操作。首先是预防 , 要用清晰/简洁/惯用的语言和提示语告知用户,你进行下一步的操作会导致什么样的后果;如果用户在有效提示的前提下无意犯错,那系统一定要保护好用户的操作记录,比如浏览器的页面恢复,word的内容恢复,还有网页上一大串的表单填写内容等,都需要进行保护,同时,在告诉用户犯错的时候,需客观告诉用户发生了什么状况,避免使用一些批判式或比较严厉的话语。

2.6要靠辨识,而不是仅凭记忆

       对人类记忆力的研究证明,大多人的记忆不靠谱,熟悉比不熟悉的东西更容易让人记住,短词比长词容易记住,不按顺序比按顺序更为容易记住....而计算机又特别擅长记忆,因此,要最大限度利用计算机的记忆能力,比如记住你在浏览器的搜索记录,记住你在复杂流程中的每一个步骤。

       除了记忆力,人类的天性还有懒,懒得去记住,懒得不断输入,反复循环,人的记忆力也会随着懒而变差,计算机擅长处理繁杂事物,所以,能够让计算机处理的,就没必要用户亲自动手。

2.7 考虑不同用户的水平

       很多时候,某个产品的大部分用户基本可以分为新手,中等水平和专家三类,统计表明,新手平均使用3次就能达到正常使用系统的中等水平,专家级别的用户虽然能够研究透产品的功能,进而完成专业,复杂的事,但这部分用户只是占据很少部分,大部分用户主要是中等水平, 因此,我们所设计的产品功能要考虑三种用户的使用,适当性,阶梯性的设计符合用户的使用水平的功能,让用户感知自己能够达到一个理想的使用状况即可。

       不同的产品,功能复杂性不同,比如我们常用的微信,下到能正常交流的孩子,上到80岁的老人都能使用,但一些专业性的设计软件,比如图形设计工具,CAD,PS等学习成本较大;

      同一个产品,功能复杂性也不同,微信里的聊天功能大部分用户基本会用,但微信的各种入口,微信公众号的创建和运营,这些功能不是每个人都需要用到,且有一定的学习成本,还有图形设计软件中的简单线框布局,调色等学会很简单,但要深入使用一些图层处理,抠图,色调色阶的配置功能,还有机械,建筑制图时就需要通过深入学习才能操作。

2.8 提供上下文帮助和文档

        在适当的时候以最简洁的方式提供适当的帮助。应该把一些有用的信息放在明确标注的位置,而不要统统归入泛华和无所不包的help之下,例如首次登录系统时,需要一些操作指导来教会用户怎么使用,在一些比较复杂的功能旁放置显眼而简洁的操作指引,文案提示或说明等。

3.小结 

      以上就是本书中介绍的八项基本原则,最后,本文吸引我的还有以下2点,提前与大家分享:

* 大量引用建筑设计中的方法来类比网页设计(或互联网产品设计),例如将建筑材料比作网页的元素,表单,标签,内容等,将建筑设计里的标志导引比作网页设计里的导航,前文中也有提到过平凡之路 建设师与产品之间的关系。

* 文中引用1997年Information Architects中Richard Saul Wurman 的话“数据海啸正向文明世界的海岸席卷而来,这是彼此无关,不断增长的比特/字节数据行程的浪潮,产生了无组织/无控制/杂乱/不协和的泡沫”。20年后,这段话正确预示了这场数据海啸越发猛烈的朝着互联网国度铺面而来,大数据浪潮,一切业务皆数据,一切数据皆业务等思想正在加速的让互联世界更换血液。

   

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

推荐阅读更多精彩内容