“細節(jié)”在原型交互設計中的助推力
導語:交互設計以用戶體驗為基礎,需要考慮用戶的背景、使用經驗以及在操作過程中的感受,在構想及設計原型交互的時候,我們不免的可能會犯下一些錯誤,最后等到產品試用的時候,才意識到別扭拗“手”,那么怎樣的才可以盡量的避免這樣的問題發(fā)生呢?文章對我們設計原型及交互的時候要注意的一些問題進行了分析探討,一起來看看~
一、原型交互設計的價值
價值來源于兩方面:
- 團隊工作流程中的價值
- 提升產品的用戶體驗
1. 團隊工作流程中的價值
產品經理通過將業(yè)務目標轉化為產品目標并按照開發(fā)的節(jié)奏,從而得到產品的需求,完成了產品需求就要開始需求評審。對于部分公司里面會設有交互設計師為產品分攤壓力,在此階段開始與產品經理進行交涉,但是對于中小企業(yè)規(guī)模的公司,往往產品經理需要全程的負責交互設計的這個階段。
產品原型交互設計的質量決定后面視覺設計師是否需要重復的進行改稿,同時,也決定了在產品測試階段期間,可發(fā)現(xiàn)的不良體驗次數(shù)的上限,這就涉及了中間產品開發(fā)階段的工程師們的工作量,因此,一個優(yōu)質的交互設計會影響整個團隊的整體運作和效率,它的價值是銜接整個團隊的一個重要部分。
2. 提升用戶體驗
原型交互涉及到的場景化思維設置,減少了用戶在軟件使用過程中的障礙,同時配合表情、文案和插畫等等情感化設計,能形象表達用戶在需求和期望得到滿足時產生的愉快或喜愛等情感,加深了整個產品在邏輯和設計的深度。
二、細節(jié)可決定成敗
細節(jié)是產品鷹翅上的羽毛,它牢固、繁密且有序,則產品便可飛升,反之,則會在廣闊市場田野中翱翔不久后,便會下墜直至跌上地面,陷入平庸。把握好了細節(jié),有時候可以決定成敗。
1. ”距離大小“盡合理
按鈕、光標等可點擊區(qū)域在合理的范圍之內,越大則越容易點擊。反之,可點擊區(qū)域越小,越不容易操作。 小而遠的目標區(qū)域意味著用戶需要將手指在屏幕上移動較長距離,并且為了能對準目標還需要做一系列的微調,因為目標比較小,所以耗費的時間就越長。
舉一個例子,早在2016年,錘子手機就推出“大爆炸”功能,功能剛出來的時候引起了社會的廣泛關注,一般情況在對頁面進行文字編輯工作時,我們常常會拖拽文字和移動光標,我們大多數(shù)人會優(yōu)先選擇在電腦上進行文字編輯,因為更加的方便選擇,而錘子手機這一個大爆炸的功能,革新了手機編輯文字的傳統(tǒng)方式,如下圖展示“大爆炸”前后,“大爆炸”后的頁面,文字和光標更大,更便于操作。
“大爆炸”前? ? ?“大爆炸”后
而通常我們對距離的把控主要體現(xiàn)在元件位置的擺放,像屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素,即不管你移動了多遠,按鈕最終會停在屏幕的邊緣,并定位到頁面或導航欄的上面,如下圖:
快速搜索界面? ? ?電話APP的聯(lián)系人頁
兩頁的共同點,都是語音交互按鈕,始終處于屏幕邊緣,不會被其他元素遮擋。方便用戶操作。
2. 適時“定制”得謹記
在特定的情景下,用戶需求往往是屈指可數(shù)的,特定的場景需求由特定范圍的功能去完成滿足,我們應該考慮設計在一定的情境下,給用戶盡量少的選擇,減輕用戶的決策成本。
華為手機的駕駛模式APP? ? ? ? 錘子駕駛APP
作為坐在車上,正準備發(fā)動汽車的司機來說,此刻只需要,也只可能做三件事,導航,聽歌,打電話。華為手機的駕駛模式APP,首頁有5個可點擊的操作,錘子駕駛APP只有3個,相比之下,此刻司機更傾向于使用右邊的模式進行操作,即更契合自己當時的心理需求,而左邊的頁面對于此時此刻的司機來說,有的功能完全可以不出現(xiàn)在此頁面,顯得多余。
在滿足用戶的需求下,給用戶盡量少的選擇,一方面精簡了頁面,另一方面也讓用戶體會到了專業(yè)定制的感覺,提升了用戶體驗。
3. 七二法則導航“衣”
數(shù)字 7±2 法則大致上表述了普通人在頭腦最好的狀態(tài)能記憶含有7(±2)項信息塊,在記憶了 5-9 項信息后人的頭腦就開始出錯。
因此為了避免用戶在頁面上構成要素產生視覺混亂,我們在設計PC端導航或者是選項卡的時候,數(shù)量盡量不要超過九個,而對于手機端,我們可以觀察大部分APP底端的導航基本上都是不超過五個。
而有的軟件因為主體功能繁多,導航不得不多設置幾項,那么可以設置“重要功能+用戶自定義編輯”的方式,將四項或五項外其它的導航菜單放在一個“更多”的導航按鈕里面。
如果導航或選項卡內容很多,也可以用一個層級結構來展示各段及其子段,并注意其深廣度的平衡。
4. “靠近”“聯(lián)系”相呼應
當用戶瀏覽頁面的時候,看到兩個目標區(qū)塊靠的很近,會下意識的認為它們是有關聯(lián)的,因此,我們可以在設計的時候可以將相似的、有關聯(lián)的信息盡量擺在一起,不要讓用戶迷茫,要讓他在潛意識里就知道在哪里能找到自己想要的信息。
這是一個手機設置的界面:
這個界面分區(qū)域的展示了和網絡有關的設置,和Smartisan OS新特性有關的設置,這樣讓用戶一目了然,能快速定位到自己想要找的設置選項。
5. 防錯機制需”應景“
軟件上大部分出現(xiàn)的“意外”都是由設計的疏忽,而不是人為操作疏忽。因此,在設計中要有必要的防錯機制。在此,特別要注意在用戶操作具有毀滅性效果的功能時要有提示,防止用戶犯不可挽回的錯誤。
填寫前? ? ?填寫后
在用戶沒有填寫完手機號碼和密碼前,底部的登錄按鈕是置灰的,不可點擊。只有兩項都填寫完整,底部的登錄按鈕才會變?yōu)榭牲c擊狀態(tài),也就是紅色的。這就是為了防止用戶犯更多錯誤。
當用戶點擊“退出登錄”按鈕后,會出現(xiàn)的提示彈窗,需要用戶輸入賬戶密碼,才能退出登錄。 彈出框方式會增加不可逆操作的難度,當用戶因為誤操或者其它原因點擊“退出登錄”按鈕,準備退出當前狀態(tài)的時候,使用彈窗是個不錯的選擇。
6. 無必要勿增“實體”
用戶在進行購物支付訂單等等業(yè)務流程的時候,往往都需要進行多次判斷和選擇,并點擊不同區(qū)域,這個過程往往不適合過于繁瑣,我們設計的時候應該盡量去減少用戶點擊的次數(shù),讓用戶通過更少的點擊就能找到他們想要的東西,不要讓他們找一個內容找得很累。
錘子手機手機充值頁的選擇金額彈出框? ? ?支付寶充值中心金額的選擇頁面
錘子手機充值界面要完成整個話費充值流程,需要點擊動作三次。而支付寶的充值界面完成整個話費充值流程,只需要點擊一次。頁面流程更短,效率更高。 因此,減少用戶的點擊次數(shù),能提升產品的用戶體驗。
三、結語
一個優(yōu)秀產品是多方面的優(yōu)秀,離不開整個團隊的協(xié)調合作,團隊的整體合作離不開細節(jié)的把握,優(yōu)秀的交互設計提升團隊效率的同時,給用戶以更好的體驗,用細節(jié)的“手臂”去擰出整個產品開發(fā)這塊”海綿“當中的更多時間,這些時間可以用來去做規(guī)劃和細節(jié)打磨。
工具始終是工具,我們的思想在原型交互設計的時候需要保持邏輯清楚,記住這簡單的“細節(jié)小詩”一首,這樣設計出來的產品也許會更具備靈魂,原型交互設計也是一門學問,有很長的路要走,把握細節(jié),至少從現(xiàn)在開始不會算晚。
本文由 @三月寫書 原創(chuàng)發(fā)布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協(xié)議。
獲益良多,文章易讀容易理解,贊
很好,很有價值