小米高級(jí)交互設(shè)計(jì)師:產(chǎn)品設(shè)計(jì)的八個(gè)原則

原則1:用戶界面應(yīng)該是基于用戶的心里模型坟漱,而不是基于工程實(shí)現(xiàn)模型

就是把后臺(tái)本來很復(fù)雜的事情通過設(shè)計(jì)符合用戶日常生活中常用的瀏覽方式或操作方式购笆。其實(shí)這一點(diǎn)是設(shè)計(jì)師把生活中的細(xì)節(jié)和數(shù)據(jù)結(jié)合的凝聚點(diǎn)察净,用戶的心理模型抓的越準(zhǔn)叶雹,界面就會(huì)越優(yōu)秀掂摔。

#左邊界面#大眾點(diǎn)評(píng)新版的價(jià)格的搜索就比之前改得更符合用戶心里模型;

#右邊界面#食神搖搖的搖動(dòng)手機(jī)找餐廳更加符合大眾用戶的心里规哲,大家應(yīng)該都有那種中午不知道去哪家餐廳就餐撩笆,那么就搖一搖來隨機(jī)抽出一個(gè)附近的餐廳唆貌。

原則2:培養(yǎng)用戶使用情景的思維方式做設(shè)計(jì)

要做到這個(gè)原則其實(shí)是很難的谣蠢,需要長期的實(shí)戰(zhàn)經(jīng)驗(yàn)才能做到這點(diǎn)粟耻。

那我們都知道米聊出的比微信早查近,但后來被微信反超,個(gè)人認(rèn)為不光是QQ幫了微信很大忙挤忙,比如用戶登錄門檻低嗦嗡,用戶來源,廣告打得響之類的饭玲,其實(shí)在用戶使用情景方面米聊研究的沒有微信透徹侥祭。

對(duì)于一個(gè)社交即時(shí)通訊產(chǎn)品,添加好友的功能是好友匯聚的來源茄厘,雖然米聊微信都綁定手機(jī)通訊錄矮冬,但話又說回來,用戶找手機(jī)通訊錄聯(lián)系人語音聊天的還是比較少次哈。添加好友是引導(dǎo)用戶去發(fā)現(xiàn)好友胎署,找好友, 碰好友的一扇門。所以對(duì)于這么重要的功能放置在應(yīng)用程序的哪個(gè)位置窑滞,在產(chǎn)品前期就會(huì)讓用戶明顯的去選擇用哪個(gè)應(yīng)用琼牧,因?yàn)榱奶旃ぞ叩那疤崾且腥撕湍懔奶臁?/p>

再回到現(xiàn)實(shí)的界面中來,看看下面的對(duì)比:

微信1.0的時(shí)候(我這里只截了4.0的圖)把添加好友放置主Tab上哀卫,方便用戶很快的添加好友巨坊。

米聊2.0時(shí)還是把添加好友放置在好友列表的第一排,用戶很難發(fā)現(xiàn)

原則3:盡量少的讓用戶輸入此改,輸入時(shí)盡量多給出參考

移動(dòng)端的虛擬鍵盤一直是科技界無法解決的一個(gè)難題趾撵,虛擬鍵盤的主要缺點(diǎn):1.輸入定位無法反饋,所以無法形成高效的盲打;2.虛擬鍵盤的空間限制共啃,手指的點(diǎn)擊經(jīng)常造成誤按占调。光是上面這兩點(diǎn)就讓虛擬鍵盤在輸入上大打折扣,所以我們?cè)谠O(shè)計(jì)應(yīng)用程序時(shí)移剪,只要遇到Input Box的控件時(shí)究珊,首先就要想到盡量讓用戶少輸入,或者智能的給出參考纵苛。

百度音樂的搜索先是把近期最熱門的歌曲依次排列在列表中剿涮,當(dāng)有字輸入時(shí),會(huì)出現(xiàn)歌手的候選詞赶站,這里值得稱贊的是百度音樂的搜索能根據(jù)用戶輸入的字來判斷用戶是搜索歌手還是歌名幔虏。

