2023-2-16 資深UI設(shè)計(jì)者
借此機(jī)會和大家交流一下項(xiàng)目背后的思考，共同進(jìn)步！
我將從以下幾個(gè)方面進(jìn)行講解：
01 對于理念的思考
02 關(guān)于風(fēng)格的思考
03 關(guān)于背景的思考
04 關(guān)于材質(zhì)的思考
對于本次設(shè)計(jì)，需求方是沒有給主題限制的，那作為設(shè)計(jì)師的我就從自身現(xiàn)階段的生活去發(fā)現(xiàn)主題、尋找靈感。 從深圳到成都創(chuàng)業(yè)，將近一年的時(shí)間，我發(fā)現(xiàn)成都的天氣總是陰沉沉的：
充足的陽光變得非常稀缺，對于成都人來說，如果有陽光的時(shí)候，都會去外面坐坐，曬曬太陽！ 這一年，“光”對我說是一種期盼的事物：
基于這個(gè)生活細(xì)節(jié)，我就把主題定成了“追光空間”而我對于“追光空間”的理解就是：光感、純凈、靈動
后面的執(zhí)行也是基于這個(gè)理念進(jìn)行思考創(chuàng)新的！
有了主題，就可以基于主題去思考設(shè)計(jì)風(fēng)格了。
其實(shí)主題圖標(biāo)的設(shè)計(jì)其實(shí)已經(jīng)有很多年頭了，尤其是“app”這個(gè)概念流行開始，各大安卓手機(jī)品牌就有了自己的主題商店，用戶可以根據(jù)喜好下載自己喜歡的主題圖標(biāo)。 我們在網(wǎng)上搜索主題圖標(biāo)，可以看到很多作品，其中不乏有非常優(yōu)秀的主題作品，但是當(dāng)觀察的量到達(dá)一定程度后，會發(fā)現(xiàn)市面上的主題圖標(biāo)風(fēng)格還是比較相似，大部分還都是屬于二維圖標(biāo)（下圖源自網(wǎng)絡(luò)）：
即使是一些質(zhì)感很強(qiáng)的圖標(biāo)，很多也是鼠繪出來的，也不算是3D風(fēng)格（下圖源自7years）：
包括我們?nèi)ツ杲o小米做的幾套主題，也都是偏2維風(fēng)格的
基于這樣的現(xiàn)象，我們是否可以嘗試將3d風(fēng)格與主題圖標(biāo)進(jìn)行融合呢？雖然不能說是第一個(gè)這么做的，但至少在市面上出現(xiàn)的這種結(jié)合還是相對較少，所以也可以算是一種小的創(chuàng)新。
在構(gòu)想風(fēng)格的時(shí)候，我的底層邏輯就是找到未被發(fā)現(xiàn)的切入點(diǎn)，如何理解呢？
如果是3d風(fēng)格與電商活動結(jié)合，已經(jīng)相對常見了（下圖源自網(wǎng)絡(luò)）：
如果是3d風(fēng)格與游戲視覺結(jié)合，也經(jīng)常會看到（下圖源自網(wǎng)絡(luò)）：
但是如果是3d風(fēng)格與主題圖標(biāo)結(jié)合并且落地使用，那還是相對比較少的，這就是我在思考風(fēng)格時(shí)候的一點(diǎn)心得：
希望可以給同行們一點(diǎn)啟發(fā)，拋磚引玉，希望市面上可以看到更多的3d風(fēng)格的主題圖標(biāo)！
這次的主題和以往不一樣，我們每做一個(gè)圖標(biāo)需要延展4個(gè)尺寸：
有一些寬的、有一些高的，如果我們只放一個(gè)圖標(biāo)，那么會比較空曠，不夠飽滿，所以我們必須在背景上加一些圖案或者紋理，使整體更加飽滿精致。
背景紋理怎么做呢？我們希望它有細(xì)節(jié)但又不能過于搶眼，于是把目光鎖定在了基礎(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ǔ)美多維度的釋放出來，比如矩形的基礎(chǔ)元素進(jìn)行構(gòu)成設(shè)計(jì)：
這樣，就可以做出不同的背景圖案，以此來解決需求目標(biāo)。
設(shè)計(jì)師一定不要輕視基礎(chǔ)，不管是技法層面還是審美層面，往往優(yōu)秀的設(shè)計(jì)都是無數(shù)個(gè)“基礎(chǔ)”堆出來的，先掌握基礎(chǔ)，才能用“基礎(chǔ)”釋放更大的能量！
其實(shí)本次的材質(zhì)，也不算難，沒有用到特殊材質(zhì)，主要有兩個(gè)關(guān)鍵點(diǎn)可以分享交流！
關(guān)于燈光
燈光我們使用的是日光燈，從軟件操作層面沒有任何技術(shù)含量，但是對于基礎(chǔ)審美會有一定的門檻，尤其是對于明暗交界線、光影對比的理解！
燈光的不同位置和大小會導(dǎo)致光影質(zhì)感的不同：
燈光曝光：
質(zhì)感太平:
物體與背景區(qū)分度不夠:
同樣的物體，不同的燈光角度和大小就會有不同的質(zhì)量等級：
只有這種基礎(chǔ)審美達(dá)標(biāo)后，我們才能繼續(xù)往后延伸。
關(guān)于材質(zhì)
對于材質(zhì)，最初我們嘗試用最簡單的漫射材質(zhì)，但是發(fā)現(xiàn)缺少光澤度和細(xì)節(jié)，于是又嘗試在外部加一層玻璃材質(zhì)，形成一圈透明質(zhì)感和細(xì)節(jié)：
后面大部分的圖標(biāo)都采用這種形式進(jìn)行延展！
以上就是這次項(xiàng)目背后的一些思考
共勉！
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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://www.88yangsc.com