細(xì)分移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)模式

在講解列表之前，我先跟大家介紹一下一個(gè)經(jīng)典的交互設(shè)計(jì)框架，這個(gè)框架復(fù)合了一般用戶(hù)的使用習(xí)慣，同時(shí)也是人們處理信息的基本模式——“首頁(yè)——列表頁(yè)——詳情頁(yè)”。

 

“首頁(yè)——列表頁(yè)——詳情頁(yè)”是互聯(lián)網(wǎng)發(fā)展過(guò)程中逐漸形成的一般規(guī)律，謂之為互聯(lián)網(wǎng)發(fā)展的經(jīng)典框架也不為過(guò)。為什么呢？因?yàn)榛ヂ?lián)網(wǎng)最開(kāi)始的時(shí)候，信息量并不大，所以有一個(gè)詳情頁(yè)就足夠了。后來(lái)因?yàn)樾畔⒘恐饾u增多，自然而然就會(huì)出現(xiàn)篩選信息的需求，因此就出現(xiàn)了列表頁(yè)。后來(lái)，列表頁(yè)再也無(wú)法承載指數(shù)級(jí)增長(zhǎng)的信息了，所以搜索的功能應(yīng)運(yùn)而生，于是便出現(xiàn)了首頁(yè)（入口）。

 

觀察互聯(lián)網(wǎng)早期發(fā)展的歷史可以得到佐證：剛開(kāi)始的時(shí)候有雅虎和美國(guó)在線等幾個(gè)新聞?wù)军c(diǎn)就足以滿(mǎn)足人們獲取資訊的需求了，后來(lái)因?yàn)樾畔⒅饾u增多，所以急需篩選和搜索信息，于是谷歌就崛起了，成為下一個(gè)流量入口。中國(guó)互聯(lián)網(wǎng)的歷史進(jìn)程也大致相同：互聯(lián)網(wǎng)第一波浪潮是搜狐、新浪等門(mén)戶(hù)網(wǎng)站，第二波才是百度。

 

可以說(shuō)“首頁(yè)——列表頁(yè)——詳情頁(yè)”不僅僅可以應(yīng)用到互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)中去，它更是一種很重要的思維方式，可以應(yīng)用于日常生活中的方方面面。

 

以上介紹了列表是如何產(chǎn)生的，也提到了用戶(hù)在列表頁(yè)上的主要行為就是對(duì)信息進(jìn)行篩選和比較，以便讓其做出決策，決定進(jìn)入哪個(gè)具體條目去了解相關(guān)詳情。因此列表頁(yè)承載的是用戶(hù)對(duì)下一層信息的概況了解，是詳情頁(yè)信息的縮略版。

 

如果列表中的條目比較多，那么列表就會(huì)包含某些排序規(guī)則或分組規(guī)則，這樣會(huì)讓列表中條目的呈現(xiàn)方式規(guī)律一點(diǎn)，以便用戶(hù)快速查找。有的會(huì)按照時(shí)間順序來(lái)排序，有的會(huì)按照字母表來(lái)排序，也有的會(huì)用標(biāo)簽進(jìn)行分組等等。假如條目很多，一個(gè)頁(yè)面放不下，那就需要分頁(yè)，所以列表頁(yè)底部常常會(huì)出現(xiàn)翻頁(yè)器。有時(shí)也會(huì)出現(xiàn)“無(wú)限加載”這種處理方式，例如花瓣。假如信息更多的話，那就需要加入搜索功能了。

 

好了，接下來(lái)我們要介紹是：列表的具體形式。

 

 

• 垂直式列表 •

 

垂直式列表是列表的最基本形式，無(wú)論是移動(dòng)端還是PC端都可以看到這種布局方式。這是一種非常干凈和清晰的列表呈現(xiàn)方式，用戶(hù)非常容易理解，也很容易找到自己想要的目標(biāo)。

需要注意的是，用戶(hù)的瀏覽習(xí)慣一般都是“從左往右，從上往下”的，所以垂直式列表一般采用的都是左對(duì)齊的樣式。

 

再者，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候需要平衡好條目的詳細(xì)程度和條目數(shù)量之間的關(guān)系。因?yàn)闂l目?jī)?nèi)容越詳細(xì)，條目所占空間就會(huì)越大，相應(yīng)地單屏上條目的顯示數(shù)量就會(huì)越少。具體情況還得從需求出發(fā)。

 

例如淘寶訂單列表頁(yè)，對(duì)于用戶(hù)而言，用戶(hù)往往會(huì)關(guān)注商品訂單的交易狀態(tài)、物流狀況等等。因?yàn)闂l目的內(nèi)容相對(duì)詳細(xì)，所以用戶(hù)就沒(méi)有必要去查看訂單的具體詳情，這樣會(huì)有效地縮短用戶(hù)的操作路徑。但是把垂直式列表應(yīng)用到通訊錄中，情況就不同了，此時(shí)用戶(hù)必然是希望可以同一時(shí)間內(nèi)瀏覽足夠多的聯(lián)系人，以便快速找到目標(biāo)，所以通訊錄條目的信息一般都很簡(jiǎn)潔，一般就只有“聯(lián)系人頭像”和“聯(lián)系人名稱(chēng)”。

