2021年如何做好作品集
今天分享的這篇文章非常長(zhǎng)，我寫(xiě)了1個(gè)星期。內(nèi)容比較多，慢慢看。2020年馬上結(jié)束了，今年的環(huán)境真的變化太快了，設(shè)計(jì)師們也習(xí)慣了就業(yè)環(huán)境的殘酷。曾幾何時(shí)UI設(shè)計(jì)師是一個(gè)非常高大上的名詞，但現(xiàn)在UI設(shè)計(jì)師意味著難就業(yè)，工作難找。因?yàn)閁I設(shè)計(jì)師是依附于產(chǎn)品設(shè)計(jì)的一個(gè)崗位，當(dāng)經(jīng)濟(jì)上行，大多數(shù)公司急需人員開(kāi)展項(xiàng)目，所以會(huì)放寬各種要求。盡快完成項(xiàng)目。
所以培訓(xùn)幾個(gè)月，就上崗拿月薪上萬(wàn)的人大有人在。但是目前經(jīng)濟(jì)情況大家都知道了，所以很多公司開(kāi)源節(jié)流，招聘需求盡可能的減少。有招聘崗位那也是萬(wàn)里挑一。所以面試不僅僅是作品，還需要看你的學(xué)歷，看你的工作背景，你曾經(jīng)做過(guò)的項(xiàng)目。設(shè)計(jì)師已經(jīng)成為名副其實(shí)的競(jìng)爭(zhēng)最激烈崗位了。你的學(xué)歷，你曾經(jīng)工作過(guò)的公司，這些是無(wú)法改變的過(guò)去式了，唯一還可以去改變的就是作品集了。那么2021年，我們的作品集到底該如何去做了？
作品匹配個(gè)人經(jīng)歷
設(shè)計(jì)師的作品集是個(gè)人能力的體現(xiàn)，所以一些想走捷徑的人盜用一些其他人的作品，然后填充進(jìn)自己的作品集，因?yàn)橛X(jué)得作品越多越好。一個(gè)有經(jīng)驗(yàn)的面試官可以通過(guò)你的作品內(nèi)容的水平是否平均，來(lái)判斷你的作品是否真實(shí)。比如我見(jiàn)過(guò)很多字體設(shè)計(jì)非常一般的作品，但是到了專(zhuān)題突然標(biāo)題設(shè)計(jì)非常的復(fù)雜，這就明顯會(huì)讓人覺(jué)得不真實(shí)。
作品集的作品內(nèi)容盡量去匹配你的個(gè)人工作經(jīng)歷，比如你的上家工作是醫(yī)療行業(yè)，但是了你的作品集內(nèi)容完全看不到。這樣別人會(huì)懷疑你的工作經(jīng)歷的真實(shí)性。有時(shí)候我也會(huì)收到一些作品，讓我看看是不是竹筍同學(xué)的作品。我也看到不少次一些作品集里放著京東或者網(wǎng)易的大廠作品，但是簡(jiǎn)歷是完全看不到的。別人會(huì)對(duì)你進(jìn)行背調(diào)，設(shè)計(jì)師現(xiàn)在有大量的渠道互通，背景去了解后，如果作假那么就會(huì)被拉黑的。
刪除小練習(xí)
有追求的設(shè)計(jì)師，都會(huì)在工作之外去學(xué)習(xí)一些技能去提高自己的專(zhuān)業(yè)能力。這些能力可能不會(huì)馬上去應(yīng)用在工作里。比如一些插畫(huà)，一些字體設(shè)計(jì)，或者C4D。但學(xué)習(xí)肯定是從基礎(chǔ)簡(jiǎn)單開(kāi)始，然后到技法復(fù)雜的作品。一些設(shè)計(jì)師舍不得小練習(xí)，覺(jué)得這也是我的作品，我要放到作品集里，但這些零散的基礎(chǔ)的小練習(xí)，并不能給你的作品明顯加分，反而會(huì)減分。對(duì)于這些練習(xí)的作品，如果技法難度不足，就不要放了。如果需要放也要考慮放在哪里，如何去用。比如一張插畫(huà)，單獨(dú)放在作品集里，會(huì)覺(jué)得非常的零散。如果做系列插畫(huà)，做為APP設(shè)計(jì)的啟動(dòng)頁(yè)去展示，就會(huì)豐富飽滿許多。
應(yīng)屆生的作品
設(shè)計(jì)競(jìng)爭(zhēng)非常激烈，很多大三大四的學(xué)生就有意識(shí)很早的開(kāi)始學(xué)習(xí)了，為了尋求一份好的實(shí)習(xí)工作。首先弄明白為什么一些公司招收實(shí)習(xí)生，因?yàn)槟闶菨摿伞８粗械氖悄愕脑O(shè)計(jì)潛力。所以你學(xué)校的作品?；蛘吣阃ㄟ^(guò)插畫(huà)字體設(shè)計(jì)，這些基本功判斷你是否具備相應(yīng)的潛力。但是現(xiàn)在有一個(gè)非常不好的現(xiàn)象，就是在作品集大量充斥著各種高深的產(chǎn)品分析和理論講述。這個(gè)現(xiàn)象集中在UI 設(shè)計(jì)中最普遍。
學(xué)生是沒(méi)有任何真實(shí)項(xiàng)目經(jīng)驗(yàn)的，有也是在項(xiàng)目中擔(dān)任輔助角色，所以各種用戶畫(huà)像，產(chǎn)品背景分析其實(shí)是非常懸浮在空中的，沒(méi)有真實(shí)參與過(guò)任何商業(yè)設(shè)計(jì)，或者一天生意也沒(méi)有做過(guò)，卻模仿社招工作多年的設(shè)計(jì)師，去講述各種理論數(shù)據(jù)分析。其實(shí)在面試官看來(lái)是非?？尚Φ摹．?dāng)然純交互或者用戶體驗(yàn)的應(yīng)屆生。確實(shí)應(yīng)該多做這方面練習(xí)。但畢竟這樣的崗位稀少。而且不符合大量實(shí)習(xí)招聘職位的需求。
大廠作品集
現(xiàn)在互聯(lián)網(wǎng)的共享資源是如此豐富，也有很多樂(lè)于分享的設(shè)計(jì)師分享自己的作品集，我們能找到各種作品集的參考。我們都能看到各種吸睛的標(biāo)題，例如常見(jiàn)的標(biāo)題就是大廠的設(shè)計(jì)師如何做作品集的，每個(gè)設(shè)計(jì)師都有一個(gè)大廠夢(mèng)，我們希望通過(guò)模仿大廠設(shè)計(jì)師的作品集，去入職大廠，這樣愿望是美好的，但現(xiàn)實(shí)很殘酷。全國(guó)有幾千萬(wàn)設(shè)計(jì)師，大多數(shù)設(shè)計(jì)師所在的城市決定了，并沒(méi)有這樣的大廠存在。由于大廠的分工非常細(xì)致，每個(gè)設(shè)計(jì)師所分擔(dān)的職責(zé)非常垂直，做UI界面的基本上不會(huì)去做運(yùn)營(yíng)設(shè)計(jì)相關(guān)。而做界面中，又會(huì)花大量時(shí)間研究項(xiàng)目所在的模塊的每個(gè)細(xì)節(jié)點(diǎn)。所以可以每個(gè)小細(xì)節(jié)點(diǎn)去做非常多的理論分析。
大廠作品集里面面最值得看的其實(shí)是項(xiàng)目經(jīng)驗(yàn)的總結(jié)，這些偏理論分析的內(nèi)容，其實(shí)對(duì)于很多在二三線城市的設(shè)計(jì)師并沒(méi)有很直接的參考意義。試想下做為一個(gè)二三線的城市的老板，他招設(shè)計(jì)師的目的是什么，是不是去解決日常公司里美學(xué)問(wèn)題，或者去做界面，或者去做專(zhuān)題，或者有時(shí)候公司日常有個(gè)易拉寶海報(bào)啥的也要你去幫忙做下，可能有的設(shè)計(jì)師覺(jué)得這不就是美工，多廉價(jià)。但是確實(shí)大多數(shù)公司設(shè)計(jì)師生存狀態(tài)就是如此。所以對(duì)于大多數(shù)設(shè)計(jì)師來(lái)說(shuō)。你的作品集里如果充斥大量純虛擬UI的界面，不管你理論分析寫(xiě)的多好，可能對(duì)于面試官來(lái)看，就是千篇一律，直接翻翻就PASS了。
清晰的結(jié)構(gòu)
作品集是你個(gè)人能力的體現(xiàn)，也是你過(guò)完項(xiàng)目經(jīng)驗(yàn)的總結(jié)。不管是哪種。都需要細(xì)細(xì)的整理。而不是作品堆砌。常見(jiàn)的作品類(lèi)型就是APP設(shè)計(jì)，專(zhuān)題設(shè)計(jì)，Banner設(shè)計(jì)，字體設(shè)計(jì)。我們常見(jiàn)的分類(lèi)是方法是根據(jù)求職崗位進(jìn)行區(qū)分，比如偏UI設(shè)計(jì)的可以整理2到3個(gè)APP設(shè)計(jì)。如果求職方向是純視覺(jué)設(shè)計(jì)，那么需要整理專(zhuān)題設(shè)計(jì)，banner設(shè)計(jì)和一些字體品牌設(shè)計(jì)相關(guān)內(nèi)容。如果是在二三線城市。我建議作品集的內(nèi)容類(lèi)型還是豐富一些，單一的類(lèi)型的作品雖然聚焦，但是可能并不適合大多數(shù)人。
文件夾作品
五年前，如果你出去面試找工作，帶一堆文件夾出去，別人會(huì)覺(jué)得你這個(gè)設(shè)計(jì)師水平比較差，連總結(jié)都不做。所以我們必須做一份漂亮經(jīng)過(guò)整理的作品集。有一次有個(gè)學(xué)生問(wèn)我UI面試有沒(méi)有什么技巧，我說(shuō)技巧都是輔助，重要還是作品。我建議學(xué)生整理好作品集的同時(shí)，另外把作品以文件夾形式一個(gè)個(gè)項(xiàng)目整理好，因?yàn)檫@樣別人會(huì)通過(guò)查看你的作品明細(xì)，可以對(duì)你的個(gè)人水平有更深入的認(rèn)識(shí)。
為什么會(huì)這樣了？因?yàn)槿ψ永镉幸恍┎缓玫默F(xiàn)象。就是有很多抄襲搬運(yùn)現(xiàn)象。甚至某寶上還有賣(mài)作品集的。這些現(xiàn)象尤其以插畫(huà)和APP作品為甚。十幾個(gè)拼湊的界面，五六頁(yè)的展示一個(gè)APP的項(xiàng)目。所以很多面試官對(duì)面試者水平產(chǎn)生各種懷疑?，F(xiàn)在出去面試必然會(huì)做測(cè)試題。因?yàn)槊嬖嚬儆袝r(shí)候也無(wú)從判斷，只能通過(guò)這種最簡(jiǎn)單粗暴但不友好的方式去看面試者水平。
設(shè)計(jì)思維的展示
作品集內(nèi)的內(nèi)容一定要想辦法走差異化路線。不管是UI類(lèi)型的作品集，還是視覺(jué)類(lèi)型的作品集，都不要千篇一律。比如一張插畫(huà)的展示，不要只放置一個(gè)作品圖片，，可以多展示一些設(shè)計(jì)思維，從頭腦風(fēng)暴的國(guó)潮，靈感的來(lái)源，價(jià)值的呈現(xiàn)多維度的去展示作品。
UI作品集的內(nèi)容
作品集內(nèi)放什么作品，這是設(shè)計(jì)師第一個(gè)需要明確的，我的下一份工作是做什么。如果是純UI界面崗位，作品集呈現(xiàn)以純Ui界面為主。并不需要加入太多純視覺(jué)設(shè)計(jì)的內(nèi)容。當(dāng)然這樣的的做法，面試機(jī)會(huì)非常少，有一定賭的成分。首先作品集里呈現(xiàn)的UI項(xiàng)目需要和你的工作經(jīng)歷匹配，這些項(xiàng)目的展示是你真實(shí)經(jīng)歷過(guò)的，如果你想靠純虛擬的項(xiàng)目在大廠去某得一份純UI工作，基本上的概率和中彩票差不多。
因?yàn)槭袌?chǎng)上太多存量的大廠設(shè)計(jì)師也等著去跳槽，他們有著豐富的項(xiàng)目經(jīng)驗(yàn)和表達(dá)話術(shù)，這點(diǎn)你是無(wú)法比擬的。純UI界面的作品集，如果有幸進(jìn)入面試環(huán)節(jié)，在實(shí)際面試時(shí)候，對(duì)于項(xiàng)目的具體細(xì)節(jié)，你并不能講的非常明白透徹，可能就沒(méi)有機(jī)會(huì)了。因?yàn)榇髲S設(shè)計(jì)師每天專(zhuān)注具體的項(xiàng)目具體的模塊，可以每個(gè)小細(xì)節(jié)講的很清楚，再加上出名的項(xiàng)目支撐，面試官也會(huì)高看一眼不是嘛？所以純UI界面的作品集在實(shí)際的找工作中，非常吃虧。大廠的面試官看不上，覺(jué)得你寫(xiě)的那套理論非常的空洞模板化。中小廠覺(jué)得你作品缺乏綜合視覺(jué)能力，能力太單一。
運(yùn)營(yíng)作品集的內(nèi)容
如果是純運(yùn)營(yíng)視覺(jué)的作品集，以運(yùn)營(yíng)專(zhuān)題設(shè)計(jì)為主，這類(lèi)設(shè)計(jì)師可能也具備做UI的能力，那么很多運(yùn)營(yíng)設(shè)計(jì)師最糾結(jié)的是，我要不要去放界面的內(nèi)容。那就根據(jù)你找工作的方向來(lái)定，如果你找純視覺(jué)運(yùn)營(yíng)的方向，可以不放界面作品集，因?yàn)槟愕墓ぷ鲀?nèi)容并沒(méi)有這個(gè)，放上去顯得并不專(zhuān)業(yè)，或者有點(diǎn)畫(huà)蛇添足。
也有人糾結(jié)我是不是應(yīng)該找一些各種數(shù)據(jù)理論來(lái)支撐一下，不要讓人覺(jué)得我是一個(gè)純畫(huà)圖的。我的建議是，如果去大廠，當(dāng)然要。你需要多在作品集里體現(xiàn)運(yùn)營(yíng)的體系思維。比如各種運(yùn)營(yíng)組件的整理，各種品牌營(yíng)銷(xiāo)的視覺(jué)設(shè)定。這些才是大廠設(shè)計(jì)師具備的素質(zhì)，如果你只是滿足作品集里加入各種漂亮的專(zhuān)題和Banner設(shè)計(jì)，你會(huì)發(fā)現(xiàn)你好像在找一個(gè)類(lèi)似美工的工作。因?yàn)槟愕淖髌芳矬w現(xiàn)的只是一個(gè)執(zhí)行思維，并沒(méi)有營(yíng)銷(xiāo)驅(qū)動(dòng)的體系思維。
UI+視覺(jué)作品集的內(nèi)容
這個(gè)方向，其實(shí)我建議大多數(shù)人的方向，因?yàn)?0%以上的設(shè)計(jì)師，其實(shí)就業(yè)都在中小型公司，日常需要解決公司里各種美學(xué)問(wèn)題，不管你是做UI，還是日常的運(yùn)營(yíng)視覺(jué)，甚至一些線下的平面設(shè)計(jì)。所以公司需要的是你的作品集呈現(xiàn)你具有綜合視覺(jué)能力。我的建議是是各種類(lèi)型作品都要放的，當(dāng)然這類(lèi)作品集最大的問(wèn)題是雜而不精，數(shù)量很多，單個(gè)作品沒(méi)有出彩的。所以如果你走這個(gè)綜合性路線。必須讓你的作品集看到出彩點(diǎn)。
下面我們來(lái)具體講講UI作品集應(yīng)該怎么做？
作品集的內(nèi)容
UI設(shè)計(jì)師的主要工作以界面為主，大型互聯(lián)網(wǎng)公司的UI設(shè)計(jì)師專(zhuān)注于界面設(shè)計(jì)，而中小型公司更加偏綜合，界面和視覺(jué)設(shè)計(jì)都要兼顧。到底在作品集里放多少APP？首先不是你放置APP數(shù)量越多越好，如果你的公司只專(zhuān)注一個(gè)APP，那么你可以就放一個(gè)，但是你需要通過(guò)大量篇幅去把這個(gè)APP的每個(gè)細(xì)節(jié)介紹清楚。不用五到六頁(yè)蜻蜓點(diǎn)水的介紹。這樣對(duì)你的作品集篩選沒(méi)有任何的幫助。
模板化的話術(shù)
曾經(jīng)UI界面設(shè)計(jì)很純粹就是考慮如何設(shè)計(jì)一個(gè)舒服的界面，讓用戶用的舒服，所以用戶體驗(yàn)為中心這個(gè)詞提出的頻率非常高，但現(xiàn)在發(fā)現(xiàn)好像沒(méi)人提這個(gè)詞了，設(shè)計(jì)并賦予了更多的職能。必須談商業(yè)，必須談轉(zhuǎn)化率，有人說(shuō)這是UI設(shè)計(jì)是商業(yè)設(shè)計(jì)一環(huán)，所以必須更多的談商業(yè)，所以你會(huì)發(fā)現(xiàn)現(xiàn)在周?chē)腢I設(shè)計(jì)更多的談設(shè)計(jì)賦能，用戶增長(zhǎng)，營(yíng)銷(xiāo)架構(gòu)，商業(yè)戰(zhàn)略，宏觀視野這些詞匯。感覺(jué)設(shè)計(jì)師背負(fù)了這么重的使命，快成CEO了。
這些話術(shù)是不是很熟悉，你好像在每個(gè)作品集里都可以看到。你要是很純粹的談一些微觀的界面流程優(yōu)化，感覺(jué)你的格局太小了。大廠設(shè)計(jì)師特別喜歡引導(dǎo)這樣的潮流，因?yàn)槲覀儾⒉磺宄@里面很具體是怎么樣的。比如你會(huì)在每個(gè)作品集里都看到千篇一律的KANO模型話術(shù)。這是一個(gè)產(chǎn)品經(jīng)理應(yīng)該去考慮的事情，設(shè)計(jì)師應(yīng)該有產(chǎn)品思維也非常對(duì)的。但是當(dāng)一個(gè)作品集每個(gè)人都寫(xiě)一樣的KANO模型和用戶體驗(yàn)地圖話術(shù)的時(shí)候，這個(gè)事情就不正常了。因?yàn)椴](méi)有仔細(xì)深究，只是粘貼復(fù)制而已。
所以我們更多的是邯鄲學(xué)步，明明你是一個(gè)剛畢業(yè)的學(xué)生，也學(xué)著務(wù)虛的商業(yè)格局，這樣是非常不嚴(yán)肅的，所以目前大量的UI作品集里充斥著這些模板化的話術(shù)，是非常耽誤人的。我的建議作品集里少去談這些非常宏觀空洞的話術(shù)，作為普通設(shè)計(jì)師，多去關(guān)注一些UI設(shè)計(jì)交互體驗(yàn)細(xì)節(jié)。
數(shù)據(jù)分析
現(xiàn)在APP的界面講究數(shù)據(jù)，你的APP下載量是多少，用戶多少，月活日活是多少。如果是改版的項(xiàng)目，通過(guò)你的改版取得了什么數(shù)據(jù)的增長(zhǎng)。其實(shí)這些確實(shí)是商業(yè)設(shè)計(jì)關(guān)注的點(diǎn)。一些設(shè)計(jì)師如果如果不關(guān)注這些，去描述自己的項(xiàng)目的時(shí)候就容易底氣不足，如果是虛擬項(xiàng)目，那更是啞口無(wú)言。其實(shí)這些并不是衡量你UI設(shè)計(jì)的唯一標(biāo)準(zhǔn)。對(duì)于大廠設(shè)計(jì)師提供的各種數(shù)據(jù)，也不要迷信。其實(shí)UI設(shè)計(jì)只是整個(gè)研發(fā)流程的一環(huán)，一個(gè)改版的數(shù)據(jù)，可能是多種因素促成的。有很多已知未知的數(shù)據(jù)，設(shè)計(jì)師并不能完整的看到。所以了如果你是一個(gè)在職設(shè)計(jì)師，請(qǐng)多種渠道去關(guān)注你的設(shè)計(jì)數(shù)據(jù)。所以你是一個(gè)初學(xué)者或者只是參與某個(gè)模塊的設(shè)計(jì)，可以坦誠(chéng)的面對(duì)。不要試圖編造一些無(wú)法驗(yàn)證的數(shù)據(jù)蒙混過(guò)關(guān)。
樣機(jī)使用
UI作品集里我是不建議使用任何樣機(jī)的。在五六年前如果用還是可以的，可以作為一個(gè)視覺(jué)展示的亮點(diǎn)，現(xiàn)在作品集里還放這些，基本上作品集會(huì)被扔，因?yàn)閯e人覺(jué)得這是初學(xué)者。當(dāng)然還有一種情況，就是本身界面細(xì)節(jié)不足，想通過(guò)樣機(jī)，把界面圖縮小，通過(guò)這樣取巧的辦法去蒙混過(guò)關(guān)。這樣在面試官那里也是很難通過(guò)的。我更建議UI界面用大圖展示，配以平實(shí)的排版，文字描述清楚你要講的點(diǎn)。UI的界面展示，能讓面試官看清楚你表達(dá)的內(nèi)容。而不是用眼花繚亂的視覺(jué)手段去掩飾界面思考的不足。比如下面的某設(shè)計(jì)師設(shè)計(jì)的排版，沒(méi)有任何花哨排版，就是樸實(shí)的展示界面細(xì)節(jié)。我覺(jué)得這樣看似沒(méi)有設(shè)計(jì)的排版其實(shí)是最佳的展現(xiàn)形式。
品牌設(shè)計(jì)
不同公司對(duì)于品牌設(shè)計(jì)的定義不一樣。比如一些大型公司品牌設(shè)計(jì)是平面設(shè)計(jì)范疇下的，負(fù)責(zé)各種線上線下的各種品牌視覺(jué)，具體的比如我要做一次活動(dòng)，我需要輸出一整套設(shè)計(jì)方案，這個(gè)方案供各種印刷或者線上界面使用。這是一些大型互聯(lián)網(wǎng)公司品牌設(shè)計(jì)需要做的
那么對(duì)于很多普通中小型公司的UI設(shè)計(jì)師，顯然沒(méi)有這么高的品牌要求，不會(huì)單獨(dú)招聘一個(gè)品牌設(shè)計(jì)師，所以這部分工作你可能也要承擔(dān)起來(lái)。同時(shí)作品集中UI部分顯然也需要去考慮一些品牌視覺(jué)的輸出。比如繪制一些IP形象在界面中貫穿。
并對(duì)這些形象進(jìn)行視覺(jué)延伸，比如界面中的圖標(biāo)，界面中的彈窗，界面中的缺省數(shù)據(jù)頁(yè)，都可以運(yùn)用IP形象進(jìn)行穿插。在IP形象冗余界面中，做的比較好的是閑魚(yú)APP
運(yùn)營(yíng)設(shè)計(jì)
很多UI設(shè)計(jì)師有這樣一個(gè)鄙視鏈，沉迷于各種產(chǎn)品分析，覺(jué)得做運(yùn)營(yíng)設(shè)計(jì)是非常廉價(jià)的，這樣的想法有歷史原因，當(dāng)然最直接的原因是運(yùn)營(yíng)設(shè)計(jì)的薪資天花板比UI設(shè)計(jì)要低。在大廠里UI設(shè)計(jì)專(zhuān)注于界面設(shè)計(jì)的某個(gè)模塊，一個(gè)APP其實(shí)由一組人完成，每個(gè)人負(fù)責(zé)具體的模塊，所以研究的非常精細(xì)。但同時(shí)局限性其實(shí)也非常大。對(duì)于很多設(shè)計(jì)師來(lái)說(shuō)。不要完全把自己的專(zhuān)業(yè)局限在純界面上，日常工作也會(huì)涉及到非常多的視覺(jué)運(yùn)營(yíng)設(shè)計(jì)。比如一張漂亮的啟動(dòng)頁(yè)，一個(gè)充滿營(yíng)銷(xiāo)味道的彈窗，這些都應(yīng)該是設(shè)計(jì)師不可以丟下的基本功。
插畫(huà)設(shè)計(jì)
這幾年插畫(huà)設(shè)計(jì)非常的流行，很多UI設(shè)計(jì)師也覺(jué)得這是一個(gè)必備的技能去學(xué)習(xí)，那么作品集放一些插畫(huà)作品會(huì)不會(huì)給你加分了？首先我們招聘設(shè)計(jì)師是來(lái)解決工作中的各種問(wèn)題，那么一個(gè)做界面設(shè)計(jì)師需要的實(shí)際應(yīng)用能力。插畫(huà)也有非常多的風(fēng)格，常見(jiàn)的兒插風(fēng)格，厚重的手繪CG風(fēng)格，漫畫(huà)涂鴉風(fēng)格，扁平線性風(fēng)格等等，并不是所有的風(fēng)格都可以應(yīng)用在界面設(shè)計(jì)中的。如果你只是做為業(yè)余愛(ài)好來(lái)學(xué)習(xí)。你可以任意選擇風(fēng)格去學(xué)習(xí)。而作品集里放置一些零散的小插畫(huà)，除了讓面試官知道你會(huì)繪畫(huà)外，并不能有明顯的加分，反而這些小練習(xí)給人感覺(jué)非常零散，不專(zhuān)業(yè)的感覺(jué)。所以如果你想去學(xué)習(xí)插畫(huà)，請(qǐng)?jiān)诮缑嬷谐尸F(xiàn)插畫(huà)與設(shè)計(jì)結(jié)合的應(yīng)用。比如啟動(dòng)頁(yè)，banner設(shè)計(jì)，專(zhuān)題的頭圖等等。
C4D設(shè)計(jì)
C4D也是一個(gè)熱門(mén)的方向，這個(gè)可以運(yùn)用在非常多的運(yùn)營(yíng)設(shè)計(jì)中，但是首先明確C4D不是那么容易學(xué)好的，入門(mén)非常容易，但是想精深需要花太多太多時(shí)間精進(jìn)學(xué)習(xí)的。我看過(guò)非常的設(shè)計(jì)師作品集里放置了非常初級(jí)的燈管字之類(lèi)的小練習(xí)，這些都是學(xué)習(xí)了幾個(gè)月的成果，然后發(fā)現(xiàn)工作中用不到，然后也沒(méi)有再去深入去研究了。就半途而廢了。那么你會(huì)發(fā)現(xiàn)作品集里放這些小練習(xí)，還不如不放，這樣會(huì)更加暴露你的專(zhuān)業(yè)不足的缺陷。下面是我一個(gè)設(shè)計(jì)師
今天就講到這里，我們將繼續(xù)更新下一篇《如何設(shè)計(jì)運(yùn)營(yíng)作品集》,
我已經(jīng)寫(xiě)好了，讓我再精加工下，當(dāng)然也可以關(guān)注我的
設(shè)計(jì)公眾號(hào)《聊設(shè)計(jì)》liaosheji2010，第一時(shí)間觀看到我的更新。
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(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ù)
2020新冠疫情大爆發(fā)，生命在病毒面前不堪一擊；一份保險(xiǎn)不是為了愉悅而是安心；今年為健康服務(wù)。
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(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ù)
隔了一年都沒(méi)發(fā)作品了，感覺(jué)還是得多發(fā)發(fā)作品提升自己呀。本來(lái)是還有兩張動(dòng)效的，文件太大導(dǎo)出有問(wèn)題所以我放棄了，下次一定做好優(yōu)化。
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(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ù)
“由理有劇”系列以”我們?cè)鯓永斫獍岛谀Ｊ健盀殚_(kāi)篇，緣由作者正在任職的工作是 TO B 產(chǎn)品交互及界面設(shè)計(jì)，入職時(shí)正值公司整體產(chǎn)品線升級(jí)迭代，用戶界面從淺色模式向暗黑模式探索的階段。這個(gè)探索階段面臨的本質(zhì)問(wèn)題便是“到底什么是暗黑模式”，同時(shí)“我們?yōu)槭裁匆冒岛谀Ｊ?/strong>”的問(wèn)題也隨之而來(lái)。
為了給公司同事闡述這兩個(gè)問(wèn)題，作者搜集了大量資料，翻閱了相關(guān)產(chǎn)品系統(tǒng)所給出的設(shè)計(jì)文檔，重點(diǎn)圍繞“什么是暗黑模式”展開(kāi)，逐步推敲其中的理論原理，總結(jié)出便于理解的文字內(nèi)容。這樣做的目的簡(jiǎn)單有二，一是與產(chǎn)品、開(kāi)發(fā)、測(cè)試方面的同事能夠達(dá)成向暗黑模式優(yōu)化升級(jí)的共識(shí)；二是能夠讓我們的各個(gè)產(chǎn)品線更從容地去擁抱暗黑模式的到來(lái)。
文章大綱
1、是什么？
2、為什么？
隨著 iOS 13 和 Android 10 的正式發(fā)布，“暗黑模式 (Dark Mode)”一詞逐漸走入了我們的視野，“暗黑模式是什么？”這個(gè)問(wèn)題也一度霸占了Google搜索榜首。想要深入了解暗黑模式，也許我們可以換一個(gè)角度，從用戶界面的演進(jìn)歷史中尋找線索，從而幫助我們更好地理解暗黑模式。
作者自從拜讀了《蘋(píng)果三劍客》，對(duì)于用戶界面的前世今生才有了更深的了解，蘋(píng)果的產(chǎn)品發(fā)展史，某種程度上也可以稱(chēng)為用戶界面的演進(jìn)史。廢話不說(shuō)，下面讓我們一起簡(jiǎn)單聊聊。
計(jì)算機(jī)誕生的早期，其顯示器一直以“暗黑模式”面向操作者，其緣由是早期的顯示技術(shù)一直被CRT主導(dǎo)，CRT釋義為“陰極射線顯像管”，在19世紀(jì)末被研制出來(lái)，因?yàn)橹圃煸硐鄬?duì)簡(jiǎn)單，所以CRT一直是早期電腦顯示的主力，但在上世紀(jì)80年代之前僅支持單色顯示。
下面兩圖分別為蘋(píng)果公司于1977至1980年間生產(chǎn)發(fā)售的 Apple II 及 Apple III 型計(jì)算機(jī)
圖中顯而易見(jiàn)，兩款計(jì)算機(jī)的顯示方式均為單調(diào)的黑底白字或綠字，呈現(xiàn)出一種“暗黑模式”的視覺(jué)效果。蘋(píng)果公司的 Apple II 和 Apple III 兩支產(chǎn)品線一直以這種“暗黑模式”面向用戶。這也反映了早期的計(jì)算機(jī)以輸入代碼執(zhí)行數(shù)字運(yùn)算作為主要功能，但是這從另一方面反應(yīng)出：未來(lái)計(jì)算機(jī)會(huì)借助不斷成長(zhǎng)、成熟的電子技術(shù)，必將掀起一場(chǎng)接一場(chǎng)的變革，用戶界面也隨之不斷地革新。
上個(gè)世紀(jì)80年代之后，CRT彩色顯示技術(shù)成熟，逐漸流行普及到各個(gè)電子行業(yè)，但當(dāng)時(shí)主流的計(jì)算機(jī)操作系統(tǒng)并沒(méi)有“圖形界面”這個(gè)概念，所以大部分計(jì)算機(jī)產(chǎn)品依舊延續(xù)了先前黑色背景的顯示方式。
直到1983年1月9日，在年度股東大會(huì)上，蘋(píng)果宣布了兩款將在未來(lái)的計(jì)算機(jī)行業(yè)中占據(jù)關(guān)鍵地位的產(chǎn)品：一款叫 Apple Lisa （麗薩，老喬的第一個(gè)女兒），蘋(píng)果第一臺(tái)（也是全球第一款）基于圖形用戶界面（GUI）的計(jì)算機(jī)，也就是 Macintosh 的前身；另一臺(tái)叫 Apple IIe ，是已獲高度成功的 Apple II 系列的新一代進(jìn)階產(chǎn)品。
Apple Lisa 向主流個(gè)人電腦行業(yè)介紹了一種全新的鼠標(biāo)控制的圖形用戶界面，宣布向單調(diào)的黑白用戶界面告別。
運(yùn)用形象的圖標(biāo)、方便的下拉菜單和重疊的窗口，替代了此前一貫使用的輸入文字命令，Lisa的圖形用戶界面開(kāi)啟了消費(fèi)者與個(gè)人電腦交互方式的革新之路。盡管Lisa存在諸多缺點(diǎn)，如定價(jià)過(guò)高，功能缺失、運(yùn)行緩慢等，但它的圖形用戶界面依然給它贏得一陣喝彩。
Lisa的GUI影響如此深遠(yuǎn)，以至于諸多電腦制造商紛紛加入鼠標(biāo)控制的GUI領(lǐng)域，爭(zhēng)相模仿。就在Lisa首次亮相十個(gè)月后，微軟于1983年11月推出了Windows操作環(huán)境。（對(duì)于此事，老喬總是公開(kāi)譴責(zé)微軟的蓋茨抄襲他的產(chǎn)品創(chuàng)意，甚至想讓蓋茨吃官司，兩位大佬一直不合也是業(yè)界皆知，跑題了...）
///一個(gè)有意思的事兒：今年7月份，一位外國(guó)的蘋(píng)果粉在Twitter上發(fā)布了一條關(guān)于 Apple IIe 型計(jì)算機(jī)的動(dòng)態(tài)，內(nèi)容展示了自己使用 Apple IIe 型計(jì)算機(jī)進(jìn)行智能化任務(wù)的過(guò)程，如發(fā)送推文、在Evernote中寫(xiě)作、發(fā)送電子郵件，甚至控制智能家居（如下圖）。要知道，這臺(tái)計(jì)算機(jī)生產(chǎn)發(fā)售至今已有37年的時(shí)間。由此感嘆，不得不說(shuō)蘋(píng)果對(duì)于產(chǎn)品的品控做到了那個(gè)時(shí)代的。
1984年，蘋(píng)果發(fā)布了個(gè)人計(jì)算機(jī) Macintosh（麥金塔），Macintosh 延續(xù)了 Lisa 的圖形界面語(yǔ)言，并向世界普及了圖形用戶界面（Graphic User Interface）的概念，從而開(kāi)啟了以白色為底色的圖形交互時(shí)代。
Lisa獲得的一些成就在 Macintosh 上體現(xiàn)的淋漓盡致，包括靈活的鼠標(biāo)、點(diǎn)陣影像圖、桌面的布局、形象的圖標(biāo)、相稱(chēng)的字體、屏幕上方的下拉菜單和重疊的窗口，這些也得益于日益成熟的顯示技術(shù)和不斷進(jìn)步的計(jì)算處理技術(shù)。形象生動(dòng)的圖形設(shè)計(jì)和界面交互一直是老喬最引以為傲的杰作，不得不說(shuō)，老喬對(duì)于計(jì)算機(jī)行業(yè)甚至是設(shè)計(jì)行業(yè)都有著極高的敏感度和先于旁人的前瞻性。（當(dāng)然，這里的主語(yǔ)應(yīng)該是蘋(píng)果）
Macintosh 產(chǎn)品的成功，不是蘋(píng)果一味地迎合計(jì)算機(jī)消費(fèi)市場(chǎng)，而是利用創(chuàng)新的方式引導(dǎo)市場(chǎng)，引領(lǐng)計(jì)算機(jī)行業(yè)向人性化的用戶界面發(fā)展、邁進(jìn)。
至此，我們也徹底地向“暗黑模式”說(shuō)了再見(jiàn)，全面擁抱“淺色模式”的到來(lái)。
麥金塔搭載的 System 1 打破了字符終端的模式，淺色的界面風(fēng)格一直持續(xù)到 System 6 都沒(méi)有顯著的改變。直到1991 年的 System 7 開(kāi)始引入彩色，圖標(biāo)也增加了隱約的灰色，藍(lán)色和黃色陰影。System 7 系列中的 7.6 版本正式被蘋(píng)果公司改名為 Mac OS ，而這一年是1997年。
與此同時(shí)，微軟的 Windows 從黑屏的 DOS 發(fā)展到全屏幕的 Windows 1，再到較為成熟的 Windows 3，最后演變到奠定當(dāng)今 Windows 界面基礎(chǔ)的炫麗多彩的 Windows 95。用那個(gè)時(shí)代的眼光來(lái)看，微軟的變化是相當(dāng)驚人的，微軟儼然成為了一匹計(jì)算機(jī)行業(yè)的黑馬，一路趕超蘋(píng)果成為行業(yè)霸主，而蘋(píng)果因?yàn)橐蜓嘏f，在界面設(shè)計(jì)上從領(lǐng)先掉到了最后。
此后，從 Mac OS 8 到 Mac OS X Server 1.0 ，蘋(píng)果一直專(zhuān)注于改善操作系統(tǒng)和優(yōu)化界面表現(xiàn)，直到2001 年 3 月，經(jīng)歷了四個(gè)開(kāi)發(fā)者預(yù)覽版和一個(gè)公共測(cè)試版之后的 Aqua 界面終于跟隨 10.0 正式發(fā)布，發(fā)布后改變了人們對(duì)計(jì)算機(jī)界面的印象，在隨后的10年里蘋(píng)果一直沿用這套界面風(fēng)格。
OS X 系列用戶界面較大的更新來(lái)自于2007年10月發(fā)布的 10.5 Leopard 豹，雖然基本的界面仍為 Aqua 和其糖果滾動(dòng)條，但新加入了一些鉑灰色和藍(lán)色，另外重新設(shè)計(jì)的 3D Dock和更多的動(dòng)畫(huà)交互使得新界面看上去 3D效果更強(qiáng)，此外還改進(jìn)了 Finder、半透明菜單條并新增了最初只用于 iTunes 的 Cover Flow界面。
整體來(lái)說(shuō)，Mac OS X 10.5 Leopard 豹 這一版本的用戶界面相比之前有了翻天覆地的變化，靈活生動(dòng)的圖形語(yǔ)言和交互體驗(yàn)重新得到了用戶青睞，蘋(píng)果也以此，再一次走上了引領(lǐng)潮流之路，使得多彩的“淺色模式”成為用戶交互界面的主流。
蘋(píng)果開(kāi)創(chuàng)性的界面圖形語(yǔ)言也延續(xù)到了移動(dòng)設(shè)備領(lǐng)域。
2007年的初代iPhone作為蘋(píng)果公司第一個(gè)移動(dòng)設(shè)備產(chǎn)品（iPhone1代）首次亮相市場(chǎng)，驚艷了整個(gè)行業(yè)，iPhone搭載的 iPhone OS 和后來(lái)更名為 iOS 的系統(tǒng)，延續(xù)了 Mac OS 用戶界面的設(shè)計(jì)語(yǔ)言。在歷代iPhone上可以看到?jīng)]有物理鍵盤(pán)侵占空間的屏幕，精美的的方塊圖案整齊的排列開(kāi)來(lái)，顏色豐富且耐看。
依稀記得當(dāng)時(shí)的我們，還玩著黑白屏幕上的俄羅斯方塊，還敲打著物理鍵盤(pán)上的九宮格，挪雞鴨也表示永不為奴。
2010年堪稱(chēng)iPhone史上最重要的一年，蘋(píng)果推出了“改變一切”的iPhone 4，并對(duì)其用戶界面進(jìn)行了革新。
生動(dòng)的擬物化設(shè)計(jì)風(fēng)格正式成為業(yè)界潮流，這也使得UI行業(yè)逐漸熱了起來(lái)，蘋(píng)果的界面設(shè)計(jì)規(guī)范也順勢(shì)成為了主流的移動(dòng)端設(shè)計(jì)規(guī)范。
蘋(píng)果以此作為移動(dòng)端界面設(shè)計(jì)的基礎(chǔ)，沿用到之后的iPhone系列中，期間iOS系統(tǒng)的風(fēng)格保持依舊，只有 iPhone 5S 搭載的 iOS 7 做出了圖標(biāo)由擬物化向扁平化的改變，但整體都以“淺色模式”作為主流的用戶界面視覺(jué)模式。
在 Mac OS 的系統(tǒng)上，用戶可以通過(guò)“通用設(shè)置-外觀”來(lái)對(duì)整體界面進(jìn)行淺色、深色的切換，可以看出，蘋(píng)果早已把“暗黑模式”納入到他們的開(kāi)發(fā)隊(duì)列中，也就是說(shuō)，“暗黑模式”的概念主要來(lái)源于蘋(píng)果的 Mac OS，這也為“暗黑模式”的正式登場(chǎng)埋下了伏筆。
自從有了這個(gè)概念之后，很多網(wǎng)站都為用戶提供了“淺色”和“深色”兩套界面，便于用戶根據(jù)自己的習(xí)慣或愛(ài)好進(jìn)行切換。在 Mac OS 之后，很多 App 和 Android 定制 ROM 也加入了所謂“深色模式”的支持，其中也不乏 Web 端的網(wǎng)站、系統(tǒng)等。
北京時(shí)間2019年6月4日，果粉期待已久的蘋(píng)果WWDC19如期而至。
發(fā)布會(huì)上，庫(kù)克一如既往地優(yōu)先調(diào)侃了Andriod系統(tǒng)一番….（蘋(píng)果一直喜歡用數(shù)據(jù)說(shuō)話，想了解的同學(xué)可以回顧一下發(fā)布會(huì)的視頻）
言歸正傳，在發(fā)布了一系列硬件之后，庫(kù)克終于介紹了大家期待已久的 iOS 13。新發(fā)布的 iOS 13，除了提升系統(tǒng)流暢度和增加系統(tǒng)穩(wěn)定性外，還介紹了其他提升用戶體驗(yàn)的優(yōu)化。
其中，最為引人注目的“暗黑模式”即將亮相于新系統(tǒng)。
發(fā)布會(huì)表示，暗黑模式可以“改善電池壽命，改善視力不佳和強(qiáng)光下的人的可視性，以及在弱光環(huán)境中更好地使用設(shè)備”。
“Wow，beautiful！”、“That’s beautiful！”、“That’s so beautiful！”發(fā)布會(huì)的主持人一邊演示使用在暗黑模式下的App應(yīng)用，一邊不由自主地發(fā)出贊美。這也許也受到了老喬的影響，猶如在劇場(chǎng)舞臺(tái)中心的話劇演員，有著一種無(wú)可比擬的自信和氣場(chǎng)。
但有意思的一點(diǎn)是，主持人展示了 iOS 13 暗黑模式的開(kāi)發(fā)團(tuán)隊(duì)合照，從極客穿著到賽博朋克式的暗黑搖滾裝扮，這一戲劇性的變化似乎在告訴大家：“玩，我們也是認(rèn)真的?！?
發(fā)布會(huì)上簡(jiǎn)單演示了暗黑模式下的漂亮界面，雖然沒(méi)有過(guò)多地闡述暗黑模式的開(kāi)發(fā)細(xì)節(jié)，但是這標(biāo)志著暗黑模式“重新”登上歷史舞臺(tái)。
我們從蘋(píng)果產(chǎn)品發(fā)展史中，不難發(fā)現(xiàn)蘋(píng)果對(duì)于用戶體驗(yàn)的理解是具有創(chuàng)造性的，總是能先于用戶發(fā)現(xiàn)用戶的潛在需求。蘋(píng)果產(chǎn)品的發(fā)展史也可以稱(chēng)之為用戶界面的演進(jìn)史，從早期黑色背景的計(jì)算機(jī)桌面發(fā)展到以淺色為主的用戶界面，再到 iOS 13 正式發(fā)布的“暗黑模式”，這一過(guò)程貌似是在“返祖”，但這些始終是圍繞以用戶體驗(yàn)為中心的改變和突破。
“暗黑模式”是什么？拋開(kāi)技術(shù)理論，簡(jiǎn)單理解就是降低用戶界面在設(shè)備上的亮度，以深色的背景、較低的對(duì)比度、灰階的色彩來(lái)呈現(xiàn)用戶界面，提升用戶使用產(chǎn)品的體驗(yàn)。
上面我們提到了，根據(jù) Apple 官方的說(shuō)法，暗黑模式可以“改善電池壽命，改善視力不佳和強(qiáng)光下的人的可視性，以及在弱光環(huán)境中更好地使用設(shè)備”。
我們可以圍繞這個(gè)說(shuō)法，結(jié)合我們與設(shè)備、環(huán)境的關(guān)系進(jìn)行探討。
隨著人們對(duì)智能設(shè)備的依賴(lài)性越來(lái)越強(qiáng)，設(shè)備使用的時(shí)間也高頻覆蓋了白天到黑夜，夜晚使用的頻率更是與日俱增，所以暗光環(huán)境的使用需求被實(shí)實(shí)在在地?cái)[到了臺(tái)面上。以設(shè)計(jì)職業(yè)為例，在阿里巴巴 UCAN 2019 設(shè)計(jì)大會(huì)上分享的數(shù)據(jù)結(jié)果顯示：設(shè)計(jì)師群體夜晚的工作時(shí)間通常在5-6個(gè)小時(shí)…
不是在加班就是在加班路上的我們更習(xí)慣于在夜間工作，夜間安靜的環(huán)境更能讓我們專(zhuān)注設(shè)計(jì)、靈感爆棚。但這也在另一方面表達(dá)了我們需要設(shè)備更加符合我們?cè)谌豕猸h(huán)境下的視聽(tīng)需求。
Dark Mode 由此應(yīng)運(yùn)而生，使用暗色模式可以縮小屏幕顯示內(nèi)容與環(huán)境光強(qiáng)度的差距，可以保證使用者在暗光環(huán)境下使用設(shè)備的舒適度。也就是說(shuō) Dark Mode 可以降低屏幕的整體視覺(jué)亮度，降低對(duì)眼睛的視覺(jué)壓力，再也不用怕夜晚的設(shè)備屏幕刺瞎我們的雙眼了。
但這里我們要理解一個(gè)概念，“降低對(duì)眼睛的視覺(jué)壓力”并不等同于所謂的“護(hù)眼”，夜晚使用暗黑模式的設(shè)備，實(shí)際上并沒(méi)有改變屏幕的“頻閃”問(wèn)題，所以說(shuō)用戶看屏幕的時(shí)候依舊會(huì)有視覺(jué)疲勞的癥狀，所以各位大佬還是晚上少看屏幕，多愛(ài)護(hù)眼睛吧。
想象一下，我們?cè)陔娪霸嚎措娪皶r(shí)，為什么要全場(chǎng)關(guān)燈？
甚至有些APP， 在影片的下方也會(huì)有一個(gè)模擬關(guān)燈效果的按鈕，來(lái)讓整個(gè)手機(jī)屏幕變黑， 只剩下視頻畫(huà)面的部分，這都幫助我們可以更專(zhuān)注、更沉浸在當(dāng)前的內(nèi)容下，也就是所謂的“沉浸感”。
這其中的原理就是色彩本身是具有層級(jí)關(guān)系的，深色會(huì)在視覺(jué)感官上自動(dòng)后退，淺色部分則會(huì)向前延展，這樣對(duì)比強(qiáng)烈的層次關(guān)系可以讓用戶更注重被凸顯出來(lái)的內(nèi)容和交互操作；尤其在信息負(fù)責(zé)界面內(nèi)層級(jí)關(guān)系的合理拉開(kāi)對(duì)操作效率都有明顯的促進(jìn)作用。
這一點(diǎn)在股票交易軟件上就是最好的驗(yàn)證，目前來(lái)看全世界絕大多數(shù)的股票軟件采用的都是負(fù)極性，也就是暗色底的設(shè)計(jì)方式。紅色和綠色代表的漲或跌（不同國(guó)家顏色表示可能不一樣）在這樣的深色背景下就會(huì)特別顯眼，還有一些顏色比如藍(lán)色用于某些數(shù)據(jù)的走勢(shì)圖。這樣的顯示幫助用戶更好地集中精力在數(shù)據(jù)獲取上，更快地做出決策。
這里所提到的消費(fèi)品味是來(lái)自用戶層面的潛在心理需求。
從心理學(xué)角度而言，顏色可以影響觀者的感受和情緒，這直接影響到用戶對(duì)于一個(gè)事物的判斷和選擇，這就像我們消費(fèi)購(gòu)物一般，有時(shí)候我們的消費(fèi)不完全是為功能、實(shí)用性買(mǎi)單，而更加看重的是一個(gè)產(chǎn)品的外觀屬性，當(dāng)產(chǎn)品的外觀符合我們的消費(fèi)審美甚至超越預(yù)期時(shí)，我們往往會(huì)更快地做出消費(fèi)選擇。
而黑色在積極層面的外在直觀表現(xiàn)為高貴、莊嚴(yán)、鎮(zhèn)定、神秘，這代表著黑色相比其他顏色存在著更多的可能性，這也造就了黑色成為百搭色，可以作為其他顏色的底色、陪襯色進(jìn)行使用。暗黑模式也存在同樣的心理暗示，沉穩(wěn)、神秘的黑色會(huì)讓用戶聯(lián)想到產(chǎn)品的穩(wěn)定和高級(jí)，提升用戶的心理信任度，迎合用戶的消費(fèi)品味。
最后才探討耗電功效方面的問(wèn)題，算是一個(gè)壓軸問(wèn)題了，在某種程度上說(shuō)，智能移動(dòng)設(shè)備目前最大的矛盾是性能與電池功效的博弈。如果去微博等社交網(wǎng)站進(jìn)行搜索可以發(fā)現(xiàn)，為了省電而使用深色主題或者說(shuō)黑暗模式的用戶大有人在，尤其是一些中高端采用 OLED 屏幕的手機(jī)。這是為什么？
暗黑模式省電的作用來(lái)源于 OLED 這種材質(zhì)的特性，這種屏幕經(jīng)過(guò)多年發(fā)展如今已經(jīng)取代了 LCD 在中高端手機(jī)上的地位。和 LCD 依賴(lài)于背光不同，OLED 自發(fā)光的特性使得屏幕能夠獨(dú)立控制單個(gè)像素是否發(fā)光，也就是說(shuō)畫(huà)面越黑，采用 OLED 屏幕的手機(jī)就越省電。下圖做了一個(gè)簡(jiǎn)單的理解示例，每一列的格子代表亮度，在不同亮度下有相對(duì)應(yīng)的耗電量顯示，閃電的亮度代表耗電量的多少。
理解了簡(jiǎn)單含義，我們?cè)賮?lái)看一下Notebookcheck上對(duì)于OLED功耗的專(zhuān)業(yè)研究數(shù)據(jù)。在使用 OLED 屏幕時(shí)，屏幕上顯示的內(nèi)容決定了功耗。當(dāng)屏幕基本全黑時(shí)（OLED <1% White），OLED 屏在任何亮度下的功耗都保持恒定。顯示了白色內(nèi)容的屏幕，功耗曲線會(huì)隨著亮度提高而逐漸變陡。
上面的可視化圖表相對(duì)來(lái)說(shuō)可能需要一定的理解時(shí)間，讓我們翻譯簡(jiǎn)化一下。
上圖顯而易見(jiàn)，OLED屏幕的耗電量不僅受到亮度高低的影響，關(guān)鍵在于在OLED屏幕顯示了什么，有多少區(qū)域是淺色甚至是白色的，有多少區(qū)域是深色甚至黑色的，深色區(qū)域占比越高，相比較之下OLED屏幕也就越省電。這也就證明：OLED屏幕在使用以深色為主的顯示模式時(shí)，能夠降低耗電量，提升供電效率，也就是改善電池壽命。
///題外話：關(guān)于為什么我們的智能設(shè)備普遍采用OLED屏幕，可以參考Notebookcheck（文本鏈接），小伙伴們可以自行研究。
文章來(lái)源：站酷 作者：強(qiáng)強(qiáng)0075
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(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ù)
之前，我們已經(jīng)將「復(fù)雜應(yīng)用程序」定義：為支持廣泛的、非結(jié)構(gòu)化的目標(biāo)或?qū)I(yè)領(lǐng)域用戶的非線性工作流的任何應(yīng)用程序。復(fù)雜應(yīng)用程序在其支持的工作流程和最終用戶的類(lèi)型上當(dāng)然有所不同（比如從科學(xué)家到軍事專(zhuān)業(yè)人員再到金融分析師），但是復(fù)雜的應(yīng)用程序通常具有相似的品質(zhì)。
例如，復(fù)雜的應(yīng)用程序經(jīng)常出現(xiàn)：
（1）以專(zhuān)業(yè)知識(shí)為專(zhuān)業(yè)用戶提供支持；
（2）幫助用戶瀏覽和管理大型基礎(chǔ)數(shù)據(jù)，并啟用高級(jí)感官分析或數(shù)據(jù)分析；
（3）通過(guò)未知或可變的基礎(chǔ)任務(wù)支持問(wèn)題的解決或達(dá)成最終目標(biāo)；
（4）需要在多個(gè)角色，工具或平臺(tái)之間進(jìn)行切換或協(xié)作；
（5）減輕執(zhí)行中高影響力（或高價(jià)值）任務(wù)的風(fēng)險(xiǎn)，因?yàn)樵诟唢L(fēng)險(xiǎn)情況下，高額損失（例如收入甚至生命）會(huì)受到威脅。
盡管差異很大，但所有復(fù)雜的應(yīng)用程序都面臨許多相同的挑戰(zhàn)，無(wú)論是創(chuàng)建這些復(fù)雜應(yīng)用程序的從業(yè)人員，還是依賴(lài)于它們進(jìn)行工作的最終用戶。
考慮到設(shè)計(jì)人員和研究人員在處理這些應(yīng)用程序時(shí)面臨的共同挑戰(zhàn)，本文概述了8條復(fù)雜應(yīng)用程序設(shè)計(jì)準(zhǔn)則：
研究表明，當(dāng)引入一個(gè)應(yīng)用程序或系統(tǒng)后，用戶更喜歡立即開(kāi)始使用它，而不受其復(fù)雜程度的限制。相較于花費(fèi)大量時(shí)間學(xué)習(xí)使用教程、文檔或其他類(lèi)型的幫助或設(shè)置內(nèi)容，用戶更有動(dòng)力開(kāi)始他們的任務(wù)。（這種現(xiàn)象被稱(chēng)為活躍用戶的悖論。）雖然在任務(wù)或安全關(guān)鍵領(lǐng)域中僅依靠試錯(cuò)學(xué)習(xí)來(lái)進(jìn)行應(yīng)用是危險(xiǎn)且不適當(dāng)?shù)模欢ǔ潭鹊倪呑鲞厡W(xué)永遠(yuǎn)是必需的，因?yàn)樵谂嘤?xùn)課程或手冊(cè)中不可能涵蓋一個(gè)系統(tǒng)的所有使用。
支持用戶立即開(kāi)始探索界面這一偏好，允許他們通過(guò)嘗試和錯(cuò)誤來(lái)學(xué)習(xí)界面，而不會(huì)導(dǎo)致工作損失或不可彌補(bǔ)的損害。
例如，限制了用戶執(zhí)行長(zhǎng)時(shí)間操作的能力，而看不到這些操作的結(jié)果。實(shí)時(shí)儀表板建構(gòu)支持這一原理，其中儀表板元素預(yù)覽在建構(gòu)時(shí)會(huì)實(shí)時(shí)更新。用戶不必等到任務(wù)結(jié)束就可以查看其操作結(jié)果是否符合其意圖。
在大多數(shù)情況下，即使是復(fù)雜應(yīng)用程序的用戶也往往會(huì)處于中等水平。換句話說(shuō)，大多數(shù)用戶在自己的設(shè)備上使用系統(tǒng)時(shí)，并沒(méi)有過(guò)渡到真正的專(zhuān)家使用水平。許多用戶會(huì)感到滿足，這意味著他們將繼續(xù)使用滿意的（通常是低效的）方式來(lái)完成任務(wù)，而不是花費(fèi)時(shí)間為他們的工作流程尋找最佳解決方案。隨著時(shí)間的推移，這種行為將導(dǎo)致難以置信的生產(chǎn)力斷層，因?yàn)橛脩魧⒒ㄙM(fèi)數(shù)年甚至數(shù)十年的時(shí)間，以低效的方式日復(fù)一日地使用同一個(gè)系統(tǒng)。
通過(guò)為用戶的工作尋找通俗易懂的溝通方式和更有效的方法，幫助他們轉(zhuǎn)變?yōu)槭褂酶行У姆椒ú⒋蚱破涓畹俟痰男袨槟Ｊ健?
例如，與其僅僅依靠冗長(zhǎng)的教程或手冊(cè)（甚至是寫(xiě)得很好的），還不如在整個(gè)應(yīng)用程序中嵌入加速器或附加功能的上下文學(xué)習(xí)線索。上下文學(xué)習(xí)提示是僅在當(dāng)前任務(wù)的上下文中提供給用戶的提示。當(dāng)用戶將鼠標(biāo)懸停在工具欄菜單項(xiàng)上時(shí)，提示一種更快完成任務(wù)的方法的工具提示支持這一原則。
復(fù)雜應(yīng)用程序的用戶通常在非線性工作流中執(zhí)行廣泛的非結(jié)構(gòu)化目標(biāo)。對(duì)于這些工作流程，用戶可能不知道他們的確切最終目標(biāo)，而是需要分析數(shù)據(jù)以尋找答案。即使存在一個(gè)制定良好的最終目標(biāo)，用戶通常也不會(huì)遵循一組已知的、順序的子任務(wù)來(lái)實(shí)現(xiàn)它。但是，出于必要，該系統(tǒng)必須具有某種結(jié)構(gòu)：與用戶交互的物理界面以及隨著時(shí)間推移完成的某種線性過(guò)程。
死板、線性的工作流強(qiáng)迫用戶從開(kāi)始到結(jié)束完成一組操作，沒(méi)有退路或順序上的靈活性。通過(guò)避免這種死板的工作流，允許用戶在任務(wù)序列中具有靈活性。
例如，提供方法允許跳過(guò)前面的步驟，回溯前面的步驟，以及從任何步驟流暢地移動(dòng)到任何其他步驟。再比如，面包屑中靈活的交互式序列圖使用戶可以返回之前的步驟，而不會(huì)丟失進(jìn)度。
復(fù)雜應(yīng)用程序用戶經(jīng)常面臨漫長(zhǎng)的等待，工作也經(jīng)常被打斷。例如，復(fù)雜的數(shù)據(jù)分析可能需要花費(fèi)數(shù)小時(shí)甚至數(shù)天的時(shí)間，而大多數(shù)復(fù)雜應(yīng)用程序用戶所面臨的高復(fù)雜性的環(huán)境可能會(huì)導(dǎo)致其工作意外中斷。即使沒(méi)有計(jì)劃外的中斷，為實(shí)現(xiàn)目標(biāo)而執(zhí)行的子任務(wù)的復(fù)雜性和可變性也要求用戶在任務(wù)執(zhí)行過(guò)程中將大量信息保存在工作存儲(chǔ)器中，而這些信息很容易在他們改變方向時(shí)丟失。
通過(guò)允許用戶在工作期間記錄他們的行動(dòng)和思維過(guò)程，減輕工作記憶負(fù)擔(dān)，并幫助用戶在工作流中斷或中斷后恢復(fù)任務(wù)。
允許用戶添加和存儲(chǔ)有關(guān)特定數(shù)據(jù)、圖表或其他元素的開(kāi)放式注釋是支持此原理的一種方法。例如，在復(fù)雜的數(shù)據(jù)建?；蚍治銎陂g，用戶輸入的注釋可以在稍后時(shí)刻提醒用戶創(chuàng)建模型的原因，以及他們創(chuàng)建模型時(shí)試圖回答的問(wèn)題。
復(fù)雜應(yīng)用程序用戶通常跨多個(gè)工具和多個(gè)工作區(qū)工作。即使用戶大部分工作主要依賴(lài)于一個(gè)專(zhuān)用應(yīng)用程序，他們?nèi)詴?huì)出于多種原因而頻繁切換應(yīng)用程序。例如，當(dāng)主要軟件不支持該操作時(shí)，可以從在線數(shù)據(jù)庫(kù)中收集數(shù)據(jù)，查找和參考文章或其他外部文檔，或者在其他應(yīng)用程序中做自己的注釋和評(píng)論。即使是在主應(yīng)用程序中，存在軟件附加組件或其他啟用應(yīng)用程序中各種專(zhuān)門(mén)功能的可選軟件包，用戶也可能在不同的環(huán)境或工作空間之間轉(zhuǎn)換。
通過(guò)支持從一個(gè)環(huán)境轉(zhuǎn)換到另一個(gè)環(huán)境（包括主應(yīng)用程序內(nèi)部和外部），減少工具切換的負(fù)擔(dān)。
減少工具切換負(fù)擔(dān)的一種方法是簡(jiǎn)單地接受這個(gè)生態(tài)系統(tǒng)，并在主要應(yīng)用程序和經(jīng)常使用的第三方工具之間設(shè)計(jì)連接點(diǎn)。例如，復(fù)雜的工作通常需要協(xié)作和報(bào)告。將數(shù)據(jù)集導(dǎo)出到Excel或?qū)D像導(dǎo)出到PowerPoint的內(nèi)置功能，使用戶在試圖編譯報(bào)告和演示文稿時(shí)節(jié)省寶貴的時(shí)間，否則將花費(fèi)在轉(zhuǎn)換數(shù)據(jù)或屏幕快照?qǐng)D像上。
復(fù)雜的應(yīng)用程序通常旨在適應(yīng)廣泛的用途。例如，環(huán)境機(jī)構(gòu)用來(lái)測(cè)量和跟蹤蜜蜂生產(chǎn)的分析監(jiān)測(cè)軟件也可能被汽車(chē)公司用來(lái)監(jiān)測(cè)機(jī)器故障。使用場(chǎng)景的多樣性一方面使復(fù)雜的應(yīng)用程序非常強(qiáng)大，但另一方面又常常非?；靵y。此外，復(fù)雜的應(yīng)用程序通常必須同時(shí)支持新手和專(zhuān)家用戶，并且專(zhuān)家用戶可能需要新手用戶很少訪問(wèn)的高級(jí)功能。
通過(guò)在不降低應(yīng)用程序功能的情況下，地減少界面內(nèi)混亂的外觀，幫助用戶管理在復(fù)雜應(yīng)用程序中普遍存在的選擇、特性和功能過(guò)載問(wèn)題。
分階段公開(kāi)是一種減少混亂的方法，僅在選項(xiàng)與手頭任務(wù)或重點(diǎn)項(xiàng)目相關(guān)時(shí)才向用戶顯示選項(xiàng)。例如，只有在復(fù)雜表單或向?qū)е羞x中相關(guān)字段后才顯示高級(jí)參數(shù)或設(shè)置，這就是與復(fù)雜應(yīng)用程序相關(guān)的分階段公開(kāi)的一個(gè)例子。
即使在界面中有效地減少了混亂，也不是所有的元素和信息都能（或應(yīng)該）一次顯示出來(lái)。有些信息必須放到二級(jí)層次；然而，次要信息通常是必要的，以作為有關(guān)主要層次的信息的決定的上下文參考。
通過(guò)允許用戶在不離開(kāi)主屏幕或環(huán)境的情況下訪問(wèn)和查看補(bǔ)充信息，簡(jiǎn)化主信息和輔助信息之間的轉(zhuǎn)換，并幫助用戶將主信息置于上下文中。
儀表板通常支持此原理，例如，當(dāng)用戶將鼠標(biāo)懸停在圖表或圖形中的特定點(diǎn)上時(shí)，它允許用戶在工具提示中查看更的定量數(shù)據(jù)。
復(fù)雜應(yīng)用程序用戶執(zhí)行的許多任務(wù)需要高度的視覺(jué)搜索。舉幾個(gè)例子：用戶可能需要在巨大表格中的表格視圖中查找和區(qū)分相關(guān)數(shù)據(jù)。系統(tǒng)警報(bào)必須引起用戶對(duì)界面相關(guān)部分的注意，以便用戶可以及時(shí)注意到并糾正潛在情況。在儀表板上簡(jiǎn)單地查看和理解數(shù)據(jù)可視化也有一個(gè)重要的可視化搜索組件。在復(fù)雜的應(yīng)用程序中，大量競(jìng)爭(zhēng)信息和元素可能會(huì)阻礙這些任務(wù)。
通過(guò)在視覺(jué)上突出關(guān)鍵元素（例如，讓它們從周?chē)刂忻摲f而出），幫助用戶找到重要信息并對(duì)其采取行動(dòng)。值得注意的是，突出重要信息并不總是意味著要強(qiáng)調(diào)這些信息（例如，明亮的顏色或加重字體粗細(xì)）。去掉不必要的元素可以同樣、甚至更有效地使重要信息在視覺(jué)上顯得突出。
例如，刪除無(wú)用的多余圖形或視覺(jué)元素可以讓留下的數(shù)據(jù)脫穎而出。儀表板模塊從數(shù)據(jù)元素中消除了不明顯的、難以理解的插圖，從而減輕試圖在儀表板上定位數(shù)據(jù)的用戶的視覺(jué)搜索負(fù)擔(dān)，支持這一原則。
復(fù)雜的應(yīng)用程序是多種多樣的，支持各種用戶類(lèi)型和工作流；然而，類(lèi)似的挑戰(zhàn)存在于各種領(lǐng)域的復(fù)雜應(yīng)用程序中。遵循這8條設(shè)計(jì)準(zhǔn)則優(yōu)化復(fù)雜的應(yīng)用程序：
1. 邊做邊學(xué)
2. 幫助用戶采用更有效的方法來(lái)完成任務(wù)
3. 提供靈活而流暢的途徑
4. 幫助用戶跟蹤動(dòng)作和思考過(guò)程
5. 協(xié)調(diào)多個(gè)工具和工作空間之間的轉(zhuǎn)換
6. 減少混亂而不降低能力
7. 簡(jiǎn)化主要和次要信息之間的轉(zhuǎn)換
8. 視覺(jué)上突出重要信息
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(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ù)
不知道大家有沒(méi)有聽(tīng)過(guò)這么一個(gè)故事：某家餐廳銷(xiāo)量一直不太好，老板究其原因也沒(méi)有查明白到底是為啥，明明選址在鬧市區(qū)，價(jià)格也很實(shí)惠，就是賣(mài)不出去；后來(lái)老板請(qǐng)了個(gè)“大師”幫忙一探究竟，大師說(shuō)你家盤(pán)子顏色不行，換成橙色保準(zhǔn)牛X；老板立馬認(rèn)購(gòu)了一批橙色盤(pán)子，從那以后以后這家餐廳火爆了，王境澤都覺(jué)著香的不行…
聽(tīng)完這個(gè)故事，自此我幼小的心靈里把橙色和食欲劃了等號(hào)。這個(gè)烙印直到我從業(yè)前幾年還一直這么覺(jué)著。同時(shí)間段，在9年義務(wù)教育的美術(shù)課本上，我得到了有生以來(lái)第一次對(duì)色彩這門(mén)學(xué)問(wèn)的細(xì)致輸入，了解到了各種顏色對(duì)應(yīng)的含義與情緒：
這種色彩與情緒的映射關(guān)系在我的腦袋里根深蒂固 / 無(wú)法磨滅，直到有那么一場(chǎng)面試或者匯報(bào)，面試官/老板問(wèn)我，“為什么你要選擇這個(gè)顏色作為品牌色呢？”
面對(duì)著一手塑造出來(lái)的社交應(yīng)用，我解釋到：“因?yàn)榧t色代表著熱鬧，這個(gè)顏色會(huì)賦予這款產(chǎn)品熱鬧的氛圍”。坦誠(chéng)的講，這個(gè)解釋自信但空洞，顏色本身并無(wú)好壞和指向，只看你用在了什么地方，不講究場(chǎng)景就別輕易定性。
這也側(cè)面反映出來(lái)慣性思維的不斷吞噬著你我的思路，過(guò)往的“經(jīng)驗(yàn)”可以讓人習(xí)以為常，也可以讓人尷尬不已，取決于是否洞察的到。如果拋棄慣性思維，到底如何去定義一款產(chǎn)品的主色呢？
說(shuō)實(shí)話選取一個(gè)顏色作為品牌色是一個(gè)戰(zhàn)略決策過(guò)程，一般來(lái)說(shuō)行業(yè)里一定存在一種主流顏色，像旅游行業(yè)的攜程/去哪兒和途牛，還有以淘寶為代表的電商行業(yè)通常是喜慶的大紅大橙。
顯而易見(jiàn)基于這個(gè)邏輯下，有3個(gè)做法，一條路是順勢(shì)而為，一條是逆向而去，還有一條是另辟蹊徑。這塊的選擇一定程度上并不是設(shè)計(jì)師可以決定的，需要結(jié)合整個(gè)業(yè)務(wù)的方向去判斷；在旅游行業(yè)里馬蜂窩選擇了逆向而去，在直播行業(yè)里抖音就選擇了另辟蹊徑。
我們?cè)囍y(cè)下抖音和馬蜂窩的想法，在產(chǎn)品的定位和策略的打法上，他們更注重的是差異化，走反方向的路突出品牌，試圖在用戶的心里站得住。通過(guò)這個(gè)例子你或許會(huì)發(fā)現(xiàn)，黑色未必死氣沉沉，ta也可以色彩斑斕；黃色未必只象征尊貴，ta也可以代表青春和希望；顏色沒(méi)有偏向，只看使用在什么場(chǎng)景上。
主色的選擇更需要貼合業(yè)務(wù)戰(zhàn)略的發(fā)展，也更多的偏向于主觀。給業(yè)務(wù)提供思路和方向，判斷不好業(yè)務(wù)方向的時(shí)候，多提供思路幫助其更好的匹配顏色。
以往的面試?yán)?，我這種好事的面試官就特別喜歡問(wèn)侯選人一個(gè)問(wèn)題：“一個(gè)色相里有那么多色號(hào)，為什么你定了這個(gè)色號(hào)作為品牌色？”大部分候選人乍一聽(tīng)都是面露難色，心里大概想著這人是個(gè)傻X吧，能問(wèn)這種問(wèn)題，哈哈哈哈哈哈；廢話不多說(shuō)，我來(lái)簡(jiǎn)單分享下我的方法：
首先以黑白兩色（#000000-#FFFFFF）作為起始點(diǎn)設(shè)置10個(gè)梯度，然后把第一個(gè)模塊定義的色相扔進(jìn)去，只需要調(diào)整HSB中的H就可以，這樣一頓操作下來(lái)你就得到了一個(gè)完整的色彩序列：
第二步，基于序列主觀調(diào)整下顏色，確定主色的同時(shí)確保其在黑白2種背景上對(duì)比度大于4.5：1（wcag色彩可用性標(biāo)準(zhǔn)），理論上來(lái)講梯度中間是最合適的，飽和和亮度足夠就可以。
上圖是我用到的色彩可用性測(cè)試工具-color review（https://color.review/）
當(dāng)你準(zhǔn)備好了以上所有工作，最后一步就是拓展色系了；這里采用負(fù)能量補(bǔ)給站小商店的品牌色“叛逆橙” #FF774A（H15 S71 B100） 作為主色并結(jié)合下google的方法開(kāi)始拓展色系。
首先 - 確認(rèn)同色系輔助色：我們將主色的色相加減 30° （谷歌是以10為梯度，但色相變化不大，為了效果我們以3倍作為最小單位）獲得2個(gè)新顏色，即同色系輔助色。
其次 - 確認(rèn)對(duì)比色輔助色，將主色的色相加上 180° 獲得其互補(bǔ)色，即對(duì)比色系輔助色。為了和主色的類(lèi)似色對(duì)應(yīng)，取互補(bǔ)色的同類(lèi)色（色相加減 15°）和類(lèi)似色（色相加減 30°）。從中選取需要的顏色作為最終的對(duì)比色系輔助色。
根據(jù)色彩需求取同類(lèi)色2和類(lèi)似色1作為最終的對(duì)比色系輔助色，這樣，我們得到了主色和四個(gè)輔助色；同理你可以推理出無(wú)色彩傾向的中性色系（這里就不展開(kāi)贅述）。
最后你可以通過(guò)編碼的方式，賦予每個(gè)顏色一個(gè)token（密鑰），方便團(tuán)隊(duì)的配合和使用。
以上就是我在選取色彩的大概思路，市面上也有很多講顏色的好文，分享大家去找找。
隨著工作經(jīng)驗(yàn)/時(shí)長(zhǎng)的不多增加，我們往往會(huì)對(duì)事物的存在習(xí)以為常，思維的慣性會(huì)困住我們追根溯源的想法，但需求和場(chǎng)景是千變?nèi)f化的，所有的方法也都針對(duì)的是通用場(chǎng)景，標(biāo)準(zhǔn)化的解決方案未必適用你當(dāng)下的處境；試著在熟悉的環(huán)境用敏銳的洞察和科學(xué)的方法突圍也許是最好的辦法。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(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ù)
設(shè)計(jì)趨勢(shì)輪回，玻璃效果以一種新的展現(xiàn)形式回歸，我們以往對(duì)它的稱(chēng)呼有毛玻璃效果、磨砂效果等，在下文中統(tǒng)稱(chēng)為毛玻璃擬態(tài)。
設(shè)計(jì)趨勢(shì)總是在不斷的變化，近幾年擬物風(fēng)格又以新的形式——新擬態(tài)回歸大眾視野，蘋(píng)果發(fā)布了macOS Big Sur 操作系統(tǒng)，整體風(fēng)格應(yīng)用了新擬態(tài)的設(shè)計(jì)思路，采用了3D質(zhì)感的元素設(shè)計(jì)，其中還包含了運(yùn)用陰影、透明度以及背景模糊/高斯模糊手法模仿玻璃形態(tài)，構(gòu)建空間感的新興擬物態(tài)風(fēng)格——毛玻璃擬態(tài)風(fēng)格。
毛玻璃視覺(jué)其實(shí)可以追溯到2007年微軟發(fā)售的 Windows Vista和Windows7，隨之后來(lái)的OS X 10.10（Yosemite）和iOS7中大量出現(xiàn)毛玻璃效果，比如底部快捷菜單欄、通知中心和多任務(wù)切換窗口等，蘋(píng)果公司加大了模糊程度，透明效果基于扁平，更順應(yīng)當(dāng)時(shí)UI扁平化的設(shè)計(jì)趨勢(shì)。
后來(lái)，蘋(píng)果在他們的移動(dòng)操作系統(tǒng)中大大減少了毛玻璃效果，但是最近在 MacOS Big Sur 中又增加了毛玻璃質(zhì)感。微軟的 Fluent 設(shè)計(jì)系統(tǒng)也非常注重這一效果，他們稱(chēng)這種效果為 “亞克力”，并將其作為設(shè)計(jì)系統(tǒng)的組成部分之一。
毛玻璃擬態(tài)模仿了塑料材質(zhì)（凹凸質(zhì)感，凸顯層次感），這個(gè)新的視覺(jué)風(fēng)格更加注重垂直空間Z軸的使用：
這是注重空間感的典型特征，意味著這種風(fēng)格有助于用戶建立界面的層次結(jié)構(gòu)和深度。用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像空間中真實(shí)的玻璃一樣。
毛玻璃擬態(tài)效果之所以被大家應(yīng)用和認(rèn)可除了它能帶來(lái)的優(yōu)秀視覺(jué)表現(xiàn)，更重要的是其本身的功能意義，它能幫助設(shè)計(jì)師更好的拉開(kāi)信息層級(jí)并達(dá)到視覺(jué)統(tǒng)一
（1）視覺(jué)表達(dá)
通過(guò)背景毛玻璃化，可以中和扁平化圖文帶來(lái)的生硬不立體。在卡片元素上添加毛玻璃效果，與其他元素疊加后視覺(jué)上建立層次感，將信息層級(jí)更好的表達(dá)出來(lái)；在圖標(biāo)中增加毛玻璃效果，可以提升圖標(biāo)通透的質(zhì)感。
（2）品牌感
良好的視覺(jué)統(tǒng)一，有助于提升產(chǎn)品的品牌感。
毛玻璃擬態(tài)效果并不好應(yīng)用于上線產(chǎn)品。它不適用于按鈕或開(kāi)關(guān)（這些重要的界面元素應(yīng)該具備高對(duì)比度，更加清晰明確），模糊效果也要注意分寸，屏幕上過(guò)度使用模糊效果，會(huì)使整個(gè) UI 對(duì)某些用戶可閱讀性差，同時(shí)也會(huì)使頁(yè)面看起來(lái)顯臟。
也可以這樣理解，使用毛玻璃擬態(tài)風(fēng)格的前提是卡片內(nèi)部有足夠的對(duì)比度和合適的間距來(lái)定義層次結(jié)構(gòu)，并在視覺(jué)上 “分組” 所有相關(guān)的對(duì)象。它可以只在一個(gè)元素上使用，也可以作為卡片背景修飾視覺(jué)效果，這種很容易達(dá)到較好的視覺(jué)效果，頁(yè)面風(fēng)格也會(huì)特別亮眼，整體干凈、明亮。
用作卡片背景時(shí)，能很好的表達(dá)信息之間的層級(jí)感，朦朧透出下層視覺(jué)元素，營(yíng)造了良好的視覺(jué)美感。
用作APP圖標(biāo)，可以提升圖標(biāo)通透的質(zhì)感。常見(jiàn)的三種圖標(biāo)案例：A.頂部圖形為白色，底部圖形為其他色；B.頂部圖形和底部圖形為同色，頂部圖形顏色明度高；C.頂部圖形和底部圖形不同色
運(yùn)用毛玻璃去包裝UI界面，頁(yè)面風(fēng)格整體干凈、明亮，有較好的視覺(jué)效果。
1.和任何基于卡片的布局一樣，物體離我們?cè)浇?，它吸引的光就越多。在這種情況下，意味著它會(huì)更透明一些。
2. 整個(gè)效果的基礎(chǔ)是陰影、透明度和背景模糊的組合。這種風(fēng)格可以使用一個(gè)透明層，也可以使用多個(gè)透明層，但多個(gè)透明層疊加在復(fù)雜彩色背景上的效果會(huì)更好（當(dāng)至少兩個(gè)透明層出現(xiàn)在一個(gè)相當(dāng)復(fù)雜的彩色背景上時(shí)，玻璃形態(tài)的效果是最突出的）。
重要的是要記住，你不能讓整個(gè)形狀透明，需要調(diào)整填充的透明度來(lái)達(dá)到透明效果。如果不調(diào)整填充的透明度，僅僅是調(diào)整整個(gè)對(duì)象的透明度，就不會(huì)產(chǎn)生模糊的效果。
在上面的例子中，背景模糊值完全相同，但圓形圖像的疊加效果看起來(lái)完全不同。當(dāng)填充不透明度為 100% 時(shí)，對(duì)象的透明度再低也沒(méi)有用，根本無(wú)法得到想要的模糊效果。
最底層背景在這個(gè)效果中扮演著重要的角色。不能太簡(jiǎn)單或太單調(diào)，否則毛玻璃效果就看不出來(lái)，但也不能太復(fù)雜。
復(fù)雜的背景有助于玻璃形態(tài)的展現(xiàn)，這可能就是蘋(píng)果選擇了彩色背景作為 MacOS Big Sur 默認(rèn)壁紙的原因。當(dāng)模糊的透明層位于背景之上時(shí)，那些容易辨別的色調(diào)差異也很容易被看到。
用作卡片背景繪制操作比較簡(jiǎn)單，使用背景模糊就可以搞定，重點(diǎn)在于根據(jù)實(shí)際情況進(jìn)行透明度和模糊度的調(diào)整，這里就不再做展示。
第一步：繪制基礎(chǔ)圖形，頂部圖形顏色#DDEDFF，底部圖形漸變色#00EDFB——#001EEE
第二步：底部圖形復(fù)制一層，做高斯模糊效果，高斯模糊：12，不透明度72%，將模糊層置于頂部圖形上，添加蒙版
第三步：為了更好的增加圖標(biāo)辨識(shí)度，增加漸變描邊，漸變色#FFFFFF——#D5E9FF，圖標(biāo)繪制完成。
過(guò)程中用到的色值和模糊度可以根據(jù)視覺(jué)美觀度做適當(dāng)調(diào)整，也可為圖標(biāo)增加陰影，提升整體效果。
作為設(shè)計(jì)師，我們可以看到，設(shè)計(jì)趨勢(shì)一直在變化，每隔幾年就會(huì)轉(zhuǎn)向另一種風(fēng)格，但似乎每種風(fēng)格又有自己的前世今生。所謂趨勢(shì)輪回，并不只是單純的回歸，而是以一種的更豐富、更立體、更具有層次感的方式呈現(xiàn)在人們面前。
我們要做的就是不盲目，不盲從，看清楚趨勢(shì)變化的本質(zhì)。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(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ù)
經(jīng)常使用或者關(guān)注資訊類(lèi)產(chǎn)品的同學(xué)可能會(huì)留意到，在信息流中，有的標(biāo)題在左圖片在右，而有的是圖片在左標(biāo)題在右，這兩種形式看似區(qū)別不大，但又似乎存在很大差異。設(shè)計(jì)師在設(shè)計(jì)時(shí)是如何考慮的？我認(rèn)為這是一個(gè)很有意思的話題，所以今天就和大家聊一聊在資訊流中，左文右圖和左圖右文的差異。
左文右圖的樣式普遍出現(xiàn)在新聞資訊產(chǎn)品中，其中包括今日頭條、騰訊新聞、UC瀏覽器信息流以及我們的vivo瀏覽器信息流等等，現(xiàn)在就讓我們從資訊平臺(tái)作為切入點(diǎn)，對(duì)左文右圖的形式進(jìn)行分析
1. 左文右圖符合人們長(zhǎng)久以來(lái)的閱讀習(xí)慣
按照已知經(jīng)過(guò)驗(yàn)證的理論，即F閱讀順序（尼爾森的用戶閱讀視線模型），用戶瀏覽頁(yè)面的順序是從左往右自上而下，因此左上角的信息最早觸達(dá)用戶。然而至文字誕生以來(lái)，多數(shù)情況下，人類(lèi)普遍通過(guò)文字來(lái)獲取信息，我們不否定，通常情況下圖片的易識(shí)別性遠(yuǎn)優(yōu)于文字，但是從信息傳遞的準(zhǔn)確性以及豐富性上來(lái)說(shuō)，文字的優(yōu)勢(shì)是遠(yuǎn)大于圖片的。
所以在資訊類(lèi)產(chǎn)品中我們更傾向于優(yōu)先通過(guò)文字來(lái)識(shí)別內(nèi)容，而將圖片作為輔助信息，因此根據(jù)我們從左往右自上而下閱讀習(xí)慣，將文字放在左邊更有利于用戶獲取信息。我們通過(guò)一個(gè)案例來(lái)分別了解一下左圖右文與左文右圖的用戶閱讀路徑是什么樣的。
在上面的案例中，左圖右文用戶的閱讀路徑偏長(zhǎng)，并且常常出現(xiàn)視線的折返
左文右圖用戶的閱讀路徑較短，不會(huì)有視線的折反。因此，基于效率和閱讀習(xí)慣的角度來(lái)說(shuō)，左文右圖優(yōu)勢(shì)更明顯。
但或許這里就會(huì)有人提出疑問(wèn) “在資訊類(lèi)信息流中很大一部分用戶都是因?yàn)槭軋D片的吸引才會(huì)對(duì)該則新聞感興趣的呀” 。的確，這是一個(gè)普遍場(chǎng)景，但是在前面我們也提到，圖片的易識(shí)別性是遠(yuǎn)高于文字的，因此哪怕是將圖片放在文字后面，對(duì)于圖片的“魅力”的影響是在可接受范圍內(nèi)的。
2. 左文右圖更有利于為用戶提供統(tǒng)一的閱讀基準(zhǔn)位置
在資訊信息流中，為了信息展示的多樣性，避免單一的信息流結(jié)構(gòu)使用戶感到單調(diào)，在樣式上除了左文右圖的樣式，往往還會(huì)搭配三圖、大圖及視頻的樣式出現(xiàn)，而在這樣多種穿插樣式的情況下，左文右圖能夠?yàn)橛脩舻碾p眼提供了一個(gè)掃讀時(shí)候的基準(zhǔn)位置，在大量、長(zhǎng)時(shí)間閱讀的過(guò)程中，極大地減小了閱讀壓力
3. 盡可能保持整體信息流圖文閱讀先后順序的一致性
資訊流中除了左文右圖的樣式，還會(huì)搭配三圖、大圖及視頻的樣式出現(xiàn)，因此我們不僅僅要考慮單個(gè)信息流樣式的閱讀體驗(yàn)，更要保持整體信息流閱讀先后順序的一致性，這能夠?yàn)橛脩籼峁┹^好的沉浸式體驗(yàn)。
4. 在視覺(jué)上更符合格式塔閉合原理
左圖右文的的形式在標(biāo)題文字較短的情況下，右上角就會(huì)出現(xiàn)視覺(jué)上的缺角，這會(huì)破壞頁(yè)面整體的工整性，而左文右圖的形式就很好的避免了這個(gè)問(wèn)題。格式塔原理對(duì)閉合的研究中提到，人的大腦無(wú)論看見(jiàn)什么東西，都喜歡去將它們想象成為一個(gè)整體，如果元素太過(guò)雜亂大腦無(wú)法將其歸類(lèi)成為一個(gè)整體，那么視覺(jué)感受就是非常不佳的。
小結(jié)：左圖右文基于它在信息獲取效率和人們閱讀習(xí)慣上的優(yōu)勢(shì)得到各大新聞資訊類(lèi)產(chǎn)品的青睞，是較為通用的形式。那是不是就沒(méi)有“左圖右文”什么事了？其實(shí)不然，左圖右文仍是有其優(yōu)勢(shì)的，并且在特定場(chǎng)景下，左圖右文的形式的優(yōu)勢(shì)會(huì)更明顯。
1. 圖片在左側(cè)，第一時(shí)間吸引用戶視線
在內(nèi)容形式的吸引力上，視頻>圖片>文字，并且前面我們提到，圖片的易識(shí)別性是高于文字的，因此一張高質(zhì)量的圖片往往能夠在第一時(shí)間觸達(dá)用戶并形成轉(zhuǎn)化。但前提要求是我們能夠把控圖片的質(zhì)量，否則效果將適得其反，所以我們說(shuō)左圖右文的樣式一般更適合用來(lái)承載PGC的內(nèi)容。例如主打品質(zhì)時(shí)政新聞的資訊產(chǎn)品澎湃新聞以及垂類(lèi)游戲資訊社區(qū)平臺(tái)篝火營(yíng)地，其推薦的內(nèi)容都來(lái)自專(zhuān)業(yè)團(tuán)隊(duì)的輸出，對(duì)內(nèi)容圖片的質(zhì)量有較好的掌控力，因此采用了左圖右文的形式優(yōu)先給用戶展示圖片信息，以提升用戶對(duì)內(nèi)容的興趣。
2. 在帶有明確目的閱讀場(chǎng)景下，例如查找歷史內(nèi)容、搜索等，左圖右文的形式效率更高
在用戶帶有明確目的場(chǎng)景進(jìn)行信息閱讀時(shí)，用戶往往對(duì)內(nèi)容已經(jīng)有了一個(gè)大致的預(yù)期，所以這個(gè)時(shí)候如果我們能讓用戶第一時(shí)間識(shí)別圖片，能夠大大的提升用戶的操作效率。例如用戶在查找一篇曾經(jīng)看過(guò)的文章時(shí)，當(dāng)曾經(jīng)閱讀過(guò)那篇文章的封面出現(xiàn)在屏幕中時(shí)，用戶便能立刻作出判斷，這會(huì)比在眾多文字標(biāo)題中查找更為便捷。
左文右圖
左圖右文
#Tips
無(wú)論是左文右圖還是左圖右文都各有其優(yōu)勢(shì)及適用的場(chǎng)景，但當(dāng)我們?cè)谠O(shè)計(jì)信息流時(shí)，我們要注意為用戶提供圖文閱讀順序一致的體驗(yàn)。
以上是個(gè)人對(duì)資訊流左文右圖&左圖右文的一些思考和心得，感謝大家的閱讀，假設(shè)通過(guò)本次閱讀能夠給大家今后的工作帶來(lái)一些啟發(fā)和思考，那就實(shí)在是再好不過(guò)的事了:)
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(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ù)
表格淺談，多多指教
讓我們先來(lái)回顧一下表格的基本構(gòu)成，最上面的為表頭，橫為行，縱為列，內(nèi)容區(qū)每一組展示數(shù)據(jù)區(qū)域?yàn)閱卧瘛?
表格的設(shè)計(jì)，雖然看似簡(jiǎn)單，但是作為用戶最常用的組件之一，我們需要對(duì)視覺(jué)和交互的精準(zhǔn)把握，才能保證用戶在使用表格時(shí)更加。
這里我推薦表格的"四維自檢法“，對(duì)我們?cè)O(shè)計(jì)的表格是否合理，做出一個(gè)標(biāo)準(zhǔn)的判斷。
分別是：信息降噪、呼吸適中、易讀、詳情查看。
信息降噪：分別對(duì)表格內(nèi)容和視覺(jué)層面進(jìn)行重要性梳理，剝離不重要的元素，使表格輕量化；
呼吸適中：保持內(nèi)容和元素之間合適的間距，使表格頁(yè)擁有一個(gè)好的呼吸感，將給用戶營(yíng)造一個(gè)舒適的操作環(huán)境；
易讀：通過(guò)對(duì)需求內(nèi)容的解讀，對(duì)內(nèi)容形式加以分類(lèi)辨別，做出可讀性最強(qiáng)的樣式；
詳情查看：b端系統(tǒng)往往伴隨著表格數(shù)據(jù)類(lèi)目龐大的問(wèn)題，通常會(huì)采用另一種形式去展示全部信息。
當(dāng)表格的字段非常重要時(shí)，一定要將字段全部展示出來(lái)讓用戶更清晰的了解數(shù)據(jù)。
如果你的用戶只需要了解部分字段，那么全部展示是沒(méi)有必要的，只需在展示最重要的字段即可。
不同用戶想看的的信息側(cè)重不同，有時(shí)候我們無(wú)法準(zhǔn)確判斷用戶看重哪些字段，還可以讓用戶自定義展示字段。
當(dāng)我們?nèi)ピO(shè)計(jì)表格的時(shí)候，通常會(huì)發(fā)現(xiàn)表格需要承載的信息量是非常大的，有時(shí)候?yàn)榱吮憩F(xiàn)出字段的準(zhǔn)確含義，在定義字段名稱(chēng)時(shí)往往會(huì)非常的長(zhǎng)。但是當(dāng)這些字段同時(shí)出現(xiàn)在一個(gè)表格里時(shí)，過(guò)長(zhǎng)的字段名稱(chēng)，又會(huì)顯得冗余，讓本就不大的頁(yè)面空間更加雜亂。
所以當(dāng)我們?cè)O(shè)計(jì)表格的時(shí)候，我們可以分析字段名稱(chēng)，對(duì)字段名稱(chēng)做精簡(jiǎn)，看看是不是少一個(gè)字用戶就無(wú)法理解字段的含義。
當(dāng)字段名稱(chēng)過(guò)長(zhǎng)，又必須展示，才能有效的理解字段含義時(shí)。我們可以定義一個(gè)專(zhuān)有名詞代替，并且在字段名稱(chēng)后使用添加字段說(shuō)明的形式，來(lái)對(duì)字段加以說(shuō)明。
這樣一來(lái)用戶既可以清晰的理解字段含義，又可以在有限的頁(yè)面空間下獲取到更多的數(shù)據(jù)信息。
早期表格的設(shè)計(jì)，出發(fā)點(diǎn)主要以擬物形式，以最接近現(xiàn)實(shí)表格的樣式去設(shè)計(jì)。
但是隨著互聯(lián)網(wǎng)的普及度加深，極簡(jiǎn)的表格設(shè)計(jì)，使界面更加輕盈，讓用戶更加專(zhuān)注于數(shù)據(jù)內(nèi)容。
去除縱向列的分割線，僅以淺色的橫向分割線區(qū)分行，但是要注意分割的顏色不能過(guò)于淺而缺乏辨識(shí)度，部分人群對(duì)顏色的辨識(shí)度會(huì)偏低，顯示器的硬件性能也會(huì)影響顏色的可辨識(shí)性。
表格設(shè)計(jì)中一定不要使用過(guò)多的顏色區(qū)做狀態(tài)或操作的區(qū)分，過(guò)多的顏色細(xì)分會(huì)使表格變得更加混亂，影響用戶體驗(yàn)。
對(duì)狀態(tài)的區(qū)分，僅用輕量的顏色區(qū)分即可，操作欄保持主色按鈕色。
了解單元格的結(jié)構(gòu)，以及實(shí)現(xiàn)單元格的基本邏輯，有助于我們更好的去把控我們的設(shè)計(jì)。
單元格內(nèi)的可控尺寸包含：?jiǎn)卧窀叨?、文字字?hào)、文字/段落行高、文字上下間距。
我們基于視覺(jué)呼吸感，賦予各個(gè)元素合適的尺寸，我在這里給出一套參考方案：
文字字號(hào) = N
文字行高 = 1.5N
上下間距 = 1.2N
單元格高度 = 內(nèi)容高度 + 上間距 +下間距
首先我們要了解列的兩種類(lèi)型，第一種是定寬列，第二種是自適應(yīng)列。
a.定寬列
顧名思義就是它的寬度是固定的，比如：第一列我們?cè)O(shè)置寬度為200px，第二列我們?cè)O(shè)置為300px，五六七列分別設(shè)為100px，那么我們這個(gè)列表就的寬度就等于200 + 300 + 100*3 = 1100px，在任何分辨率尺寸下你的這個(gè)列表都會(huì)保持這個(gè)寬度不變。
b.自適應(yīng)列
就是列會(huì)隨著分辨率變化而產(chǎn)生寬度的變化，比如：列表有五列，我們定義列表的寬度為界面寬度的50%，假定界面寬度為1200px，那么列表寬度就為600px，而每一列的寬度則為120px。此時(shí)我們將界面的寬度縮小到600px時(shí)，那么列表的寬度就為300px，而每一列的寬度則為60px。
在實(shí)際設(shè)計(jì)案例中，我們往往會(huì)面臨由于每一列的內(nèi)容不同，所需要的寬度也就不同，我們希望在列不多時(shí)可以保持寬度自適應(yīng)，但是如果每一列都做成自適應(yīng)列的話，內(nèi)容多的列無(wú)法展示全內(nèi)容，內(nèi)容少的列空間又會(huì)很大。
所以，固定列 + 自適應(yīng)列的綜合運(yùn)用，可以讓我們更好的實(shí)現(xiàn)我們想要的設(shè)計(jì)方案。
c.列的結(jié)構(gòu)
然后，我們一起來(lái)了解列的結(jié)構(gòu)。每一列分為內(nèi)容區(qū)和左右間距區(qū)，在固定列里面內(nèi)容區(qū)和左右間距區(qū)都是保持不變的。但是在自適應(yīng)列卻不同，它的內(nèi)容區(qū)是隨界面分辨率變化而變化的，左右間距區(qū)的寬度是保持不變的(在代碼里間距區(qū)被叫做Padding)。
d.固定列
當(dāng)表格字段數(shù)量不確定時(shí)，通常我們會(huì)為自定義列的內(nèi)容區(qū)寫(xiě)一個(gè)最小值(min-width),以確保字段很少時(shí)可以自適應(yīng)寬度，字段較多時(shí)仍然能保證完整展示表格數(shù)據(jù)，不影響對(duì)內(nèi)容的閱讀。
當(dāng)表格的列過(guò)多又必須全部展示時(shí)，固定必需固定的列(如姓名、任務(wù)名稱(chēng)、操作項(xiàng)等)，其他字段橫向滾動(dòng)。
基于人的慣性瀏覽順序，設(shè)計(jì)每列合理的對(duì)齊方式，能夠輔助用戶更的完成工作。
a.標(biāo)題和內(nèi)容：一般采用左對(duì)齊，更的瀏覽順序；
b.有長(zhǎng)短不一的數(shù)字時(shí)(序號(hào)除外)：右對(duì)齊，方便比較 ;
c.操作項(xiàng)一般放在尾列：右對(duì)齊；
從心理學(xué)的角度講，人對(duì)未知事物會(huì)產(chǎn)出恐懼情緒。我們?cè)谠O(shè)計(jì)表格的時(shí)候，要考慮到表格的各種展示情況，非特殊情況不出現(xiàn)單元格空白。
沒(méi)有數(shù)量用“0”表示，沒(méi)有該項(xiàng)內(nèi)容用“-”表示。
表格是一種可以承載大量數(shù)據(jù)的組件，當(dāng)數(shù)據(jù)行數(shù)很多時(shí)我們通常會(huì)選擇分頁(yè)器，使用分頁(yè)器有哪些優(yōu)點(diǎn)：
a.快速查看：通過(guò)分頁(yè)數(shù)據(jù)加載緩解服務(wù)器壓力；
b.清晰易讀：由于界面的空間是有限的，通過(guò)分頁(yè)展示數(shù)據(jù)，有助于緩解用戶的閱讀壓力；
c.靈活便捷：如果客戶想在一頁(yè)展示很多數(shù)據(jù)，可以通過(guò)分頁(yè)器自行選擇，還可以了解到數(shù)據(jù)的總數(shù)目。
當(dāng)界面空間有限、表格列數(shù)很多時(shí)，如果表格的操作項(xiàng)過(guò)多，會(huì)占用很多頁(yè)面空間，需要有選擇的展示，將低頻操作項(xiàng)收起，用點(diǎn)擊更多按鈕去觸發(fā)選擇。
如果是1.0的產(chǎn)品，我們可以和產(chǎn)品經(jīng)理溝通，分析每個(gè)功能按鈕的優(yōu)先級(jí)。
如果是上線的產(chǎn)品，我們還可以通過(guò)按鈕點(diǎn)擊PV(頁(yè)面成功訪問(wèn)次數(shù))，來(lái)了解按鈕的使用頻率，做出按鈕優(yōu)化。
如果產(chǎn)品沒(méi)有特殊需求，那么默認(rèn)最近創(chuàng)建的在最上面。
可以用帶有排序的表頭，讓用戶自定義排序。
如果表格的內(nèi)容項(xiàng)很多，我們通常會(huì)在表格上只展示部分重要數(shù)據(jù)，而其余數(shù)據(jù)放在詳情頁(yè)面展示。
作為詳情頁(yè)面的入口，通常會(huì)有兩種設(shè)計(jì)方式：
a.將詳情按鈕放在操作項(xiàng)里
b.將首行的名稱(chēng)做成可點(diǎn)擊樣式，點(diǎn)擊跳轉(zhuǎn)至詳情
如果詳情內(nèi)容不多，沒(méi)有新開(kāi)頁(yè)面的必要，我們可以采用展開(kāi)行、彈窗、抽屜的形式，但是要注意盡量減少過(guò)多的樣式，給用戶增加疑惑感。
如果詳情的內(nèi)容很多，而且編輯的需求，建議采用新開(kāi)頁(yè)的形式。
建議根據(jù)詳情頁(yè)信息量的多少，以此采用展開(kāi)行、彈窗、抽屜、新開(kāi)頁(yè)的形式。
數(shù)據(jù)過(guò)濾是表格頁(yè)很重要的組成部分，包含搜索、篩選、標(biāo)簽頁(yè)。
這一部分的主要作用是幫助用戶，梳理表格數(shù)據(jù)信息，精準(zhǔn)定位所需的數(shù)據(jù)項(xiàng)。
模糊搜索是指在用戶搜索意圖不明確時(shí)，搜索引擎將用戶的查詢(xún)與待檢索的內(nèi)容進(jìn)行模糊匹配，找出與查詢(xún)相關(guān)的內(nèi)容。模糊搜索無(wú)法理解用戶的查詢(xún)意圖，返回的結(jié)果中可能包括了一大批用戶不想要的信息，所以在使用模糊搜索時(shí)一定要結(jié)合自己的實(shí)際場(chǎng)景，慎重使用。
優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會(huì)被檢索出來(lái)，減少了精準(zhǔn)搜索帶了的記憶負(fù)擔(dān)
缺點(diǎn)：容易把相關(guān)的信息也帶出來(lái)，例如檢索手機(jī)號(hào)，把相關(guān)編碼也匹配出來(lái)
搜索是指用戶在搜索時(shí)，針對(duì)某一數(shù)據(jù)字段搜索，來(lái)查找所需要的數(shù)據(jù)。根據(jù)業(yè)務(wù)場(chǎng)景不同，我們會(huì)查找某一字段，或者是用標(biāo)簽切換不同字段來(lái)查找。
優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高
缺點(diǎn)：每次只能對(duì)單一條件進(jìn)行搜索
篩選器主要是針對(duì)內(nèi)容較少的字段進(jìn)行查找的一種方式， 通過(guò)篩選器的選擇可以快速定位所需的數(shù)據(jù)，取消用戶輸入的過(guò)程，提升查找效率。一般篩選有兩種形式，第一種是下拉篩選，第二種是平鋪式篩選。
下拉篩選就是將需要篩選的內(nèi)容放置于選擇器當(dāng)中，通過(guò)點(diǎn)擊選擇器下拉，來(lái)選擇需要篩選的內(nèi)容。
優(yōu)點(diǎn)：空間利用率高，起到了很好的收納作用
缺點(diǎn)：無(wú)法直觀看到所有的篩選項(xiàng)
平鋪篩選就是將篩選項(xiàng)的內(nèi)容，直接展示于頁(yè)面之上，通過(guò)點(diǎn)擊選擇的方式直接進(jìn)行篩選。或者可以通過(guò)自定義內(nèi)容的篩選。
優(yōu)點(diǎn)：操作效率高，篩選項(xiàng)一目了然，支持輸入更多篩選條件
缺點(diǎn)：空間利用率低，不適合選項(xiàng)太多的情況
當(dāng)數(shù)據(jù)內(nèi)容需要的篩選類(lèi)目過(guò)多時(shí)，如何合理的擺放，才能提高用戶的使用效率。
a.信息排序：基于用戶使用場(chǎng)景，以目標(biāo)導(dǎo)向?yàn)橐罁?jù)，將高頻的篩選項(xiàng)排列到前面，低頻的篩選項(xiàng)置于后面
b.默認(rèn)折疊低頻篩選項(xiàng)：當(dāng)篩選項(xiàng)過(guò)多時(shí)，會(huì)極大的占用界面空間，使用戶在閱讀數(shù)據(jù)時(shí)產(chǎn)生非常不好的用戶體驗(yàn)，通過(guò)展示高頻篩選項(xiàng)、隱藏低頻篩選項(xiàng)，將更好的提升用戶體驗(yàn)。
c.所有篩選項(xiàng)都很低頻：以點(diǎn)擊高級(jí)篩選按鈕的形式觸發(fā)，將全部篩選項(xiàng)置于氣泡或者彈窗之中。
如何判定篩選項(xiàng)的使用頻率呢？
通常會(huì)有兩種方式：
第一種是給篩選項(xiàng)增加數(shù)據(jù)埋點(diǎn)，這樣一來(lái)就可以通過(guò)對(duì)用戶點(diǎn)擊行為的分析了解到篩選項(xiàng)的使用頻率；
第二種是用戶調(diào)研，通過(guò)問(wèn)卷或者面談，了解到用戶的真實(shí)使用需求。
標(biāo)簽頁(yè)又叫選項(xiàng)卡，在組件中我們通常叫Tabs，指的是分隔內(nèi)容上有關(guān)聯(lián)但屬于不同類(lèi)別的數(shù)據(jù)集合。
在使用標(biāo)簽頁(yè)時(shí)，有一點(diǎn)我們要特別注意，通常在B端設(shè)計(jì)中，我們會(huì)把標(biāo)簽頁(yè)的位置定位在最常用的一個(gè)選項(xiàng)。
如果是訂單一類(lèi)的分頁(yè)，我們還可以將數(shù)據(jù)條數(shù)，展示在標(biāo)簽右側(cè)，用來(lái)幫助用戶快速了解到待辦數(shù)據(jù)量。
數(shù)據(jù)操作即對(duì)表格的數(shù)據(jù)進(jìn)行操作，首先我們對(duì)數(shù)據(jù)操作進(jìn)行分類(lèi)。
按控制范圍分:
a.單行操作
b.批量操作
c.全局操作
按操作屬性分：
a.新增數(shù)據(jù)
b.編輯數(shù)據(jù)
c.刪除數(shù)據(jù)
d.業(yè)務(wù)處理
第一步，先判斷控制范圍
第二步，判斷擺放位置
第三步，優(yōu)化信息層級(jí)
以上是操作項(xiàng)和篩選項(xiàng)較多的情況，那么不多時(shí)，我們還是要合理利用空間，靈活設(shè)計(jì)
以上就是《如何設(shè)計(jì)表格？》的全部?jī)?nèi)容了，后續(xù)還會(huì)努力更新更多B端設(shè)計(jì)分享！
與君共勉
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(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ù)
從雇傭關(guān)系看企業(yè)級(jí)協(xié)作產(chǎn)品的設(shè)計(jì)理念和原則
今年的新冠疫情突發(fā)，讓企業(yè)級(jí)協(xié)作產(chǎn)品的賽道熱鬧了起來(lái)。前有釘釘，企業(yè)微信，后有飛書(shū)帶刀入場(chǎng)，其他廠商看了眼紅，趕緊行動(dòng)起來(lái)，所以在這片一眼望不到頭的草原上，你還能看到百度的如流，美團(tuán)的大象，網(wǎng)易的popo等等。
如今疫情控制的結(jié)果也算喜人，經(jīng)過(guò)大半年的時(shí)間的市場(chǎng)錘煉，現(xiàn)在這些個(gè)企業(yè)協(xié)作平臺(tái)也需要被懷揣著審視的目光來(lái)看看接下來(lái)要走的路。
按照公司的要求，我在工作中頻繁的使用到“釘釘”這款產(chǎn)品，接觸的這4年多時(shí)間大概也就是企業(yè)協(xié)作平臺(tái)的發(fā)展史了，我試著總結(jié)了一下：
但B端的設(shè)計(jì)就僅僅是所謂的“效率”么？唯效率的設(shè)計(jì)就一定好么？
你有沒(méi)有不想打開(kāi)釘釘（甚至某一時(shí)間想卸載掉）的沖動(dòng)？阿里巴巴當(dāng)初推出釘釘這個(gè)在線辦公協(xié)同產(chǎn)品，出發(fā)點(diǎn)是為了方便企業(yè)內(nèi)的辦公協(xié)作，溝通記錄、文件資料、流程審批、員工名錄等都能有效得到管理，防止丟失并隨用隨取。
后來(lái)味道變了，以“釘一下”為例，發(fā)起者可以無(wú)限次的對(duì)接收者發(fā)送信息并以“增強(qiáng)提醒”語(yǔ)音的方式提示?？吹某鰜?lái)，這種交互設(shè)計(jì)本著觸達(dá)無(wú)障礙去做的，但卻忘記了設(shè)計(jì)使用門(mén)檻，從而造成了“誰(shuí)有事誰(shuí)牛X的局面”，如果沉下心來(lái)研究，會(huì)發(fā)現(xiàn)在這過(guò)程里情緒的變化是及其明顯的：
企業(yè)管理學(xué)里有一條著名的學(xué)說(shuō)“峰終定律”（后被廣泛應(yīng)用到用戶體驗(yàn)領(lǐng)域里），大概是意思是：“在一段體驗(yàn)的高峰和結(jié)尾，體驗(yàn)是愉悅的，那么對(duì)整個(gè)體驗(yàn)的感受就是愉悅的”。
那么釘釘?shù)倪@些個(gè)機(jī)制可能就是峰終定律的反面教材了。每一個(gè)企業(yè)級(jí)協(xié)作平臺(tái)企業(yè)都在標(biāo)榜自己的創(chuàng)新和功能的全面，殊不知這就是典型的通過(guò)產(chǎn)品功能機(jī)制進(jìn)行的微觀管理，間接加劇雇傭關(guān)系的僵持。甚至一定程度上變成了控制…員工和企業(yè)的關(guān)系我不好說(shuō)，但這些企業(yè)協(xié)作平臺(tái)真真實(shí)實(shí)的在彼此關(guān)系上掃滿了鹽。
翻看了眾多大廠的B端設(shè)計(jì)原則和設(shè)計(jì)理念，無(wú)一例外，所有的被沉淀下來(lái)的“原則”幾乎都是“效率”，甚至一提到跟B端相關(guān)的設(shè)計(jì)就永遠(yuǎn)是“效率！效率！！效率?。。 保?/span>
以效率為核心的設(shè)計(jì)幫助任務(wù)流更的完成，就這點(diǎn)無(wú)可厚非，我自己也是一名用戶體驗(yàn)設(shè)計(jì)師，過(guò)去做企業(yè)級(jí)應(yīng)用的核心就是圍繞“效率”去做的，始終把用戶路徑的長(zhǎng)短作為我個(gè)人無(wú)形的KPI，面試跟人吹牛X的時(shí)候也是舉例說(shuō)的這些。
然而不同于C，企業(yè)協(xié)作平臺(tái)是企業(yè)要求員工統(tǒng)一使用的協(xié)作產(chǎn)品，為了方便信息集中管控，絕企業(yè)員工被迫通過(guò)一次學(xué)習(xí)后逐漸轉(zhuǎn)為不用動(dòng)腦子的肌肉記憶。B端員工只想要“干完活”，C端的“圖新鮮”是發(fā)自?xún)?nèi)心的去找樂(lè)子。所以當(dāng)被強(qiáng)迫完成任務(wù)的情況下，大部分情況下是一個(gè)偽命題。
通過(guò)審視的目光去看當(dāng)下的設(shè)計(jì)原則，企業(yè)級(jí)協(xié)作平臺(tái)經(jīng)歷了起始期的“溝通剛需”和發(fā)展期的“功能堆疊”后，未來(lái)應(yīng)該多考慮“員工與組織”/“員工與企業(yè)”的大命題，希望是以“橋梁”的姿態(tài)出現(xiàn)，以幫助雙方更好的完成工作為目標(biāo)去設(shè)計(jì)：
這其中有兩點(diǎn)需要著重注意：
先說(shuō)個(gè)題外話，過(guò)去，我們?cè)谇舐殨r(shí)期的路徑大概率是到某幾個(gè)招聘網(wǎng)站上挨個(gè)填寫(xiě)個(gè)人信息/工作經(jīng)歷/獲獎(jiǎng)情況，但伴隨著 OCR技術(shù)成熟，一個(gè)word/pdf上傳，自動(dòng)識(shí)別了所有信息，幫助企業(yè)和候選人大幅的解放了勞動(dòng)力。與之類(lèi)似的是：日?qǐng)?bào)周報(bào)月報(bào)，除了工作總結(jié)偏腦力勞動(dòng)需要人工產(chǎn)出之外，工作內(nèi)容這種條目的列舉完全可以幫員工包辦了，畢竟釘釘上記錄了大量的工作文件和日志。單靠一個(gè)周報(bào)模版絲毫解決不了問(wèn)題。
之前跟釘釘?shù)脑O(shè)計(jì)師有過(guò)情感化設(shè)計(jì)的交流，對(duì)方對(duì)情感化的理解更多體現(xiàn)在人文關(guān)懷上，特別是在打卡這個(gè)功能上，超過(guò)幾點(diǎn)下班打卡后會(huì)有一句暖心的話激勵(lì)員工。對(duì)此我還是保留意見(jiàn)，理智支撐我不許叫這個(gè)設(shè)計(jì)為情感化設(shè)計(jì)，因?yàn)槊篮玫奈淖趾推恋膱D形都只是表象而已，并沒(méi)有幫助用戶解決問(wèn)題，所以頂多就是圖形設(shè)計(jì)，說(shuō)的好聽(tīng)點(diǎn)是graphic design。
我理解的情感化，從始至終要以解決用戶問(wèn)題出發(fā)，與其有時(shí)間畫(huà)畫(huà)漂亮的圖形，不如去做業(yè)務(wù)的橫向打通，幫助在深夜快點(diǎn)打車(chē)回家來(lái)的更實(shí)在。
總的來(lái)說(shuō)就目前國(guó)內(nèi)像這種B端企業(yè)級(jí)應(yīng)用真的還就是處在功能打通的階段，未來(lái)去balance雇傭關(guān)系的大局面市場(chǎng)還是很大的，從這個(gè)角度來(lái)看這個(gè)賽道還有的一拼，期待更多的大廠入場(chǎng)來(lái)改善僵持的雇傭關(guān)系。
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(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ù)
作者：負(fù)能量補(bǔ)給站
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn