西藏有一個(gè)六時(shí)書修行方法，確定要改進(jìn)的一兩個(gè)弱點(diǎn)（比如懶惰，拖延），每天分六個(gè)時(shí)辰反省自己（間隔兩三個(gè)小時(shí)的樣子），在每個(gè)時(shí)間段有好的，不好的念頭或者行為都記下來反省總結(jié)，以便在下一個(gè)時(shí)間去調(diào)整）和鼓勵(lì)自己。這個(gè)弱點(diǎn)改的差不多了，就繼續(xù)下一個(gè)弱點(diǎn)作為目標(biāo)去改正。讀富蘭克林的自傳，他基本上也是用這種方法，但沒有分每天六次這么細(xì)。

不同的階段，臨摹的目的不盡相同。一般來說，前期臨摹更多的是練習(xí)軟件、技法，后期練習(xí)別人的風(fēng)格表達(dá)，綜合運(yùn)用。所以，我把臨摹分為技法臨摹、半原創(chuàng)到原創(chuàng) 3 個(gè)階段，每一個(gè)階段沒有絕對的界限，都是在積累創(chuàng)意，完全是可以用到自己的項(xiàng)目中去的。

今天會(huì)分享一個(gè)我當(dāng)年做臨摹練習(xí)并融入實(shí)際項(xiàng)目中的小案例。

臨摹

大概是在 15 年左右，在網(wǎng)上看到錘子設(shè)計(jì)師設(shè)計(jì)的一個(gè)圖標(biāo)，覺得非常驚艷，當(dāng)時(shí)就想把它臨摹下來，這是當(dāng)時(shí)臨摹的一個(gè)效果。

△ 原作

△ 這是我當(dāng)時(shí)臨摹的圖

我在臨摹這張圖的時(shí)候，想達(dá)到的目標(biāo)是能根據(jù)自己的 logo 色及文字，做一個(gè)半原創(chuàng)的設(shè)計(jì)。

然后實(shí)際練習(xí)中，不斷觀察原作發(fā)現(xiàn)有一些細(xì)節(jié)值得學(xué)習(xí)：

1. 圖標(biāo)分為水上和水下，2 個(gè)層級，在水下的圖形因?yàn)檎凵涞年P(guān)系，會(huì)發(fā)生扭曲
2. 水下會(huì)有深淺的顏色變化
3. 真實(shí)的水會(huì)流動(dòng)，所以在水下會(huì)畫出帶明暗細(xì)節(jié)的水紋線條
4. 水下會(huì)有氣泡，且氣泡的產(chǎn)生符合真實(shí)場景，氣泡的大小由小變大
5. 水面的邊緣因?yàn)橥腹舛a(chǎn)生邊緣反射
6. 投影因?yàn)榧t色盒子的影響，會(huì)偏紅色色相，并且有近實(shí)遠(yuǎn)虛的關(guān)系
7. 盒子的邊緣會(huì)有 1px 的高光和反光
8. 背景為了增加圖標(biāo)的展示效果，也做了單獨(dú)的設(shè)計(jì)，把四周壓暗，然后加上雜色，使得整體的質(zhì)感更加強(qiáng)烈

當(dāng)時(shí)，對我來說，在練習(xí)的過程中有一個(gè)難點(diǎn)就是關(guān)于第 3 個(gè)細(xì)節(jié)水的紋理執(zhí)行有些難度，因?yàn)槠渲邪舜旨?xì)變化、虛實(shí)變化、明暗變化等等，單純的用圖層樣式或者矢量去畫的話，難度都比較大。這個(gè)細(xì)節(jié)當(dāng)時(shí)耗費(fèi)了我不少時(shí)間，后面突然想到其實(shí)也可以用合成的辦法來實(shí)現(xiàn)，然后我去找了真實(shí)水紋的圖片進(jìn)行疊加，很快就搞定了。所以，只要能達(dá)到效果，不能太過于局限某一種思路。