需要補(bǔ)充的是，垂直式列表一般有以下三種模式：標(biāo)準(zhǔn)模式、圖文結(jié)合模式以及控制模式。

 

 

• 橫向式列表 •

 

所謂的橫向式列表也就是我們常說(shuō)的輪播圖和走馬燈，它也是APP中一種很常見(jiàn)的列表形式。這種形式只著重展示一個(gè)條目，往往位于頁(yè)面的上方作為廣告位展示，用戶(hù)通過(guò)左右手勢(shì)滑動(dòng)來(lái)聚焦到當(dāng)前的內(nèi)容。

 

一般來(lái)說(shuō)，橫向式列表的條目數(shù)量不能太多，控制在5~7個(gè)以?xún)?nèi)為好，以避免用戶(hù)操作疲勞。在設(shè)計(jì)上可提供暗示，例如顯示下一張的部分內(nèi)容，或者添加分頁(yè)指示器，這樣讓用戶(hù)在瀏覽條目時(shí)保持清晰的方向感和對(duì)數(shù)量的認(rèn)知。

 

 

 

• 網(wǎng)格式列表 •

 

剛才介紹了縱向維度以及橫向維度的列表，那么在移動(dòng)端還有一種兼顧了兩種維度的列表的形式——網(wǎng)格式列表。這也是一種非常常用的列表形式，網(wǎng)格式列表基本上都是以展示圖片為主，偶爾會(huì)配合一些文字說(shuō)明。假如想要展示大量的圖片，那么網(wǎng)格式列表無(wú)疑是最好的選擇。

相比較網(wǎng)格式列表與垂直式列表，前者大多是用于展示文字信息，界面會(huì)顯得比較干凈有效。后者則更具情感魅力，會(huì)讓界面更加富有感染力。

這里還要向大家介紹的是網(wǎng)格式列表的變體——瀑布流。標(biāo)準(zhǔn)的網(wǎng)格式列表是“田字格”的形式，排版上還是有一絲嚴(yán)謹(jǐn)和規(guī)范的意味，而瀑布流的排版樣式則顯得較為隨意，常見(jiàn)于一些圖片瀏覽類(lèi)的軟件，如花瓣等。

 

 

 

• 總結(jié) •

 

文章開(kāi)頭提到“用戶(hù)在列表頁(yè)上的主要行為就是對(duì)信息進(jìn)行篩選和比較”，也就意味著列表頁(yè)有著“分流/導(dǎo)航”的作用。

 

其實(shí)以上三種列表形式在某種意義上來(lái)說(shuō)也是三種導(dǎo)航模式。垂直式列表對(duì)應(yīng)的是列表導(dǎo)航，橫向式列表對(duì)應(yīng)的是走馬燈導(dǎo)航，網(wǎng)格式列表對(duì)應(yīng)的是圖示導(dǎo)航。

 

藍(lán)藍(lán)設(shè)計(jì)(www.chinatradebeam.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。

關(guān)鍵詞：UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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ā)

 

作者：麥克優(yōu)艾
鏈接：https://www.zcool.com.cn/article/ZNzI0NjEy.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

移動(dòng)應(yīng)用中圖文列表隨處可見(jiàn)，看似平淡無(wú)奇，背后也有許多可挖掘的細(xì)節(jié)和原理。這篇文章希望能幫助大家在工作中運(yùn)用合適的方式呈現(xiàn)列表內(nèi)容。

作者：放空計(jì)劃
鏈接：https://www.zcool.com.cn/article/ZNDI3ODMy.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

一、獲取原型圖

從產(chǎn)品經(jīng)理處獲取項(xiàng)目原型圖，當(dāng)獲取到原型圖后不要盲目的去進(jìn)行設(shè)計(jì)，要先分析了解整個(gè)項(xiàng)目的功能、特性、用戶(hù)群體、項(xiàng)目的定位等等，特別是對(duì)功能的疑惑處一定要找產(chǎn)品經(jīng)理溝通，只有做到對(duì)項(xiàng)目了熟于胸才能做出優(yōu)秀的設(shè)計(jì)。

二、競(jìng)品分析

