如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?發(fā)布者:本站 時間:2021-12-20 11:12:03
一般人對於企業(yè)產(chǎn)品的預(yù)期,可能僅停留在功能要強大,信息要安全,能夠幫助企業(yè)提高工作效率。但今時已不同往日,除此以外,人們開始更注重產(chǎn)品的用戶體驗。那么,在面對企業(yè)產(chǎn)品的設(shè)計上,有什么方法可以提升用戶體驗?zāi)?
接下來,為大家?guī)硪恍﹪鴥?nèi)外的優(yōu)秀案例以及一些設(shè)計WebApp時的思考方向。
WebApp設(shè)計要點
1.配色
顏色作為設(shè)計師傳達情感的主要元素之一。一個明確的品牌顏色,對信任度,認知度都會有大大的提升。顏色除了能為界面提升美感,也能作為功能上的輔助。在普遍頁面信息量大的企業(yè)產(chǎn)品中,往往一個有顏色的按鈕就很容易吸引用戶的視覺焦點。
Lovely是Dribbble大神KeremSuer設(shè)計的WebApp。橙色主,藍色輔助,淡灰色為底色。這個配色既色彩鮮明,淡淡的感覺更讓人長時間使用也不覺累。整體感覺和諧舒服,簡潔耐看。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
Squarespace用的是黑白配,可說是黑白配色中的皎皎者。利用大面積的留白,高質(zhì)素的圖片,配合極出色的交互,讓你每次打開一個子頁面時都存在驚喜,是筆者最喜愛的網(wǎng)頁之一。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
連Icon也盡顯Squarespace的品牌風(fēng)格。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
2.空間
經(jīng)常會發(fā)現(xiàn),很多設(shè)計師在設(shè)計WebApp及MobileApp時,會被屏幕尺寸所限制住,只專注一屏內(nèi)顯示所有信息。要知道網(wǎng)頁設(shè)計及手機界面設(shè)計不同平面設(shè)計在于,前兩者在屏幕外是有無限可能,你可以透過動畫滑動一個全新界面到當前屏幕,也可以透過上下左右滾動來查看更多內(nèi)容。因此,設(shè)計WebApp時可以更好的處理元素之間的空間。但要提醒的一點是,要注意在筆記本的尺寸底下,留白會不會過了。
一個空間處理很棒的例子,來自Dribbble。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
這個思路在屏幕尺寸有限的MobileApp上更能體現(xiàn)。對比下面兩個設(shè)計稿,左邊的留白空間是不是更大氣一些。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
3.減少線條
在扁平化設(shè)計中,間隔的處理上,嘗試多用色塊之間的對比來取代線條。減少線條可以讓你的界面顯得更簡潔?;仡^你可以嘗試一下,在設(shè)計稿中可能的去掉線條,或許會有耳目一新的感覺。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
4.考慮不同尺寸
由于大屏幕的慢慢普及,以往定在1000px闊度的網(wǎng)站已經(jīng)開始不能滿足于在大屏幕下展示。因此在設(shè)計WebApp中需要考慮在不同屏幕尺寸下,界面元素的展示方式。最基本的要求是要考慮好最大及最小的場景:1920×1080,1024×768
這是2014年初的屏幕分辨率統(tǒng)計(資料來源自CNZZ)
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
Mailchimp在responsive的處理非常優(yōu)秀。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
想更深入了解responsive,可以閱讀來自ISUX龍哥的響應(yīng)式網(wǎng)頁設(shè)計一文。
對企業(yè)產(chǎn)品設(shè)計的啟發(fā)
簡單
管你的產(chǎn)品背后邏輯很雜,但要保在呈現(xiàn)給用戶時要操作簡單而高效。
Trello是一個多人任務(wù)協(xié)作類WebApp。它的任務(wù)板只需用鼠標一拖就能輕移動任務(wù)從一個階段到另一個階段。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
Mailchimp是一個郵件制作及跟蹤的WebApp。在制作郵件模板過程都提供了一個可視化的模板。基本上只需Drag&Drop及輸入數(shù)值便可完成設(shè)計及程序上的事情。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
Invision是一個專為設(shè)計師快速制作交互模形的WebApp。它的管理頁面在分組上十分方便,可以在任何地點增加分割線,然后Drag&Drop來移動圖片所在的組別。其交互模形制作過程更是快速高效,而且可以一鍵生成連結(jié)發(fā)送給其他非Invision的用戶查看。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
漸進式呈現(xiàn)
許多WebApp都有一個通病,就是功能很多,同時又想一次把所有功能告訴用戶,結(jié)果就導(dǎo)致用戶第一次進來時,面對一個擁有龐大信息量的界面,然后還有一大輪新手提示的氣泡。很多時候,用戶就會因為手足無措或在體驗中遇到一些挫折而失去了繼續(xù)研究下去的動。為了增強產(chǎn)品對用戶的第一印象,可以嘗試使用漸進式呈現(xiàn)的理念來展示界面。
拿Trello為例,第一次登錄時界面上只會呈現(xiàn)一個項目方塊,用戶很自然地會注意并點擊這個唯一搶眼的元素,進入項目后會顯示一個任務(wù)版,點擊其中一個任務(wù)再顯示任務(wù)詳情。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
同樣是第一次使用,Trello對比Asana的表達方式是不是讓你輕得多。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
這種層層漸進的設(shè)計手法能使界面保持簡潔,增強對用戶的第一印象,降低用戶的心理負擔(dān)。類似的思維,其實在網(wǎng)頁設(shè)計中經(jīng)常會用到,例如Apple官網(wǎng)一開始只會顯示不同產(chǎn)品的入口,進入特定產(chǎn)品后可以根據(jù)自己的興趣點擊查看更多去作更深入的了解,如果一頁密密麻麻的把所有產(chǎn)品信息寫滿,這又會是另一種感覺了。更多關(guān)于漸進式呈現(xiàn)的說明,可以閱讀由ISUX推薦的設(shè)計師要懂心理學(xué)。
手機式的體驗
適量的使用動畫,能在情感上為產(chǎn)品加分不少。時下html5及css發(fā)展迅速,在網(wǎng)頁上經(jīng)常能看到一些在手機上似曾相識的體驗,這種設(shè)計除了讓人感覺特別酷之外,還可以直接廷伸到移動端,作為一種體驗上的統(tǒng)一。
Squarespace的抽屜式導(dǎo)航。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
Teambition是國內(nèi)的項目協(xié)作類WebApp,它的收件箱有如iOS7的通知中心。整體設(shè)計也很簡潔易用。
如何提升企業(yè)產(chǎn)品APP設(shè)計的用戶體驗?,PS教程,
結(jié)語
企業(yè)產(chǎn)品的目的是要服務(wù)于企業(yè),服務(wù)于人。
一直相信,Apple及Google的極簡理念是給予設(shè)計師一個很好的反思點。要把雜的企業(yè)產(chǎn)品設(shè)計得簡單有趣是很有挑戰(zhàn)性的。面對簡單,背后需要有強大的技術(shù)支持,以及設(shè)計師對改善人類生活中細節(jié)的關(guān)懷及執(zhí)著,才能真正做到簡約而不簡單。
選擇我們,優(yōu)質(zhì)服務(wù),不容錯過
1. 優(yōu)秀的網(wǎng)絡(luò)資源,強大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗,優(yōu)秀的技術(shù)和設(shè)計水平,更放心
3. 全程省心服務(wù),不必擔(dān)心自己不懂網(wǎng)絡(luò),更省心。
------------------------------------------------------------
24小時聯(lián)系電話:021-58370032
關(guān)鍵詞標簽:上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)