如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？發(fā)布者：本站     時(shí)間：2021-12-20 11:12:03

一般人對於企業(yè)產(chǎn)品的預期，可能僅停留在功能要強大，信息要安全，能夠幫助企業(yè)提高工作效率。但今時(shí)已不同往日，除此以外，人們開(kāi)始更注重產(chǎn)品的用戶(hù)體驗。那么，在面對企業(yè)產(chǎn)品的設計上，有什么方法可以提升用戶(hù)體驗呢?

接下來(lái)，為大家帶來(lái)一些國內外的優(yōu)秀案例以及一些設計WebApp時(shí)的思考方向。

WebApp設計要點(diǎn)

1.配色

顏色作為設計師傳達情感的主要元素之一。一個(gè)明確的品牌顏色，對信任度，認知度都會(huì )有大大的提升。顏色除了能為界面提升美感，也能作為功能上的輔助。在普遍頁(yè)面信息量大的企業(yè)產(chǎn)品中，往往一個(gè)有顏色的按鈕就很容易吸引用戶(hù)的視覺(jué)焦點(diǎn)。

Lovely是Dribbble大神KeremSuer設計的WebApp。橙色主，藍色輔助，淡灰色為底色。這個(gè)配色既色彩鮮明，淡淡的感覺(jué)更讓人長(cháng)時(shí)間使用也不覺(jué)累。整體感覺(jué)和諧舒服，簡(jiǎn)潔耐看。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

Squarespace用的是黑白配，可說(shuō)是黑白配色中的皎皎者。利用大面積的留白，高質(zhì)素的圖片，配合極出色的交互，讓你每次打開(kāi)一個(gè)子頁(yè)面時(shí)都存在驚喜，是筆者最喜愛(ài)的網(wǎng)頁(yè)之一。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

連Icon也盡顯Squarespace的品牌風(fēng)格。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

2.空間

經(jīng)常會(huì )發(fā)現，很多設計師在設計WebApp及MobileApp時(shí)，會(huì )被屏幕尺寸所限制住，只專(zhuān)注一屏內顯示所有信息。要知道網(wǎng)頁(yè)設計及手機界面設計不同平面設計在于，前兩者在屏幕外是有無(wú)限可能，你可以透過(guò)動(dòng)畫(huà)滑動(dòng)一個(gè)全新界面到當前屏幕，也可以透過(guò)上下左右滾動(dòng)來(lái)查看更多內容。因此，設計WebApp時(shí)可以更好的處理元素之間的空間。但要提醒的一點(diǎn)是，要注意在筆記本的尺寸底下，留白會(huì )不會(huì )過(guò)了。

一個(gè)空間處理很棒的例子，來(lái)自Dribbble。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

這個(gè)思路在屏幕尺寸有限的MobileApp上更能體現。對比下面兩個(gè)設計稿，左邊的留白空間是不是更大氣一些。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

3.減少線(xiàn)條

在扁平化設計中，間隔的處理上，嘗試多用色塊之間的對比來(lái)取代線(xiàn)條。減少線(xiàn)條可以讓你的界面顯得更簡(jiǎn)潔?；仡^你可以嘗試一下，在設計稿中可能的去掉線(xiàn)條，或許會(huì )有耳目一新的感覺(jué)。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

4.考慮不同尺寸

由于大屏幕的慢慢普及，以往定在1000px闊度的網(wǎng)站已經(jīng)開(kāi)始不能滿(mǎn)足于在大屏幕下展示。因此在設計WebApp中需要考慮在不同屏幕尺寸下，界面元素的展示方式。最基本的要求是要考慮好最大及最小的場(chǎng)景:1920×1080,1024×768

這是2014年初的屏幕分辨率統計(資料來(lái)源自CNZZ)

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

Mailchimp在responsive的處理非常優(yōu)秀。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

想更深入了解responsive，可以閱讀來(lái)自ISUX龍哥的響應式網(wǎng)頁(yè)設計一文。

對企業(yè)產(chǎn)品設計的啟發(fā)

簡(jiǎn)單

管你的產(chǎn)品背后邏輯很雜，但要保在呈現給用戶(hù)時(shí)要操作簡(jiǎn)單而高效。

