UI設(shè)計(jì)師概念設(shè)計(jì)前的思路

一、內(nèi)容綱要

1.選擇設(shè)計(jì)類(lèi)別

2.產(chǎn)品定義

3.原型圖繪制

3.建立視覺(jué)模型

4.視覺(jué)設(shè)計(jì)

5.包裝設(shè)計(jì)

二. 說(shuō)明與舉例

1.選擇設(shè)計(jì)類(lèi)別

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

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

2.產(chǎn)品定義

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

通過(guò)市場(chǎng)調(diào)研和競(jìng)品分析，得到「 噠噠 」的產(chǎn)品定義：

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

3.原型繪制

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

在信息架構(gòu)的基礎(chǔ)上，進(jìn)行簡(jiǎn)單的交互原型稿繪制。在草稿紙上梳理每一個(gè)主界面及重要次級(jí)界面的內(nèi)容、布局，紙上繪圖會(huì)讓我們的思維更流暢。

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

4.建立視覺(jué)模型

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

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

【2】圍繞關(guān)鍵詞，同時(shí)考慮男性用戶居多的性別，傾向通過(guò)情緒版的方法來(lái)選擇「 噠噠 」的色彩搭配。

主色選用紅色體現(xiàn)運(yùn)動(dòng)的激情；輔助色選用近似色橙色 ，同時(shí)橙色也是趣味的代表色；將紅色的互補(bǔ)色藍(lán)色作為點(diǎn)綴色，藍(lán)色也能夠代表一種專(zhuān)業(yè)性。

配色小提示：輔助色建議選擇與主色色調(diào)一致但能拉開(kāi)層次感的同色系色彩或鄰近色作為輔助色；由于在一些場(chǎng)景中需要強(qiáng)調(diào)內(nèi)容，因此可以選擇主色的互補(bǔ)色作為點(diǎn)綴色，也能讓界面更加活潑。

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

5.視覺(jué)設(shè)計(jì)

設(shè)計(jì)之前：別急著動(dòng)手，在開(kāi)始做視覺(jué)設(shè)計(jì)之前，建議先尋找大量參考。很多時(shí)候參考對(duì)象的高度也一定程度決定了你設(shè)計(jì)成品的高度，特別是對(duì)于新手設(shè)計(jì)師而言。

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

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

啟動(dòng)圖標(biāo)：有人會(huì)疑惑啟動(dòng)圖標(biāo)該什么時(shí)候設(shè)計(jì)。我的建議是至少在首頁(yè)設(shè)計(jì)完成之后，因?yàn)檫@時(shí)候app的視覺(jué)風(fēng)格已經(jīng)形成并且也構(gòu)思好了app的名稱。設(shè)計(jì)啟動(dòng)圖標(biāo)的過(guò)程也是一個(gè)給app加入品牌基因的好時(shí)機(jī)，比如可以由此設(shè)計(jì)出獨(dú)特的卡通圖像類(lèi)圖標(biāo)，增加設(shè)計(jì)的個(gè)性化，

功能圖標(biāo)：功能圖標(biāo)的設(shè)計(jì)非常重要，除了凸顯app的重要功能之外，也是app設(shè)計(jì)風(fēng)格的重要代表。每個(gè)界面的圖標(biāo)不但要符合其功能模塊的氣質(zhì)，也要在整體設(shè)計(jì)風(fēng)格上盡量保持一致。

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

視覺(jué)規(guī)范：要想app整體設(shè)計(jì)風(fēng)格保持一致且體現(xiàn)專(zhuān)業(yè)感，視覺(jué)規(guī)范的建立是十分重要的。當(dāng)我們?cè)O(shè)計(jì)首頁(yè)時(shí)，就應(yīng)該開(kāi)始建立視覺(jué)規(guī)范，包括字號(hào)、間距柵格、顏色、標(biāo)準(zhǔn)控件樣式等。

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

6.包裝

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

設(shè)計(jì)建議：

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

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

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

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

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

合理運(yùn)用動(dòng)效，展示界面交互，拉開(kāi)設(shè)計(jì)的差距，讓包裝更靈動(dòng)。

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

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

巧妙的素材運(yùn)用可以平衡畫(huà)面，增加趣味性和設(shè)計(jì)感。但正確的裝飾素材應(yīng)該與產(chǎn)品屬性相關(guān)的，而不是為了視覺(jué)效果隨意添加。

三、總結(jié)

以上就是個(gè)人關(guān)于App概念設(shè)計(jì)的一些經(jīng)驗(yàn)總結(jié)，更多強(qiáng)調(diào)的是前期的設(shè)計(jì)分析和設(shè)計(jì)思路。通過(guò)較完善的設(shè)計(jì)流程，讓概念設(shè)計(jì)更能鍛煉和展現(xiàn)自身的設(shè)計(jì)綜合能力，希望能夠?qū)Υ蠹矣兴鶐椭?。越努力，越幸運(yùn)～

相關(guān)文章--《讓軟件中的內(nèi)容更友好易用的5種導(dǎo)航設(shè)計(jì)方式》