分析并完成這些細(xì)節(jié)后，就是你在做這個(gè)練習(xí)中學(xué)到的點(diǎn)，嘗試把它們學(xué)以致用。

運(yùn)用

記得當(dāng)時(shí)在 360 時(shí)需要設(shè)計(jì)一套關(guān)于摩洛哥藍(lán)色小鎮(zhèn)的官方定制版主題圖標(biāo)。從搜集的當(dāng)?shù)卮硇缘膱D片中發(fā)現(xiàn)，多彩顏料是當(dāng)?shù)氐囊淮筇卣?，所以決定以染料為關(guān)鍵詞去畫一個(gè)圖標(biāo)，又因?yàn)轭伭媳旧碜詭Ф嗖实奶攸c(diǎn)，所以以它為主題圖標(biāo)就很合適了。

然后在思考這個(gè)圖標(biāo)的時(shí)候，首先會(huì)應(yīng)用參考圖中的配色，并結(jié)合染缸的造型做出了第一版的效果。

這個(gè)效果雖然是表達(dá)了那個(gè)意思，但缺乏亮點(diǎn)，聯(lián)想之前練習(xí)過水的技法表達(dá)（臨摹中第 3 點(diǎn)細(xì)節(jié)運(yùn)用），正好可以利用水的紋理做下強(qiáng)化，這樣就優(yōu)化出了第二版。

嗯，看起來感覺有了一些特點(diǎn)，但感覺缺乏細(xì)節(jié)，接著思考水除了有紋理高光，應(yīng)該還會(huì)有邊緣高光（結(jié)合臨摹中第 5 點(diǎn)細(xì)節(jié)），所以在邊緣嘗試加了高光，增加體積感，做出水要漫出來的感覺。

如果只有這一層高光的話，細(xì)節(jié)度感覺還是不大夠，在之前的文章《如何從優(yōu)秀作品中偷師，用一個(gè)游戲案例教你思路》我有分享到在 UI 大佬的作品中能學(xué)到他們對于 1px 高光的使用（臨摹作用中的第 7 點(diǎn)），這里因?yàn)槭且后w的材質(zhì)表現(xiàn)，所以增加一個(gè)高光點(diǎn)增加水的通透感。

到目前為止，似乎看起來已經(jīng)差不多了，但考慮到現(xiàn)實(shí)世界中，溢出的彩色液體在透光性很好的情況下，也會(huì)對周圍環(huán)境產(chǎn)生影響，所以我在顏料設(shè)計(jì)的四周，配上對應(yīng)的四種顏色的模糊投影（臨摹練習(xí)中的第 6 點(diǎn)）。

在思考下，在臨摹的圖標(biāo)中為了使得圖標(biāo)更加自然，作品中其實(shí)結(jié)合了很多真實(shí)世界中會(huì)發(fā)生的情況，比如水的折射，氣泡的比例，深淺等等，那對于染料來說，會(huì)有怎樣的真實(shí)情況發(fā)生呢？我當(dāng)時(shí)想到一點(diǎn)是，染料在用的過程中其實(shí)很容易灑出來，所以圖標(biāo)背板上現(xiàn)在太過于干凈了，增加一些細(xì)節(jié)能夠使得背板能夠跟主體物產(chǎn)生關(guān)聯(lián)，也更加自然。嗯，又是一個(gè)小細(xì)節(jié)。

最后，我們對比下第一版和最終版的效果，細(xì)節(jié)確實(shí)豐富了很多。

一張動(dòng)態(tài)圖可以更加清晰的看到變化。

總結(jié)

這次圖標(biāo)的優(yōu)化過程，我覺得有幾個(gè)要點(diǎn)對我來說印象深刻的：

圖標(biāo)的風(fēng)格可以是扁平的，但想要增加自然舒服的細(xì)節(jié)，一樣可以像畫寫實(shí)風(fēng)格那樣仿照現(xiàn)實(shí)。你需要留心觀察這個(gè)世界，就算是一張照片中也能有非常多可以利用的細(xì)節(jié)。