百度地圖也是我用得比較順手的一個(gè)地圖導(dǎo)航應(yīng)用,在減少輸入方面也做的比較出色贝椿,百度地圖擁有cookies功能, 另外就是百度搜索的技術(shù)應(yīng)用在地名的匹配中也很讓人欣喜,在用戶輸入到一半的時(shí)候陷谱,下面的候選列表就出現(xiàn)了目標(biāo)地址烙博,用戶直接停止輸入點(diǎn)擊列表即可瑟蜈。

原則4:全局導(dǎo)航需要一直存在,最好還能預(yù)覽其他模塊的動(dòng)態(tài)

全局導(dǎo)航在Web交互設(shè)計(jì)中比較容易做到渣窜,在手機(jī)移動(dòng)端全局導(dǎo)航要看產(chǎn)品設(shè)計(jì)的需求铺根,什么功能需要全局導(dǎo)航,社交應(yīng)用通常是:消息乔宿,通知位迂,請(qǐng)求;音樂視頻應(yīng)用通常是:下載,搜索;工具類產(chǎn)品經(jīng)常是核心工具條(tool bar) 比如瀏覽器详瑞,語音助理掂林,音樂識(shí)別應(yīng)用等等。

全局導(dǎo)航的價(jià)值在于可以讓用戶在使用過程中不會(huì)丟失信息坝橡,減少主頁面和次級(jí)頁面之間的跳轉(zhuǎn)次數(shù)泻帮,當(dāng)然全局導(dǎo)航中的info-task要能在當(dāng)前頁面完成,如果需要跳轉(zhuǎn)到新界面计寇,就會(huì)失去全局導(dǎo)航的意義锣杂,因?yàn)楫?dāng)出現(xiàn)多個(gè)info-task的時(shí)候,就需要用戶不停的進(jìn)入全局導(dǎo)航頁面來完成番宁。

Facebook 的朋友請(qǐng)求元莫,消息,通知都是采用全局導(dǎo)航的方式蝶押,就是面板設(shè)計(jì)的丑了些~

米聊的通知中心柒竞,里面包含的通知類型蠻多的,顯得有點(diǎn)凌亂播聪,希望下面的版本會(huì)篩選歸類

原則5:提供非模態(tài)的反饋朽基,不打斷任務(wù)流

模態(tài)彈出框的書面名稱在iphone OS中稱作:Alert-box,在Android OS中稱:Pop-up box, 我們都知道彈框會(huì)打斷任務(wù)流离陶,所以在有限的屏幕上怎樣讓這些彈框弱化稼虎,或者說優(yōu)雅、紳士的提醒用戶招刨,這個(gè)需要設(shè)計(jì)師來定義霎俩。

模態(tài)是指界面中只有提醒彈框才具有可交互行為,其他一切都不可操作;非模態(tài)不會(huì)把提醒做成彈框沉眶,可能會(huì)處理成List Notification, Toast list等方式來提醒用戶打却。

Gmail是第一個(gè)把刪除的模態(tài)彈框設(shè)計(jì)成List Notification這種方式的,提醒用戶撤銷剛才的刪除操作谎倔,這種非模態(tài)的處理柳击,讓刪除的流程更加順暢和輕松自如。

K歌達(dá)人第二版的彈框就是模態(tài)處理片习,界面很不友好捌肴,用戶在K歌過程中要被打斷三次才能發(fā)表一首自己唱的歌曲蹬叭,所以降低了用戶的參與度。

原則6:不要讓用戶等待任務(wù)完成状知,用戶還要發(fā)現(xiàn)更多有意思的地方

