APP界面設(shè)計(jì)風(fēng)格與規(guī)范設(shè)計(jì)規(guī)范的意義設(shè)計(jì)文化體系化提升用戶體驗(yàn)吸引用戶加強(qiáng)協(xié)作提高效率設(shè)計(jì)規(guī)范一、統(tǒng)一的圖標(biāo)設(shè)計(jì)風(fēng)格×√圖標(biāo)設(shè)計(jì)風(fēng)格圖標(biāo)設(shè)計(jì)在整個(gè)APP設(shè)計(jì)中是比重較大的板塊之一，圖標(biāo)設(shè)計(jì)風(fēng)格有：線性圖標(biāo)、填充圖標(biāo)、面型圖標(biāo)、扁平圖標(biāo)、手繪風(fēng)格圖標(biāo)和擬物圖標(biāo)等。統(tǒng)一性不同表現(xiàn)形式的圖標(biāo)需保持統(tǒng)一性，相同模塊采用一種風(fēng)格的表現(xiàn)形式，如果是線性圖標(biāo)就保持一致的描邊數(shù)值圖標(biāo)在配色上面也要保持有規(guī)律的統(tǒng)一，采用相同顏色是比較常用的配色方式。設(shè)計(jì)規(guī)范二、優(yōu)化分割線界面設(shè)計(jì)最容易忽略細(xì)節(jié)處理，分割線色彩需要根據(jù)界面配色進(jìn)行調(diào)整。由于分割線的作用是區(qū)分上下信息層級(jí)和界面裝飾，配色表現(xiàn)力要低于文字信息力度，通常選擇淺色而否定深色，使界面更加簡(jiǎn)潔通透。慎用深色分割線?！痢淘O(shè)計(jì)規(guī)范三、不要過度裝飾讓界面更簡(jiǎn)潔×√設(shè)計(jì)需要準(zhǔn)確的把握“度”，過度的設(shè)計(jì)會(huì)干擾信息的傳達(dá)。減少不必要的設(shè)計(jì)元素，讓信息脫引而出，整個(gè)界面將會(huì)更加簡(jiǎn)潔清爽，也不會(huì)分散用戶的注意力。四、控制好界面中的配色數(shù)量×√一個(gè)界面出現(xiàn)3種左右的配色是相對(duì)容易把控的，如果出現(xiàn)3種以上的配色，則非常考驗(yàn)設(shè)計(jì)師功底。配色數(shù)量在選擇配色組合時(shí)，使用相似色的配色方案使顏色更加協(xié)調(diào)和交融，如果希望更鮮明地突出某些元素，選擇對(duì)比色。需控制界面的配色比重，使信息傳達(dá)不受干擾。相似色、對(duì)比色設(shè)計(jì)規(guī)范五、正確處理文字排版的層級(jí)關(guān)系×√工作中的需求總會(huì)出現(xiàn)大篇幅的文案，不能像概念設(shè)計(jì)那樣任意刪減，在文字排版時(shí)，需通過字體大小、顏色、留白、層級(jí)分割等技巧正確處理信息之間的層級(jí)關(guān)系，提高用戶對(duì)信息的識(shí)別度，把相同屬性的信息歸類設(shè)計(jì)，通過不同的留白達(dá)到層級(jí)的區(qū)分，讓整個(gè)信息排列主次分明，層級(jí)清晰。設(shè)計(jì)規(guī)范六、信息布局符合閱讀習(xí)慣×√從左到右，從上到下進(jìn)行閱讀是我們已有的習(xí)慣，如果打破這個(gè)習(xí)慣進(jìn)行視覺表現(xiàn)，會(huì)承受挑戰(zhàn)用戶體驗(yàn)的強(qiáng)大壓力。設(shè)計(jì)規(guī)范七、相同界面下圓角直角的統(tǒng)一性×√在同一個(gè)界面設(shè)計(jì)中，圓角和直角需統(tǒng)一出現(xiàn)在界面中，不要混合運(yùn)用造成視覺表達(dá)不一致。如果選擇圓角作為視覺語言，統(tǒng)一相同模塊下圓角的大小不可出現(xiàn)大小不一致的情況，讓整個(gè)界面設(shè)計(jì)的視覺語言更加規(guī)范統(tǒng)一。八、正確的表達(dá)按鈕屬性×√按鈕設(shè)計(jì)必須要清晰準(zhǔn)確地傳達(dá)當(dāng)前狀態(tài)，不能為了視覺效果而帶給用戶錯(cuò)誤的判斷，例如用戶會(huì)將深灰色按鈕理解為是禁用狀態(tài)而放棄點(diǎn)擊。按鈕的顏色、大小、風(fēng)格等會(huì)引導(dǎo)用戶進(jìn)行操作，需要強(qiáng)化的就要做得突出，不要整個(gè)界面都處于主次不明的狀態(tài)，分散用戶的注意力，削弱了界面需要傳達(dá)的主旨。APP排版布局方式界面布局方式卡片、線條、間距卡片線條間距界面布局方式卡片增加空間的利用率。01區(qū)分不同維度的內(nèi)容。02提升可操作性。03界面布局方式線條賦予每個(gè)模塊組織性，信息分組明顯，具有獨(dú)立性，另外分割線的使用可以使大量的瀏覽內(nèi)容更加統(tǒng)一。界面布局方式間距不同板塊之間的間距大小，增強(qiáng)了界面的層次感，也突出了內(nèi)容主次關(guān)系。APP界面布局六大形式九宮格式陳列館式列表式旋轉(zhuǎn)木馬式多面板式行為擴(kuò)展式APP界面布局六大形式列表式布局APP界面布局六大形式列表式布局層次展示清晰明了；視覺流線從上向下，瀏覽體驗(yàn)快捷；可展示內(nèi)容較長(zhǎng)的菜單或擁有次級(jí)文字內(nèi)容的標(biāo)題。優(yōu)點(diǎn)同級(jí)內(nèi)容過多，用戶瀏覽容易產(chǎn)生疲勞；排版靈活性不是很高；只能通過排列順序、顏色來區(qū)分各入口重要程度。缺點(diǎn)APP界面布局六大形式陳列館式布局APP界面布局六大形式陳列館式布局直觀展現(xiàn)各項(xiàng)內(nèi)容；方便瀏覽經(jīng)常更新的內(nèi)容。優(yōu)點(diǎn)不適合展現(xiàn)頂層入口框架；界面內(nèi)容過多，顯得雜亂。缺點(diǎn)APP界面布局六大形式九宮格式布局APP界面布局六大形式九宮格式布局