碰到難做出來的細(xì)節(jié)，多想想有沒有更效率的辦法。比如在做水紋理的時(shí)候，一開始就想著完全靠鼠繪畫出來，結(jié)果效果一直不大好，然后利用 PS 合成的方法，很快就能把效果做出來。

對于圖標(biāo)來說，要注意其整體性。比如圖標(biāo)中的主體物不要跟背景脫離，不要讓圖標(biāo)背板只是作為一個(gè)容器，而要讓背板也成為圖標(biāo)本身的一部分，這樣圖標(biāo)的整體性會(huì)更好。

臨摹的過程中，一定要多分析，多記錄自己覺得是細(xì)節(jié)的點(diǎn)。每一次記錄，都可能是將來設(shè)計(jì)時(shí)提升細(xì)節(jié)的靈感來源。

以上內(nèi)容只是我在日常練習(xí)中應(yīng)用到實(shí)際項(xiàng)目中的一個(gè)小案例，其實(shí)還有非常多的靈感想法都來自于你平時(shí)做的練習(xí)，關(guān)鍵是要多動(dòng)手，多總結(jié)，才能增強(qiáng)自己對細(xì)節(jié)的把握能力。

文章來源：優(yōu)設(shè)網(wǎng)     作者：彩云譯設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.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ù)

2020年結(jié)束，此時(shí)正是一個(gè)很好的時(shí)間節(jié)點(diǎn)，我們共同探尋2021年即將擁有怎樣的未來。本文將帶你發(fā)現(xiàn)，即將在2021年流行的十種移動(dòng)用戶體驗(yàn)設(shè)計(jì)趨勢。

       看到知乎上的一個(gè)問題：如何找到一家好的高端網(wǎng)站設(shè)計(jì)公司？

       把回答的內(nèi)容也轉(zhuǎn)過來記錄一下。

       首先回答：何為高端？



       高端與低端是對應(yīng)的，目前網(wǎng)站設(shè)計(jì)，中低端基本是用模板改改，相對價(jià)格低，有一些小型公司或不依靠網(wǎng)站運(yùn)營收入的公司，“有個(gè)網(wǎng)站就好”，所以可以用這種低投入，內(nèi)容有就行的網(wǎng)站建設(shè)公司，特點(diǎn)是馬上就能用，三五天把內(nèi)容發(fā)布進(jìn)去就可以。備案可能需要一定時(shí)間。



       高端設(shè)計(jì)公司，一般是量身定做，為企業(yè)做網(wǎng)站策劃、分析，按照用戶研究、網(wǎng)站建站的目的來進(jìn)行網(wǎng)站的定制欄目頁的設(shè)計(jì)。做競品分析、研究對方的優(yōu)缺點(diǎn)，設(shè)計(jì)的色系和企業(yè)標(biāo)準(zhǔn)色、情感表達(dá)、人物場景、用戶體驗(yàn)思維，越深入，思考越成熟，做的網(wǎng)站品質(zhì)越有保障。所以需要的時(shí)間、精力、投入相對多。



       因?yàn)橥度胂鄬Χ?，所以?jīng)營業(yè)績好的企業(yè)、集團(tuán)公司、營銷類大型網(wǎng)站來定制的比較多。



       我們公司“北京藍(lán)藍(lán)設(shè)計(jì)”就是為定制的高端企業(yè)用戶、政府網(wǎng)站、軟件公司來服務(wù)的。我們挺喜歡要求高的客戶，這樣能體現(xiàn)出專業(yè)設(shè)計(jì)的水平，這也是我們和其它建站公司區(qū)別開來的地方。



       我們主要是給大型軟件公司平臺、系統(tǒng)做UE、交互設(shè)計(jì)、視覺設(shè)計(jì)，用戶體驗(yàn)優(yōu)化，這個(gè)，比網(wǎng)站設(shè)計(jì)更難，更專業(yè)。 往往一個(gè)公司的核心產(chǎn)品，值得把精力金錢投入到上面，產(chǎn)出最大的回報(bào)。近年來，除了做軟件UI，大屏大數(shù)據(jù)可視化項(xiàng)目外，我們也擴(kuò)展了“愿意把公司網(wǎng)站做成核 心產(chǎn)品”這樣的公司成為合作伙伴，更好的為客戶提供全方位的服務(wù)。



       一旦成為我們的客戶，設(shè)計(jì)無憂。

       我們一定會(huì)把該做的事做好，并提供超值服務(wù)和額外附加值的。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.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ù)