移動(dòng)互聯(lián)的核心就是給用戶帶來移動(dòng)體驗(yàn)的方便和高效秽五,這是移動(dòng)互聯(lián)網(wǎng)Apps需要考慮的,用戶在使用你產(chǎn)品在很多情況下都是碎片時(shí)間饥悴,所以在設(shè)計(jì)上盡量讓用戶在短時(shí)間內(nèi)熟悉我們的產(chǎn)品坦喘,知道這個(gè)產(chǎn)品的誠意,特別是某些等待界面需要設(shè)計(jì)西设,不能把一個(gè)很枯燥的等待界面呈現(xiàn)在用戶的面前瓣铣,那用戶很快就會(huì)換其他apps。

在Instagram拍完照片后济榨,點(diǎn)擊上傳后坯沪,它的處理方式是回到首頁的位置,告訴你的照片正在提交擒滑,并不是顯示一個(gè)上傳進(jìn)度的界面腐晾,讓用戶看那上傳百分比。因此丐一,我們?cè)谠O(shè)計(jì)米吧上傳歌曲文件時(shí)也只是告知用戶后臺(tái)正在幫你上傳藻糖,叫用戶放心,用戶自然就會(huì)去玩其他的功能库车,沒有讓用戶焦慮的等待巨柒,等上傳完畢時(shí),我們?cè)儆肨oast list通知用戶已經(jīng)上傳成功柠衍,這樣把查看上傳結(jié)果的主動(dòng)權(quán)交給用戶洋满。

原則7:自動(dòng)保存用戶的輸入成果

在移動(dòng)端,由于輸入面板的復(fù)雜性珍坊,而且觸摸輸入沒有物理按鍵的反饋?zhàn)匀晃矗貏e是手機(jī)上去輸入一段文字或者信息,對(duì)用戶而言本身就是一件很痛苦的事情;對(duì)產(chǎn)品而言阵漏,用戶的在你的產(chǎn)品中輸入是一個(gè)很值得慶幸的事情驻民,所以設(shè)計(jì)人員需要讓你的apps自動(dòng)保存用戶的輸入成果。

微博官方的手機(jī)客戶端在用戶輸入信息后履怯,點(diǎn)擊左上角的叉時(shí)會(huì)彈出Action sheet來詢問回还,確認(rèn)是否要放棄,或者保存為草稿;path的處理則更為人性化叹洲,在處于斷網(wǎng)的情景下柠硕,用戶依然可以發(fā)布照片和文字,當(dāng)然后面聯(lián)網(wǎng)成功后疹味,系統(tǒng)會(huì)自動(dòng)上傳仅叫,只是發(fā)表時(shí)間是連網(wǎng)后發(fā)布的時(shí)間點(diǎn);Instagram的評(píng)論也很友好帜篇,在斷網(wǎng)或者網(wǎng)絡(luò)情況不穩(wěn)定的情景糙捺,用戶輸入的評(píng)論依然可以發(fā)布诫咱,后面會(huì)有一個(gè)嘆號(hào)提醒用戶稍后發(fā)布或者重試,提升了用戶參與的積極行洪灯,同時(shí)活躍了社區(qū)坎缭。

原則8:為了程序響應(yīng)的速度,設(shè)計(jì)有時(shí)候需要擔(dān)任掩護(hù)的作用

科技并不是萬能的签钩,技術(shù)依然是移動(dòng)互聯(lián)網(wǎng)應(yīng)用程序最需要優(yōu)化和完善的掏呼,作為技術(shù)的盟友我們?cè)O(shè)計(jì)人員也需要輔佐他們,讓用戶覺得程序原本就應(yīng)該是這么運(yùn)行的铅檩。特別是程序響應(yīng)的速度很多時(shí)候不光是技術(shù)的問題憎夷,與網(wǎng)絡(luò)環(huán)境也有很大的關(guān)系,這時(shí)候設(shè)計(jì)人員需要考慮這些客觀存在的情況昧旨,幫助程序來掩護(hù)這些瑕疵拾给,讓用戶感覺到在使用時(shí)是流暢的。

