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

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

　　ui設(shè)計(jì)流程：

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

應(yīng)用程式概念
 

　　問題定義
 

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

　　價(jià)值主張
 

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

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

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

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

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

用戶角色
 

線框
 

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

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

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

　　即時(shí)消息(查詢)
 

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

Sketches

　　Mid-fi wireframes
 

視覺語言
 

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

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

　　面試問題：
 

　　1、你為什么要使用這個(gè)程序?
 

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

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

 

設(shè)計(jì)開始工作表
 

情緒板
 

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

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

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

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

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

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

風(fēng)格瓷磚
 

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

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

　　“我喜歡第一個(gè)，因?yàn)樗谝曈X上很吸引人，我會(huì)花更多時(shí)間在應(yīng)用程序中進(jìn)行發(fā)現(xiàn)和研究。”
 

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

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

用戶界面和原型
 

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

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

用戶界面-主頁面
 

InVision原型

 

時(shí)尚指南
 

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

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