Trello是一個(gè)多人任務(wù)協(xié)作類(lèi)WebApp。它的任務(wù)板只需用鼠標一拖就能輕移動(dòng)任務(wù)從一個(gè)階段到另一個(gè)階段。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

Mailchimp是一個(gè)郵件制作及跟蹤的WebApp。在制作郵件模板過(guò)程都提供了一個(gè)可視化的模板?；旧现恍鐳rag&Drop及輸入數值便可完成設計及程序上的事情。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

Invision是一個(gè)專(zhuān)為設計師快速制作交互模形的WebApp。它的管理頁(yè)面在分組上十分方便，可以在任何地點(diǎn)增加分割線(xiàn)，然后Drag&Drop來(lái)移動(dòng)圖片所在的組別。其交互模形制作過(guò)程更是快速高效，而且可以一鍵生成連結發(fā)送給其他非Invision的用戶(hù)查看。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

漸進(jìn)式呈現

許多WebApp都有一個(gè)通病，就是功能很多，同時(shí)又想一次把所有功能告訴用戶(hù)，結果就導致用戶(hù)第一次進(jìn)來(lái)時(shí)，面對一個(gè)擁有龐大信息量的界面，然后還有一大輪新手提示的氣泡。很多時(shí)候，用戶(hù)就會(huì )因為手足無(wú)措或在體驗中遇到一些挫折而失去了繼續研究下去的動(dòng)。為了增強產(chǎn)品對用戶(hù)的第一印象，可以嘗試使用漸進(jìn)式呈現的理念來(lái)展示界面。

拿Trello為例，第一次登錄時(shí)界面上只會(huì )呈現一個(gè)項目方塊，用戶(hù)很自然地會(huì )注意并點(diǎn)擊這個(gè)唯一搶眼的元素，進(jìn)入項目后會(huì )顯示一個(gè)任務(wù)版，點(diǎn)擊其中一個(gè)任務(wù)再顯示任務(wù)詳情。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

同樣是第一次使用，Trello對比Asana的表達方式是不是讓你輕得多。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

這種層層漸進(jìn)的設計手法能使界面保持簡(jiǎn)潔，增強對用戶(hù)的第一印象，降低用戶(hù)的心理負擔。類(lèi)似的思維，其實(shí)在網(wǎng)頁(yè)設計中經(jīng)常會(huì )用到，例如Apple官網(wǎng)一開(kāi)始只會(huì )顯示不同產(chǎn)品的入口，進(jìn)入特定產(chǎn)品后可以根據自己的興趣點(diǎn)擊查看更多去作更深入的了解，如果一頁(yè)密密麻麻的把所有產(chǎn)品信息寫(xiě)滿(mǎn)，這又會(huì )是另一種感覺(jué)了。更多關(guān)于漸進(jìn)式呈現的說(shuō)明，可以閱讀由ISUX推薦的設計師要懂心理學(xué)。

手機式的體驗

適量的使用動(dòng)畫(huà)，能在情感上為產(chǎn)品加分不少。時(shí)下html5及css發(fā)展迅速，在網(wǎng)頁(yè)上經(jīng)常能看到一些在手機上似曾相識的體驗，這種設計除了讓人感覺(jué)特別酷之外，還可以直接廷伸到移動(dòng)端，作為一種體驗上的統一。

Squarespace的抽屜式導航。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

Teambition是國內的項目協(xié)作類(lèi)WebApp，它的收件箱有如iOS7的通知中心。整體設計也很簡(jiǎn)潔易用。

如何提升企業(yè)產(chǎn)品APP設計的用戶(hù)體驗？,PS教程,

結語(yǔ)

企業(yè)產(chǎn)品的目的是要服務(wù)于企業(yè)，服務(wù)于人。

一直相信，Apple及Google的極簡(jiǎn)理念是給予設計師一個(gè)很好的反思點(diǎn)。要把雜的企業(yè)產(chǎn)品設計得簡(jiǎn)單有趣是很有挑戰性的。面對簡(jiǎn)單，背后需要有強大的技術(shù)支持，以及設計師對改善人類(lèi)生活中細節的關(guān)懷及執著(zhù)，才能真正做到簡(jiǎn)約而不簡(jiǎn)單。