2014-3-10 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
產(chǎn)品設(shè)計(jì)的原則有點(diǎn)太泛哈,藍(lán)藍(lán)設(shè)計(jì)這里想結(jié)合自己的工作心得來(lái)小結(jié)一下手機(jī)無(wú)線設(shè)計(jì)8原則:
就是把后臺(tái)本來(lái)很復(fù)雜的事情通過(guò)設(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)該都有那種中午不知道去哪家餐廳就餐,那么就搖一搖來(lái)隨機(jī)抽出一個(gè)附近的餐廳。
要做到這個(gè)原則其實(shí)是很難的,需要長(zhǎng)期的實(shí)戰(zhàn)經(jīng)驗(yàn)才能做到這點(diǎn)。
那我們都知道米聊出的比微信早,但后來(lái)被微信反超,個(gè)人認(rèn)為不光是QQ幫了微信很大忙,比如用戶登錄門檻低,用戶來(lái)源,廣告打得響之類的,其實(shí)在用戶使用情景方面米聊研究的沒(méi)有微信透徹。
對(duì)于一個(gè)社交即時(shí)通訊產(chǎn)品,添加好友的功能是好友匯聚的來(lái)源,雖然米聊微信都綁定手機(jī)通訊錄,但話又說(shuō)回來(lái),用戶找手機(jī)通訊錄聯(lián)系人語(yǔ)音聊天的還是比較少。添加好友是引導(dǎo)用戶去發(fā)現(xiàn)好友,找好友, 碰好友的一扇門。所以對(duì)于這么重要的功能放置在應(yīng)用程序的哪個(gè)位置,在產(chǎn)品前期就會(huì)讓用戶明顯的去選擇用哪個(gè)應(yīng)用,因?yàn)榱奶旃ぞ叩那疤崾且腥撕湍懔奶?。再回到現(xiàn)實(shí)的界面中來(lái),看看下面的對(duì)比:
微信1.0的時(shí)候(我這里只截了4.0的圖)把添加好友放置主Tab上,方便用戶很快的添加好友
米聊2.0時(shí)還是把添加好友放置在好友列表的第一排,用戶很難發(fā)現(xiàn)
移動(dòng)端的虛擬鍵盤一直是科技界無(wú)法解決的一個(gè)難題,虛擬鍵盤的主要缺點(diǎn):1.輸入定位無(wú)法反饋,所以無(wú)法形成的盲打;2.虛擬鍵盤的空間限制,手指的點(diǎn)擊經(jīng)常造成誤按。光是上面這兩點(diǎn)就讓虛擬鍵盤在輸入上大打折扣,所以我們?cè)谠O(shè)計(jì)應(yīng)用程序時(shí),只要遇到Input Box的控件時(shí),首先就要想到盡量讓用戶少輸入,或者智能的給出參考。
百度音樂(lè)的搜索先是把近期最熱門的歌曲依次排列在列表中,當(dāng)有字輸入時(shí),會(huì)出現(xiàn)歌手的候選詞,這里值得稱贊的是百度音樂(lè)的搜索能根據(jù)用戶輸入的字來(lái)判斷用戶是搜索歌手還是歌名。
百度地圖也是我用得比較順手的一個(gè)地圖導(dǎo)航應(yīng)用,在減少輸入方面也做的比較出色,百度地圖擁有cookies功能, 另外就是百度搜索的技術(shù)應(yīng)用在地名的匹配中也很讓人欣喜,在用戶輸入到一半的時(shí)候,下面的候選列表就出現(xiàn)了目標(biāo)地址,用戶直接停止輸入點(diǎn)擊列表即可。
全局導(dǎo)航在Web交互設(shè)計(jì)中比較容易做到,在手機(jī)移動(dòng)端全局導(dǎo)航要看產(chǎn)品設(shè)計(jì)的需求,什么功能需要全局導(dǎo)航,社交應(yīng)用通常是:消息,通知,請(qǐng)求;音樂(lè)視頻應(yīng)用通常是:下載,搜索;工具類產(chǎn)品經(jīng)常是核心工具條(tool bar) 比如瀏覽器,語(yǔ)音助理,音樂(lè)識(shí)別應(yīng)用等等。
全局導(dǎo)航的價(jià)值在于可以讓用戶在使用過(guò)程中不會(huì)丟失信息,減少主頁(yè)面和次級(jí)頁(yè)面之間的跳轉(zhuǎn)次數(shù),當(dāng)然全局導(dǎo)航中的info-task要能在當(dāng)前頁(yè)面完成,如果需要跳轉(zhuǎn)到新界面,就會(huì)失去全局導(dǎo)航的意義,因?yàn)楫?dāng)出現(xiàn)多個(gè)info-task的時(shí)候,就需要用戶不停的進(jìn)入全局導(dǎo)航頁(yè)面來(lái)完成。
Facebook 的朋友請(qǐng)求,消息,通知都是采用全局導(dǎo)航的方式,就是面板設(shè)計(jì)的丑了些~
米聊的通知中心,里面包含的通知類型蠻多的,顯得有點(diǎn)凌亂,希望下面的版本會(huì)篩選歸類
模態(tài)彈出框的書面名稱在iphone OS中稱作:Alert-box,在Android OS中稱:Pop-up box, 我們都知道彈框會(huì)打斷任務(wù)流,所以在有限的屏幕上怎樣讓這些彈框弱化,或者說(shuō)優(yōu)雅、紳士的提醒用戶,這個(gè)需要設(shè)計(jì)師來(lái)定義。
模態(tài)是指界面中只有提醒彈框才具有可交互行為,其他一切都不可操作;非模態(tài)不會(huì)把提醒做成彈框,可能會(huì)處理成List Notification, Toast list等方式來(lái)提醒用戶。
Gmail是第一個(gè)把刪除的模態(tài)彈框設(shè)計(jì)成List Notification這種方式的,提醒用戶撤銷剛才的刪除操作,這種非模態(tài)的處理,讓刪除的流程更加順暢和輕松自如。
K歌達(dá)人第二版的彈框就是模態(tài)處理,界面很不友好,用戶在K歌過(guò)程中要被打斷三次才能發(fā)表一首自己唱的歌曲,所以降低了用戶的參與度。
移動(dòng)互聯(lián)的核心就是給用戶帶來(lái)移動(dòng)體驗(yàn)的方便和,這是 移動(dòng)互聯(lián)網(wǎng)Apps需要考慮的,用戶在使用你產(chǎn)品在很多情況下都是碎片時(shí)間, 所以在設(shè)計(jì)上盡量讓用戶在短時(shí)間內(nèi)熟悉我們的產(chǎn)品,知道這個(gè)產(chǎn)品的誠(chéng)意,特別是某些等待界面需要設(shè)計(jì),不能把一個(gè)很枯燥的等待界面呈現(xiàn)在用戶的面前,那用戶很快就會(huì)換其他apps。
在Instagram 拍完照片后,點(diǎn)擊上傳后,它的處理方式是回到首頁(yè)的位置,告訴你的照片正在提交,并不是顯示一個(gè)上傳進(jìn)度的界面,讓用戶看那上傳百分比。因此,我們?cè)谠O(shè)計(jì)米吧上傳歌曲文件時(shí)也只是告知用戶后臺(tái)正在幫你上傳,叫用戶放心,用戶自然就會(huì)去玩其他的功能,沒(méi)有讓用戶焦慮的等待,等上傳完畢時(shí),我們?cè)儆肨oast list通知用戶已經(jīng)上傳成功,這樣把查看上傳結(jié)果的主動(dòng)權(quán)交給用戶。
在移動(dòng)端,由于輸入面板的復(fù)雜性,而且觸摸輸入沒(méi)有物理按鍵的反饋?zhàn)匀?,特別是手機(jī)上去輸入一段文字或者信息,對(duì)用戶而言本身就是一件很痛苦的事情;對(duì)產(chǎn)品而言,用戶的在你的產(chǎn)品中輸入是一個(gè)很值得慶幸的事情,所以設(shè)計(jì)人員需要讓你的apps自動(dòng)保存用戶的輸入成果。
微博官方的手機(jī)客戶端在用戶輸入信息后,點(diǎn)擊左上角的叉時(shí)會(huì)彈出Action sheet來(lái)詢問(wèn),確認(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ū)。
科技并不是萬(wàn)能的, 技術(shù)依然是移動(dòng)互聯(lián)網(wǎng)應(yīng)用程序最需要優(yōu)化和完善的,作為技術(shù)的盟友我們?cè)O(shè)計(jì)人員也需要輔佐他們,讓用戶覺(jué)得程序原本就應(yīng)該是這么運(yùn)行的。特別是程序響應(yīng)的速度很多時(shí)候不光是技術(shù)的問(wèn)題,與網(wǎng)絡(luò)環(huán)境也有很大的關(guān)系,這時(shí)候設(shè)計(jì)人員需要考慮這些客觀存在的情況,幫助程序來(lái)掩護(hù)這些瑕疵,讓用戶感覺(jué)到在使用時(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ù)只需要上傳剩下的一部分,讓用戶感知上傳很迅速;
#邊唱邊完成# 把伴奏和用戶的歌聲合成為一首音樂(lè)時(shí)需要后臺(tái)處理大量的數(shù)據(jù),如果分步做就要讓用戶等待比較長(zhǎng)的合成時(shí)間,為了讓用戶不用枯燥的等待合成,我們需要后臺(tái)在用戶唱歌的同時(shí),后臺(tái)就已經(jīng)開始把唱過(guò)的伴奏和歌聲合成。
以上八項(xiàng)原則是藍(lán)藍(lán)設(shè)計(jì)在工作中體會(huì)比較深刻的交互設(shè)計(jì)原則,希望能對(duì)觀看到這篇博文的朋友有所幫助。當(dāng)然設(shè)計(jì)原則是隨著時(shí)間的變化而不斷變化的,所以也請(qǐng)各位朋友完善和補(bǔ)充,謝謝!
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com