#隨后實(shí)現(xiàn)#Instagram帖子“贊”不管對(duì)參與者還是帖子作者都是激發(fā)其積極性活躍社區(qū)氛圍的重要功能兔沃,所以在程序的響應(yīng)方面一定要具有可用蒋得,易用的特性,我們看左圖中乒疏,“贊”的按鈕已經(jīng)現(xiàn)實(shí)“已贊”额衙,同時(shí)我們看紅色框內(nèi)的“菊花瓣”就知道后臺(tái)在loading贊的數(shù)據(jù),所以這就是設(shè)計(jì)的巧妙之處怕吴,先讓用戶感知到程序是非城喜啵快速的,而不是等 loading完之后再顯示“已贊”;

#提前傳輸# Instagram中發(fā)布帖子的時(shí)候转绷,用戶處理完照片點(diǎn)擊“上傳”按鈕就看到中間的界面伟件,這時(shí)候界面是讓用戶去為自己的帖子輸入一個(gè)主題,或者去設(shè)置分享等功能暇咆,同時(shí)我們可以看到紅色框中的“菊花瓣”锋爪,很明顯后臺(tái)已經(jīng)開始傳輸剛才上傳的照片了,所以當(dāng)用戶在點(diǎn)擊“完成”時(shí)爸业,數(shù)據(jù)只需要上傳剩下的一部分其骄,讓用戶感知上傳很迅速;

#邊唱邊完成#把伴奏和用戶的歌聲合成為一首音樂時(shí)需要后臺(tái)處理大量的數(shù)據(jù),如果分步做就要讓用戶等待比較長的合成時(shí)間扯旷,為了讓用戶不用枯燥的等待合成拯爽,我們需要后臺(tái)在用戶唱歌的同時(shí),后臺(tái)就已經(jīng)開始把唱過的伴奏和歌聲合成钧忽。

以上八項(xiàng)原則是我在工作中體會(huì)比較深刻的交互設(shè)計(jì)原則毯炮,希望能對(duì)觀看到這篇博文的朋友有所幫助逼肯。當(dāng)然設(shè)計(jì)原則是隨著時(shí)間的變化而不斷變化的,所以也請(qǐng)各位朋友完善和補(bǔ)充桃煎,謝謝!

非特殊說明篮幢,文章歸原作者所有,轉(zhuǎn)載請(qǐng)注明出處

本文地址:http://www.siweiw.com/sjinfo7436.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末为迈,一起剝皮案震驚了整個(gè)濱河市三椿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌葫辐,老刑警劉巖搜锰,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異耿战,居然都是意外死亡蛋叼,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門剂陡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來狈涮,“玉大人,你說我怎么就攤上這事鹏倘∈磬停” “怎么了?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵纤泵,是天一觀的道長骆姐。 經(jīng)常有香客問我,道長捏题,這世上最難降的妖魔是什么玻褪? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮公荧,結(jié)果婚禮上带射,老公的妹妹穿的比我還像新娘。我一直安慰自己循狰,他們只是感情好窟社,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著绪钥,像睡著了一般灿里。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上程腹,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天匣吊,我揣著相機(jī)與錄音,去河邊找鬼。 笑死色鸳,一個(gè)胖子當(dāng)著我的面吹牛社痛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播命雀,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼蒜哀,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了咏雌?” 一聲冷哼從身側(cè)響起凡怎,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤校焦,失蹤者是張志新(化名)和其女友劉穎赊抖,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體寨典,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡氛雪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了耸成。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片报亩。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖井氢,靈堂內(nèi)的尸體忽然破棺而出弦追,到底是詐尸還是另有隱情,我是刑警寧澤花竞,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布劲件,位于F島的核電站,受9級(jí)特大地震影響约急,放射性物質(zhì)發(fā)生泄漏零远。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一厌蔽、第九天 我趴在偏房一處隱蔽的房頂上張望牵辣。 院中可真熱鬧,春花似錦奴饮、人聲如沸纬向。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽逾条。三九已至,卻和暖如春叉瘩,著一層夾襖步出監(jiān)牢的瞬間膳帕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留危彩,地道東北人攒磨。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像汤徽,于是被迫代替她去往敵國和親娩缰。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

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