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

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

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