一般UI設計師剛到一家新公司會遇到2種情況：

公司的產品視覺構架包括規范以及到設計團隊建設都非常完備，產品體驗從第一眼看過去就很棒，可優化的地方屈指可數。

與第一種情況完全相反。

那么我們從第二種比較糟糕的情況開始總結該如何從1過渡到2，做一個設計與用戶體驗的提升。

一、基礎問題梳理

是不是時常有面試官喜歡問這樣的問題：你覺得我們的aPP有什么可以優化的地方嗎

1.一致性原則

一致性原則是雅各布尼爾森的十大交互設計原則之一，在實際項目實踐中有很強的指導性作用。

因為各式各樣的原因，一些產品的視覺設計沒有規范，由不同批次的設計師完成，導致aPP中許多界面的視覺風格都不一致。

一致性體現的方面

控件結構：比如卡片底部操作區展示（點贊／評論／分享的固定控件樣式）的統一。

視覺規范：主色調與其他輔色在各界面色值的統一，文字樣式與主體文字大小的統一。

操作反饋：用戶在使用aPP同功能時的操作統一，并得到統一的反饋，比如點擊彈窗關閉按鈕，會有統一的下滑消失反饋。

一致性的重要性

因為對于用戶來說，同樣的控件樣式／操作反饋都觸發了相同的事情，而不同的界面視覺語言打亂了用戶的界面使用慣性，給產品易用性打了折扣。

同時，視覺上的不規范也僅對設計團隊的后續版本迭代視覺規范管理有影響，對產品的品牌性也造成了一定影響，給產品帶來一種不專業感。

雖然產品經理有時并不在意aPP界面的不一致，但作為UI設計師應該以理服人推進到底。

2.視覺品牌性

通常我們給UI設計的作用定義都是通過視覺的方式優化產品體驗傳達品牌概念。aPP產品不同于我們常見的線下產品，用戶對于它的感受幾乎完全的依賴于線上界面中所提供的信息。因此除了本身的產品LOGO之外，整個aPP的UI都在傳達給用戶這個產品的定位與品牌調性。

因此如果一個aPP做出來毫無自己的調性，和N種競品像素級類似，那么產品本身也就很難從眾多的山寨中脫引而出。

3.用戶體驗漏洞

我們在這里暫時不說用戶體驗提升，先單純說缺漏。大家可能覺得只有剛剛做完1.0版本的aPP會有這樣的缺漏，成熟的aPP就不會有。

這里舉個成熟的工具型aPP的例子——墨跡天氣。

拍照／選擇圖片部分調用了iOS原生控件，很顯然這個部分算是一個設計細節缺漏吧。

另外我很想知道這個頁面右上角圖標點開后會是個大概什么內容的界面（雖然aPP第一次使用時有個黃條提示）。

最后我們回到首頁，讓我有點驚訝的是aPP第一次使用時沒有提示屏幕可以下滑看未來5天的天氣詳情。

當然也許墨跡天氣有它的數據考量，我們只能單純從視覺用戶體驗層面稍加分析。

大家應該都發現在這部分我沒有提大框架上的界面設計優化，因為其實在沒有真正去產品經理手里拿到aPP各項具體數據，了解他們針對的實際用戶群體和目前發展方向之前，aPP的設計優化也都只是停留在淺層的視覺優化層面上的。所以真正的設計提升優化還是得從了解產品本身開始。

二、如何做設計提升

你的設計從「能用」到「好用」有多遠的距離

1.學會包裝

這里說的包裝，當然不是指你把作品用各種mockup和排版包裝成blingbling的展示圖，扔到站酷上就表示你包裝成功了。

也有同學在站酷私信我，問面試總失敗的原因，看過Ta的作品之后就發現一個很嚴重的問題，作品不落地的同時過多的把作品停留在視覺包裝上而非內容的包裝。

如果你是一名在公司上班的UI設計師，那么在工作中很現實的問題就在于沒有人會輕易同意你的設計稿（除非你是業界公認的大咖），從產品經理到設計經理甚至開發都可能從配色到風格開始diss你的設計稿，那么如何從一開始就爭取到主動權呢

用完整思考路徑代替結果

無論是配色還是圖標風格，相信都會有你自己的思考過程，把這些加上「證據」（競品或大咖aPP呈現的效果等）做成完成的分析，最后用一個完整的分析代替單純的一頁設計稿。

就算還會有不同的聲音，但至少會讓自己在前期站住腳，拿到主動權，并且很有說服力。

這里給大家放一個之前幫公司做的基金詳情頁優化的一個思考路徑做參考吧。

提供更多解決方案

