智慧旅游產(chǎn)品設(shè)計(jì)智慧旅游項(xiàng)目實(shí)操回顧色彩主色主色指界面中占絕大部分的色彩，通常圖標(biāo)，按鈕，導(dǎo)航欄等使用主色，決定了產(chǎn)品的整體調(diào)性。當(dāng)然主色不一定保持不變，有時(shí)會(huì)根據(jù)實(shí)際情況調(diào)整明度，飽和額度等。主色60%輔色30%強(qiáng)調(diào)色10%輔色輔色僅次于主色，配合突出主色來(lái)使用，達(dá)到烘托氣氛，使界面更完整。強(qiáng)調(diào)色強(qiáng)調(diào)色與主色形成鮮明對(duì)比，在界面中占比小，但非常引人注目，通常用于需要強(qiáng)調(diào)的地方，比如氣泡提示色彩心理學(xué)所研究的是色彩通過(guò)對(duì)人視覺(jué)上的刺激，而引發(fā)人情感和感官上的變化，通過(guò)日常生活中人們對(duì)應(yīng)用色彩的經(jīng)驗(yàn)積累而歸納總結(jié)出人類對(duì)色彩心理上的預(yù)期感受。在生活中，色彩心理學(xué)對(duì)人們對(duì)顏色的認(rèn)知有很大的影響。為什么交通信號(hào)燈用紅色表示停止通行而不是綠色呢？為什么大多快餐店用紅色或黃色作為品牌的主色？這都是色彩心理學(xué)的相關(guān)知識(shí)。色彩心理學(xué)暖色冷色產(chǎn)品主色的選擇要避免飽和度過(guò)低或過(guò)高，明度過(guò)低，因此色彩選擇范圍建議在白框內(nèi)（大約1/4）取色建議（重要）配圖規(guī)范符合產(chǎn)品的定位哪個(gè)更符合商務(wù)類配圖？哪個(gè)更符合社交類配圖？保證圖片分辨率選用的圖片分辨率不低于對(duì)應(yīng)位置的分辨率，越高越好主體突出，背景干凈主體在畫(huà)面中占比最大，背景沒(méi)有雜亂元素色彩統(tǒng)一圖片中主要的顏色不要過(guò)多，盡可能少和統(tǒng)一保證文字可讀性調(diào)整圖片或文字，避免文字和關(guān)鍵元素視覺(jué)重疊人物不要裁切如果圖片上人物為主體，要保證頭部完全顯示保持一致如果有多張圖片排列，保證他們主體占圖片比例/風(fēng)格/方向/位置一致前期構(gòu)思在日常生活中我們遇到的一些難題和麻煩，稱之為“痛點(diǎn)”。我們構(gòu)思產(chǎn)品就是要從發(fā)現(xiàn)這些痛點(diǎn)開(kāi)始。比如發(fā)現(xiàn)平時(shí)站在路邊半天也遇不到出租車(chē)，為了解決打車(chē)難的問(wèn)題，于是有了打車(chē)APP；比如發(fā)現(xiàn)叫外賣(mài)只能打電話，還要和別人湊單/找零錢(qián)，為了解決點(diǎn)餐難，于是有了外賣(mài)APP；比如自拍后覺(jué)得不好看，又想發(fā)朋友圈，為了解決自拍不好看的問(wèn)題，于是有了修圖APP發(fā)現(xiàn)問(wèn)題當(dāng)然作為我們的作業(yè)，并一定要考慮那么多的商業(yè)問(wèn)題，基于自己的興趣愛(ài)好去構(gòu)思也是可以的。比如我愛(ài)看漫畫(huà)，想解決找不到好看漫畫(huà)的痛點(diǎn)，所以我想設(shè)計(jì)一款漫畫(huà)APP；比如我希望我的家鄉(xiāng)的文化被更多人知道，想解決傳統(tǒng)文化不被了解的痛點(diǎn)，所以我想設(shè)計(jì)一款宣傳家鄉(xiāng)文化的APP…自我意愿011、發(fā)現(xiàn)了什么痛點(diǎn)確定了痛點(diǎn)，自然所服務(wù)的人群也基本可以確定。比如外賣(mài)軟件的目標(biāo)人群是沒(méi)空做飯的年輕人，而年紀(jì)大的人基本不是它的目標(biāo)人群。比如修圖軟件，就是年輕的女性居多，男性會(huì)偏少。根據(jù)確定的目標(biāo)人群，我們?nèi)ミM(jìn)行總結(jié)，得到2-3個(gè)典型的特征，他們的痛點(diǎn)是什么？02目標(biāo)人群2、目標(biāo)人群是什么？他們有什么特點(diǎn)競(jìng)品分析你可能不是第一個(gè)發(fā)現(xiàn)這個(gè)痛點(diǎn)的人，所以市面上可能已經(jīng)有類似的APP了。我們要做的就是找2-3款類似的產(chǎn)品，對(duì)他們進(jìn)行分析。學(xué)習(xí)他們的優(yōu)點(diǎn)，參考他們的界面04競(jìng)品分析5、競(jìng)品分析文檔如何做競(jìng)品分析依次從范圍層/結(jié)構(gòu)層/框架層/表現(xiàn)層進(jìn)行分析解決人們對(duì)購(gòu)買(mǎi)物品沒(méi)有主見(jiàn)的痛點(diǎn)提供博主發(fā)布種草筆記和商品帶貨的功能范圍層競(jìng)品：小紅書(shū)主要功能點(diǎn)：信息瀏覽，發(fā)布筆記，購(gòu)買(mǎi)商品等羅列競(jìng)品的功能點(diǎn)，并用思維導(dǎo)圖繪制出來(lái)一般來(lái)說(shuō)tabbar的圖標(biāo)名稱是分類的重要依據(jù)。可使用在線思維導(dǎo)圖網(wǎng)站繪制信息架構(gòu)圖結(jié)構(gòu)層//小紅書(shū)功能點(diǎn)：瀏覽筆記，點(diǎn)贊評(píng)論，發(fā)布筆記，購(gòu)買(mǎi)商品，消息通知等對(duì)2-3個(gè)競(jìng)品進(jìn)行截圖，按照“主要一級(jí)二級(jí)頁(yè)面”和“主要流程頁(yè)面”進(jìn)行截圖，并把他們按照使用流程放在一張圖上框架層測(cè)量界面的色值，總結(jié)出品牌色/輔助色/強(qiáng)調(diào)色/字體顏色04顏色信息架構(gòu)根據(jù)競(jìng)品分析，對(duì)比自己設(shè)想的產(chǎn)品。有哪些功能點(diǎn)是必須的，有哪些是可有可無(wú)的，有哪些使我們可以參考的。參照競(jìng)品，對(duì)自己設(shè)想的APP功能點(diǎn)進(jìn)行整體的梳理和修改，然后把自己設(shè)計(jì)的產(chǎn)品的功能點(diǎn)進(jìn)行羅列制作信息架構(gòu)05信息架構(gòu)設(shè)計(jì)規(guī)范狀態(tài)欄44導(dǎo)航欄44tabbar49返回桌面組件

