UI 工作流程指南(二):原型設(shè)計(jì)

原型設(shè)計(jì)的主要作用聋袋,是用戶體驗(yàn)設(shè)計(jì)師與 PM、開發(fā)工程師溝通最初的產(chǎn)品設(shè)想的重要工具腔稀,展示產(chǎn)品內(nèi)容和結(jié)構(gòu)及粗略的布局哑了,說明用戶將如何與產(chǎn)品進(jìn)行交互,而不是視覺設(shè)計(jì)烧颖。


原型設(shè)計(jì)

在大廠中,職位分工更為細(xì)致明確窄陡,大多原型都是由產(chǎn)品經(jīng)理制作的炕淮,而中小企業(yè)里,更多的是設(shè)計(jì)師也要具備制作原型的能力跳夭。原型圖階段中設(shè)計(jì)師需要和產(chǎn)品經(jīng)理溝通需求涂圆,并不是產(chǎn)品經(jīng)理向設(shè)計(jì)師下發(fā)需求,而是需要相互就自己擅長的方面進(jìn)行溝通币叹。

原型類型區(qū)別

設(shè)計(jì)時(shí)原型的類別也需要關(guān)注润歉,每個(gè)項(xiàng)目啟動(dòng)時(shí)對(duì)原型的需求不一定都相同,交流的對(duì)象也有可能會(huì)對(duì)原型的類別產(chǎn)生混淆颈抚,以為線框圖(Wireframe)踩衩、原型(Prototype)視覺稿(Mockup)是一個(gè)東西,設(shè)計(jì)開始前最好先與產(chǎn)品經(jīng)理/甲方確認(rèn)要繪制什么類型的原型贩汉。


原型類型

通常工作中使用原型(Prototype)最多驱富;

交互設(shè)計(jì)原則

交互設(shè)計(jì)作為原型設(shè)計(jì)里的重要環(huán)節(jié),了解交互設(shè)計(jì)原則匹舞,給交互設(shè)計(jì)提供更多設(shè)計(jì)支持褐鸥。

基本原則/標(biāo)準(zhǔn)

1、易用性

易用性包括:易理解性赐稽、易學(xué)習(xí)性叫榕、易操作性浑侥。

2、交互設(shè)計(jì)的目標(biāo)劃分

·讓用戶容易理解:層次清晰晰绎;功能區(qū)塊的劃分明確寓落;區(qū)分可交互元素與不可交互元素;入口要明確寒匙,區(qū)分優(yōu)先級(jí)零如;

·讓用戶操作簡單:符合常規(guī)的操作流程;符合平臺(tái)的交互特性锄弱;產(chǎn)品自身操作的一致性考蕾;及時(shí)反饋;更短的交互路徑会宪;減少用戶記憶肖卧;減少輸入,幫助用戶做選擇掸鹅;防錯(cuò)&容錯(cuò)(不可用置灰塞帐、格式限制、可撤銷)巍沙;

1. Fitts’ Law / 菲茨定律(費(fèi)茨法則)

目標(biāo)離的越遠(yuǎn)葵姥,到達(dá)就越是費(fèi)勁。目標(biāo)越小句携,就越難點(diǎn)中榔幸。如果我們要想鼠標(biāo)比較快速地命中目標(biāo)可以采取兩個(gè)措施,要么減少鼠標(biāo)與目標(biāo)之間的距離矮嫉,要么使目標(biāo)足夠大削咆。

2. Hick’s Law / 席克定律(希克法則)

一個(gè)人面臨的選擇越多蠢笋,所需要作出決定的時(shí)間就越長拨齐。在人機(jī)交互中界面中選項(xiàng)越多,意味著用戶做出決定的時(shí)間越長昨寞。(幫用戶作出選擇)

3. 神奇數(shù)字7±2法則

人類頭腦最好的狀態(tài)能記憶含有7(±2)項(xiàng)信息塊瞻惋,在記憶了 5-9 項(xiàng)信息后就開始出錯(cuò)。與席克定律類似编矾,神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動(dòng)應(yīng)用交互設(shè)計(jì)上熟史,如應(yīng)用的選項(xiàng)卡不會(huì)超過 5 個(gè)。

4. The Law Of Proximity 接近法則

根據(jù)格式塔(Gestalt)心理學(xué):當(dāng)對(duì)象離得太近的時(shí)候窄俏,意識(shí)會(huì)認(rèn)為它們是相關(guān)的蹂匹。在交互設(shè)計(jì)中表現(xiàn)為一個(gè)提交按鈕會(huì)緊挨著一個(gè)文本框,因此當(dāng)相互靠近的功能塊是不相關(guān)的話凹蜈,就說明交互設(shè)計(jì)可能是有問題的限寞。

5. Tesler’s Law 泰思勒定律(復(fù)雜性守恒定律)

該定律認(rèn)為每一個(gè)過程都有其固有的復(fù)雜性忍啸,存在一個(gè)臨界點(diǎn),超過了這個(gè)點(diǎn)過程就不能再簡化了履植,你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方计雌。如對(duì)于郵箱的設(shè)計(jì),收件人地址是不能再簡化的玫霎,而對(duì)于發(fā)件人卻可以通過客戶端的集成來轉(zhuǎn)移它的復(fù)雜性凿滤。

