UI設計師概念設計前的思路

一、內容綱要

1.選擇設計類別

2.產(chǎn)品定義

3.原型圖繪制

3.建立視覺模型

4.視覺設計

5.包裝設計

二. 說明與舉例

1.選擇設計類別

在設計之前我們需要先確定自己要做哪一類型的app。在這里我給大家?guī)c選擇方向建議：

• 自己擅長的類型（設計風格、內容領域）。我相信很多人設計作品的出發(fā)點都是為了擴充自己的作品集，選擇自己近期擅長的類型設計，更能體現(xiàn)自身設計能力的最高水平。
• 容易呈現(xiàn)視覺效果的。不可否認的是，有些類型的App設計更能體現(xiàn)出獨特的視覺風格，通俗的說就是容易出彩。比如運動類、美食類的app往往會比閱讀類的更具有視覺張力。
• 設計流行趨勢

2.產(chǎn)品定義

雖然是概念設計，但是我們依然要從基本市場調研、競品分析入手，從而發(fā)現(xiàn)產(chǎn)品間的共性和差異化，進而梳理出自己的產(chǎn)品架構。只有前期完善的產(chǎn)品定義，才能讓后續(xù)設計有理可依，讓概念設計也能體現(xiàn)你的專業(yè)。下文以我的一個運動類App「噠噠」概念設計為例，分享思考過程。

通過市場調研和競品分析，得到「 噠噠 」的產(chǎn)品定義：

• 「 產(chǎn)品定位 」噠噠是一款運動愛好者使用的，記錄分析運動數(shù)據(jù)并提供社區(qū)交流的app。用噠噠，我們的健康更專業(yè)，更有趣。
• 「 典型用戶 」國內運動用戶以年輕高學歷人群為主，男性居多。
• 「 用戶需求 」核心需求：量化生活，讓運動和健康數(shù)據(jù)好玩好用。 基本需求：專業(yè)數(shù)據(jù)記錄與分析對比，鍛煉計劃的制定。   期望需求：獎勵機制，分享運動成果，提升用戶成就感。 興奮需求：尋找運動伙伴，增加互動，社區(qū)交流，增強運動趣味。

3.原型繪制

基于「噠噠」的產(chǎn)品定位和用戶需求，以及重要的競品分析后，確定「噠噠」的核心功能和內容，搭建信息架構。簡單示例：

在信息架構的基礎上，進行簡單的交互原型稿繪制。在草稿紙上梳理每一個主界面及重要次級界面的內容、布局，紙上繪圖會讓我們的思維更流暢。

小提示：在這這一過程中，很好的的結果是能夠得到異與競品的產(chǎn)品亮點（功能或商業(yè)模式等），并在后續(xù)的交互或視覺設計中凸顯出來。

4.建立視覺模型

根據(jù)前期清晰的產(chǎn)品定義，我們可以建立app的視覺模型。以「 噠噠 」為例：

【1】基于噠噠的產(chǎn)品定位和用戶人群，確定「 噠噠 」的視覺風格關鍵詞：激情、趣味、專業(yè)。

【2】圍繞關鍵詞，同時考慮男性用戶居多的性別，傾向通過情緒版的方法來選擇「 噠噠 」的色彩搭配。

主色選用紅色體現(xiàn)運動的激情；輔助色選用近似色橙色 ，同時橙色也是趣味的代表色；將紅色的互補色藍色作為點綴色，藍色也能夠代表一種專業(yè)性。

配色小提示：輔助色建議選擇與主色色調一致但能拉開層次感的同色系色彩或鄰近色作為輔助色；由于在一些場景中需要強調內容，因此可以選擇主色的互補色作為點綴色，也能讓界面更加活潑。

【3】提取一些符合「 噠噠 」定位的流行趨勢：數(shù)據(jù)可視化、卡片化、弱漸變。

5.視覺設計

設計之前：別急著動手，在開始做視覺設計之前，建議先尋找大量參考。很多時候參考對象的高度也一定程度決定了你設計成品的高度，特別是對于新手設計師而言。

