反思設(shè)計(jì)的一致性

規(guī)范是可變的,根據(jù)實(shí)際情況,在一致中允許有不一致,我們應(yīng)當(dāng)以用戶體驗(yàn)為先。
我們組里大約在半年前已經(jīng)出了第一版的設(shè)計(jì)規(guī)范,包括交互和視覺(jué)兩方面(動(dòng)效也略有涉及)。其中主要規(guī)定了界面布局原則、控件的形式和調(diào)用規(guī)則等。半年來(lái),遵循著這套規(guī)范,組內(nèi)整體的工作效率確實(shí)有所提升。
但有那么幾次,碰到產(chǎn)品策劃“挑戰(zhàn)”設(shè)計(jì)規(guī)范的情況,他們認(rèn)為在現(xiàn)有的規(guī)范指導(dǎo)下做出的某個(gè)功能/界面并不理想,想脫離開(kāi)規(guī)范做一些改變。一開(kāi)始我們是拒絕的,因?yàn)檫@無(wú)疑會(huì)加大我們的設(shè)計(jì)和維護(hù)成本。所以組內(nèi)一直在努力維護(hù)著設(shè)計(jì)規(guī)范,不為所動(dòng)。
但有時(shí)我自己看著依循設(shè)計(jì)規(guī)范做出來(lái)的界面,也總覺(jué)得體驗(yàn)上會(huì)欠點(diǎn)兒意思,總覺(jué)得……有點(diǎn)兒走偏了。上周末好好捋了一下,有了些眉目,整理下來(lái)與各位分享。
不過(guò)我可能要先嘚啵一點(diǎn)相關(guān)知識(shí):
一. 為什么要保持一致性
一般情況主要是會(huì)對(duì)產(chǎn)品開(kāi)發(fā)團(tuán)隊(duì)和用戶兩方面都有好處
1. 于開(kāi)發(fā)團(tuán)隊(duì)而言
(1)復(fù)用資源,降低設(shè)計(jì)成本
很多不同的界面中會(huì)用到同一個(gè)資源,如果見(jiàn)一個(gè)重做一個(gè),會(huì)很大程度浪費(fèi)設(shè)計(jì)的人力資源
(2)產(chǎn)品風(fēng)格及體驗(yàn)不易出問(wèn)題
因?yàn)橘Y源的復(fù)用,能基本保證整個(gè)產(chǎn)品的風(fēng)格不跑偏,而在用戶體驗(yàn)上,也起碼能保持在一貫的水準(zhǔn)
(3)新人可以快速上手
比較大型的項(xiàng)目中如果人員流動(dòng)率較高,一致性就相當(dāng)有必要了。新人先閱讀規(guī)范后更容易展開(kāi)工作,根據(jù)一致性也能更快了解當(dāng)前產(chǎn)品
(4)程序能提高開(kāi)發(fā)速度
主要也是因?yàn)槟軌驈?fù)用自用資源,有些界面和控件,程序甚至無(wú)需找設(shè)計(jì)出資源,在產(chǎn)品策劃指導(dǎo)下可直接開(kāi)發(fā)
2. 于用戶而言
(1)對(duì)界面和功能操作的認(rèn)知統(tǒng)一,學(xué)習(xí)成本低
熟悉過(guò)主要界面/功能后,在其他界面/功能中能基本自由操作
比如在北京開(kāi)車是靠右行駛,到上海你不用學(xué)就知道也是這樣。因?yàn)橹袊?guó)道路交通相關(guān)法律中對(duì)此是做了統(tǒng)一規(guī)范的。要是這一點(diǎn)不一致的話,到上海突然讓你靠左行駛,你肯定要適應(yīng)一段時(shí)間并難免犯錯(cuò)
(2)提高操作效率
在降低了認(rèn)知成本后,用戶很容易就熟悉了產(chǎn)品的設(shè)計(jì)風(fēng)格,那么操作起來(lái)自然也更容易上手,效率也更高
(3)加強(qiáng)對(duì)產(chǎn)品(品牌)辨識(shí)度
別人一看很容易辨識(shí)出:哦,這是某某某產(chǎn)品
常見(jiàn)的產(chǎn)品中保持一致性設(shè)計(jì)的例子非常多,相信各位天天見(jiàn),我就不贅述了。
二. 有哪些地方要保持一致性
交互操作
比如彈窗的退出機(jī)制,按鈕的幾種狀態(tài)等
2. 視覺(jué)
字體、顏色、圖標(biāo)、排版等
3. 多個(gè)終端
有些產(chǎn)品可能會(huì)同時(shí)有移動(dòng)端和PC端產(chǎn)品,雖然是以不同的硬件設(shè)備為載體,但也要在不同的終端上保持交互和視覺(jué)一致
當(dāng)然了,這里的一致不是指一樣
4. 文案
這個(gè)可能大家不太注意到,但文案風(fēng)格也要和產(chǎn)品定位統(tǒng)一,各個(gè)界面出現(xiàn)的文字提示等要風(fēng)格統(tǒng)一
好了,要掰扯的一致性的相關(guān)背景知識(shí)差不多了,下面是正文:
三. 一致性的變與不變
在實(shí)際的項(xiàng)目中我發(fā)現(xiàn) ,設(shè)計(jì)組拿到新的需求在產(chǎn)出的時(shí)候,會(huì)傾向于使用規(guī)范中既定好的控件或者規(guī)則來(lái)設(shè)計(jì),遇到產(chǎn)品策劃的質(zhì)疑也會(huì)搬出規(guī)范來(lái)表示我們的“專一”。但慢慢我們發(fā)現(xiàn),現(xiàn)有的規(guī)范并不能適用于所有的需求,有時(shí)候遵循規(guī)范而做出來(lái)的設(shè)計(jì),對(duì)某個(gè)需求來(lái)說(shuō),并不是一個(gè)很好的解決方式。
需求就是那個(gè)需求,需求背后的問(wèn)題存在就是存在,所以問(wèn)題應(yīng)該不在這里。
那么,應(yīng)該就是規(guī)范出了問(wèn)題,或者說(shuō)我們對(duì)于規(guī)范的“執(zhí)著”出了問(wèn)題。
和用戶體驗(yàn)的同事交流后,結(jié)合自身的體驗(yàn)和觀察,我們發(fā)現(xiàn):用戶其實(shí)并不care一致性的問(wèn)題。
嗯,聽(tīng)起來(lái)有點(diǎn)不好接受,但貌似事實(shí)確實(shí)如此。
我們做產(chǎn)品,做設(shè)計(jì),都會(huì)預(yù)先把用戶假定為“忙碌的傻子”。這樣的設(shè)定使得我們一直在努力追求如何把產(chǎn)品做得更加好用易用,以及體驗(yàn)更順暢更舒適。
而用戶在實(shí)際使用產(chǎn)品的時(shí)候,卻根本不會(huì)想那么多。更多想的是下一步要怎么做,甚至有些常見(jiàn)操作已經(jīng)變成了肌肉的機(jī)械運(yùn)動(dòng),可以不用過(guò)大腦。你可以試驗(yàn)一下,這會(huì)你想瀏覽朋友圈,你從拿起手機(jī)到瀏覽這一過(guò)程中,都主要在想下一步怎么做,而當(dāng)你點(diǎn)開(kāi)微信,點(diǎn)開(kāi)“朋友圈”的時(shí)候,這種點(diǎn)擊操作你是不去思考的,瀏覽朋友圈上下滑動(dòng)的時(shí)候,你也不會(huì)去思考。除非你想點(diǎn)贊,你會(huì)動(dòng)用一丟丟腦部資源,想想該去找那個(gè)“更多”圖標(biāo),然后點(diǎn)“贊”。
也就是說(shuō),用戶在意的,的自己在完成某個(gè)目標(biāo)的時(shí)候,這一路上不要出什么岔子,能更快更舒適地完成目標(biāo)才是重點(diǎn)。
而我們做設(shè)計(jì)規(guī)范,保持一致性,是用一種最保險(xiǎn)的方式來(lái)保證用戶的這種使用體驗(yàn)。
那一致性的最主要的目的也就出來(lái)了,就是保證或者提升用戶體驗(yàn)。
那么一致性本身其實(shí)并不重要,我們所堅(jiān)持的一致性是否能夠完成它的目的才是最重要的。那么反思一下,當(dāng)我們的設(shè)計(jì)規(guī)范,和用戶體驗(yàn)沖突的時(shí)候,我們保大還是保小,哦不,是保證規(guī)范的一致性不受影響,還是用戶體驗(yàn)?
答案很明顯。
設(shè)計(jì)的一致性,是工具,而不是目的。我們不該為了一致而一致,那樣是在本末倒置。規(guī)范本身也應(yīng)該變得靈活一些,而不該成為我們“墨守”的成規(guī)。
規(guī)范可以增加擴(kuò)充,可以刪減,也可以修改調(diào)整,是動(dòng)態(tài)變化的。我們應(yīng)該是“堅(jiān)持用規(guī)范做設(shè)計(jì)”,而不是堅(jiān)持規(guī)范本身。規(guī)范可以改變,但只是不能被打破,不然很容易對(duì)用戶體驗(yàn)有負(fù)面影響。
而我們產(chǎn)品中的一致性,本身也該像優(yōu)秀的交互一樣,讓用戶感知不到。用戶能很順溜地使用完就是很好的狀態(tài)。
我們可愛(ài)的用戶并不會(huì)去思考一致不一致,適當(dāng)?shù)牟灰恢氯绻茏層脩趔w驗(yàn)變好,那何樂(lè)不為?
綜上,我想說(shuō)的是,規(guī)范是可變的,根據(jù)實(shí)際情況,在一致中允許有不一致,我們應(yīng)當(dāng)以用戶體驗(yàn)為先。
一致中有不一致,emmmm,可以這么理解,就好比兩個(gè)控件,雖然長(zhǎng)得不一樣,但是你一看,就知道它們是一家人。
作者:Vicol, 微信公眾號(hào):略設(shè)小計(jì)
本文由 @Vicol 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels,基于 CC0 協(xié)議
打破規(guī)范的部分,深有體會(huì),前幾天設(shè)計(jì)一個(gè)上傳照片底部要不要加標(biāo)題的,有的只能限制一張,就需要小標(biāo)題,如身份證正面;有的可以上傳多張,就沒(méi)限制標(biāo)題,而不一定要一致性~讓用戶更好用才是重點(diǎn)。
哈哈是的。
另外,是“改變”不是“打破”哦,打破的話就容易亂,我只是在講“變”而不是“破”
規(guī)范可以有原則和建議,原則是必須遵守的,建議是作為參考,如果有更好的解決方案可以放棄建議,對(duì)于同樣的場(chǎng)景,解決方案可能會(huì)隨著時(shí)間而不斷變化,堅(jiān)持最基本的,給設(shè)計(jì)師留下空間
是的,守其宗,應(yīng)其變
讓我想起了安卓那套 material design 的規(guī)范 …
emm,MD用得少,不太get到..
之前我是做安卓開(kāi)發(fā),開(kāi)發(fā)了一款海外app,因?yàn)間oogle play 要給我首頁(yè)推薦所以完全按照MD規(guī)范開(kāi)發(fā)的,這套規(guī)范相當(dāng)詳盡,如果一個(gè)產(chǎn)品能有一套類似的規(guī)范指導(dǎo)開(kāi)發(fā),對(duì)程序員來(lái)說(shuō)簡(jiǎn)直是大幸。。
哈哈是的,大廠的規(guī)范還是相當(dāng)完善的。
彈窗有X 減少用戶思考,點(diǎn)X就可以關(guān)閉,不用思考點(diǎn)什么返回上一界面
這個(gè)也分情況說(shuō)。如果彈窗出現(xiàn)時(shí)背景有半透明遮罩,有X沒(méi)X都可以。有X的話,會(huì)減少思考,但因?yàn)槠湮恢霉潭?,視覺(jué)尋找和手指移動(dòng)需要一定的時(shí)間,而沒(méi)X時(shí)點(diǎn)空白處相對(duì)來(lái)說(shuō)操作會(huì)更快捷些。如果彈窗出現(xiàn)時(shí)無(wú)半透明遮罩,最好還是帶X好些。
費(fèi)心了。
贊,請(qǐng)教對(duì)于打破規(guī)范的部分,是否可以多一些的實(shí)例,比如文中案例的規(guī)范打破方案是什么?規(guī)范打破后部分違和感與用戶體驗(yàn)提升效果的對(duì)比呢?
是“改變”不是“打破”,打破的話就容易亂,我只是在講“變”而不是“破”~
這個(gè)本想舉例的,但因?yàn)楣镜姆▌?wù)問(wèn)題,一些未完成品無(wú)法對(duì)外公布。不過(guò)這也是這篇文章的一點(diǎn)缺失。
感謝回復(fù),期待新分享~