移動(dòng)應(yīng)用中圖文列表隨處可見(jiàn)，看似平淡無(wú)奇，背后也有許多可挖掘的細(xì)節(jié)和原理。這篇文章希望能幫助大家在工作中運(yùn)用合適的方式呈現(xiàn)列表內(nèi)容。
藍(lán)藍(lán)設(shè)計(jì)(363858.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)
關(guān)于對(duì)話框（Dialog）的定義、觸發(fā)場(chǎng)景、注意事項(xiàng)和案例示意。如果大家喜歡想看其他組件用法，甚至是整個(gè)系列的設(shè)計(jì)規(guī)范，可以在評(píng)論區(qū)留言。
我們都知道做網(wǎng)頁(yè)相關(guān)的項(xiàng)目，不管是 C 端的還是 B 端的，往往都會(huì)應(yīng)用響應(yīng)式布局，用了響應(yīng)式布局，就肯定要做柵格系統(tǒng)，才能確保響應(yīng)式的正常執(zhí)行。但是，移動(dòng)端要不要用柵格，怎么用，就成為很多人困擾的問(wèn)題，我們就用今天這篇分享來(lái)解釋。
David是一個(gè)來(lái)自美國(guó)的華僑，哥大畢業(yè)后就來(lái)到了亞洲，現(xiàn)在定居北京！David是一個(gè)爸爸，也是一個(gè)創(chuàng)業(yè)者，在過(guò)去7年里都在科技教育領(lǐng)域創(chuàng)業(yè)。David相信，英語(yǔ)啟蒙能在家就能做好，于是推出線上英語(yǔ)啟蒙的小程序。
10個(gè)音樂(lè)產(chǎn)品細(xì)節(jié)剖析，看看高手是如何做設(shè)計(jì)的?。黆I設(shè)計(jì)公司
當(dāng)剖析音樂(lè)產(chǎn)品的細(xì)節(jié)時(shí)，以下是10個(gè)常見(jiàn)的音樂(lè)產(chǎn)品細(xì)節(jié)，它們展示了高手在設(shè)計(jì)中的巧妙之處：
大家好，藍(lán)藍(lán)設(shè)計(jì)今天和大家分享20款優(yōu)秀的手機(jī)界面設(shè)計(jì)欣賞，共同學(xué)習(xí)成長(zhǎng)！
我們有許多界面設(shè)計(jì)的案例，因?yàn)橛斜Ｃ軈f(xié)議不方便發(fā)出來(lái)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
藍(lán)藍(lán)設(shè)計(jì)( 363858.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
從產(chǎn)品經(jīng)理處獲取項(xiàng)目原型圖，當(dāng)獲取到原型圖后不要盲目的去進(jìn)行設(shè)計(jì)，要先分析了解整個(gè)項(xiàng)目的功能、特性、用戶群體、項(xiàng)目的定位等等，特別是對(duì)功能的疑惑處一定要找產(chǎn)品經(jīng)理溝通，只有做到對(duì)項(xiàng)目了熟于胸才能做出優(yōu)秀的設(shè)計(jì)。
當(dāng)我們對(duì)項(xiàng)目的功能、特性、用戶群體、項(xiàng)目的定位都有所了解后，還是不能馬上進(jìn)入設(shè)計(jì)環(huán)節(jié)。我們需要先對(duì)市面上同類型的產(chǎn)品進(jìn)行分析和對(duì)比，包括設(shè)計(jì)風(fēng)格、配色、排版、功能樣式等等，了解其優(yōu)劣勢(shì)，做到取長(zhǎng)補(bǔ)短，思考如何讓我們的產(chǎn)品更加的完善，這時(shí)候我們的腦海里面基本上對(duì)自己要設(shè)計(jì)的東西已經(jīng)有了一個(gè)大概的雛形。
這篇文章內(nèi)所有的數(shù)值均以2倍圖為例，使用1倍圖的同學(xué)請(qǐng)自行除以2。
現(xiàn)在UI設(shè)計(jì)通常使用的是全面屏的設(shè)計(jì)規(guī)范，全面屏的設(shè)計(jì)稿更加美觀，且做作品集的時(shí)候搭配全面屏樣機(jī)視覺(jué)效果也更加突出。通常只設(shè)計(jì)一套蘋果全面屏的設(shè)計(jì)稿，不需要另外設(shè)計(jì)安卓端設(shè)計(jì)稿，安卓端由安卓工程師自行適配。
界面：750px1624px
狀態(tài)欄：750x88px
導(dǎo)航欄：750x88px
菜單欄：750x98px
指示器：750x68px
左右邊距：32px或24px
*其中狀態(tài)欄和指示器不需要進(jìn)行額外的設(shè)計(jì)，是系統(tǒng)默認(rèn)控件，除顏色外不可改變。
頂部功能：48x48px
底部菜單欄（有文字）：48x48px
底部菜單欄（無(wú)文字）：64x64px
尺寸：36px、32px、28px、24px
顏色：正常（#333333）、輔助（#999999）、未輸入提示（#CCCCCC）
*利用文字尺寸對(duì)比和顏色對(duì)比可以得到不錯(cuò)的效果。也可以給文字顏色添加少量的藍(lán)色，讓顏色不那么呆板。
組建控件系統(tǒng)可以讓我們的設(shè)計(jì)稿更加的規(guī)范，也便于修改，可以極大的提高我們的工作效率。
所有的圖標(biāo)都需要做成控件，方便我們切圖。然后就是會(huì)重復(fù)使用的狀態(tài)欄、導(dǎo)航欄、菜單欄、指示器、列表、彈框、按鈕等控件。
除了我們常用的控件以外，顏色、投影等特殊效果、文字大小都可以保存樣式，把項(xiàng)目的配色、特殊效果、文字尺寸都保存下來(lái)，不同的設(shè)計(jì)工具有不同的保存方式，大家可以根據(jù)自己使用的設(shè)計(jì)工具進(jìn)行設(shè)置。
我們需要讓項(xiàng)目保持一個(gè)統(tǒng)一的設(shè)計(jì)風(fēng)格，讓項(xiàng)目更加的整體、統(tǒng)一、協(xié)調(diào)。不同的風(fēng)格有不同的優(yōu)勢(shì)，選對(duì)與項(xiàng)目屬性相符的設(shè)計(jì)風(fēng)格可以讓項(xiàng)目更加的出彩。
這種風(fēng)格沒(méi)找到合適的名稱，我個(gè)人一般叫它傳統(tǒng)風(fēng)格。這種設(shè)計(jì)風(fēng)格使用分割線分割小的模塊，用背景色塊分割大的模塊，特別適合列表信息。雖然給人感覺(jué)沒(méi)有特別強(qiáng)烈的設(shè)計(jì)感，但簡(jiǎn)單實(shí)用、樸實(shí)無(wú)華，層級(jí)劃分清晰明了。
卡片式風(fēng)格是借用現(xiàn)實(shí)世界中卡片的特征和概念，將一個(gè)模塊或同類型元素放到一個(gè)卡片容器類，可以增加內(nèi)容的獨(dú)立性，讓模塊劃分關(guān)系變得非常的清晰，是現(xiàn)在非常常用的一種設(shè)計(jì)方式。
常用做法是采用淺灰的背景+白色卡片的方式，卡片都帶有一定的圓角，類似于將撲克牌一張張的放在桌子上，桌面是灰色背景，每一張撲克牌就是一個(gè)卡片。也不排除暗夜模式的卡片式設(shè)計(jì)，背景會(huì)更暗一些，卡片略亮。
在傳統(tǒng)UI風(fēng)格的基礎(chǔ)上去除背景色塊和分割線，單以間距來(lái)區(qū)分模塊和元素，對(duì)親密性的應(yīng)用有較高的要求。有時(shí)候單以間距來(lái)區(qū)分模塊和元素時(shí)，可能會(huì)導(dǎo)致模塊層級(jí)不分明，所以會(huì)使用將標(biāo)題加大的形式，讓模塊與模塊之間的區(qū)分更加明顯。因?yàn)槿コ朔指罹€，留白就更多，會(huì)顯得界面更加的干凈、清爽。
新擬態(tài)是19年底在追波開(kāi)始出現(xiàn)的一種設(shè)計(jì)風(fēng)格，特點(diǎn)是使用統(tǒng)一的光源做出立體的浮雕效果，元素有厚度但沒(méi)有紋理和材質(zhì)的輕擬物風(fēng)。
常規(guī)做法是假設(shè)一個(gè)統(tǒng)一的左上方光源，給元素分別添加一個(gè)左上角和右下角的投影，左上角（被光源照射的一側(cè)）投影使用亮色，右下角投影使用暗色，讓元素可以浮起來(lái)。而在按下或選中狀態(tài)時(shí)則使用兩個(gè)內(nèi)陰影，左上角暗色右下角亮色讓元素凹下去。需要注意的是界面模塊和背景色一般是同一個(gè)顏色，所以顏色不能使用純白或純黑，否則有一側(cè)的投影就會(huì)看不見(jiàn)，通常是使用藍(lán)灰色或深灰色背景。
新擬態(tài)風(fēng)格視覺(jué)效果新穎、柔和，對(duì)比度低，看得久了會(huì)產(chǎn)生一定的視覺(jué)疲勞，研發(fā)成本也較高，所以現(xiàn)在更多的還是處于概念稿，實(shí)際項(xiàng)目中應(yīng)用較少?？梢宰鳛橐环N練習(xí)或部分功能的使用。
設(shè)計(jì)稿完成之后我們需要將圖標(biāo)等元素切圖導(dǎo)出交付給開(kāi)發(fā)，IOS和安卓需要根據(jù)要求導(dǎo)出不同倍數(shù)的png格式切圖文件。
IOS：現(xiàn)在通常是輸出2套，以@2x、@3X為后綴，也就是2倍圖、3倍圖；
Android：現(xiàn)在通常是輸出3套，xhdpi（超清，對(duì)應(yīng)IOS的2倍圖）、xxhdpi（超超清，對(duì)應(yīng)IOS的3倍圖）、xxxhdpi（超超超清），安卓切圖不需要將倍數(shù)加到切圖命名內(nèi)，而是每種尺寸單獨(dú)建立一個(gè)文件夾。
png：最常用的切圖文件格式，背景無(wú)底透明，所以在導(dǎo)出切圖文件時(shí)需要先去掉背景色（figma將畫板填充色隱藏，sketch畫板不要勾選“包含于導(dǎo)出項(xiàng)”）；
svg：矢量切圖，需要背景無(wú)底透明，部分網(wǎng)頁(yè)端項(xiàng)目可能需要svg格式的切圖文件；
bmp：部分硬件機(jī)器的項(xiàng)目需要使用的圖片格式，需要注意的是bmp無(wú)法實(shí)現(xiàn)背景透明，如果背景是透明的會(huì)自動(dòng)帶上白色，需要切圖文件把背景帶上一起切，而且figma和sketch等UI設(shè)計(jì)軟件無(wú)法直接導(dǎo)出bmp格式，需要先導(dǎo)出為png或jpg格式，再使用ps或其他工具轉(zhuǎn)換一次。
只能使用英文、下滑線、數(shù)字進(jìn)行命名，不要使用中文和特殊字符。命名方式一般是類別_位置_功能_狀態(tài)（有些切圖沒(méi)有多種狀態(tài)則不需要添加狀態(tài)命名）。
以蘋果端舉例：如底部菜單欄的首頁(yè)圖標(biāo)命名則是ico_bottom_home_nor@2x（圖標(biāo)_底部_首頁(yè)_未選中狀態(tài)）和ico_bottom_home_sel@2x（圖標(biāo)_底部_首頁(yè)_選中狀態(tài)）。
頂部的搜索圖標(biāo)沒(méi)有多個(gè)狀態(tài)，命名是ico_nav_search@2x（圖標(biāo)_頂部_搜索）。
類別一般只有3種：圖標(biāo)（icon）、圖片（image）、按鈕（button），我們通常會(huì)簡(jiǎn)寫為ico、img、btn。
狀態(tài)一般只有4種：正常（normal）、按下（press）選中（selected）、禁用（disabled），我們通常會(huì)簡(jiǎn)寫為nor、pre、sel、dis。pc端會(huì)多一種狀態(tài)：懸停（hover）。
sketch和figma等UI設(shè)計(jì)軟件可以同時(shí)導(dǎo)出多個(gè)尺寸的切圖文件和前綴/后綴，所以我們只需要設(shè)置圖標(biāo)本身的命名如ico_bottom_home_sel，而不需要每個(gè)切圖都去手動(dòng)的添加IOS后綴的@2x和@3X，以及安卓的前綴xhdpi等，在導(dǎo)出設(shè)置中設(shè)置好每個(gè)尺寸的文件夾名稱和后綴，再統(tǒng)一導(dǎo)出即可。
軟件內(nèi)部導(dǎo)出：現(xiàn)在的UI設(shè)計(jì)軟件Sketch、Figma、Mstergo等都可以直接導(dǎo)出切圖文件，只需要設(shè)置好相應(yīng)的倍數(shù)和前綴、后綴，就可以快速的導(dǎo)出切圖文件；
上傳第三方：最常用的就是將設(shè)計(jì)文件上傳至藍(lán)湖，研發(fā)人員可以在藍(lán)湖上下載自己需要的切圖文件，但在上傳藍(lán)湖之前需要把設(shè)計(jì)稿中需要切圖的元素設(shè)置為切片。
和切圖文件一起交付給開(kāi)發(fā)的還有設(shè)計(jì)稿的標(biāo)注文件，讓研發(fā)人員可以清楚地知道界面內(nèi)元素的顏色、尺寸、對(duì)齊方式、距離、透明度，文字的字體、字號(hào)、行高等。
很多設(shè)計(jì)文件都可以安裝藍(lán)湖插件，再通過(guò)插件將設(shè)計(jì)稿導(dǎo)出到藍(lán)湖，研發(fā)人員就可以便捷的查看界面的標(biāo)注。
Figma、Mastergo等在線設(shè)計(jì)軟件都可以切換為開(kāi)發(fā)者模式，只需要將研發(fā)人員邀請(qǐng)到自己的設(shè)計(jì)文件所在團(tuán)隊(duì)內(nèi)，研發(fā)人就可以查看到界面的標(biāo)注；
有部分公司有一定的保密措施，會(huì)禁止設(shè)計(jì)師使用第三方平臺(tái)或是聯(lián)網(wǎng)操作，這種情況設(shè)計(jì)也無(wú)法使用Figma、Mastergo等在線設(shè)計(jì)軟件，只能使用Sketch等客戶端，輸出標(biāo)注就需要使用相應(yīng)的插件，Sketch可以使用Sketch Measure導(dǎo)出HTML格式的標(biāo)注文件。
在項(xiàng)目上線的階段UI設(shè)計(jì)需要輔助研發(fā)提供上線應(yīng)用商店需要的項(xiàng)目預(yù)覽圖、啟動(dòng)LOGO，也需要設(shè)計(jì)補(bǔ)充出APP的啟動(dòng)頁(yè)、閃屏頁(yè)等。
上線應(yīng)用商店需要的預(yù)覽圖，通常是使用項(xiàng)目中比較有特色的幾個(gè)UI界面加以設(shè)計(jì)。
上線應(yīng)用商店必須提供的LOGO，手機(jī)中啟動(dòng)APP的入口，但不同的應(yīng)用商店有不同的尺寸，華為、蘋果、小米、三星、應(yīng)用寶等所需要的啟動(dòng)LOGO都有所不同，所以輸出多個(gè)尺寸。以蘋果App Store為例，需要以下尺寸：
啟動(dòng)頁(yè)和引導(dǎo)頁(yè)一般是和UI界面一起設(shè)計(jì)，不過(guò)需要項(xiàng)目上線后才會(huì)有其價(jià)值，所以可以先設(shè)計(jì)完項(xiàng)目的界面，在研發(fā)開(kāi)發(fā)的過(guò)程中再去設(shè)計(jì)啟動(dòng)頁(yè)和引導(dǎo)頁(yè)，只要在項(xiàng)目上線前提供給研發(fā)就可以。
當(dāng)一個(gè)項(xiàng)目上線后，只能代表我們的現(xiàn)階段的工作已經(jīng)全部完成。每個(gè)項(xiàng)目上線后都會(huì)收集用戶反饋，根據(jù)用戶反饋的信息優(yōu)化功能和界面設(shè)計(jì)，通過(guò)持續(xù)不斷的優(yōu)化、迭代讓我們的產(chǎn)品越來(lái)越好，這個(gè)過(guò)程中也需要我們UI設(shè)計(jì)不斷的去進(jìn)行調(diào)整和優(yōu)化。
藍(lán)藍(lán)設(shè)計(jì)( 363858.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
度咔是百度短視頻生態(tài)首款面向泛知識(shí)創(chuàng)作者的視頻剪輯工具，致力于降低泛知識(shí)類作者的創(chuàng)作門檻，助力生產(chǎn)優(yōu)質(zhì)的作品。
隨著產(chǎn)品的功能迭代，體驗(yàn)的逐步更新，產(chǎn)品依勢(shì)也需要打造更好的運(yùn)營(yíng)氛圍和品牌印象來(lái)建立用戶口碑、提升轉(zhuǎn)化。對(duì)此，設(shè)計(jì)側(cè)針對(duì)度咔產(chǎn)品進(jìn)行了全面的思考和分析，通過(guò)重新定義度咔運(yùn)營(yíng)視覺(jué)語(yǔ)言，明確產(chǎn)品調(diào)性，幫助用戶更新品牌認(rèn)知。
一、品牌框架搭建
產(chǎn)品的運(yùn)營(yíng)視覺(jué)不只是單純的畫面展示，其背后都有更加明確的設(shè)計(jì)理念和手段，但運(yùn)營(yíng)視覺(jué)語(yǔ)言并不是千篇一律的，首先需要明確自身定位，突出產(chǎn)品獨(dú)特性。
設(shè)計(jì)初期，我們針對(duì)同類型產(chǎn)品與用戶類型進(jìn)行了大量分析，在用戶人群劃分上度咔更具有針對(duì)性，目標(biāo)用戶是口播自媒體、知識(shí)類創(chuàng)作者。但不像專業(yè)剪輯軟件門檻那么高，度咔更多的是通過(guò)特色產(chǎn)品功能幫助作者去降低剪輯門檻，業(yè)務(wù)主要通過(guò)征稿和教程的運(yùn)營(yíng)活動(dòng)來(lái)提升用戶認(rèn)知，帶動(dòng)日活。
由此，我們梳理出度咔的品牌框架圖。以度咔「專為口播自媒體打造的剪輯工具」產(chǎn)品定位作為切入點(diǎn)，依據(jù)其自身定位和度咔區(qū)別于同類產(chǎn)品的特色功能，我們提煉出“便捷”、“智能”、“專業(yè)”產(chǎn)品核心關(guān)鍵詞。
二、定義度咔運(yùn)營(yíng)視覺(jué)語(yǔ)言
在前期創(chuàng)意階段，我們通過(guò)大量的競(jìng)品調(diào)研、創(chuàng)意發(fā)散、概念嫁接等創(chuàng)意手段，找到時(shí)下大字為主導(dǎo)的版式創(chuàng)意。簡(jiǎn)潔明確的版式結(jié)構(gòu)，適當(dāng)?shù)漠嬅媪舭?，使各元素在版面中形成具有條理清晰、富有節(jié)奏的視覺(jué)關(guān)系。這種邏輯方式，為運(yùn)營(yíng)視覺(jué)的高效、科學(xué)、嚴(yán)謹(jǐn)性提供了極大的便捷，同時(shí)也對(duì)應(yīng)了度咔便捷、智能、專業(yè)的品牌感知。
對(duì)品牌定位、業(yè)務(wù)訴求、產(chǎn)品功能進(jìn)行整合后，我們搭建以構(gòu)成、配色、元素為主的視覺(jué)語(yǔ)言框架。
與時(shí)下大字為主導(dǎo)的版式創(chuàng)意相結(jié)合，建立以大字排版，強(qiáng)構(gòu)成感為主的視覺(jué)語(yǔ)言基調(diào)。通過(guò)大量的風(fēng)格測(cè)試不斷完善視覺(jué)基調(diào)并投入到項(xiàng)目中，同時(shí)規(guī)范運(yùn)營(yíng)功能排版，搭建元素庫(kù)，通過(guò)設(shè)計(jì)手法，達(dá)到專業(yè)與簡(jiǎn)潔的平衡，統(tǒng)一的視覺(jué)基調(diào)和品牌色強(qiáng)化用戶對(duì)品牌認(rèn)知。
1、重塑視覺(jué)基調(diào)：
1）統(tǒng)一風(fēng)格
度咔以往的運(yùn)營(yíng)視覺(jué)趨于參差，導(dǎo)致整體視覺(jué)有較為強(qiáng)烈的割裂感，煥新后的視覺(jué)變得更加直率簡(jiǎn)約，以簡(jiǎn)潔的視覺(jué)風(fēng)格保證內(nèi)容傳遞的高效性。拋棄了諸多裝飾元素，取而代之的是硬網(wǎng)格，保持視覺(jué)整體和諧統(tǒng)一感，同時(shí)也傳遞出度咔便捷、智能、專業(yè)的產(chǎn)品調(diào)性。
我們對(duì)運(yùn)營(yíng)頁(yè)面進(jìn)行了布局重構(gòu)，采用白色底的背景突出文字信息，使得內(nèi)容信息傳達(dá)更加明確，突出核心內(nèi)容。在各類場(chǎng)景中，我們通過(guò)品牌色彩、圖形、符號(hào)的滲透，強(qiáng)化度咔品牌印記。
2）主題延展
根據(jù)業(yè)務(wù)訴求，保持主題性征稿活動(dòng)的特色——在強(qiáng)化功能點(diǎn)的運(yùn)營(yíng)活動(dòng)中采用3D元素和彌散漸變背景，如夏日主題將度咔符號(hào)與泳圈做3D創(chuàng)意結(jié)合，增添活動(dòng)氛圍感。
2、品牌色煥新：
1）建立度咔品牌色應(yīng)用規(guī)范。增強(qiáng)品牌識(shí)別性和記憶點(diǎn)。
首先搜集符合產(chǎn)品調(diào)性的顏色情緒版，選取整體偏明亮，識(shí)別度高的新品牌藍(lán)色。對(duì)比原來(lái)偏紫的品牌藍(lán)，現(xiàn)在升級(jí)后的藍(lán)色更顯專業(yè)智能，且更具有電子意味。
在一個(gè)科學(xué)有效的色彩系統(tǒng)里，往往包含至少兩種色彩：主色+輔助色，兩者互相搭配組合成產(chǎn)品體系的整體色彩感受，減少用戶在產(chǎn)品體驗(yàn)中對(duì)反復(fù)出現(xiàn)的主色的視覺(jué)疲勞。
我們將藍(lán)色賦予了統(tǒng)一的品牌認(rèn)知感受，并且將藍(lán)色加入到橙色里，生成了度咔特有的藍(lán)橙色系。橙色在度咔的色彩系統(tǒng)中起著至關(guān)重要的作用，為產(chǎn)品帶來(lái)積極，活力的感受，同時(shí)深黑和灰色創(chuàng)造結(jié)構(gòu)、表達(dá)邊界、建立信息層次。
以基礎(chǔ)征稿活動(dòng)為主的頁(yè)面使用度咔標(biāo)準(zhǔn)藍(lán)；在需要強(qiáng)主題和活動(dòng)氛圍的頁(yè)面加入輕量的彌散漸變色彩。
3、提升效率：
1）元素庫(kù)搭建
建立度咔元素庫(kù)，規(guī)范化運(yùn)營(yíng)活動(dòng)主視覺(jué)圖形原創(chuàng)性和創(chuàng)意性，沉淀設(shè)計(jì)資產(chǎn)。
由于后期運(yùn)營(yíng)活動(dòng)多處用到3D元素，對(duì)3D的質(zhì)感進(jìn)行了規(guī)范統(tǒng)一。輕量化的3D風(fēng)格更加注重極簡(jiǎn)主義理性美學(xué)。
考慮到運(yùn)營(yíng)頁(yè)面的通用性，避免3D材質(zhì)的喧賓奪主，材質(zhì)風(fēng)格以簡(jiǎn)單通用為主，顏色以品牌色為基礎(chǔ)，采用光感通透的玻璃材質(zhì)，加入環(huán)境光感。明朗，透?jìng)鞫冗堑钠放茪赓|(zhì)。
四、總結(jié)
本次通過(guò)度咔運(yùn)營(yíng)視覺(jué)語(yǔ)言的搭建，無(wú)論從產(chǎn)品本身還是設(shè)計(jì)側(cè)，在數(shù)據(jù)和效率上都有明顯的提升。而設(shè)計(jì)作為和用戶最近的一方，在平衡各方訴求后呈現(xiàn)給用戶一個(gè)全新專業(yè)感十足的產(chǎn)品，進(jìn)一步向用戶傳達(dá)品牌感知，助力創(chuàng)作者發(fā)現(xiàn)更多美好。
感謝閱讀，以上內(nèi)容均由百度MEUX團(tuán)隊(duì)原創(chuàng)設(shè)計(jì)，以及百度MEUX版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處，違者必究，謝謝您的合作。申請(qǐng)轉(zhuǎn)載授權(quán)后臺(tái)回復(fù)【轉(zhuǎn)載】。也歡迎加入MEUX,視覺(jué)/交互/運(yùn)營(yíng)設(shè)計(jì)師，可投簡(jiǎn)歷至MEUX@BAIDU.COM (注明信息獲取來(lái)源如：站酷）
關(guān)于我們：
MEUX,百度移動(dòng)生態(tài)用戶體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。服務(wù)的產(chǎn)品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業(yè)產(chǎn)品等。MEUX以「簡(jiǎn)單極致」為設(shè)計(jì)理念，創(chuàng)造極致用戶體驗(yàn)的同時(shí)賦能商業(yè)，推動(dòng)設(shè)計(jì)行業(yè)的價(jià)值和影響力，讓生活因設(shè)計(jì)而更美好。
藍(lán)藍(lán)設(shè)計(jì)( 363858.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
借此機(jī)會(huì)和大家交流一下項(xiàng)目背后的思考，共同進(jìn)步！
我將從以下幾個(gè)方面進(jìn)行講解：
01 對(duì)于理念的思考
02 關(guān)于風(fēng)格的思考
03 關(guān)于背景的思考
04 關(guān)于材質(zhì)的思考
對(duì)于本次設(shè)計(jì)，需求方是沒(méi)有給主題限制的，那作為設(shè)計(jì)師的我就從自身現(xiàn)階段的生活去發(fā)現(xiàn)主題、尋找靈感。 從深圳到成都創(chuàng)業(yè)，將近一年的時(shí)間，我發(fā)現(xiàn)成都的天氣總是陰沉沉的：
充足的陽(yáng)光變得非常稀缺，對(duì)于成都人來(lái)說(shuō)，如果有陽(yáng)光的時(shí)候，都會(huì)去外面坐坐，曬曬太陽(yáng)！ 這一年，“光”對(duì)我說(shuō)是一種期盼的事物：
基于這個(gè)生活細(xì)節(jié)，我就把主題定成了“追光空間”而我對(duì)于“追光空間”的理解就是：光感、純凈、靈動(dòng)
后面的執(zhí)行也是基于這個(gè)理念進(jìn)行思考創(chuàng)新的！
有了主題，就可以基于主題去思考設(shè)計(jì)風(fēng)格了。
其實(shí)主題圖標(biāo)的設(shè)計(jì)其實(shí)已經(jīng)有很多年頭了，尤其是“app”這個(gè)概念流行開(kāi)始，各大安卓手機(jī)品牌就有了自己的主題商店，用戶可以根據(jù)喜好下載自己喜歡的主題圖標(biāo)。 我們?cè)诰W(wǎng)上搜索主題圖標(biāo)，可以看到很多作品，其中不乏有非常優(yōu)秀的主題作品，但是當(dāng)觀察的量到達(dá)一定程度后，會(huì)發(fā)現(xiàn)市面上的主題圖標(biāo)風(fēng)格還是比較相似，大部分還都是屬于二維圖標(biāo)（下圖源自網(wǎng)絡(luò)）：
即使是一些質(zhì)感很強(qiáng)的圖標(biāo)，很多也是鼠繪出來(lái)的，也不算是3D風(fēng)格（下圖源自7years）：
包括我們?nèi)ツ杲o小米做的幾套主題，也都是偏2維風(fēng)格的
基于這樣的現(xiàn)象，我們是否可以嘗試將3d風(fēng)格與主題圖標(biāo)進(jìn)行融合呢？雖然不能說(shuō)是第一個(gè)這么做的，但至少在市面上出現(xiàn)的這種結(jié)合還是相對(duì)較少，所以也可以算是一種小的創(chuàng)新。
在構(gòu)想風(fēng)格的時(shí)候，我的底層邏輯就是找到未被發(fā)現(xiàn)的切入點(diǎn)，如何理解呢？
如果是3d風(fēng)格與電商活動(dòng)結(jié)合，已經(jīng)相對(duì)常見(jiàn)了（下圖源自網(wǎng)絡(luò)）：
如果是3d風(fēng)格與游戲視覺(jué)結(jié)合，也經(jīng)常會(huì)看到（下圖源自網(wǎng)絡(luò)）：
但是如果是3d風(fēng)格與主題圖標(biāo)結(jié)合并且落地使用，那還是相對(duì)比較少的，這就是我在思考風(fēng)格時(shí)候的一點(diǎn)心得：
希望可以給同行們一點(diǎn)啟發(fā)，拋磚引玉，希望市面上可以看到更多的3d風(fēng)格的主題圖標(biāo)！
這次的主題和以往不一樣，我們每做一個(gè)圖標(biāo)需要延展4個(gè)尺寸：
有一些寬的、有一些高的，如果我們只放一個(gè)圖標(biāo)，那么會(huì)比較空曠，不夠飽滿，所以我們必須在背景上加一些圖案或者紋理，使整體更加飽滿精致。
背景紋理怎么做呢？我們希望它有細(xì)節(jié)但又不能過(guò)于搶眼，于是把目光鎖定在了基礎(chǔ)形狀上面，比如方形、圓形、三角形等等：
鎖定基礎(chǔ)形之后，就需要在基礎(chǔ)形之上融入更多的設(shè)計(jì)思考，比如風(fēng)格的結(jié)合，因?yàn)檎w是3d風(fēng)格，所以背景也可以是3d化的基礎(chǔ)形白膜：
除此之外，我們需要將圖形進(jìn)行構(gòu)成設(shè)計(jì)，以不同的節(jié)奏和位置使其產(chǎn)生不同的美感，把基礎(chǔ)美多維度的釋放出來(lái)，比如矩形的基礎(chǔ)元素進(jìn)行構(gòu)成設(shè)計(jì)：
這樣，就可以做出不同的背景圖案，以此來(lái)解決需求目標(biāo)。
設(shè)計(jì)師一定不要輕視基礎(chǔ)，不管是技法層面還是審美層面，往往優(yōu)秀的設(shè)計(jì)都是無(wú)數(shù)個(gè)“基礎(chǔ)”堆出來(lái)的，先掌握基礎(chǔ)，才能用“基礎(chǔ)”釋放更大的能量！
其實(shí)本次的材質(zhì)，也不算難，沒(méi)有用到特殊材質(zhì)，主要有兩個(gè)關(guān)鍵點(diǎn)可以分享交流！
關(guān)于燈光
燈光我們使用的是日光燈，從軟件操作層面沒(méi)有任何技術(shù)含量，但是對(duì)于基礎(chǔ)審美會(huì)有一定的門檻，尤其是對(duì)于明暗交界線、光影對(duì)比的理解！
燈光的不同位置和大小會(huì)導(dǎo)致光影質(zhì)感的不同：
燈光曝光：
質(zhì)感太平:
物體與背景區(qū)分度不夠:
同樣的物體，不同的燈光角度和大小就會(huì)有不同的質(zhì)量等級(jí)：
只有這種基礎(chǔ)審美達(dá)標(biāo)后，我們才能繼續(xù)往后延伸。
關(guān)于材質(zhì)
對(duì)于材質(zhì)，最初我們嘗試用最簡(jiǎn)單的漫射材質(zhì)，但是發(fā)現(xiàn)缺少光澤度和細(xì)節(jié)，于是又嘗試在外部加一層玻璃材質(zhì)，形成一圈透明質(zhì)感和細(xì)節(jié)：
后面大部分的圖標(biāo)都采用這種形式進(jìn)行延展！
以上就是這次項(xiàng)目背后的一些思考
共勉！
藍(lán)藍(lán)設(shè)計(jì)( 363858.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
三星上一版本界面標(biāo)題選用細(xì)體字，頭部區(qū)域留白，卡片功能區(qū)域小，背景選用寫實(shí)簡(jiǎn)約照片，體現(xiàn)文藝感。
圓形的場(chǎng)景卡片與矩形的設(shè)備卡片形成對(duì)比，場(chǎng)景卡片與文字上下排列，更加凸顯場(chǎng)景圖片，但文字存在多行、單行顯示，這種表現(xiàn)方式會(huì)顯得凌亂。
設(shè)備卡片從上到下依次為圖標(biāo)、設(shè)備名、狀態(tài)。
新版本標(biāo)題選用粗體字，標(biāo)題區(qū)域更加緊湊，功能區(qū)域展示空間變大，背景使用抽線雙色漸變，更現(xiàn)代時(shí)尚。
功能卡片為統(tǒng)一圓角矩形，場(chǎng)景卡片圖文左右排布，底部白色卡片區(qū)域可以很好兼容多行、單行文字的情況。
設(shè)備卡片從上到下依次為圖標(biāo)、房間名、設(shè)備名、狀態(tài)。
底部新增Tab區(qū)域，細(xì)分為收藏、設(shè)備、生活、自動(dòng)化、菜單5個(gè)模塊。
風(fēng)格布局總結(jié)：新版本屏幕利用率更高，粗體字和抽象背景使得內(nèi)容更凸顯，底部的Tab提供了更多模塊入口，功能分類更合理。
舊版本只有一個(gè)首頁(yè)，功能都在此被分發(fā)，并且功能較為單一。
新版本增加收藏、設(shè)備、生活、自動(dòng)、更多模塊，對(duì)用戶使用場(chǎng)景做了細(xì)分。
界面頂部的房屋設(shè)置、添加、編輯為全局設(shè)計(jì)，不過(guò)在每個(gè)模塊中添加的內(nèi)容不同。
收藏作為用戶每次進(jìn)入App的第一屏，說(shuō)明是用戶常用的重要功能，在收藏模塊中，可以添加的內(nèi)容最多，用戶在此頁(yè)面可以完成大多數(shù)常用操作。
設(shè)備模塊是全屋設(shè)備的合集，自動(dòng)模塊是場(chǎng)景、自動(dòng)化的合集。
生活模塊主要提供家庭安全監(jiān)控信息，還可接入其他服務(wù)，例如：智能家電監(jiān)控、智能烹飪服務(wù)。
新版本設(shè)備卡片主要由設(shè)備圖標(biāo)、房間名、設(shè)備名、狀態(tài)、控制區(qū)構(gòu)成；房間名域?yàn)轭A(yù)留區(qū)，保證在不同頁(yè)面下的統(tǒng)一性。
設(shè)備在離線狀態(tài)下，右上角會(huì)顯示離線圖標(biāo)，代替控制按鈕。
只有我們提前羅列出更多的頁(yè)面顯示情況，整合并預(yù)留可變區(qū)域，才能使頁(yè)面更統(tǒng)一。
收藏模塊分為3大區(qū)域，區(qū)域1為狀態(tài)通知區(qū)；區(qū)域2為收藏的場(chǎng)景區(qū)；區(qū)域3為收藏的服務(wù)或設(shè)備。這3個(gè)區(qū)域展示順序是固定的，可以選擇是否展示，無(wú)法改變展示順序。
因?yàn)槊總€(gè)區(qū)域的卡片尺寸是不一樣的，區(qū)域固定的好處是，可以保證顯示的統(tǒng)一性。否則大小卡片穿插顯示，還可能會(huì)空缺幾個(gè)，很影響美觀。并且操控邏輯也是固定的，用戶更容易理解。
點(diǎn)擊收藏模塊右上角添加，可批量選擇內(nèi)容快速添加收藏。
在非收藏頁(yè)，長(zhǎng)按卡片，可單獨(dú)添加收藏內(nèi)容。
在設(shè)備、場(chǎng)景等新建或編輯界面，可以選擇添加至收藏的選項(xiàng)。省去了后續(xù)的單獨(dú)添加動(dòng)作。
在收藏頁(yè)，長(zhǎng)按卡片，可以進(jìn)行單獨(dú)移除操作。
在收藏編輯頁(yè)面，可以批量快速移除移除。滿足了不同的用戶需求。
首次進(jìn)入，展示的是某個(gè)房間內(nèi)的設(shè)備，通過(guò)左右滑動(dòng)進(jìn)行切換房間，三星可能想為用戶提供模糊操作來(lái)提升效率，在房間少的情況下，這種方式比較好。當(dāng)房間多了，用戶會(huì)滑動(dòng)多次才能到目標(biāo)房間；當(dāng)然三星給出了針對(duì)精確選擇的方式，點(diǎn)擊左上角的房間入口，可以選擇、編輯房間。
房間多的情況下這2種方式都不是很好的解決方案。
這里要注意的是，三星把“沒(méi)有房間”也放進(jìn)房間列表，供用戶選擇?，F(xiàn)實(shí)中，有好多設(shè)備是不屬于任何房間或者用戶暫時(shí)不想放到某個(gè)房間，增加無(wú)房間選擇可以更靈活的滿足實(shí)際使用場(chǎng)景。
在房屋編輯頁(yè)面，可以添加房間，在這里三星已經(jīng)為用戶預(yù)設(shè)了很多房間類型選項(xiàng)，用戶只需要做選擇，很方便，即使沒(méi)有要的，還可以在列表底部選擇自定義。
在設(shè)備頁(yè)面，只能添加設(shè)備、燈光組、監(jiān)控組。
用戶可以通過(guò)關(guān)鍵詞搜索、掃碼、設(shè)備類型篩選、品牌篩選進(jìn)行設(shè)備添加。
很全，幾乎涵蓋了所有的添加方式。
在添加頁(yè)面，第一步要先填寫組的名稱、選擇所在房間，第二步選擇要合并的燈，添加完成跳轉(zhuǎn)至設(shè)備組詳情，方便立即調(diào)控。
設(shè)備控制頁(yè)面采用了模塊化的設(shè)計(jì)方式，控制區(qū)域均為列表形式，不同的設(shè)備只需要替換圖標(biāo)和文字及對(duì)應(yīng)的操控列表，降低新設(shè)備重新創(chuàng)作新界面的設(shè)計(jì)成本。
長(zhǎng)按設(shè)備卡片，選擇目標(biāo)房間，可完成單個(gè)設(shè)備轉(zhuǎn)移。
選擇設(shè)備頁(yè)面右上角的移動(dòng)方式，可以批量進(jìn)行設(shè)備的轉(zhuǎn)移。
自動(dòng)模塊包含場(chǎng)景、自動(dòng)化、第三方設(shè)備，它們不具備房間屬性；
點(diǎn)擊右上角的箭頭可以展開(kāi)或收起對(duì)應(yīng)列表，方便查找內(nèi)容。
第一步，先填寫場(chǎng)景名稱、選擇圖標(biāo)、是否要添加到收藏；
第二步，選擇執(zhí)行的設(shè)備，可以根據(jù)設(shè)備名稱、房間名稱進(jìn)行快速定位，并且可以批量選擇設(shè)備；
第三步，設(shè)備添加成功后，根據(jù)需要，單獨(dú)對(duì)設(shè)備執(zhí)行狀態(tài)設(shè)置。
新建場(chǎng)景的邏輯是：先批量選擇要執(zhí)行的設(shè)備，再單獨(dú)設(shè)置執(zhí)行內(nèi)容。
這種方式的好處是，不易打斷用戶的設(shè)置思路，還可以減少操作步長(zhǎng)。
新建自動(dòng)化界面分為觸發(fā)條件、執(zhí)行內(nèi)容兩大塊；
初始狀態(tài)會(huì)為用戶提供使用描述，便于用戶操作。
可以通過(guò)時(shí)間的變化、設(shè)備狀態(tài)變化、位置變化、天氣變化、安防變化來(lái)觸發(fā)執(zhí)行命令。
將設(shè)備狀態(tài)變化作為觸發(fā)條件時(shí)，設(shè)置邏輯是，完成一個(gè)設(shè)備的設(shè)置才能設(shè)置下一個(gè)，不能批量選擇。為什么和新建場(chǎng)景的流程不一樣？可能是因?yàn)樵谠O(shè)置執(zhí)行條件時(shí)，用戶心智里認(rèn)為設(shè)備和狀態(tài)聯(lián)系更緊一些，并且條件種類不會(huì)太多。
當(dāng)添加了一個(gè)以上的設(shè)備作為觸發(fā)條件時(shí)，界面會(huì)顯示“同時(shí)滿足或滿足任何一個(gè)”的選項(xiàng)。
執(zhí)行內(nèi)容可以是控制設(shè)備、通知給用戶、運(yùn)行場(chǎng)景、改變安防模式。
可以批量選擇設(shè)備，并且可以設(shè)置執(zhí)行延遲時(shí)間、自動(dòng)復(fù)位，滿足用戶不同需求。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：土木君 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( 363858.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://363858.cn