6. 新鄉(xiāng)重夫:防錯(cuò)原則

防錯(cuò)原則認(rèn)為大部分的意外都是由設(shè)計(jì)的疏忽,而不是人為操作疏忽庶近。通過改變?cè)O(shè)計(jì)可以把過失降到最低翁脆。該原則最初是用于工業(yè)管理的,如在硬件設(shè)計(jì)上的 USB 插槽鼻种。而在界面交互設(shè)計(jì)中也是可以經(jīng)撤捶看到,如當(dāng)使用條件沒有滿足時(shí)叉钥,常常通過使功能失效來表示(一般按鈕會(huì)變?yōu)榛疑珶o法點(diǎn)擊)罢缸,以避免誤按。

7. Occam’s Razor 奧卡姆剃刀原理(簡單有效原理)

這個(gè)原理被稱為「如無必要投队,勿增實(shí)體」枫疆,即如有兩個(gè)功能相等的設(shè)計(jì),那么選擇最簡單的敷鸦。

8. Steering Law 轉(zhuǎn)向定律

觸控技術(shù)(Touch)應(yīng)用:

0° 方向是最利于操作者移動(dòng)的方向养铸,具有較好的視覺反饋,成功率相對(duì)最高轧膘;

120° 方向用戶在操作時(shí)最為困難,在用戶界面交互設(shè)計(jì)中應(yīng)盡少使用兔甘;

用戶手指在各個(gè)方向的運(yùn)動(dòng)中谎碍,寬度低于 14 像素的 Touch 是用戶體驗(yàn)最差的。

9. 帕累托定律(80/20原則)

任何大系統(tǒng)中洞焙,大部分的效果僅有少數(shù)幾項(xiàng)變量決定蟆淀。用戶 80% 的時(shí)間花在了 20% 的功能上。

其實(shí)交互定律看起來有點(diǎn)枯燥澡匪,生搬硬套其實(shí)并不一定能套上去熔任,列舉以上的設(shè)計(jì)原則更多的是為設(shè)計(jì)做參考,結(jié)合設(shè)計(jì)原則唁情,是提升設(shè)計(jì)說服力的有效方法疑苔。

更多詳細(xì)的設(shè)計(jì)法則和完整案例請(qǐng)查看優(yōu)設(shè)專題 →?《19條經(jīng)典理論讓你的設(shè)計(jì)更有說服力!》

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末甸鸟,一起剝皮案震驚了整個(gè)濱河市惦费,隨后出現(xiàn)的幾起案子兵迅,更是在濱河造成了極大的恐慌,老刑警劉巖薪贫,帶你破解...
    沈念sama閱讀 206,602評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件恍箭,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡瞧省,警方通過查閱死者的電腦和手機(jī)扯夭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鞍匾,“玉大人交洗,你說我怎么就攤上這事『蜓В” “怎么了藕筋?”我有些...
    開封第一講書人閱讀 152,878評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長梳码。 經(jīng)常有香客問我隐圾,道長,這世上最難降的妖魔是什么掰茶? 我笑而不...
    開封第一講書人閱讀 55,306評(píng)論 1 279
  • 正文 為了忘掉前任暇藏,我火速辦了婚禮,結(jié)果婚禮上濒蒋,老公的妹妹穿的比我還像新娘盐碱。我一直安慰自己,他們只是感情好沪伙,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評(píng)論 5 373
  • 文/花漫 我一把揭開白布瓮顽。 她就那樣靜靜地躺著,像睡著了一般围橡。 火紅的嫁衣襯著肌膚如雪暖混。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,071評(píng)論 1 285
  • 那天翁授,我揣著相機(jī)與錄音拣播,去河邊找鬼。 笑死收擦,一個(gè)胖子當(dāng)著我的面吹牛贮配,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播塞赂,決...
    沈念sama閱讀 38,382評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼泪勒,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起酣藻,我...
    開封第一講書人閱讀 37,006評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤曹洽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后辽剧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體送淆,經(jīng)...
    沈念sama閱讀 43,512評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評(píng)論 2 325
  • 正文 我和宋清朗相戀三年怕轿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了偷崩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,094評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡撞羽,死狀恐怖阐斜,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情诀紊,我是刑警寧澤谒出,帶...
    沈念sama閱讀 33,732評(píng)論 4 323
  • 正文 年R本政府宣布逮壁,位于F島的核電站壕探,受9級(jí)特大地震影響西设,放射性物質(zhì)發(fā)生泄漏如筛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評(píng)論 3 307
  • 文/蒙蒙 一个曙、第九天 我趴在偏房一處隱蔽的房頂上張望憔足。 院中可真熱鬧酪夷,春花似錦贰镣、人聲如沸呜象。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽恭陡。三九已至,卻和暖如春上煤,著一層夾襖步出監(jiān)牢的瞬間子姜,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評(píng)論 1 262
  • 我被黑心中介騙來泰國打工楼入, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人牧抽。 一個(gè)月前我還...
    沈念sama閱讀 45,536評(píng)論 2 354
  • 正文 我出身青樓嘉熊,卻偏偏與公主長得像,于是被迫代替她去往敵國和親扬舒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子阐肤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容