作者：藍(lán)藍(lán)

表格，是一種最常見的信息組織整理手段，常用于信息收集、展示、數(shù)據(jù)分析、歸納整理。

      UI軟件設(shè)計(jì)中最常用、最基本的是表格的設(shè)計(jì)，有些軟件中80%都是表格類頁面，可以說，設(shè)計(jì)開發(fā)的是否易用，很影響口碑和用戶的使用感受?；A(chǔ)的東西一定要做好，就像我們吃的主食一樣，雖然都是米和面，但是各地出產(chǎn)各種品種口味都不相同，要根據(jù)食客的喜好選擇、烹飪。今天就聊一聊最基礎(chǔ)的表格設(shè)計(jì)、變化和常見問題。

一、基礎(chǔ)的表格設(shè)計(jì)美化

      基礎(chǔ)的表格可變化的地方很少，可以根據(jù)當(dāng)前軟件開發(fā)選擇的框架控件（ext/vue/jequery不同框架會(huì)有一些不一樣）做色彩和風(fēng)格的變化，如：加表格不同粗細(xì)的線、斑馬格，中間無豎線種種的設(shè)計(jì)，有的表格需要標(biāo)題很突出，有的內(nèi)文突出，這就和內(nèi)容焦點(diǎn)相關(guān)了。

為了操作直觀便捷，在操作區(qū)放一些圖標(biāo)“刪除、編輯、審核”，配合文字來使用，有的把操作類的圖標(biāo)放在最左邊，有的放在最右側(cè)，按行業(yè)用戶習(xí)慣而定。

可以用固定表頭（標(biāo)題位置不變），允許用戶排序，單元格內(nèi)有很長的文字，設(shè)定最大字節(jié)，多內(nèi)容用……替代避免轉(zhuǎn)行，有小數(shù)點(diǎn)的數(shù)字右對齊，每列的大小可調(diào)整，這些也是設(shè)計(jì)開發(fā)中可以做好的細(xì)節(jié)部分。

二、特別寬的表格怎么設(shè)計(jì)？

有的表格的寬度，達(dá)到了屏幕的兩屏和三屏，出現(xiàn)寬寬的橫向滾動(dòng)條，又有長長的豎向滾動(dòng)條，但工作的人又必須看，可煩人了！很多軟件都因?yàn)檫@個(gè)原因被吐槽。下面就介紹三種方法解決這個(gè)問題：

方法一

如果表格的標(biāo)題是可以定制的，允許省略的，可以從業(yè)務(wù)角度取舍去掉無關(guān)緊要的，不常用的內(nèi)容，把這部分放在點(diǎn)開的詳細(xì)頁內(nèi)容中即可。這就像一個(gè)房間的斷舍離：挑選、丟棄、分類、收納，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可無的？依次排序放在順手的位置，ui設(shè)計(jì)的道理也是相通的。

方法二

如果表格里面的內(nèi)容是確定的，不可省略的，比如銀行的報(bào)表就是這么長，這么多，那我們就可以從設(shè)計(jì)的角度來優(yōu)化，做一個(gè)加高版的表格。

表格為什么一組信息只能一行呢？完全可以一組三行四行，在組中進(jìn)行重點(diǎn)信息，非重點(diǎn)信息以及符號化的直觀轉(zhuǎn)變。用大小、對比、濃淡、色彩、間隔這些平面設(shè)計(jì)的基本原則，讓一個(gè)普通的“山里娃”土土的表格變成一個(gè)“青春靚麗、人見人愛”自帶明星氣質(zhì)的表格。

方法三