首頁設計：我們最先開始設計的當然是app首頁。首頁設計的重要性不言而喻，不但要體現(xiàn)出產(chǎn)品的氣質和主要功能，還為后續(xù)的設計奠定了基調。

建議設計界面：界面設計范圍包括主界面和能凸顯產(chǎn)品特色的次級頁面，引導頁、注冊登錄、15頁面以上。

啟動圖標：有人會疑惑啟動圖標該什么時候設計。我的建議是至少在首頁設計完成之后，因為這時候app的視覺風格已經(jīng)形成并且也構思好了app的名稱。設計啟動圖標的過程也是一個給app加入品牌基因的好時機，比如可以由此設計出獨特的卡通圖像類圖標，增加設計的個性化，

功能圖標：功能圖標的設計非常重要，除了凸顯app的重要功能之外，也是app設計風格的重要代表。每個界面的圖標不但要符合其功能模塊的氣質，也要在整體設計風格上盡量保持一致。

引導頁：在符合產(chǎn)品調性的情況下，盡可能的引導頁上發(fā)揮你的設計能力吧。同時，建議關注流行設計趨勢。

視覺規(guī)范：要想app整體設計風格保持一致且體現(xiàn)專業(yè)感，視覺規(guī)范的建立是十分重要的。當我們設計首頁時，就應該開始建立視覺規(guī)范，包括字號、間距柵格、顏色、標準控件樣式等。

自我審核：需要注意的是一定要在手機上審核界面。首先從可用性與易用性的角度出發(fā)，反問自己是否突出了頁面的視覺重點，頁面的目的是否已經(jīng)達到，而不是僅僅強調視覺效果。再結合視覺角度分析間距、字體大小是否舒適，配色是否合理等，總之一句話，從用戶的角度思考，以設計者的角度設計。

6.包裝

界面設計完成后的包裝必不可少，且包裝本身也是設計，考驗著設計師的綜合能力。但不要忘了，包裝最根本的目的是讓內容更加完美的展示，而不是只為了追求視覺效果。我們要帶著產(chǎn)品的思維去設計包裝，通過包裝引導展現(xiàn)出App的氣質與設計亮點。

設計建議：

1、寫在最前面：還是那句話，別急著動手，在開始做包裝設計之前，建議先尋找大量參考。但是我們也一定要明確app產(chǎn)品定義，視覺風格的前提下尋找參考，而不是盲目模仿，這樣只會顯得不倫不類。

2、配色：包裝配色建議選用app的配色，這樣可以使包裝設計整體更統(tǒng)一，更重要的是能凸顯出產(chǎn)品的氣質。

3、頭圖設計：頭圖如同封面，優(yōu)秀的頭圖不但需要抓人眼球，提高瀏覽的欲望，還能充分體現(xiàn)產(chǎn)品的氣質。在頭圖中，我們可以展示出app最具代表性界面，用簡短的文字介紹你的作品。

4、展示方式：多樣式的去展示你的作品吧。

核心界面重點展示，凸顯設計亮點，讓人的視覺重點落在界面上，而非其他干擾裝飾。次級界面也許可以更多包裝，利用裝飾讓比較平凡的界面也有了亮點。

合理運用動效，展示界面交互，拉開設計的差距，讓包裝更靈動。

加上原型圖，VI展示，更綜合的表現(xiàn)你的能力，也讓包裝內容更豐富。

5、細節(jié)裝飾：細節(jié)點綴可以多采用界面設計中的元素。即能凸顯出視覺風格，也能讓整體設計更統(tǒng)一。

巧妙的素材運用可以平衡畫面，增加趣味性和設計感。但正確的裝飾素材應該與產(chǎn)品屬性相關的，而不是為了視覺效果隨意添加。

三、總結

以上就是個人關于App概念設計的一些經(jīng)驗總結，更多強調的是前期的設計分析和設計思路。通過較完善的設計流程，讓概念設計更能鍛煉和展現(xiàn)自身的設計綜合能力，希望能夠對大家有所幫助。越努力，越幸運～

相關文章--《讓軟件中的內容更友好易用的5種導航設計方式》