正如我們《超全面!從0到1正確開啟UX項目的方式》文章中說的，設計師是解決問題的，那么在發現問題到解決的過程中，單一丟出一個結果也是無法服眾的。

建議通過思考做出多種方案（不需要過多），這里也拿一個例子和大家分享。

2.設計移情

這個概念也是聽過一次騰訊的大咖設計師分享之后知道的概念，當時感覺受益匪淺。

簡化來說就是學會考慮用戶使用場景，站在用戶角度映射使用場景，考慮設計可能，把設計從能用變為好用。下面還是用例子說話。

△這是騰訊大咖分享的一款手機購票的aPP改版前，看上去也似乎可以正常使用

△這是aPP優化后的最終效果

個人覺得這是一個特別好的例子，前后對比我們可以很明顯的看出，這不單單是一個視覺優化的過程，更多在于信息的整合與收納。

同時模擬了用戶的使用情境，以模擬實物票的樣式表達線上的出票信息，使用不同地鐵線分類地鐵站代替難以點擊的字母分類（雖然個人覺得這塊還可以再優化，目前來看也少了搜索功能）。

這些改動都極大的提升了用戶的使用效率，真正從UI層面上貼近了地鐵購票aPP的核心關鍵：便捷購票。

3.培養產品思維

數據化思維

很多好學的設計師注重設計創造力與交互理論的積累，容易忽略了數據分析的重要性。這個大概也就需要在實際工作項目中去體會了。

在整個項目進行中，數據分析基本可以分為：

前期調研數據

中期測試數據

后期結果數據

這里舉一個還在獵豹做清理大師大改版時候，遇到的因為數據改變設計的例子。

因為中期測試一部分數據，用戶反饋首頁改版后顯得刺眼（因為aPP長年未做大改版，舊版主色較深），因此重新調整了改版的主色，使用了明度更貼近原版的藍色。

營銷思維

在關注數據后，我們就可以有所依據的去設計，不是如何設計好看，而是如何設計用戶更容易買單。最近有篇文章很流行《這5個丑出新高度的網站，為什么那么多人夸》，讓我想起之前Expedia特地為了日本市場重新做了一個「接地氣「的銷售網站。

△左邊為美國的Expedia，右邊為日本的Expedia.2014

日本是一個極度重視信用度的國家，美國版的Expedia對大多數日本人來說內容過少，并沒有足夠的信任感。

這個例子其實就告訴我們所有的UI設計都應該是基于實際數據的，而不是設計師的審美或者某個國外書籍里告訴你的某個交互定律。設計感與定律是參考，但決定一切的是產品的發展策略與實際數據。不同國家不同國情，并不一定適用，就比如歐美人的閱讀習慣和國人就不同。

三、被誤解的交互動效

動效在很多人眼里是和輔助一樣的存在，真的這么雞肋嗎

1.交互動效的用途區分

現在aPP中可以用到的交互動效按用途分，可以分為幾個類型：

反饋型交互動效

在使用某個功能后，反饋用戶當前aPP功能狀態切換的交互動效。涵蓋的范圍也非常廣，比如下拉loading、tabbar上的微動效等。

功能型交互動效

特定工具類、直播類等產品所需求的元素動效。比如直播時飛過的飛機、清理應用時轉動的風扇。這類動效通過擬物化設計完成特定的重要功能，增強了與用戶的互動，是特點功能的好展現方式。

過渡型交互動效

在頁面跳轉與功能銜接中起到重要作用的交互動效。好的過渡動效避免了界面快速切換時給用戶帶來的迷失，給人以極佳的使用舒適感。

趣味型交互動效

起到錦上添花、增加趣味性和品牌調性的交互動效。

△以上的例子來自dribbble

在這里我們撇開天花亂墜的飛機稿和純藝術創作不說，僅說交互動效在實際項目中的應用情況其實并非是越多越好。

在實際項目中，不同類型的aPP對動效的需求也不同，類似新聞類、深度閱讀類的產品，過度的、非必須的動效使用反而會干擾閱讀，我們應該在實際情況中考慮動效的優先取舍。

2.Lottie開源動畫庫

通常我們做的偏復雜的app動效，在實際落地過程中會遇到很多問題，比如：Gif圖失真、占內存過大、開發成本過高。

那么由airbnb開源的動畫庫Lottie就很有效的解決了這一系列問題。Lottie可以直接利用aE導出的JSON動畫文件，將其解析為原生代碼，在iOS和android設備平臺上運行。

網站欄目：超全面總結有可以提升用戶設計體驗的方法
網頁路徑：http://m.newbst.com/news/134025.html

成都網站建設公司_創新互聯，為您提供網站設計、網頁設計公司、網站制作、搜索引擎優化、品牌網站制作、外貿網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