大表格里面嵌套小表格，利用交互設(shè)計(jì)，巧安排空間。當(dāng)用戶光標(biāo)移至感興趣的那行的時(shí)候，關(guān)于它更多的內(nèi)容，在下方滑動(dòng)撐開出現(xiàn)或者右邊浮動(dòng)出現(xiàn)。這個(gè)方式雖然比較土，但也確實(shí)管用。早年在看某一招聘網(wǎng)站的時(shí)候，每一個(gè)人的簡歷只要點(diǎn)名字就可以看到一組關(guān)鍵信息，便于迅速篩選，而另外一個(gè)招聘網(wǎng)站，就沒有這個(gè)功能，每個(gè)人都要打開之后才能看見整體信息，我后來就不怎么看那個(gè)網(wǎng)站了。多一步操作，對典型用戶就多了許多的工作量，網(wǎng)站和軟件的使用口碑，用戶粘度就是這樣在為用戶考慮中一點(diǎn)一點(diǎn)積累起來的。

 上圖：大表格里面嵌套小表格

     方法不會(huì)只有這三種，其他的方法要根據(jù)當(dāng)時(shí)的業(yè)務(wù)，用戶使用的習(xí)慣、重點(diǎn)，因地制宜的去設(shè)計(jì)了。軟件中的表格節(jié)省了許多程序工程師的工作量，如果做大的改動(dòng)或許是巨大的工作量，如果要做變動(dòng)，一定要在開始的時(shí)候就要讓ui設(shè)計(jì)納入開發(fā)體系，一生二，二生三，在前期第一批實(shí)施時(shí)越注重細(xì)節(jié)，后期就會(huì)越輕松，甚至省去幾倍甚至幾十倍的時(shí)間挨個(gè)頁面的去糾偏、修改。

      一個(gè)系統(tǒng)總是需要業(yè)務(wù)擔(dān)當(dāng)，顏值擔(dān)當(dāng)?shù)暮诵牟糠?，重要的頁面要額外的對待、花更多的精力和時(shí)間。如果千篇一律，也就不能顯示出軟件產(chǎn)品的獨(dú)到之處了。

第三 與表格配合的部分設(shè)計(jì)

第一種  “搜索查詢”和“過濾”部分的設(shè)計(jì)

     大多數(shù)表格的前面都有搜索過濾功能，如果搜索條件相當(dāng)多，可以精選一部分主要的排成一行，其他的隱藏，點(diǎn)箭頭再出現(xiàn)。整個(gè)搜索區(qū)域也可以有隱藏／顯示的按鈕，來給下面的表格更多的空間。

     過濾條件區(qū)域可以定義好“條件名稱”一致寬度，一般在八個(gè)字左右，避免有的字節(jié)多，有的字節(jié)少，行數(shù)多了，參差不齊，區(qū)塊和區(qū)塊之間也要定義好統(tǒng)一的間距，這樣整體頁面就顯得整齊劃一、條理清晰。

上圖：搜索和卡片式信息的組合

第二種  表格操作部分的設(shè)計(jì)

       對表格的操作“導(dǎo)入，導(dǎo)出、批量導(dǎo)出”有的時(shí)候這類操作有10—20個(gè)，有的時(shí)候才幾個(gè)，多的時(shí)候很占地方，可以用隱藏的方法，over到表格上再出現(xiàn)，以節(jié)省空間。

       也可以分組把同類的操作聚合在一起，把常用的放在目之所及，不常用的點(diǎn)后下浮出現(xiàn)，以節(jié)省空間，

還可以光標(biāo)跟隨表格的某一行，點(diǎn)選自動(dòng)浮出一群小跟班，各種操作按鈕。即節(jié)省空間，操作移動(dòng)路徑又很短。只是不支持批量操作。

第三種  表格和卡片式設(shè)計(jì)、統(tǒng)計(jì)圖的整合切換

       表格是可以轉(zhuǎn)換成卡片式設(shè)計(jì)的，用一個(gè)卡片代替一行的展現(xiàn)信息，改變一種閱讀的方式。

