眾多周知,設計在很多時候都是靠靈感的閃現,移動應用的設計則更加的靈活多變,也是它成功的關鍵,為了能更好地避免設計師們走彎路,移動讓設計師們學習設計原則是有必要的,它給了設計師們一定的參考和指導,這些設計原則是各大公司累積的移動設計的重要經驗的集合,可以給我們很多的參考和啟發。
移動端界面設計的8個優化要點-網嘉科技
從用戶體驗上來說,使用移動設備聯網的用戶多屬花費零碎時間上網,不大可能有耐性的點擊很多的頁面,所以,移動網站設計時應盡量簡潔,如果你的網站需要設計購買頁面,那么從這一點出發,我們在設計購買的流程應該盡量精簡再精簡,直接省去冗余內容,放置核心信息即可,避免讓用戶產生反感的心理,那么我們在該如何優化移動端界面設計呢?
1、用戶界面應該是基于用戶的心里模型,而不是基于工程實現模型 簡單的來說,就是把后臺本來很復雜的事情通過設計符合用戶日常生活中常用的瀏覽方式或操作方式,其實這一點是設計師把生活中的細節和數據結合的凝聚點,用戶的心理模型抓的越準,界面就會越優秀。
移動端界面設計的8個優化要點-網嘉科技
左邊界面:大眾點評新版的價格的搜索就比之前改得更符合用戶心里模型。
右邊界面:食神搖搖的搖動手機找餐廳更加符合大眾用戶的心里,大家應該都有那種中午不知道去哪家餐廳就餐,那么就搖一搖來隨機抽出一個附近的餐廳。
2、培養用戶使用情景的思維方式做設計 要做到這個原則其實是很難的,需要長期的實戰經驗才能做到這點,我們都知道米聊出的比微信早,但后來被微信反超,個人認為不光是QQ幫了微信很大忙,比如用戶登錄門檻低,用戶來源,廣告打得響之類的,其實在用戶使用情景方面米聊研究的沒有微信透徹。
對于一個社交即時通訊產品,添加好友的功能是好友匯聚的來源,雖然米聊微信都綁定手機通訊錄,但話又說回來,用戶找手機通訊錄聯系人語音聊天的還是比較少,添加好友是引導用戶去發現好友,找好友,碰好友的一扇門,所以對于這么重要的功能放置在應用程序的哪個位置,在產品前期就會讓用戶明顯的去選擇用哪個應用,因為聊天工具的前提是要有人和你聊天。
3、盡量少的讓用戶輸入,輸入時盡量多給出參考 移動端的虛擬鍵盤一直是科技界無法解決的一個難題,虛擬鍵盤的主要缺點:
①、輸入定位無法反饋,所以無法形成高效的盲打;
②、虛擬鍵盤的空間限制,手指的點擊經常造成誤按。 光是上面這兩點就讓虛擬鍵盤在輸入上大打折扣,所以我們在設計應用程序時,只要遇到Input Box的控件時,首先就要想到盡量讓用戶少輸入,或者智能的給出參考。
移動端界面設計的8個優化要點-網嘉科技
百度音樂的搜索先是把近期最熱門的歌曲依次排列在列表中,當有字輸入時,會出現歌手的候選詞,這里值得稱贊的是百度音樂的搜索能根據用戶輸入的字來判斷用戶是搜索歌手還是歌名。
百度地圖也是我用得比較順手的一個地圖導航應用,在減少輸入方面也做的比較出色,百度地圖擁有cookies功能, 另外就是百度搜索的技術應用在地名的匹配中也很讓人欣喜,在用戶輸入到一半的時候,下面的候選列表就出現了目標地址,用戶直接停止輸入點擊列表即可。
4、全局導航需要一直存在,最好還能預覽其他模塊的動態 全局導航在Web交互設計中比較容易做到,在手機移動端全局導航要看產品設計的需求,什么功能需要全局導航,
(1)、社交應用通常是:消息,通知,請求;
(2)、音樂視頻應用通常是:下載,搜索;
(3)、工具類產品經常是核心工具條(tool bar)比如瀏覽器,語音助理,音樂識別應用等等。 全局導航的價值在于可以讓用戶在使用過程中不會丟失信息,減少主頁面和次級頁面之間的跳轉次數,當然全局導航中的info-task要能在當前頁面完成,如果需要跳轉到新界面,就會失去全局導航的意義,因為當出現多個info-task的時候,就需要用戶不停的進入全局導航頁面來完成。
移動端界面設計的8個優化要點-網嘉科技
5、提供非模態的反饋,不打斷任務流 模態彈出框的書面名稱在iphone OS中稱作:Alert-box,在Android OS中稱:Pop-up box,我們都知道彈框會打斷任務流,所以在有限的屏幕上怎樣讓這些彈框弱化,或者說優雅、紳士的提醒用戶,這個需要設計師來定義。 模態是指界面中只有提醒彈框才具有可交互行為,其他一切都不可操作;非模態不會把提醒做成彈框,可能會處理成List Notification,Toast list等方式來提醒用戶。
移動端界面設計的8個優化要點-網嘉科技
Gmail是第一個把刪除的模態彈框設計成List Notification這種方式的,提醒用戶撤銷剛才的刪除操作,這種非模態的處理,讓刪除的流程更加順暢和輕松自如。 K歌達人第二版的彈框就是模態處理,界面很不友好,用戶在K歌過程中要被打斷三次才能發表一首自己唱的歌曲,所以降低了用戶的參與度。
6、不要讓用戶等待任務完成,用戶還要發現更多有意思的地方 移動互聯的核心就是給用戶帶來移動體驗的方便和高效,這是移動互聯網Apps需要考慮的,用戶在使用你產品在很多情況下都是碎片時間,所以在設計上盡量讓用戶在短時間內熟悉我們的產品,知道這個產品的誠意,特別是某些等待界面需要設計,不能把一個很枯燥的等待界面呈現在用戶的面前,那用戶很快就會換其他apps。 在Instagram拍完照片后,點擊上傳后,它的處理方式是回到首頁的位置,告訴你的照片正在提交,并不是顯示一個上傳進度的界面,讓用戶看那上傳百分比。
移動端界面設計的8個優化要點-網嘉科技
因此我們在設計米吧上傳歌曲文件時也只是告知用戶后臺正在幫你上傳,叫用戶放心,用戶自然就會去玩其他的功能,沒有讓用戶焦慮的等待,等上傳完畢時,我們再用Toast list通知用戶已經上傳成功,這樣把查看上傳結果的主動權交給用戶。
7、自動保存用戶的輸入成果 在移動端,由于輸入面板的復雜性,而且觸摸輸入沒有物理按鍵的反饋自然,特別是手機上去輸入一段文字或者信息,對用戶而言本身就是一件很痛苦的事情;對產品而言,用戶的在你的產品中輸入是一個很值得慶幸的事情,所以設計人員需要讓你的apps自動保存用戶的輸入成果。
移動端界面設計的8個優化要點-網嘉科技
微博官方的手機客戶端在用戶輸入信息后,點擊左上角的叉時會彈出Action sheet來詢問,確認是否要放棄,或者保存為草稿;path的處理則更為人性化,在處于斷網的情景下,用戶依然可以發布照片和文字,當然后面聯網成功后,系統會自動上傳,只是發表時間是連網后發布的時間點;Instagram的評論也很友好,在斷網或者網絡情況不穩定的情景,用戶輸入的評論依然可以發布,后面會有一個嘆號提醒用戶稍后發布或者重試,提升了用戶參與的積極行,同時活躍了社區。
8、為了程序響應的速度,設計有時候需要擔任掩護的作用 科技并不是萬能的,技術依然是移動互聯網應用程序最需要優化和完善的,作為技術的盟友我們設計人員也需要輔佐他們,讓用戶覺得程序原本就應該是這么運行的,特別是程序響應的速度,很多時候不光是技術的問題,與網絡環境也有很大的關系,這時候設計人員需要考慮這些客觀存在的情況,幫助程序來掩護這些瑕疵,讓用戶感覺到在使用時是流暢的。
比如帖子中的“贊”,不管對參與者還是帖子作者都是激發其積極性活躍社區氛圍的重要功能,所以在程序的響應方面一定要具有可用,易用的特性,我們看左圖中,“贊”的按鈕已經現實“已贊”,同時我們看紅色框內的“菊花瓣”就知道后臺在loading贊的數據,所以這就是設計的巧妙之處,先讓用戶感知到程序是非??焖俚?,而不是等loading完之后再顯示“已贊”。 Instagram中發布帖子的時候,用戶處理完照片點擊“上傳”按鈕就看到中間的界面,這時候界面是讓用戶去為自己的帖子輸入一個主題,或者去設置分享等功能,同時我們可以看到紅色框中的“菊花瓣”,很明顯后臺已經開始傳輸剛才上傳的照片了,所以當用戶在點擊“完成”時,數據只需要上傳剩下的一部分,讓用戶感知上傳很迅速。
把伴奏和用戶的歌聲合成為一首音樂時需要后臺處理大量的數據,如果分步做就要讓用戶等待比較長的合成時間,為了讓用戶不用枯燥的等待合成,我們需要后臺在用戶唱歌的同時,后臺就已經開始把唱過的伴奏和歌聲合成。 九曲網絡點評: 總體而言,在移動平臺的界面設計上,首先要知道移動設備的局限性,才能更好的圍繞其進行巧妙地設計, 對不同的移動平臺要有一個很好的理解,這樣才能讓你的移動網站能夠適用于不同的移動平臺,同樣你可以利用平臺開發商提供的模擬器來對你的網站進行檢測。