34搜索框32大按鈕高度48小按鈕高度32常見(jiàn)高度375*812（13mini）分辨率72色彩模式RGB設(shè)計(jì)尺寸通用一般使用16、24或32，頁(yè)面內(nèi)左右兩邊的元素都要和我們的內(nèi)邊距對(duì)齊內(nèi)邊距我們?nèi)〉闹刀际?的倍數(shù)，比如8/16/24/32等，注意根據(jù)緊密型來(lái)布局。同一組內(nèi)元素之間的間距一定比不同組的間距要大。確定好某一個(gè)組件的間距后，就要保持這一數(shù)值上下間距間距橫向的距離通常兩種方式確定：01、占位等分法：整個(gè)橫向空間均分，常用于tabbar圖標(biāo)、頂部標(biāo)簽欄切換等布局形式02、邊距刪減法：整個(gè)橫向空間均分，兩邊減去一定距離后再進(jìn)行均分，常用于金剛區(qū)圖標(biāo)，瓷片區(qū)等橫向間距間距同樣區(qū)域的形狀，因?yàn)槠湫螒B(tài)不同，造成的是視覺(jué)大小不一致在同樣的空間內(nèi)進(jìn)行調(diào)整，達(dá)到視覺(jué)上的大小一致，而非尺寸上的一致圖標(biāo)最大外框?yàn)橥獬叽?，里面圖標(biāo)實(shí)際的大小為內(nèi)尺寸圖標(biāo)由于圖形的幾何視覺(jué)差關(guān)系，強(qiáng)制中心對(duì)齊會(huì)造成錯(cuò)位感，因此需要根據(jù)視覺(jué)情況調(diào)整，達(dá)到視覺(jué)對(duì)齊如果一個(gè)圖形其中一部分面積遠(yuǎn)大于另一部分，那么就會(huì)讓這個(gè)圖形的重心產(chǎn)生偏移，必須要往較小的部分的方向移動(dòng)才能產(chǎn)生平衡。圖標(biāo)外尺寸24，內(nèi)尺寸（實(shí)際）20通常用在導(dǎo)航欄圖標(biāo)比如返回，搜索或者tabbar圖標(biāo)上圖標(biāo)尺寸12，最小尺寸；通常用在下拉更多，查看更多等外尺寸28*28，內(nèi)尺寸22*22常用于一般界面上圖標(biāo)12442812244812圖標(biāo)外尺寸44，內(nèi)尺寸（實(shí)際）35通常用在無(wú)底板的金剛區(qū)圖標(biāo)，個(gè)人中心頭像，消息列表頭像等外尺寸50*50，內(nèi)尺寸32*32通常用在有底板的金剛區(qū)圖標(biāo)100PX88PX常見(jiàn)的圖標(biāo)尺寸12（小），24（常見(jiàn)），28（常見(jiàn)），44（大），50（極大）圖標(biāo)16PX14PX16PX12PX16PX12PX12PX11PX標(biāo)題：16中粗體一般用在列表標(biāo)題，導(dǎo)航欄標(biāo)題，正文：14常規(guī)體用在正文文本，彈窗文本，篩選器等標(biāo)簽：12常規(guī)體用在標(biāo)簽，列表內(nèi)屬性，提醒提示等注釋：11常規(guī)體tabbar文字，注釋，一些不重要的文字文字#222222用于標(biāo)題和正文#555555用于標(biāo)簽，如果正文和標(biāo)題同時(shí)出現(xiàn)在一個(gè)模塊內(nèi)，則正文也使用#999999用于不重要的標(biāo)簽和注釋文字色彩根據(jù)之前的色彩知識(shí)，選取主色、輔色、強(qiáng)調(diào)色，把它記在文檔中，在使用的時(shí)候直接復(fù)制粘貼。注意如果主色為黃色，則按鈕上文字應(yīng)為黑色；如果主色為其他顏色，按鈕上顏色可以為白色；白色底色上避免使用黃色字體或明度比較高的色彩色彩APP啟動(dòng)圖標(biāo)APP啟動(dòng)圖標(biāo)的形式APP啟動(dòng)圖標(biāo)的尺寸圖標(biāo)設(shè)計(jì)尺寸統(tǒng)一為1024*1024，實(shí)際尺寸不超過(guò)藍(lán)色圓形真實(shí)項(xiàng)目中，只需要提交正方形的圖形即可，系統(tǒng)會(huì)對(duì)該圖形進(jìn)行裁切，生成符合自己系統(tǒng)的圓角圖標(biāo)。如果我們想要設(shè)計(jì)出正方形圖形后預(yù)覽真實(shí)的效果，就可以用我們準(zhǔn)備的PSD模板，將正方形置入到模板中即可。APP啟動(dòng)圖標(biāo)設(shè)計(jì)步驟APP啟動(dòng)圖標(biāo)設(shè)計(jì)步驟1、聯(lián)想關(guān)鍵詞：根據(jù)產(chǎn)品特點(diǎn)聯(lián)想相關(guān)的關(guān)鍵詞2、提取元素：根據(jù)關(guān)鍵詞，找到相關(guān)的圖片參考，并提取里面有代表性和識(shí)別度的元素APP啟動(dòng)圖標(biāo)設(shè)計(jì)步驟3、嘗試飛機(jī)稿：盡可能地嘗試多種呈現(xiàn)形式，并不把他們羅列起來(lái)進(jìn)行篩選APP啟動(dòng)圖標(biāo)設(shè)計(jì)步驟4、檢查測(cè)試：把圖標(biāo)放入PSD模板，導(dǎo)出圖片后放在手機(jī)桌面截圖上，然后發(fā)送給到自己手機(jī)上，檢查在手機(jī)上的大小，圖標(biāo)是否能看清，表意是否明確。選取效果簡(jiǎn)