移動應(yīng)用程序APP的UI設(shè)計流程

　　通過創(chuàng)建移動應(yīng)用程序UI設(shè)計庫，為我提供了一個很好的機會來磨練我的視覺設(shè)計技能和學(xué)習(xí)過程。UI設(shè)計庫，也稱為視覺樣式或主題，是一個自定義的圖形界面元素包，應(yīng)用于一個特定的應(yīng)用程序或網(wǎng)站，以為用戶創(chuàng)造優(yōu)雅的體驗。
 

　　ui設(shè)計流程：

　　需要注意的一件事是，該項目專注于UI / Visual設(shè)計，其中不包括UX設(shè)計。例如，用戶研究，可比評論，用戶旅程圖，信息架構(gòu)等。
 

應(yīng)用程式概念
 

　　問題定義
 

　　通過我的新應(yīng)用程序解決的問題是搜索課程和研討會的難度。對于像我這樣想要學(xué)習(xí)新事物的人來說，尋找適合他們的優(yōu)秀課程是具有挑戰(zhàn)性的。
 

　　價值主張
 

　　通常，價值主張采用陳述的形式，通常是第一句話。其主要目的是傳達(dá)客戶可以從您的產(chǎn)品中獲得的好處。
 

　　一個類似的想法是電梯音高-當(dāng)您將應(yīng)用程序概念提煉成易于記憶，引人注目的和可重復(fù)的短語時。我在她的《 UX策略》一書中遵循了杰米·利維(Jamie Levy)的價值主張公式。
 

　　它是<客戶類型或客戶需求>的<著名平臺或應(yīng)用程序>。
 

　　引入BetterMe —“為課程和講習(xí)班做準(zhǔn)備。”
 

　　它是一個課程列表應(yīng)用程序，可以幫助多倫多的人們以便捷的方式查找課程和講習(xí)班。
 

用戶角色
 

線框
 

　　在對用戶目標(biāo)和行為有了更好的了解之后，我在下面列出了該應(yīng)用程序的一些關(guān)鍵功能，以便創(chuàng)建低保真線框。
 

　　課程列表(按熱門，附近，即將到來的適合您的順序排序)
 

　　搜索(按類別，類型，價格范圍，位置，等級等過濾)
 

　　即時消息(查詢)
 

　　用戶個人資料(游戲化，學(xué)習(xí)列表)
 

Sketches

　　Mid-fi wireframes
 

視覺語言
 

　　語言由可以組合在一起以創(chuàng)建消息的不同類型的單詞組成。視覺語言就像其他任何語言一樣。視覺語言可以分為顏色，空間，形狀和運動。
 

　　我采訪了一些用戶以了解他們的需求，并發(fā)現(xiàn)了該應(yīng)用程序的心情，以進(jìn)一步定義視覺語言。
 

　　面試問題：
 

　　1、你為什么要使用這個程序?
 

　　2、什么樣的心情會有助于滿足這些需求?
 

　　3、您如何通過視覺語言傳達(dá)這種情緒?(顏色，空間，形狀和運動。

 

設(shè)計開始工作表
 

情緒板
 

　　作為設(shè)計師，我們旨在優(yōu)化和加快我們的流程。Atomic Design的想法是允許UX設(shè)計人員，UI設(shè)計人員和前端開發(fā)人員并行工作，而不是瀑布式過程。
 

　　我們?nèi)绾卧O(shè)計視覺效果，以便在早期呈現(xiàn)給客戶?
 

　　情緒板是設(shè)計過程中的視覺可交付成果之一。它是一個拼貼畫，通常由圖像，文本和對象組成，這些拼貼畫描述了除了頁面的實際布局之外，我們通過數(shù)字產(chǎn)品獲得的感覺。
 

　　我創(chuàng)建了兩個獨特的情緒板來展示針對不同用戶組的感受。第一個是安靜，干凈，最小的，適合于學(xué)習(xí)和研究的目的。第二個是令人興奮的，年輕的和快節(jié)奏的，傳達(dá)了熱情和積極的情緒。
 

情緒板(左-V1;右-V2)
 

　　然而， 情緒板對于許多人來說可能過于抽象，因為預(yù)測情緒板如何顯示為有形的視覺設(shè)計元素具有挑戰(zhàn)性。
 

風(fēng)格瓷磚
 

　　樣式圖塊是有形的視覺設(shè)計元素(如調(diào)色板，字體或按鈕樣式)的拼貼，有助于與利益相關(guān)者交流具體的視覺語言。它彌合了情緒板和線框之間的差距。在早期階段獲得設(shè)計反饋非常有用。
 

　　樣式圖塊可幫助人們可視化各個元素的組合方式。我采訪了15個朋友，以選擇他們喜歡的風(fēng)格。原來，有2/3的人更喜歡第一種視覺風(fēng)格。這是一些報價。
 

　　“我喜歡第一個，因為它在視覺上很吸引人，我會花更多時間在應(yīng)用程序中進(jìn)行發(fā)現(xiàn)和研究。”
 

　　“第一個是簡約的。我比圖片更喜歡圖標(biāo)。”
 

　　“第二種風(fēng)格更令人興奮，但在我看來，對于課程列表應(yīng)用程序來說有點過分。”
 

用戶界面和原型
 

　　“如果一張圖片價值1000字，那么一個原型價值1000場會議。” 創(chuàng)意
 

　　在確定視覺樣式之后，我將其應(yīng)用于中等保真度的線框并進(jìn)行了一些設(shè)計迭代。然后，我使用以下高保真用戶界面創(chuàng)建了交互式InVision原型。
 

用戶界面-主頁面
 

InVision原型

 

時尚指南
 

　　樣式指南 是一套建立和實施樣式以改善溝通的標(biāo)準(zhǔn)。它統(tǒng)一了設(shè)計標(biāo)準(zhǔn)，并極大地影響了團隊的生產(chǎn)力。
 

　　風(fēng)格來來去去。好的設(shè)計是一種語言，而不是一種風(fēng)格。