優(yōu)點(diǎn)清晰展現(xiàn)各入口；容易記住各入口位置，方便快速查找。

缺點(diǎn)菜單之間的跳轉(zhuǎn)要回到初始點(diǎn)；不能直接展現(xiàn)入口內(nèi)容；不能顯示入口次級(jí)內(nèi)容。APP界面布局六大形式旋轉(zhuǎn)木馬式布局APP界面布局六大形式旋轉(zhuǎn)木馬式布局單頁面內(nèi)容整體性強(qiáng)，聚焦度高；線性的瀏覽方式有順暢感、方向感。優(yōu)點(diǎn)受屏幕寬度限制，可顯示的數(shù)量較少，需要用戶進(jìn)行主動(dòng)探索；由于各頁面內(nèi)容結(jié)構(gòu)相似，容易忽略后面的內(nèi)容；不能跳躍性地查看間隔的頁面，只能按順序查看相鄰的頁面。缺點(diǎn)APP界面布局六大形式多面板式布局APP界面布局六大形式多面板式布局優(yōu)點(diǎn)：減少界面跳轉(zhuǎn)的層級(jí)；對(duì)分類有整體性的了解；分類位置固定；清楚當(dāng)前所在的入口位置。缺點(diǎn)：界面比較擁擠。APP界面布局六大形式行為擴(kuò)展式布局優(yōu)點(diǎn)：減少界面跳轉(zhuǎn)的層級(jí)；對(duì)分類有整體性的了解；清楚當(dāng)前所在的入口位置。缺點(diǎn)：分類位置不固定，當(dāng)展開的內(nèi)容比較多時(shí)，跨分類跳轉(zhuǎn)不方便。APP界面布局六大形式行為擴(kuò)展式布局APP界面設(shè)計(jì)思路APP界面設(shè)計(jì)思路與流程第一步旅游類APP競(jìng)品分析APP界面設(shè)計(jì)思路與流程第一步名稱攜程去哪兒飛豬口號(hào)讓旅行更幸福聰明你的旅行比夢(mèng)想走更遠(yuǎn)定位提供全方位的高品質(zhì)旅行預(yù)訂服務(wù)和旅行特價(jià)攻略憑借優(yōu)秀的智能搜索技術(shù)對(duì)旅行信息進(jìn)行整合，幫助旅行者聰明地旅行面向年輕消費(fèi)者的休閑度假品牌優(yōu)勢(shì)起步早，規(guī)模領(lǐng)先，體系規(guī)范，國(guó)際化進(jìn)程顯著優(yōu)秀的旅游信息搜索引擎，提供機(jī)票，酒店，度假等信息的深度搜索平臺(tái)信息公開透明，商家直面消費(fèi)者，流量大APP界面設(shè)計(jì)思路與流程第一步競(jìng)品APP視覺風(fēng)格攜程與去哪兒風(fēng)格類似，首頁都采用了塊狀圖，機(jī)票入口都在塊狀圖第二行第一格。界面結(jié)構(gòu)清晰，分類詳細(xì)，給人以“專業(yè)”之感。飛豬首頁采用了圖標(biāo)導(dǎo)航+卡片信息流的樣式，它以白色為主要背景色，黃色為點(diǎn)綴色，界面觀感更加簡(jiǎn)潔，輕松。APP界面設(shè)計(jì)思路與流程第二步山西旅游服務(wù)類APP視覺風(fēng)格確定水墨風(fēng)APP界面設(shè)計(jì)思路與流程第三步為體現(xiàn)山西旅游文化古香古色的特色，選擇了灰棕色，調(diào)整其透明度與灰黑色搭配構(gòu)造水墨風(fēng)。明亮的黃色、藍(lán)色、紅色作為點(diǎn)綴色輔助，增添APP界面的視覺靈動(dòng)性。確定山西旅游服務(wù)類APP色彩風(fēng)格APP界面設(shè)計(jì)思路與流程第四步設(shè)計(jì)山西旅游服務(wù)類APP圖標(biāo)圖標(biāo)主體色選擇能體現(xiàn)山西旅游文化古香古色特點(diǎn)的棕色，底紋的設(shè)計(jì)具有寫實(shí)性，利用山西簡(jiǎn)稱“晉”作為圖標(biāo)文字，與“美”、“善”組合，不僅體現(xiàn)了景色美，也體現(xiàn)了民風(fēng)善，與祥云搭配，增添了復(fù)古的韻味。APP界面設(shè)計(jì)思路與流程第五步設(shè)計(jì)山西旅游服務(wù)類APP排版布局