有的也可以轉(zhuǎn)換圖統(tǒng)計(jì)圖表：曲線圖，柱狀圖讓用戶直觀的去解讀，而不必一直看枯燥的數(shù)字。

藍(lán)藍(lán)注：我非常喜歡這個(gè)風(fēng)格。

日前，在網(wǎng)上流行起了一種叫 Neumorphism 的新風(fēng)格，也有人稱為 Soft UI，這是一種類似于浮雕的效果。這種風(fēng)格的出現(xiàn)，給目前流行的扁平化設(shè)計(jì)增加了一種新的設(shè)計(jì)形式，很多媒體甚至還將這個(gè)風(fēng)格列為 2020 的設(shè)計(jì)趨勢，三星 Galaxy 系列的發(fā)布會(huì)宣傳海報(bào)也使用了這種風(fēng)格，可見這個(gè)風(fēng)格的火熱程度。那么一開始我們不討論這個(gè)風(fēng)格好還是不好，先來了解一下這個(gè)新風(fēng)格趨勢。

什么是Neumorphism？

最開始是一位來自烏克蘭的設(shè)計(jì)師 Alexander Plyuto 在各平臺發(fā)布了新的作品「Skeuomorph Mobile Banking」。這個(gè)作品自發(fā)布以來就獲得了數(shù)十萬瀏覽量，數(shù)千點(diǎn)贊數(shù)，熱度持續(xù)飆升并登上 Popular 榜首。

作者是用 Skeuomorph 來命名這個(gè)作品風(fēng)格，評論區(qū)就開始了這種風(fēng)格的討論，有的人說這是新的擬物風(fēng)格（New Skeuomorphism），也有人說這是擬物風(fēng)格 2.0 版本（Skeuomorph 2.0），而后來就有設(shè)計(jì)師創(chuàng)出一個(gè)新的虛構(gòu)名詞，把 New Skeuomorphism 兩個(gè)詞組合，Neo 諧音 New 就是 Neuomorphism。

這個(gè)名字就這么火了。大家都開始用上了這個(gè)名詞出作品，成為了設(shè)計(jì)新趨勢。甚至連作者后面的作品，也使用了這個(gè)名稱。

再后來國外知名設(shè)計(jì)師 Michal Malewicz 發(fā)布了一篇關(guān)于這個(gè)風(fēng)格的文章，將 Neuomorphism，刪減了里面的字母「O」，改成了 Neumorphism。在大神的推動(dòng)下大家又開始爭先恐后地使用這個(gè)名稱。

目前有各種對名稱的說法，Neuomorphism，Neumorphism，Skeuomorphism，Soft UI，在沒有實(shí)際確定的情況下，其實(shí)怎樣叫都無所謂，重點(diǎn)是我們要知道這種設(shè)計(jì)風(fēng)格趨勢，關(guān)注的不是名字，而是設(shè)計(jì)。

還記得擬物風(fēng)格嗎？

既然 Neumorphism 只是一個(gè)虛構(gòu)詞，也沒有任何官方認(rèn)定，那就先不糾結(jié)應(yīng)該叫什么，我們還是來說說它的前身吧，也就是 Skeuomorphism（擬物）。這是最早被 Apple 提出的設(shè)計(jì)概念，就是在界面中模仿現(xiàn)實(shí)物體紋理材質(zhì)的設(shè)計(jì)，目的是讓人們在使用界面時(shí)習(xí)慣性地聯(lián)想到現(xiàn)實(shí)物體的使用方式。

擬物寫實(shí)的設(shè)計(jì)風(fēng)格曾經(jīng)風(fēng)靡全球，當(dāng)時(shí)的 UI 設(shè)計(jì)師幾乎都對擬物作品著迷。

而在 2013 年的 WWDC 大會(huì)中，蘋果公司發(fā)布的 iOS7 系統(tǒng)，系統(tǒng) UI 使用更簡潔的設(shè)計(jì)風(fēng)格。這場大會(huì)也使擬物風(fēng)格逐漸過時(shí)，直到現(xiàn)在扁平風(fēng)格的全面普及，擬物風(fēng)格就再?zèng)]有被廣泛應(yīng)用。