當(dāng)我們對(duì)項(xiàng)目的功能、特性、用戶(hù)群體、項(xiàng)目的定位都有所了解后，還是不能馬上進(jìn)入設(shè)計(jì)環(huán)節(jié)。我們需要先對(duì)市面上同類(lèi)型的產(chǎn)品進(jìn)行分析和對(duì)比，包括設(shè)計(jì)風(fēng)格、配色、排版、功能樣式等等，了解其優(yōu)劣勢(shì)，做到取長(zhǎng)補(bǔ)短，思考如何讓我們的產(chǎn)品更加的完善，這時(shí)候我們的腦海里面基本上對(duì)自己要設(shè)計(jì)的東西已經(jīng)有了一個(gè)大概的雛形。

三、設(shè)計(jì)UI界面

1、界面設(shè)計(jì)規(guī)范

這篇文章內(nèi)所有的數(shù)值均以2倍圖為例，使用1倍圖的同學(xué)請(qǐng)自行除以2。

現(xiàn)在UI設(shè)計(jì)通常使用的是全面屏的設(shè)計(jì)規(guī)范，全面屏的設(shè)計(jì)稿更加美觀，且做作品集的時(shí)候搭配全面屏樣機(jī)視覺(jué)效果也更加突出。通常只設(shè)計(jì)一套蘋(píng)果全面屏的設(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)控件，除顏色外不可改變。

常用圖標(biāo)尺寸：

頂部功能：48x48px

底部菜單欄（有文字）：48x48px

底部菜單欄（無(wú)文字）：64x64px

文字：

尺寸：36px、32px、28px、24px

顏色：正常（#333333）、輔助（#999999）、未輸入提示（#CCCCCC）

*利用文字尺寸對(duì)比和顏色對(duì)比可以得到不錯(cuò)的效果。也可以給文字顏色添加少量的藍(lán)色，讓顏色不那么呆板。

2、組件控件系統(tǒng)

組建控件系統(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è)置。

3、設(shè)計(jì)風(fēng)格

我們需要讓項(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)目更加的出彩。

傳統(tǒng)UI風(fēng)格：

這種風(fēng)格沒(méi)找到合適的名稱(chēng)，我個(gè)人一般叫它傳統(tǒng)風(fēng)格。這種設(shè)計(jì)風(fēng)格使用分割線分割小的模塊，用背景色塊分割大的模塊，特別適合列表信息。雖然給人感覺(jué)沒(méi)有特別強(qiáng)烈的設(shè)計(jì)感，但簡(jiǎn)單實(shí)用、樸實(shí)無(wú)華，層級(jí)劃分清晰明了。

卡片式風(fēng)格：

卡片式風(fēng)格是借用現(xiàn)實(shí)世界中卡片的特征和概念，將一個(gè)模塊或同類(lèi)型元素放到一個(gè)卡片容器類(lèi)，可以增加內(nèi)容的獨(dú)立性，讓模塊劃分關(guān)系變得非常的清晰，是現(xiàn)在非常常用的一種設(shè)計(jì)方式。

常用做法是采用淺灰的背景+白色卡片的方式，卡片都帶有一定的圓角，類(lèi)似于將撲克牌一張張的放在桌子上，桌面是灰色背景，每一張撲克牌就是一個(gè)卡片。也不排除暗夜模式的卡片式設(shè)計(jì)，背景會(huì)更暗一些，卡片略亮。

大標(biāo)題去線段化：

在傳統(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)設(shè)計(jì)風(fēng)格：

新擬態(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)用較少。可以作為一種練習(xí)或部分功能的使用。

四、交付

1、切圖

設(shè)計(jì)稿完成之后我們需要將圖標(biāo)等元素切圖導(dǎo)出交付給開(kāi)發(fā)，IOS和安卓需要根據(jù)要求導(dǎo)出不同倍數(shù)的png格式切圖文件。

切圖套數(shù)

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將畫(huà)板填充色隱藏，sketch畫(huà)板不要勾選“包含于導(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)行命名，不要使用中文和特殊字符。命名方式一般是類(lèi)別_位置_功能_狀態(tài)（有些切圖沒(méi)有多種狀態(tài)則不需要添加狀態(tài)命名）。

以蘋(píng)果端舉例：如底部菜單欄的首頁(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)_頂部_搜索）。

類(lèi)別一般只有3種：圖標(biāo)（icon）、圖片（image）、按鈕（button），我們通常會(huì)簡(jiǎn)寫(xiě)為ico、img、btn。

狀態(tài)一般只有4種：正常（normal）、按下（press）選中（selected）、禁用（disabled），我們通常會(huì)簡(jiǎn)寫(xiě)為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è)尺寸的文件夾名稱(chēng)和后綴，再統(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è)置為切片。

2、標(biāo)注

和切圖文件一起交付給開(kāi)發(fā)的還有設(shè)計(jì)稿的標(biāo)注文件，讓研發(fā)人員可以清楚地知道界面內(nèi)元素的顏色、尺寸、對(duì)齊方式、距離、透明度，文字的字體、字號(hào)、行高等。

輸出到藍(lán)湖

