移動端產(chǎn)品網(wǎng)頁設(shè)計(jì)也就是設(shè)計(jì)師們常說的界面設(shè)計(jì),它和以往的網(wǎng)頁設(shè)計(jì)在設(shè)計(jì)上還是有很大的差別的,移動端的界面設(shè)計(jì)更需要設(shè)計(jì)師們有豐富的實(shí)戰(zhàn)經(jīng)驗(yàn),以為沒做一步都要考慮的相當(dāng)?shù)闹苋鰪?qiáng)用戶體驗(yàn),從而達(dá)到品牌的營銷。
作為一個移動端的設(shè)計(jì)的初學(xué)者,可能和我一樣,都不是十分的了解,如何進(jìn)行這樣的界面設(shè)計(jì),但是學(xué)會經(jīng)常在網(wǎng)上瀏覽相關(guān)的內(nèi)容,相信你的進(jìn)步會很大。以下就是移動端產(chǎn)品設(shè)計(jì)的五大原則。
一、用戶界面應(yīng)是基于用戶的心理模型,而不是基于工程實(shí)現(xiàn)模型
這就是把后臺本來很復(fù)雜的事情通過設(shè)計(jì)符合用戶日常生活中常用的瀏覽方式或操作方式。其實(shí)這一點(diǎn)是設(shè)計(jì)師把生活中的細(xì)節(jié)和數(shù)據(jù)結(jié)合的凝聚點(diǎn),用戶的心理模型抓的越準(zhǔn),界面就會越優(yōu)秀。
左邊界面是大眾點(diǎn)評新版的價格搜索界面,比之前改得更符合用戶心里模型;右邊界面是食神搖搖的搖動手機(jī)找餐廳,更加符合大眾用戶的心里,大家應(yīng)該都有那種中午不知道去哪家餐廳就餐,那么就搖一搖來隨機(jī)抽出一個附近的餐廳。
二、培養(yǎng)以用戶使用情景的思維方式做設(shè)計(jì)
要做到這個原則其實(shí)是很難的,需要長期的實(shí)戰(zhàn)經(jīng)驗(yàn)才能做到這點(diǎn)。
比如,我們都知道米聊出的比微信早,但后來被微信反超,個人認(rèn)為不光是QQ幫了微信很大忙,比如用戶登錄門檻低,用戶來源,廣告打得響之類的,其實(shí)在用戶使用情景方面米聊研究的沒有微信透徹。
對于一個社交即時通訊產(chǎn)品,添加好友的功能是好友匯聚的來源,雖然米聊微信都綁定手機(jī)通訊錄,但話又說回來,用戶找手機(jī)通訊錄聯(lián)系人語音聊天的還是比較少。添加好友是引導(dǎo)用戶去發(fā)現(xiàn)好友,找好友, 碰好友的一扇門。所以對于這么重要的功能放置在應(yīng)用程序的哪個位置,在產(chǎn)品前期就會讓用戶明顯的去選擇用哪個應(yīng)用,因?yàn)榱奶旃ぞ叩那疤崾且腥撕湍懔奶臁T倩氐浆F(xiàn)實(shí)的界面中來,看看下面的對比:
移動端產(chǎn)品網(wǎng)頁設(shè)計(jì)的五大原則
微信1.0的時候(我這里只截了4.0的圖)把添加好友放置主Tab上,方便用戶很快的添加好友米聊2.0時還是把添加好友放置在好友列表的第一排,用戶很難發(fā)現(xiàn)。
三、盡量少的讓用戶輸入,輸入時盡量多給出參考
移動端的虛擬鍵盤一直是科技界無法解決的一個難題,虛擬鍵盤的主要缺點(diǎn):
移動端產(chǎn)品網(wǎng)頁設(shè)計(jì)的五大原則
1.輸入定位無法反饋,所以無法形成高效的盲打;
2.虛擬鍵盤的空間限制,手指的點(diǎn)擊經(jīng)常造成誤按。
光是上面這兩點(diǎn)就讓虛擬鍵盤在輸入上大打折扣,所以我們在設(shè)計(jì)應(yīng)用程序時,只要遇到Input Box的控件時,首先就要想到盡量讓用戶少輸入,或者智能的給出參考。
百度音樂的搜索先是把近期最熱門的歌曲依次排列在列表中,當(dāng)有字輸入時,會出現(xiàn)歌手的候選詞,這里值得稱贊的是百度音樂的搜索能根據(jù)用戶輸入的字來判斷用戶是搜索歌手還是歌名。
百度地圖也是用得比較順手的一個地圖導(dǎo)航應(yīng)用,在減少輸入方面也做的比較出色,百度地圖擁有cookies功能, 另外就是百度搜索的技術(shù)應(yīng)用在地名的匹配中也很讓人欣喜,在用戶輸入到一半的時候,下面的候選列表就出現(xiàn)了目標(biāo)地址,用戶直接停止輸入點(diǎn)擊列表即可。
四、全局導(dǎo)航需要一直存在,最好還能預(yù)覽其他模塊的動態(tài)
全局導(dǎo)航在Web交互設(shè)計(jì)中比較容易做到,在手機(jī)移動端全局導(dǎo)航要看產(chǎn)品設(shè)計(jì)的需求,什么功能需要全局導(dǎo)航,社交應(yīng)用通常是:消息,通知,請求;音樂視頻應(yīng)用通常是:下載,搜索;工具類產(chǎn)品經(jīng)常是核心工具條(tool bar) 比如瀏覽器,語音助理,音樂識別應(yīng)用等等。
移動端產(chǎn)品網(wǎng)頁設(shè)計(jì)的五大原則
全局導(dǎo)航的價值在于可以讓用戶在使用過程中不會丟失信息,減少主頁面和次級頁面之間的跳轉(zhuǎn)次數(shù),當(dāng)然全局導(dǎo)航中的info-task要能在當(dāng)前頁面完成,如果需要跳轉(zhuǎn)到新界面,就會失去全局導(dǎo)航的意義,因?yàn)楫?dāng)出現(xiàn)多個info-task的時候,就需要用戶不停的進(jìn)入全局導(dǎo)航頁面來完成。
五、提供非模態(tài)的反饋,不打斷任務(wù)流
模態(tài)彈出框的書面名稱在iphone OS中稱作:Alert-box,在Android OS中稱:Pop-up box, 我們都知道彈框會打斷任務(wù)流,所以在有限的屏幕上怎樣讓這些彈框弱化,或者說優(yōu)雅、紳士的提醒用戶,這個需要設(shè)計(jì)師來定義。
模態(tài)是指界面中只有提醒彈框才具有可交互行為,其他一切都不可操作;非模態(tài)不會把提醒做成彈框,可能會處理成List Notification, Toast list等方式來提醒用戶。
移動端產(chǎn)品的網(wǎng)頁設(shè)計(jì)是引領(lǐng)未來網(wǎng)頁設(shè)計(jì)的一個潮流,希望設(shè)計(jì)們更好的學(xué)習(xí)移動端的產(chǎn)品設(shè)計(jì)。