從前幾年的設(shè)計(jì)趨勢可以看到，扁平風(fēng)格作為更更簡潔的風(fēng)格被設(shè)計(jì)師推崇，再加上蘋果系統(tǒng) iOS 7 設(shè)計(jì)風(fēng)格的面世和谷歌系統(tǒng)規(guī)范 Material Design 的普及，扁平風(fēng)格在 UI 設(shè)計(jì)中一直占據(jù)重要位置。

但設(shè)計(jì)的流行趨勢也一直在改變著，在蘋果公司發(fā)布的 iOS 13 系統(tǒng)中，就有出現(xiàn)輕擬物的設(shè)計(jì)手法，接著就有一大堆設(shè)計(jì)師猜測是不是擬物風(fēng)格的回歸，但我看系統(tǒng)中大部分界面設(shè)計(jì)也還是扁平風(fēng)格，并沒有把擬物風(fēng)格作為主要設(shè)計(jì)風(fēng)格，也許只是某種程度上解決了畫筆的視覺識別問題。

擬物效果能否回歸，這個(gè)言之尚早，但是新的風(fēng)格趨勢也許可以在扁平同質(zhì)化的時(shí)候增添一點(diǎn)靈感與樂趣。

能用在實(shí)際項(xiàng)目中嗎？

1. 設(shè)計(jì)

其實(shí)要做到這個(gè)效果并不難，了解一下這個(gè)風(fēng)格的結(jié)構(gòu)。

主要有三個(gè)樣式組成，1 個(gè)背景+ 2 個(gè)投影。在這個(gè)基礎(chǔ)上，通過改變顏色和大小參數(shù)來達(dá)到不同效果。

我嘗試著使用彩色去做這個(gè)效果，使用淺色背景時(shí)還是有效果的，但使用深一點(diǎn)的顏色時(shí)，問題就出現(xiàn)了，效果更像是外發(fā)光或者普通投影。這也可能是為什么大多數(shù)作品都采用比較素的顏色作為背景的原因。

2. 瀏覽

這個(gè)風(fēng)格最大的問題就是缺少對比度。在色彩使用上比較克制，沒有大面積的平鋪顏色，僅在極少的位置進(jìn)行色彩點(diǎn)綴，作用是吸引眼球。從眾多設(shè)計(jì)師的作品可以看出，整體視覺是比較平的，缺少層次。

我拿其中兩張圖進(jìn)行了 15% 強(qiáng)度的模糊處理，可以看到除了點(diǎn)綴的位置以外，界面是沒有重點(diǎn)的。

3. 操作

因?yàn)樵诮缑嬷谐宋淖忠酝猓瑤缀跛性囟紤?yīng)用了這種效果，導(dǎo)致界面所有內(nèi)容看起來都是按鈕的錯(cuò)覺。界面中的主要操作按鈕也沒有被重點(diǎn)提亮。正常態(tài)和點(diǎn)擊態(tài)的對比度并沒有拉開，容易造成狀態(tài)混淆。點(diǎn)擊欲望比較低，不利于引導(dǎo)用戶進(jìn)行下一步操作。

4. 動(dòng)畫

跟擬物效果的動(dòng)畫有同樣的問題，元素動(dòng)畫效果很難做得輕快，更適合按鈕的使用。由于視覺層級跟背景沒有實(shí)際分離開，就像固定在了背景上一樣，所以動(dòng)畫效果只要出現(xiàn)移動(dòng)，就會(huì)讓人覺得不合理，容易給人一種蟲子在皮膚底下蠕動(dòng)的感覺。

5. 開發(fā)

問題跟當(dāng)年的擬物效果的實(shí)現(xiàn)類似，要實(shí)現(xiàn)這個(gè)風(fēng)格，主要有兩個(gè)方式。