很多設(shè)計(jì)文件都可以安裝藍(lán)湖插件，再通過(guò)插件將設(shè)計(jì)稿導(dǎo)出到藍(lán)湖，研發(fā)人員就可以便捷的查看界面的標(biāo)注。

軟件內(nèi)部標(biāo)注

Figma、Mastergo等在線設(shè)計(jì)軟件都可以切換為開(kāi)發(fā)者模式，只需要將研發(fā)人員邀請(qǐng)到自己的設(shè)計(jì)文件所在團(tuán)隊(duì)內(nèi)，研發(fā)人就可以查看到界面的標(biāo)注；

插件導(dǎo)出

有部分公司有一定的保密措施，會(huì)禁止設(shè)計(jì)師使用第三方平臺(tái)或是聯(lián)網(wǎng)操作，這種情況設(shè)計(jì)也無(wú)法使用Figma、Mastergo等在線設(shè)計(jì)軟件，只能使用Sketch等客戶(hù)端，輸出標(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è)等。

1、項(xiàng)目預(yù)覽頁(yè)

上線應(yīng)用商店需要的預(yù)覽圖，通常是使用項(xiàng)目中比較有特色的幾個(gè)UI界面加以設(shè)計(jì)。

2、啟動(dòng)LOGO

上線應(yīng)用商店必須提供的LOGO，手機(jī)中啟動(dòng)APP的入口，但不同的應(yīng)用商店有不同的尺寸，華為、蘋(píng)果、小米、三星、應(yīng)用寶等所需要的啟動(dòng)LOGO都有所不同，所以輸出多個(gè)尺寸。以蘋(píng)果App Store為例，需要以下尺寸：

3、啟動(dòng)頁(yè)、引導(dǎo)頁(yè)

啟動(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ā)就可以。

六、持續(xù)跟進(jìn)和優(yōu)化

當(dāng)一個(gè)項(xiàng)目上線后，只能代表我們的現(xiàn)階段的工作已經(jīng)全部完成。每個(gè)項(xiàng)目上線后都會(huì)收集用戶(hù)反饋，根據(jù)用戶(hù)反饋的信息優(yōu)化功能和界面設(shè)計(jì)，通過(guò)持續(xù)不斷的優(yōu)化、迭代讓我們的產(chǎn)品越來(lái)越好，這個(gè)過(guò)程中也需要我們UI設(shè)計(jì)不斷的去進(jìn)行調(diào)整和優(yōu)化。

作者：Mu姜子
鏈接：https://www.zcool.com.cn/article/ZMTQxMDY1Ng==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

借此機(jī)會(huì)和大家交流一下項(xiàng)目背后的思考，共同進(jìn)步！

我將從以下幾個(gè)方面進(jìn)行講解：

01 對(duì)于理念的思考

02 關(guān)于風(fēng)格的思考

03 關(guān)于背景的思考

04 關(guān)于材質(zhì)的思考

01 關(guān)于理念的思考-源自生活的靈感來(lái)源

對(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)新的！

02 關(guān)于風(fēng)格的思考-找到未被發(fā)現(xiàn)的切入點(diǎn)

有了主題，就可以基于主題去思考設(shè)計(jì)風(fēng)格了。

其實(shí)主題圖標(biāo)的設(shè)計(jì)其實(shí)已經(jīng)有很多年頭了，尤其是“app”這個(gè)概念流行開(kāi)始，各大安卓手機(jī)品牌就有了自己的主題商店，用戶(hù)可以根據(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)！

03 關(guān)于背景的思考-基礎(chǔ)形的美感釋放

這次的主題和以往不一樣，我們每做一個(gè)圖標(biāo)需要延展4個(gè)尺寸：

有一些寬的、有一些高的，如果我們只放一個(gè)圖標(biāo)，那么會(huì)比較空曠，不夠飽滿(mǎn)，所以我們必須在背景上加一些圖案或者紋理，使整體更加飽滿(mǎn)精致。

背景紋理怎么做呢？我們希望它有細(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ǔ)”釋放更大的能量！

04 關(guān)于材質(zhì)的思考-日光下的玻璃質(zhì)感結(jié)合

其實(shí)本次的材質(zhì)，也不算難，沒(méi)有用到特殊材質(zhì)，主要有兩個(gè)關(guān)鍵點(diǎn)可以分享交流！

關(guān)于燈光

燈光我們使用的是日光燈，從軟件操作層面沒(méi)有任何技術(shù)含量，但是對(duì)于基礎(chǔ)審美會(huì)有一定的門(mén)檻，尤其是對(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)目背后的一些思考

共勉！

作者：小腦府設(shè)計(jì)團(tuán)隊(duì)
鏈接：https://www.zcool.com.cn/article/ZMTUxMzkzMg==.html
來(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)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.chinatradebeam.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司