一般 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. 學會包裝
這里說的包裝,當然不是指你把作品用各種 mock up 和排版包裝成 blingbling 的展示圖,扔到站酷上就表示你包裝成功了。
也有同學在站酷私信我,問面試總失敗的原因,看過 TA 的作品之后就發現一個很嚴重的問題,作品不落地的同時過多的把作品停留在視覺包裝上而非內容的包裝。
如果你是一名在公司上班的 UI 設計師,那么在工作中很現實的問題就在于沒有人會輕易同意你的設計稿(除非你是業界公認的大咖),從產品經理到設計經理甚至開發都可能從配色到風格開始 diss 你的設計稿,那么如何從一開始就爭取到主動權呢?
用完整思考路徑代替結果
無論是配色還是圖標風格,相信都會有你自己的思考過程,把這些加上「證據」(競品或大咖 APP 呈現的效果等)做成完成的分析,最后用一個完整的分析代替單純的一頁設計稿。
就算還會有不同的聲音,但至少會讓自己在前期站住腳,拿到主動權,并且很有說服力。
這里給大家放一個之前幫公司做的基金詳情頁優化的一個思考路徑做參考吧。
△ 基金詳情頁在 UX 改版后點擊率提升了 3 個百分點
提供更多解決方案
正如我們《超全面!從 0 到 1 正確開啟UX項目的方式》文章中說的,設計師是解決問題的,那么在發現問題到解決的過程中,單一丟出一個結果也是無法服眾的。
建議通過思考做出多種方案(不需要過多),這里也拿一個例子和大家分享。
2. 設計移情
這個概念也是聽過一次騰訊的大咖設計師分享之后知道的概念,當時感覺受益匪淺。
簡化來說就是學會考慮用戶使用場景,站在用戶角度映射使用場景,考慮設計可能,把設計從能用變為好用。下面還是用例子說話。
△ 這是騰訊大咖分享的一款手機購票的 APP 改版前,看上去也似乎可以正常使用
△ 這是 APP 優化后的最終效果
個人覺得這是一個特別完美的例子,前后對比我們可以很明顯的看出,這不單單是一個視覺優化的過程,更多在于信息的整合與收納。
同時模擬了用戶的使用情境,以模擬實物票的樣式表達線上的出票信息,使用不同地鐵線分類地鐵站代替難以點擊的字母分類(雖然個人覺得這塊還可以再優化,目前來看也少了搜索功能)。
這些改動都極大的提升了用戶的使用效率,真正從 UI 層面上貼近了地鐵購票 APP 的核心關鍵:便捷購票。
3. 培養產品思維
數據化思維
很多好學的設計師注重設計創造力與交互理論的積累,容易忽略了數據分析的重要性。這個大概也就需要在實際工作項目中去體會了。
在整個項目進行中,數據分析基本可以分為:
前期調研數據
中期測試數據
后期結果數據
這里舉一個還在獵豹做清理大師大改版時候,遇到的因為數據改變設計的例子。
因為中期測試一部分數據,用戶反饋首頁改版后顯得刺眼(因為 APP 長年未做大改版,舊版主色較深),因此重新調整了改版的主色,使用了明度更貼近原版的藍色。
營銷思維
在關注數據后,我們就可以有所依據的去設計,不是如何設計好看,而是如何設計用戶更容易買單。最近有篇文章很流行《這 5 個丑出新高度的網站,為什么那么多人夸》,讓我想起之前 Expedia 特地為了日本市場重新做了一個「接地氣「的銷售網站。
△ 左邊為美國的 Expedia ,右邊為日本的 Expedia. 2014
日本是一個極度重視信用度的國家,美國版的 Expedia 對大多數日本人來說內容過少,并沒有足夠的信任感。
這個例子其實就告訴我們所有的 UI 設計都應該是基于實際數據的,而不是設計師的審美或者某個國外書籍里告訴你的某個交互定律。設計感與定律是參考,但決定一切的是產品的發展策略與實際數據。不同國家不同國情,并不一定適用,就比如歐美人的閱讀習慣和國人就不同。
動效在很多人眼里是和輔助一樣的存在,真的這么雞肋嗎?
1. 交互動效的用途區分
現在 AP P中可以用到的交互動效按用途分,可以分為幾個類型:
反饋型交互動效
在使用某個功能后,反饋用戶當前 APP 功能狀態切換的交互動效。涵蓋的范圍也非常廣,比如下拉 loading、tabbar 上的微動效等。
功能型交互動效
特定工具類、直播類等產品所需求的元素動效。比如直播時飛過的飛機、清理應用時轉動的風扇。這類動效通過擬物化設計完成特定的重要功能,增強了與用戶的互動,是特點功能的最佳展現方式。
過渡型交互動效
在頁面跳轉與功能銜接中起到重要作用的交互動效。好的過渡動效避免了界面快速切換時給用戶帶來的迷失,給人以極佳的使用舒適感。
趣味型交互動效
起到錦上添花、增加趣味性和品牌調性的交互動效。
△ 以上的例子來自 dribbble
在這里我們撇開天花亂墜的飛機稿和純藝術創作不說,僅說交互動效在實際項目中的應用情況其實并非是越多越好。
在實際項目中,不同類型的 APP 對動效的需求也不同,類似新聞類、深度閱讀類的產品,過度的、非必須的動效使用反而會干擾閱讀,我們應該在實際情況中考慮動效的優先取舍。
2. Lottie 開源動畫庫
通常我們做的偏復雜的 app 動效,在實際落地過程中會遇到很多問題,比如:Gif 圖失真、占內存過大、開發成本過高。
那么由 Airbnb 開源的動畫庫 Lottie 就很有效的解決了這一系列問題。Lottie 可以直接利用 AE 導出的 JSON 動畫文件,將其解析為原生代碼,在 iOS 和 Android 設備平臺上運行。
固話:0530-6666000,0530-5221666
400免費電話:400-0000-325
掃一掃
了解新鮮互聯網動態
本站版權已申請通過著作權,未經授權不得轉載,違者必究---本站常年律師--李律師---