切圖：對元素的每個(gè)狀態(tài)（Normal、Hover、Pressed），設(shè)計(jì)師都需要分別提供一張切圖，這個(gè)會(huì)導(dǎo)致資源庫增加大量的圖片。 代碼實(shí)現(xiàn)：這個(gè)風(fēng)格的實(shí)現(xiàn)效果是對元素增加兩個(gè)不同方向的投影，通過代碼可以實(shí)現(xiàn)。但是需要開發(fā)對每個(gè)元素添加投影，樣式代碼增多，繁瑣的工作量，開發(fā)也不會(huì)樂意。

附 CSS 實(shí)現(xiàn)新風(fēng)格的網(wǎng)站：Neumorphism 的生成器

綜合分析來看，這種設(shè)計(jì)風(fēng)格目前在項(xiàng)目中推廣和實(shí)現(xiàn)中并不合適。

總結(jié)

這個(gè)風(fēng)格的出現(xiàn)也確實(shí)給大家?guī)砹艘粋€(gè)新的思考，這個(gè)風(fēng)格會(huì)持續(xù)嗎？可用嗎？也許扁平風(fēng)格的多年流行后，設(shè)計(jì)潮流開始往回走，但并不是直接回到擬物風(fēng)格，而是在效率和視覺效果中找一個(gè)平衡點(diǎn)。不論這個(gè)風(fēng)格的對錯(cuò)，起碼引起了設(shè)計(jì)師的注意，也激發(fā)了很多設(shè)計(jì)師的靈感，就像當(dāng)年擬物風(fēng)格和扁平風(fēng)格的討論一樣，不分對錯(cuò)，設(shè)計(jì)師也不妨多留意一下這個(gè)風(fēng)格，試著做一下效果圖，或許會(huì)有新的發(fā)現(xiàn)。

藍(lán)藍(lán)設(shè)計(jì) 魏華寫

     在承擔(dān)ui設(shè)計(jì)項(xiàng)目中，常常碰到一些客戶不給設(shè)計(jì)師看己往的軟件或本公司設(shè)計(jì)師設(shè)計(jì)但沒有被客戶認(rèn)可的設(shè)計(jì)方案，怕限制設(shè)計(jì)師的思路。那究竟給設(shè)計(jì)師參考會(huì)不會(huì)限制設(shè)計(jì)師的思維呢？

     實(shí)際上不會(huì)的，這是更多維度了解客戶的思考和角度，排除己被嘗試過的選項(xiàng)。

     在進(jìn)行一個(gè)ui 設(shè)計(jì)前，深度方面應(yīng)該要了解業(yè)務(wù)，用戶角色，環(huán)境生態(tài)，交互流程，關(guān)鍵功能，核心價(jià)值，用戶體驗(yàn)的峰值點(diǎn)和難點(diǎn)在哪里…….總之了解的越深越好。

     寬度方面，要看到競品分析，行業(yè)趨勢，國內(nèi)外優(yōu)秀案例欣賞，專業(yè)文章觀點(diǎn)，應(yīng)該是可以拓展設(shè)計(jì)師的思維。

     設(shè)計(jì)最核心的目標(biāo)應(yīng)該在于解決問題，而不是單純的讓界面好看。

      優(yōu)秀的設(shè)計(jì)師要明確解決問題的目標(biāo)，博采眾長，獨(dú)立思考，看眾多的競品是看眾多的解題思路，多方位角度看問題。各產(chǎn)品資源，核心技術(shù)不同，取舍不同，理解信息架框，運(yùn)營思路，用戶特征，技術(shù)實(shí)現(xiàn)可能性，不會(huì)只照著您給的資料比貓畫虎。

       因此，我認(rèn)為，放心的給設(shè)計(jì)師參考資料吧，互相的了解，溝通越多，越容易出好的作品。

這五張圖是最近藍(lán)藍(lán)設(shè)計(jì)的稿件，展現(xiàn)從一個(gè)模糊的概念性需求到一個(gè)可視化概念性方案的設(shè)計(jì)過程。