如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
Shards 采用了 Bootstrap 4 前端框架制作的，外觀簡約而時尚，風(fēng)格與現(xiàn)代流行的扁平化相當(dāng)合襯！此外不僅僅擁有 HTML/CSS/SASS 格式模板，還有 Sketch 設(shè)計(jì)源文件，可見分享者的貼心。
目前從官方介紹來看，UI組件還相當(dāng)齊全，可用它來快速搭建漂亮、時尚的網(wǎng)頁和UI設(shè)計(jì)作品，下面一起來看看介紹。
關(guān)于 Shards 這個主題雖然免費(fèi)，但并不代表它只有「表面」，制作者還為性能性能考慮，壓縮版僅12KB大小，實(shí)在太好了，以這樣的大小，制作出來的網(wǎng)頁直接能秒開。
它并不是直接使用 Bootstrap 的設(shè)計(jì)樣式，所有的組件都是重新設(shè)計(jì)，以便得到統(tǒng)一的風(fēng)格！
這是非常不錯的UI KIT素材 ，它還包含了10個額外的自定義組件，可以讓使用者快事制作著陸頁。
演示地址：https://designrevision.com/demo/shards/extra/app-promo.html
演示地址：https://designrevision.com/demo/shards/extra/agency-landing.html
Shards 含有豐富的 UI 組件，網(wǎng)頁端常用的元素幾乎包含了，大方便用戶自由定制。
顏色：
字體
圖標(biāo)支持900+ Material icons 和 Font awesome 兩大圖標(biāo)庫！
表單上的細(xì)節(jié)，也不容忽視：
還有日期組件的設(shè)計(jì)：
卡片
按鈕
導(dǎo)航菜單
我想這些漂亮的元素，已經(jīng)足夠你設(shè)計(jì)一般的網(wǎng)頁，即使不夠，也完全可以自己利用 Sketch 源文件或 HTML 模板再創(chuàng)作。
藍(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ì)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
作為一名設(shè)計(jì)師，在基礎(chǔ)業(yè)務(wù)支持外，大家都會萌生一些很有創(chuàng)意的設(shè)計(jì)想法，并希望通過自發(fā)項(xiàng)目推進(jìn)其落地。而現(xiàn)實(shí)往往是殘酷的，即使熬盡心力去推進(jìn)各方，業(yè)務(wù)方仍不認(rèn)可價(jià)值、開發(fā)資源一度緊缺，外部因素的各種影響最終令項(xiàng)目陷入一度停滯、甚至夭折。今天將 B類全景視圖項(xiàng)目中沉淀的一套設(shè)計(jì)驅(qū)動方法分享出來，希望對大家有所裨益。經(jīng)過全景項(xiàng)目組一年不懈的努力，全景圖像工具已實(shí)現(xiàn)從0到1的迭代上線，覆蓋了1688及ICBU 兩個業(yè)務(wù)，服務(wù)了近30000個商家。順利完成了設(shè)計(jì)驅(qū)動業(yè)務(wù)增長、商業(yè)價(jià)值變現(xiàn)的過程，2.0升級蓄勢待發(fā)中。
幾個自發(fā)項(xiàng)目的實(shí)戰(zhàn)讓我明白了一個道理，用設(shè)計(jì)驅(qū)動力去落地一個項(xiàng)目就像建造一幢建筑。一幢建筑的使用離不開地基、骨架結(jié)構(gòu)、設(shè)備與裝飾，地基可以保證建筑基礎(chǔ)的穩(wěn)固，梁、柱、板等主體性結(jié)構(gòu)可以支撐起整個空間框架，水、電、暖甚至一些功能性家居可以增強(qiáng)空間的使用性。同樣，一個自發(fā)項(xiàng)目也需要不同的結(jié)構(gòu)來支撐，你需要思考并拆解一下項(xiàng)目的不同階段，要重點(diǎn)完成項(xiàng)目的預(yù)先評估、前期成立、后期執(zhí)行與落地等環(huán)節(jié)，以保證項(xiàng)目的基礎(chǔ)、骨架及節(jié)點(diǎn)內(nèi)容的階段性落地。
良好的項(xiàng)目前提可以讓你精準(zhǔn)地評估、判斷設(shè)計(jì)驅(qū)動的機(jī)會點(diǎn)，確保項(xiàng)目有一個堅(jiān)實(shí)的基礎(chǔ)；鏈接各方資源組建項(xiàng)目團(tuán)隊(duì)，以支撐起整個項(xiàng)目骨架；有效執(zhí)行項(xiàng)目節(jié)奏及時間節(jié)點(diǎn)，來確保項(xiàng)目如期上線。
設(shè)計(jì)驅(qū)動的完成不是一蹴而就的，良好的前提會助力項(xiàng)目順利起航。要學(xué)會在業(yè)務(wù)中挖掘設(shè)計(jì)驅(qū)動的機(jī)會點(diǎn)，預(yù)先評估好項(xiàng)目的各種可能性。
1. 認(rèn)知設(shè)計(jì)價(jià)值屬性
從崗位觀層面來講，設(shè)計(jì)師作為資源方，是運(yùn)營及產(chǎn)品的下游環(huán)節(jié)，除了解決用戶痛點(diǎn)，提升用戶體驗(yàn)以外，還必須助力業(yè)務(wù)持續(xù)發(fā)展，實(shí)現(xiàn)商業(yè)價(jià)值變現(xiàn)。而在做設(shè)計(jì)方案時，我們有可能只從用戶角度考慮，脫離當(dāng)前業(yè)務(wù)現(xiàn)狀，標(biāo)榜超前的概念以及的效果，產(chǎn)出各種天馬行空的方案，卻不考慮數(shù)據(jù)在哪里采集、內(nèi)容該如何生成。有些設(shè)計(jì)價(jià)值不能為數(shù)據(jù)所佐證，導(dǎo)致我們經(jīng)常沉浸在自我的設(shè)計(jì)觀內(nèi)，過分夸大設(shè)計(jì)的能動性，錯誤地評估設(shè)計(jì)帶來的價(jià)值。脫離業(yè)務(wù)現(xiàn)狀的設(shè)計(jì)，往往不會被業(yè)務(wù)所采用，合作關(guān)系也可能陷入僵局。所以一定要端正好心態(tài)，設(shè)計(jì)在以用戶為本的同時，也一定要以業(yè)務(wù)為基。
2. 收口當(dāng)前業(yè)務(wù)問題
很多新人設(shè)計(jì)師會遇到不知道如何梳理業(yè)務(wù)問題的情況，在這里給幾點(diǎn)建議。首先，這塊業(yè)務(wù)如果之前有人負(fù)責(zé)過，你可以咨詢相應(yīng)的前輩設(shè)計(jì)師，以更快地了解業(yè)務(wù)問題；其次，你還可以主動求教你的老板，對方的經(jīng)驗(yàn)及閱歷會幫助你快速起步；再次，積極鏈接業(yè)務(wù)同事，歷年報(bào)告及規(guī)劃PPT 先搜羅起來，細(xì)讀之后將不理解的問題羅列出來，找一個合適的時間向?qū)Ψ角蠼?；?dāng)然，用戶永遠(yuǎn)是你最好的溝通對象，邀約幾個核心用戶做下深度訪談，相信你會收獲更多。在此過程中一定要保持謙虛求學(xué)的態(tài)度，多問、多聽、多記，并主動思考業(yè)務(wù)遇到的問題，在業(yè)務(wù)與用戶之間需建立平衡的關(guān)系，探尋能為現(xiàn)在的業(yè)務(wù)做什么、未來可以做什么。
明確了具體的業(yè)務(wù)問題，又該如何提出獨(dú)創(chuàng)性解決方案呢？你要基于業(yè)務(wù)現(xiàn)狀深入用戶，進(jìn)行全面且有深度的用戶調(diào)研，明確核心用戶群體、核心使用場景以及切中要害的用戶痛點(diǎn)。明晰問題后，可通過內(nèi)部設(shè)計(jì)小組頭腦風(fēng)暴的形式來發(fā)散思維，從多重角度（如新技術(shù)、新工藝、新模式等）來考慮解決方案的多樣性及創(chuàng)新性，從中選擇具體方向深化創(chuàng)新。
1. 結(jié)合新趨勢、善用新技術(shù)
在日常積累中多關(guān)注新鮮及熱點(diǎn)資訊，研究行業(yè)及設(shè)計(jì)趨勢；分析相關(guān)或同類競品，比對其優(yōu)勢及特色是哪些；隨時關(guān)注新技術(shù)，例如人工智能、AR、VR、語音交互等技術(shù)的發(fā)展趨勢，思考新技術(shù)是如何與現(xiàn)有場景融合的。當(dāng)你的設(shè)計(jì)方案需要借助某項(xiàng)新技術(shù)來實(shí)現(xiàn)時，你需要提前調(diào)研該技術(shù)的可實(shí)施性，新技術(shù)的應(yīng)用一般是有一定成本的，某些技術(shù)存在的壁壘可能讓設(shè)計(jì)方案付諸東流。而在這一環(huán)節(jié)中，需要注意無論是設(shè)計(jì)還是技術(shù)都是為了解決用戶問題而存在的，不要為了炫酷的效果而盲目在方案中硬潛入某些技術(shù)。
2. 線上、線下模式轉(zhuǎn)換
你還可以深挖用戶場景，什么人在什么場景下做了什么，他的目標(biāo)及痛點(diǎn)是什么，并嘗試還原用戶的原生場景訴求，找尋是否存在將線下模式轉(zhuǎn)換線上、線上模式轉(zhuǎn)換線下的機(jī)會點(diǎn)。舉個例子，在深度認(rèn)證報(bào)告改版項(xiàng)目中，通過幾輪深度用戶調(diào)研，發(fā)現(xiàn)B類買家與C類買家有很大差異，除了商品本身的決策因素外，還會著重考慮賣家的服務(wù)質(zhì)量、供應(yīng)能力、公司經(jīng)營信息等內(nèi)容，聚焦到具體的用戶行為，很多B類買家在尋找新的供應(yīng)商時，經(jīng)常會去賣家的工廠、公司、店鋪進(jìn)行線下實(shí)地考察。而這種行為的背后其實(shí)滲透著用戶的基礎(chǔ)訴求，那就是對賣家企業(yè)實(shí)力真實(shí)情況的渴求。為了將賣家信息更好地可視化，提出了用全景技術(shù)來實(shí)現(xiàn)線上驗(yàn)廠的設(shè)計(jì)提案，方案獲得了買家及業(yè)務(wù)方的一致認(rèn)可。
有了方案之后，你還要反復(fù)校驗(yàn)方案的可實(shí)施性。方案的實(shí)現(xiàn)勢必需要投入各方成本，你需要評估一下設(shè)計(jì)提案的投入產(chǎn)出比，讓業(yè)務(wù)、設(shè)計(jì)、技術(shù)甚至是三方的成本可控。這里的成本主要有兩個層面，一個是運(yùn)營經(jīng)費(fèi)成本，一個是人力成本。對于運(yùn)營經(jīng)費(fèi)的評估，你可以做幾套運(yùn)營方案，從低成本低回報(bào)到高成本高回報(bào)幾個維度來向業(yè)務(wù)申請運(yùn)營經(jīng)費(fèi)，如果有低成本高回報(bào)的方案更有可能獲得運(yùn)營的支持。而對于人力成本而言，往往內(nèi)部成本是較為可控的，可讓各方按照設(shè)計(jì)提案預(yù)估出需要的人力資源。
而三方服務(wù)成本則是運(yùn)營成本及人力成本交叉混合的一種形式，也是最難評估的一種類型。這里舉個例子，當(dāng)全景驗(yàn)廠自發(fā)項(xiàng)目起步時，需要同時考慮客戶、業(yè)務(wù)及三方價(jià)值，為了讓各方利益最大化，需架構(gòu)出一套商業(yè)模式，商家購買全景拍攝服務(wù)、服務(wù)商上門采集商家的全景圖像，平臺則通過運(yùn)營這套服務(wù)模式獲取利潤。在項(xiàng)目初期，為了刺激服務(wù)商團(tuán)隊(duì)快速增長，提高運(yùn)營規(guī)模，對每個訂單補(bǔ)貼了一定的服務(wù)經(jīng)費(fèi)。而為了提高全景服務(wù)的商業(yè)變現(xiàn)能力，必須解決一個問題，如何提高該業(yè)務(wù)模式下的營收利潤率。為此，我們需要拆解一下該模式下的利潤率模型，發(fā)現(xiàn)可以通過提高全年訂單數(shù)（開源）、減少總成本投入（節(jié)流）的方式來提高利潤率。因開源涉及因素較多，這里不再詳細(xì)描述，重點(diǎn)講一下節(jié)流的模式。而節(jié)流的關(guān)鍵就是在降低總成本，用全景的方式去采集工廠圖像，就需要考慮三方人力拍攝成本；因工廠分布在全國各地，上門拍攝產(chǎn)生的差旅成本也是一筆大支出；而全景拍攝勢必離不開設(shè)備，設(shè)備的投入成本更是難以預(yù)估，一臺專業(yè)設(shè)備至少需要近萬的價(jià)格。
所以善用商業(yè)模式、建立二方及三方共贏模式，可以撬動更多資源推動自發(fā)項(xiàng)目落地。
有了以上前提的鋪墊，就可以開始著手項(xiàng)目執(zhí)行階段了。在具體推動過程中你會遇到一些問題，其實(shí)歸根結(jié)底就是兩類問題：一是前期項(xiàng)目成立的資源問題，二是后期項(xiàng)目執(zhí)行的時間節(jié)點(diǎn)問題。處理好這兩大問題，可對項(xiàng)目如期上線起到關(guān)鍵性作用。
作為一個設(shè)計(jì)驅(qū)動者，承擔(dān)著比設(shè)計(jì)師更深刻的責(zé)任，需要從一名需求翻譯者轉(zhuǎn)變?yōu)轫?xiàng)目管理者，你需要學(xué)會協(xié)同多方業(yè)務(wù)資源實(shí)現(xiàn)項(xiàng)目共建。
1. 驅(qū)動業(yè)務(wù)各方協(xié)同
項(xiàng)目的成功是每個項(xiàng)目組成員心血凝結(jié)而成的，少不了各個角色的相互配合，而業(yè)務(wù)角色的配合往往起到核心作用。
多方價(jià)值思辨：為了更好地撬動業(yè)務(wù)資源，你需要主動去游說各方。除了提供一份獨(dú)創(chuàng)性、有價(jià)值的設(shè)計(jì)方案之外，還需要深入思考對方需要什么。你需要對各個職能的工作內(nèi)容有一個明晰的了解，需要站在對方視角將各方價(jià)值論證清楚，思考用戶、平臺、業(yè)務(wù)、技術(shù)價(jià)值分別是什么，你能給對方帶來什么，「思其所想、破其所難」的方式更容易打動對方。
一致的目標(biāo)導(dǎo)向：當(dāng)你拿著一份自以為很滿意的設(shè)計(jì)方案，業(yè)務(wù)卻不感冒的時候，多數(shù)是因?yàn)槟銈冸p方的目標(biāo)不對標(biāo)。說的更直接一些，大家的職能不同，自然所關(guān)注的重點(diǎn)會不一樣，利益點(diǎn)也就不同（KPI不一致）。運(yùn)營會關(guān)注自己業(yè)務(wù)數(shù)據(jù)是否突出，產(chǎn)品會關(guān)注有無商業(yè)價(jià)值，設(shè)計(jì)師則更多關(guān)注體驗(yàn)、美感。所以要想拉到項(xiàng)目資源，不要總是「紙上談兵」，要學(xué)會走出去主動咨詢對方的目標(biāo)是什么，能否通過一定的抓手讓彼此的目標(biāo)更為契合，可以對不同的對象角色（如產(chǎn)品、運(yùn)營、技術(shù)）提出與之對應(yīng)的目標(biāo)方向（如產(chǎn)品化、品牌運(yùn)營化、技術(shù)平臺化）。
自身角色轉(zhuǎn)換：當(dāng)業(yè)務(wù)各方已經(jīng)愿意一起共建完成落地，而在實(shí)際配合過程中，可能也會因?yàn)槎囗?xiàng)目并行造成對方無暇分身，導(dǎo)致合作推進(jìn)較為困難。這個時候，你需要擺正心態(tài)，切換一下自己的角色，以一個產(chǎn)品、運(yùn)營的角色主動去承擔(dān)一些設(shè)計(jì)以外的工作內(nèi)容，在設(shè)計(jì)思維之外培養(yǎng)自己產(chǎn)品、運(yùn)營的思維，輔助產(chǎn)品及運(yùn)營完成相應(yīng)任務(wù)，需要考慮如何將自己的設(shè)計(jì)方案打造成通用性產(chǎn)品，如何通過一些活動或渠道來樹立自己產(chǎn)品的品牌影響力，切實(shí)推進(jìn)項(xiàng)目發(fā)展。
2. 撬動多技術(shù)共建
利用三方技術(shù)資源：在很多情況下，即使方案有價(jià)值、業(yè)務(wù)也認(rèn)可，但受限于業(yè)務(wù)技術(shù)資源，項(xiàng)目排期一拖再拖無法上線，這種時候可以善用三方技術(shù)資源，并勇于調(diào)動內(nèi)部開發(fā)來把控技術(shù)質(zhì)量，順利保證項(xiàng)目起航。
聯(lián)動集團(tuán)技術(shù)資源：而開發(fā)一般都會有幾種擅長的代碼語言，你所對接的技術(shù)可能受開發(fā)語言的限制，不能完成某些創(chuàng)新性方案的開發(fā)，這種情況下要學(xué)會利用集團(tuán)的技術(shù)力量。全景視圖課題剛起步的時候，內(nèi)部技術(shù)并不熟悉全景實(shí)現(xiàn)的代碼語言，而學(xué)習(xí)成本又相當(dāng)大。多方咨詢后了解到集團(tuán)有專業(yè)的技術(shù)團(tuán)隊(duì)正在研究這塊，我們有應(yīng)用場景，對方有技術(shù)儲備，幾輪溝通后大家很快就明確了合作方向。所以當(dāng)你最需要的技術(shù)資源內(nèi)部不能滿足時，要學(xué)會去聯(lián)動集團(tuán)其他資源，鏈接雙方價(jià)值以實(shí)現(xiàn)共贏。
組建好項(xiàng)目組團(tuán)隊(duì)之后，又該如何保證項(xiàng)目節(jié)點(diǎn)平穩(wěn)實(shí)施、保證項(xiàng)目如期落地呢？主要從計(jì)劃彈性制定及節(jié)點(diǎn)風(fēng)險(xiǎn)控制兩個層面來具體執(zhí)行。
1. 確保計(jì)劃的彈性制定
計(jì)劃的彈性：在項(xiàng)目管理中，我們需要全面考慮產(chǎn)品、運(yùn)營、設(shè)計(jì)、技術(shù)等各方進(jìn)度，一份詳細(xì)且合理的進(jìn)度表有利于將項(xiàng)目拆解成各個節(jié)點(diǎn)。為了確保項(xiàng)目有計(jì)劃地完成，可按照時間或事件等緯度來安排具體節(jié)點(diǎn)，并將主要節(jié)點(diǎn)進(jìn)行重點(diǎn)標(biāo)注，比如上線時間、大型運(yùn)營活動，可通過主線Action、次線Action有彈性地牽引項(xiàng)目節(jié)奏。
計(jì)劃的可執(zhí)行性：在做設(shè)計(jì)提案的時候，我們會全面考慮用戶在不同場景下遇到的問題，提出全鏈路設(shè)計(jì)。而在一般情況下，項(xiàng)目資源會受到各種因素限制，方案不可能一次性全部上線，往往需要多版本迭代完成。這就需要作為項(xiàng)目管理者的你，設(shè)定出合理有序的多版本方案，讓每一步都可執(zhí)行，先推進(jìn)1.0最小可行性方案落地上線，再來快速校驗(yàn)數(shù)據(jù)效果，進(jìn)而優(yōu)化2.0版本，用不同版本迭代的方式，逐步實(shí)現(xiàn)較為理想的效果。
2. 完成項(xiàng)目節(jié)點(diǎn)的風(fēng)險(xiǎn)管理
項(xiàng)目在進(jìn)行過程中，往往會出現(xiàn)一些突發(fā)風(fēng)險(xiǎn)，導(dǎo)致項(xiàng)目遲遲得不到進(jìn)展。而在這些風(fēng)險(xiǎn)處理上，作為一個項(xiàng)目owner 不可避免地要和各方溝通來協(xié)調(diào)資源、對接需求、催促進(jìn)度，可以抓住「人」這個關(guān)鍵因素做一些跟進(jìn)及處理。
建立張弛有度的關(guān)系鏈接：當(dāng)項(xiàng)目遇到一定問題或阻力時，可根據(jù)問題的輕急緩重，采用不同維度的方式來處理與項(xiàng)目組成員的關(guān)系。
善用技巧、讓溝通更有效：在實(shí)際項(xiàng)目過程中，大部分同事都是多個項(xiàng)目并行的，各方都會有一定的業(yè)務(wù)壓力，在溝通過程中難免會有些摩擦和碰撞。當(dāng)你與未建立穩(wěn)定合作關(guān)系的同事溝通時，其實(shí)是一種黏度很小的社交弱關(guān)系的表現(xiàn)。過于強(qiáng)硬的溝通方式可能會造成冒犯之意，甚至對合作關(guān)系起到消極作用；而過軟的溝通方式會顯得不夠迫切與急促，可能會造成推進(jìn)緩慢。你可以根據(jù)項(xiàng)目節(jié)點(diǎn)不同的緊急程度，采用力度不同的溝通方式，以下排序從弱到強(qiáng)。
除了以上內(nèi)容，設(shè)計(jì)驅(qū)動項(xiàng)目落地時肯定還會遇到各種不可控因素，務(wù)必要保持良好的心態(tài)，用韌勁去克服重重困難，隨機(jī)應(yīng)變各種情況。全景視圖項(xiàng)目行至今日，用設(shè)計(jì)驅(qū)動業(yè)務(wù)的形式已經(jīng)賦能了30000個B類商家，其中也是經(jīng)歷了多次業(yè)務(wù)調(diào)整、項(xiàng)目成員幾翻變化，我們一直堅(jiān)守初心，積極探索多業(yè)務(wù)場景的落地，期待2.0年底與大家再次見面。設(shè)計(jì)驅(qū)動，行在路上，心在遠(yuǎn)方，與大家共勉。
藍(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ù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
不要小看一個登錄界面，它內(nèi)里包含很多細(xì)微的東西，除去外觀視覺，更多要注意的是交互的操作體驗(yàn)，比如一些動畫、一些文案提示等細(xì)節(jié)都要注意，如果你是UI設(shè)計(jì)師，建議看看這次經(jīng)驗(yàn)文章，附上了大量案例，也許能助你未來更好的去設(shè)計(jì)一個用戶體驗(yàn)友好的APP登錄界面。
下面通過幾個關(guān)于登錄界面的UX策略指南，讓你更好的應(yīng)用和實(shí)踐。
如果用戶使用你的服務(wù)必須登錄，那么信息字段是你必須要做的主要功能（即輸入框中的提示語，如：輸入手機(jī)號碼，輸入驗(yàn)證碼。）
使這些字段清楚可視，并且不要強(qiáng)迫用戶到處尋找，或花更多的步驟進(jìn)到App. 一旦他們進(jìn)到App, 登錄界面是他們所應(yīng)當(dāng)見到的第一個事情。
獎勵提示：相比于使用常見的“登錄”“登陸”的按鈕，可以更富有創(chuàng)造性，并要包含可直接輸入?yún)^(qū)域。確保記住用戶的數(shù)據(jù)，這樣他們就不需要每次輸入信息。
更多地時候，我們看到注冊和登陸按鈕被放置的靠近彼此，但是這會對用戶產(chǎn)生反作用。
這兩個動作都包含了相同的動詞，并且看起來也很相似，所以他們會混淆用戶的選擇。在有限的時間內(nèi)進(jìn)入問題，他們可能會感到沮喪并且離開。
基本上，任何界面上不應(yīng)該有使用戶“暫?！焙汀八伎肌钡脑亍?
如果你想讓他們的體驗(yàn)完美無瑕，分開這注冊和登陸兩個區(qū)域，并且使差別清晰可見。另外，你可以使用不同的動詞或者簡單解釋不同的字段是什么。
在登錄和注冊部分，增加不同的輸入字段。
除了動詞“Sign”是事實(shí)之外，另一個另用戶感到困惑的是，登錄和注冊部分通常有相同數(shù)量的輸入框（用戶名，密碼，和郵箱）。
為了完全地區(qū)分，最小化新用戶嘗試直接登錄的機(jī)會。用不同的輸入字段。
當(dāng)大多數(shù)用戶的密碼由于安保原因被打了馬賽克，用戶頻繁遇見的另一個問題是打錯他們的密碼。
這甚至?xí)l(fā)生在很有經(jīng)驗(yàn)的打字員身上，特別是當(dāng)他們在移動設(shè)備上登錄的時候。
防止這種情況發(fā)生的做法是：在密碼字符旁邊包含一個“顯示密碼”的單選框或圖標(biāo)。
如果應(yīng)用監(jiān)測到一個錯誤的密碼組合，和用戶名，但是沒有明確的報(bào)告給用戶問題是什么，用戶可能會多次嘗試后，很生氣的退出應(yīng)用。
這是為什么你應(yīng)該考慮通用的回復(fù)（例如“你的密碼或郵箱不符合”），并且給他們立馬回復(fù)怎么解決這個問題。
問下郵箱地址或電話號碼，而不是唯一的用戶名
為什么人們登錄時人們很少記住“用戶名”？如果使用用戶名登錄，你會面對很多可避免的困難：用戶名必須是一個唯一的，這意味著人們會重復(fù)嘗試輸入一個系統(tǒng)里目前還沒有的用戶名，或者最終使用其真實(shí)姓名。
過了一會兒，用戶想出了一個唯一的登錄名，但是只過了一小會兒就忘記了，因?yàn)檫@個用戶名對他沒有任何的意義。
另一個事情可以促進(jìn)登錄，是提供給用戶幾個登錄選項(xiàng)，并且給他們機(jī)會來選擇和嘗試用戶名而不會沮喪。在這過程中強(qiáng)迫的一部分是允許他們使用郵箱地址和密碼來注冊。
忘記密碼發(fā)生在所有人身上，這也是為什么，你急迫的給到用戶一個機(jī)會來恢復(fù)密碼，那么就直接在登錄界面這么做吧。
所要做的就是，在輸入框下增加一個“忘記你的密碼”的鏈接，并讓系統(tǒng)能給用戶的郵箱或電話號碼發(fā)送驗(yàn)證碼。
為了避免強(qiáng)迫進(jìn)入和暴力攻擊，許多網(wǎng)頁和應(yīng)用在一系列的錯誤嘗試之后關(guān)閉賬戶。
安全第一，但是你至少要嘗試告訴用戶，在多少次嘗試后，在關(guān)閉賬戶前，他們必須離開。你也可以分享更多的細(xì)節(jié)，例如，在試錯后的十分鐘才可以再次嘗試的事實(shí)。
如果在過去，都是在用相同的無風(fēng)格和定制化的登錄頁?，F(xiàn)如今，給你的應(yīng)用，創(chuàng)造一個獨(dú)特的登錄頁設(shè)計(jì)是非常重要的事情，尤其是你想要圍繞你的應(yīng)用和服務(wù)來創(chuàng)造品牌。
設(shè)計(jì)師和開發(fā)人員也有承認(rèn)意識到登錄表單的重要性。這是事實(shí)，特別對于移動環(huán)境下，用戶界面相比于“桌面”網(wǎng)站，扮演了更重要的角色。
當(dāng)為一個應(yīng)用和移動站設(shè)計(jì)這個元素的時候，設(shè)計(jì)師花很多的精力，使它既好用又美觀。
在這篇文章里，你會看到很多移動端用戶界面設(shè)計(jì)的案例靈感，關(guān)于一個移動端登陸頁面應(yīng)被設(shè)計(jì)成什么樣，給你一些線索。
Roostio Login Screen
Login Screen
Job Board – Company Profile / Login
Shopping app
Tailslife: Login
Moody Sign Up/In Screen
Bandio App Login & Sign Up
Parts – login dark side
Login Screens
ZSSK – login and route detail
DailyUI Day001
Skype Redesign
Sign Up Window – Daily UI #001
對用戶來說，登陸已經(jīng)很困難了，所以，使之變得更復(fù)雜，對你的產(chǎn)品來說并不是一個很聰明的決定。避免更大的和不熟悉的形式，并且讓輸入字符簡單可視。這些只是一些為了節(jié)省用戶時間可以考慮的技巧，并且?guī)椭麄兿硎苣闼峁┑姆?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ì)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
配色并沒有所謂的固定方程式，生搬硬套配色理論并不能真正解決問題。本文帶你從配色的策略性角度出發(fā)，深入分析配色的正確打開方式，讓你從本質(zhì)上解決不同場景的配色問題，并通過配色提升整體的設(shè)計(jì)品質(zhì)。
1. 色彩規(guī)律≠配色規(guī)律
我們都學(xué)習(xí)過非常多的色彩知識，也看過很多的配色書籍或文章。然而當(dāng)我們嘗試在設(shè)計(jì)中運(yùn)用這些理論時，就會發(fā)現(xiàn)：配色的理論往往在實(shí)際運(yùn)用中并不好使，使用后的效果也不是特別明顯。為什么會出現(xiàn)這種現(xiàn)象呢？
配色是否就是色彩某種的規(guī)律？當(dāng)我們學(xué)習(xí)并掌握這種規(guī)律以后，就能掌控雷電，呼風(fēng)喚雨，成為配色大魔王了呢？
答案并非如此。
配色并非單獨(dú)存在，而是依附于不同的設(shè)計(jì)載體中。不同的設(shè)計(jì)載體，所要達(dá)到的目標(biāo)不一樣，就決定了配色理論也會存在差別。
我們會發(fā)現(xiàn)，雖然有很多書本、文章都在寫配色的理論，每個人講的配色理論有很多相同的地方，但是最核心的理論往往都不是相同的。
因?yàn)榇蠹抑v的相同部分，大多都是色彩的理論部分，這部分僅僅只是色彩本身的規(guī)律；而大家所講的不同部分，則通常是作者在自己所在領(lǐng)域總結(jié)的一套配色規(guī)律。
因此，并非每一篇文章的配色理論都適合你，這也是當(dāng)你學(xué)習(xí)并使用配色理論后，效果依然不好的原因了。
因此在學(xué)習(xí)配色時，僅僅學(xué)習(xí)配色理論是不夠的。首先要思考配色的使用場景，以及整個設(shè)計(jì)所要達(dá)到的目標(biāo)，然后再學(xué)習(xí)相應(yīng)領(lǐng)域的配色知識，才能讓配色理論發(fā)揮最大的作用。
2. 不同的行業(yè)，不同的配色目標(biāo)
雖然設(shè)計(jì)是相通的，但是在不同的設(shè)計(jì)領(lǐng)域進(jìn)行配色時，依然會存在巨大的區(qū)別。
比如廣告設(shè)計(jì)的配色理論，放在室內(nèi)設(shè)計(jì)上，往往是行不通的。因?yàn)閺V告設(shè)計(jì)的目標(biāo)在于傳遞信息，需要吸引你，而室內(nèi)設(shè)計(jì)的目標(biāo)則是要營造舒適理想的生活氛圍。同樣的道理，推廣設(shè)計(jì)的配色理論，往往在界面設(shè)計(jì)時也是行不通的。
不同行業(yè)間設(shè)計(jì)目標(biāo)的差異，決定了配色目標(biāo)和理論的差異。
△ 廣告設(shè)計(jì)：準(zhǔn)確地傳遞商品、廣告等信息
△ 品牌設(shè)計(jì)：創(chuàng)造品牌概念，留下品牌印象
△ 工業(yè)設(shè)計(jì)：營造產(chǎn)品氛圍，引導(dǎo)產(chǎn)品使用
△ 室內(nèi)設(shè)計(jì)：傳遞生活理念，創(chuàng)造理想的生活氛圍
△ 數(shù)字產(chǎn)品設(shè)計(jì)：傳遞產(chǎn)品信息，引導(dǎo)用戶閱讀和操作
3. 明確配色目標(biāo)
對于大部分互聯(lián)網(wǎng)行業(yè)的視覺設(shè)計(jì)師來說，平時的工作內(nèi)容大體會分為產(chǎn)品界面設(shè)計(jì)和推廣設(shè)計(jì)兩個大的方向。很多設(shè)計(jì)師需要同時負(fù)責(zé)這兩塊內(nèi)容，于是就可能會出現(xiàn)將同一個配色理論用在不同地方的情況，導(dǎo)致一些配色問題的出現(xiàn)。比如：推廣設(shè)計(jì)的配色太素，無法吸引用戶的注意；而產(chǎn)品頁面的配色又過于雜亂刺眼，影響用戶閱讀和操作體驗(yàn)等。
所以，配色的第一步，首先要明確配色目標(biāo)。
產(chǎn)品界面設(shè)計(jì)的配色目標(biāo)：
推廣設(shè)計(jì)的配色目標(biāo)：
我們將這兩種配色目標(biāo)做一下關(guān)鍵詞提煉，產(chǎn)品界面設(shè)計(jì)的配色關(guān)鍵詞：清晰、舒適、引導(dǎo)、品牌感。而推廣設(shè)計(jì)的配色關(guān)鍵詞為：吸引力、氛圍、快速傳遞。
我們可以將這些關(guān)鍵詞作為衡量目標(biāo)，以此來尋找正確的配色方向，或者用于檢驗(yàn)設(shè)計(jì)作品的配色問題。
所以當(dāng)我們接到項(xiàng)目需求后，可以先與需求方一同確定好設(shè)計(jì)的目標(biāo)，以此來確定正確的配色方向，提升配色與設(shè)計(jì)方向的準(zhǔn)確性。而這樣做的另一個好處是，我們可以在項(xiàng)目之初就與需求方之間取得溝通和信任，達(dá)成共識，為后續(xù)溝通打好基礎(chǔ)。
當(dāng)我們確定好配色的目標(biāo)以后，如何開始配色工作呢？通常情況下，我們首先來確定整個設(shè)計(jì)的主色，然后再開始進(jìn)行后續(xù)的設(shè)計(jì)。
1. 主色與副色的定義
什么是主色和副色？
主色是整個色調(diào)的核心顏色，通常也是相對占比最多的顏色，它決定了整體的風(fēng)格和基調(diào)。而副色則是畫面中占比相對較少的顏色，它通常起到輔助主色、豐富畫面的作用。
假如把一個畫面看成一部電影，那么主色就是整個電影的主角，而副色則是除了主角以外的其他配角。
2. 確定主色，精簡色彩層級
一部好的電影，通常情況下需要有一個明確的主角，它主導(dǎo)了整個電影的走向，對于設(shè)計(jì)作品來說，也是相同的道理。所以在配色過程中，首要的任務(wù)是確定配色的主色，并在整個作品中明確它的地位，讓它來主導(dǎo)整個畫面。
在產(chǎn)品界面的設(shè)計(jì)中，主色是傳達(dá)品牌感的重要元素。明確的主色能夠讓整個界面產(chǎn)生強(qiáng)烈的品牌感。反之，整體的配色會顯的十分混亂，影響品牌感的傳達(dá)。
我們可以來看兩個案例：
這兩個案例在配色上有什么問題嗎？為什么？
如何更準(zhǔn)確地分析配色的問題？ 我們可以使用前面講的目標(biāo)分析法，從產(chǎn)品界面的配色目標(biāo)入手，逐一尋找和發(fā)現(xiàn)問題。
我們通過三個維度去分析問題：
如何去解決以上的問題？可以用八個字概括：明確主色，精簡層級。
我們可以來看一下 Keep 的產(chǎn)品界面設(shè)計(jì)。同樣是健身App，Keep 的配色方式則完全符合了產(chǎn)品界面的配色目標(biāo)。相比前面案例的兩個界面，Keep 的產(chǎn)品界面呈現(xiàn)出優(yōu)秀的整體品牌感和品質(zhì)感。
在 Keep 的整體配色中，最核心的思想就是簡化色彩層級——明確主色，減少不必要的顏色。從配色的角度來分析，作為品牌的主色，「Keep綠」貫穿了所有的產(chǎn)品界面，使整個產(chǎn)品顯得非常統(tǒng)一和整體，凸顯了整體的品牌感和品質(zhì)感。
其次，Keep 的整體界面將除了主色以外的其他顏色精簡到了，并將主要的輔助灰以外的所有中性色都控制在三個層級以內(nèi)；首頁的插畫運(yùn)用了同色系來精簡色彩層級；視頻的封面圖風(fēng)格也經(jīng)過處理，使色調(diào)與整體界面統(tǒng)一。
整個界面的閱讀體驗(yàn)非常舒適，字體顏色層級清晰，重點(diǎn)明確。而在操作引導(dǎo)上，Keep 將大量的品牌色用于核心操作路徑和按鈕上，這使得整個產(chǎn)品的引導(dǎo)邏輯清晰明確。
3. 精簡色彩層級的意義
色彩層級越精簡，就越容易達(dá)到整體色彩平衡，從而提升設(shè)計(jì)的整體品質(zhì)感。當(dāng)我們?nèi)タ春芏啻髲S的頁面設(shè)計(jì)時，可以感受到很多的相同點(diǎn)：整體而強(qiáng)烈的品牌感，簡約而高級的配色，豐富細(xì)膩的細(xì)節(jié)等。
用戶在閱讀頁面時，配色是我們大腦接收到的畫面信息。所以精簡配色對于產(chǎn)品界面的設(shè)計(jì)來說至關(guān)重要。以品牌色為主色，精簡色彩層級，可以讓整個頁面富有品牌感。
△ 網(wǎng)易云官網(wǎng)
△ 阿里云官網(wǎng)
△ 騰訊云官網(wǎng)
4. 品牌升級時的色彩簡化趨勢
在品牌Logo 的升級中，簡化色彩層級同樣是一個大的趨勢。簡化層級，可以讓品牌更加簡約和高級，提升品牌的品質(zhì)感和包容性，使品牌擁有更大延展性和更多的可能性。
星巴克的品牌升級中，除了去掉 Logo 字母和咖啡字母外，更簡化了 Logo 的圖形和色彩。從而強(qiáng)化了星巴克標(biāo)志性的人魚形象和星巴克綠，讓品牌更加簡潔有力，易于傳播。
大麥網(wǎng)在去年也經(jīng)歷了戰(zhàn)略性的品牌升級。全新的品牌形象包括新 LOGO 以及新的 Slogan，配色上則重新定義了更具年輕活力的紅色作為主色，同時精簡了整體的色彩層級。
而寶馬在最近官方宣傳圖中，將藍(lán)白色相間的 Logo 簡化為黑白單色，而新 Logo 專為品牌旗下即將推出的高端豪華車型使用。
明確配色目標(biāo)，確定主色以及色彩層級后，如何進(jìn)行下一步的配色？
這時候我們可以根據(jù)不同的配色目標(biāo)來選擇合適的色系，豐富整個畫面的配色。需要注意的是，在豐富配色的同時，仍然要嚴(yán)格控制色彩層級，以保證整體色彩層級的精簡。
1. 巧用同色系，統(tǒng)一不單調(diào)
同色系是指在色環(huán)上相距不超過45°的兩種顏色，我們可以選擇主色的同色系范圍內(nèi)的顏色來豐富整體配色。那么如何選擇同色系的顏色呢？
首先在色環(huán)中確定顏色的位置，通過色環(huán)兩邊45°延展出我們所需要的同色系。
在主色的同色系范圍內(nèi)，我們可以選出同色系顏色作為延展色，單獨(dú)使用或者組合成漸變色進(jìn)行使用。
下面的案例就是運(yùn)用同色系原理來進(jìn)行配色的?？梢钥吹?，整個頁面在保持色彩統(tǒng)一的前提下，增強(qiáng)了畫面的層次和豐富性，從而提升了整個頁面的層次感和品質(zhì)感。
同色系的配色特點(diǎn)是整體頁面統(tǒng)一而富有層次，從而傳遞出一種穩(wěn)定、專業(yè)的形象，適合絕大多數(shù)的場景使用，是最為簡單和有效的配色方式。
我們可以總結(jié)一下同色系的配色方法。首先確定主色，主色兩邊45°以內(nèi)的同色系色彩范圍，在范圍中選取合適的單色作為輔助色，或者選取一段漸變色單獨(dú)使用。
2. 不同場景的對比色用法
對比色是指在色環(huán)上相距120°~180°之間的兩種顏色（180°時則互為互補(bǔ)色）。處于對比色關(guān)系的兩種顏色，通常色相差異較大，能夠相互產(chǎn)生強(qiáng)烈的對比效果，我們可以利用這種原理來增強(qiáng)畫面的吸引力。
在不同的場景中，對比色同樣有著不一樣的使用方式。在產(chǎn)品設(shè)計(jì)中，通過小面積的顏色對比，可以加強(qiáng)主色的活力與整體豐富性；而在推廣設(shè)計(jì)中，通常會使用大面積的對比色增強(qiáng)頁面的吸引力。
產(chǎn)品界面中的對比色應(yīng)用
產(chǎn)品界面的配色對于產(chǎn)品來說至關(guān)重要，好的配色不僅能夠準(zhǔn)確地反映產(chǎn)品的調(diào)性，還能正確地引導(dǎo)用戶閱讀并理解產(chǎn)品。
我們可以結(jié)合網(wǎng)易七魚的官網(wǎng)改版案例，來了解如何通過配色來提升官網(wǎng)的設(shè)計(jì)品質(zhì)。
下圖是七魚的舊版官網(wǎng)頁面，在配色上，產(chǎn)品方認(rèn)為原來的配色過于單調(diào)和沉悶，希望可以讓整體更活潑一些。且網(wǎng)站的整體跳出率過高，希望我們能夠找到原因并通過改版解決這個問題。
首先第一步，需要找出舊版官網(wǎng)存在的問題。這時候，我們就需要再次運(yùn)用前面所講的目標(biāo)分析法。通過不同維度的目標(biāo)分析，尋找頁面中存在的問題。
我們還是通過三個維度去分析問題：
由于七魚首頁的修改涉及到整體官網(wǎng)的配色修改，單純從每個頁面入手并不能從根本解決問題，容易造成整體官網(wǎng)配色不統(tǒng)一的情況。這個時候，我們就要從品牌配色入手，通過修改配色并制定新的設(shè)計(jì)規(guī)范，在整體上解決問題。
首先從品牌主色入手。經(jīng)過嚴(yán)格的討論，我們重新制定了七魚的品牌主色。為了解決顏色沉悶的問題，我們選擇了接近原有主色，但更鮮亮且富有活力的藍(lán)色作為主色。而輔助色上，為了讓七魚品牌更有溫度，我們選擇主色的對比色——橙色。
藍(lán)色與橙色在小面積上的互相對比，可以互相襯托，讓兩種顏色更顯活力。
我們以新的配色規(guī)范為基礎(chǔ)，重新制定了全新的七魚設(shè)計(jì)規(guī)范。規(guī)范中包含了配色的使用比例、不同的icon樣式與配色的結(jié)合方式等一系列的頁面細(xì)節(jié)，以保證規(guī)范可以完整、統(tǒng)一地落實(shí)到每個頁面和元素中。
運(yùn)用新的配色規(guī)范進(jìn)行頁面設(shè)計(jì)時，要靈活地將配色與產(chǎn)品內(nèi)容相結(jié)合，讓配色更好的融于頁面中，而不是生搬硬套地將配色裝到頁面里。
比如我們在優(yōu)化首頁的主要功能模塊時，首先做的便是重新梳理產(chǎn)品功能的展示構(gòu)架，然后再結(jié)合新的設(shè)計(jì)形式和配色規(guī)范，讓新的規(guī)范發(fā)揮最大的作用。
在不同頁面的功能icon 上，我們豐富了 icon 的表現(xiàn)形式，同時將新的對比色配色加入到每個 icon 元素中，增強(qiáng)了 icon 的活力和吸引力，讓每個 icon 看起來更精致。
而在功能插圖中上，我們采用了與 icon 統(tǒng)一的配色和表現(xiàn)形式，讓頁面中的所有元素具有統(tǒng)一的品牌感。
最終，我們將新的配色規(guī)范逐步落實(shí)到網(wǎng)易七魚所有的 Web端和 Mob端頁面中，使七魚的整體官網(wǎng)設(shè)計(jì)煥然一新。在新的官網(wǎng)頁面中，不僅提升了整體的設(shè)計(jì)品質(zhì)，同時也解決了前面分析的問題，整體提升了15%的客戶留存率。
通過這個案例我們可以發(fā)現(xiàn)，整體配色的改變，可以極大的提升官網(wǎng)對于用戶的第一印象。用戶往往在進(jìn)來的一瞬間就決定了對官網(wǎng)的印象，并最終影響用戶是否進(jìn)一步閱讀，而配色則是其中非常重要的一部分，正確的配色能夠讓用戶更愿意停留并閱讀內(nèi)容。
推廣活動頁面中的對比色應(yīng)用
在推廣頁面的設(shè)計(jì)中，通常需要用營造強(qiáng)烈的視覺沖擊，以達(dá)到快速吸引用戶并傳遞信息的目標(biāo)。這就需要大面積的對比色，來達(dá)到強(qiáng)烈的對比效果。而在較大面積使用對比色時，整體色彩的主次和整體平衡至關(guān)重要。
我們可以來看一個案例：
可以看到，整個頁面主要由橙色和深藍(lán)紫色兩個主要對比色構(gòu)成。大面積的對比色產(chǎn)生了強(qiáng)烈的視覺沖擊，讓整個頁面充滿了吸引力。整個畫面用最強(qiáng)烈的對比色重點(diǎn)突出了兩個主要的人物角色，從而吸引用戶注意并進(jìn)行閱讀，最終將用戶引導(dǎo)至購買入口。至此，整個頁面的任務(wù)也算是完成了。
在推廣頁面中，我們需要注意的是，重點(diǎn)信息并非只能是文字內(nèi)容，也可以是最吸引用戶的畫面核心元素。
3. 嘗試更多的創(chuàng)新配色
除了掌握以上的幾種基本色系的配色方法外，大家可以在此基礎(chǔ)上嘗試更多的配色風(fēng)格。比如在同色系、對比色系的基礎(chǔ)上，有目的地加入色彩元素豐富色調(diào)，在保持整體色彩層級的同時，加入更豐富的變化，從而達(dá)到配色目標(biāo)。
△ 更清新的「同色系」配色
△ 更豐富的「同色系」配色
△ 更多彩的「對比色」配色
△ 復(fù)古的平面風(fēng)配色
而對于很多初學(xué)者來說，我建議大家能夠首先明確配色的目標(biāo)，在配色時保持色彩層級的精簡明確。在此基礎(chǔ)上，循序漸進(jìn)，逐步去嘗試更多地配色風(fēng)格。只有這樣，才能養(yǎng)成良好的配色習(xí)慣。
我們按照之前的方法，正確的確定了配色的目標(biāo)，選擇了合適的配色方向，并逐步完成了整體的設(shè)計(jì)排版。很多同學(xué)到這一步之后，就覺得作品已經(jīng)完成，便停止不繼續(xù)深入了，而這也是初級設(shè)計(jì)師經(jīng)常容易出現(xiàn)的問題。這個時候的作品，從整體上看并沒有太多問題。但是當(dāng)用戶被頁面吸引，開始仔細(xì)欣賞作品時，往往會發(fā)現(xiàn)作品沒什么看點(diǎn)。
出現(xiàn)這種問題的原因，就是作品缺乏足夠的細(xì)節(jié)和品質(zhì)，導(dǎo)致作品不夠耐看。就像一本書有著精美的封面，但是打開以后卻平淡無奇，最終對整本書都非常失望。
想要讓作品更優(yōu)秀，除了基本的版式和配色之外，往往還需要更深入地去雕刻作品，讓作品帶有一種更高級的「氣質(zhì)」，而這種「氣質(zhì)」就是我們所說的品質(zhì)感。
1. 什么是品質(zhì)感？
品質(zhì)感對于設(shè)計(jì)作品來說，是一個綜合性的評價(jià)。我們可以將這個詞分為「品」和「質(zhì)」，「品」代表物體本身的品相和細(xì)節(jié)，而「質(zhì)」則代表質(zhì)感。
怎樣的設(shè)計(jì)才算是有品質(zhì)感的？如何提升設(shè)計(jì)的品質(zhì)感？我們可以先來研究一些優(yōu)秀的設(shè)計(jì)案例，尋找其中的共同點(diǎn)。蘋果的產(chǎn)品和頁面設(shè)計(jì)，是公認(rèn)的具有較高品質(zhì)感的，我們可以來看一下蘋果的部分官網(wǎng)頁面。
蘋果的所有產(chǎn)品和頁面，從產(chǎn)品圖到頁面的設(shè)計(jì)都非常有質(zhì)感。為什么這種質(zhì)感會如此吸引我們，令我們覺得非常舒適？如何才能讓設(shè)計(jì)產(chǎn)生質(zhì)感？
要了解如何產(chǎn)生質(zhì)感，首先要了解一下物體產(chǎn)生質(zhì)感的原理。
當(dāng)光線照射在富有質(zhì)感的物體表面時，會產(chǎn)生不同程度的漫反射，最終反射進(jìn)入我們的眼球后，就會顯現(xiàn)出一層富有質(zhì)感的漸變色。所以想讓物體獲得質(zhì)感，漸變是一個關(guān)鍵要素。
我們可以利用這一原理來提升質(zhì)感。下面的案例，是 FishDesign 組件庫官網(wǎng)的一個局部頁面。其中就運(yùn)用了大量的漸變色質(zhì)感原理，將漸變色融入到 icon 和頁面元素中，從而提升了整個頁面的質(zhì)感。
2. 獲得品質(zhì)感的關(guān)鍵要素
漸變只是獲得品質(zhì)感的關(guān)鍵因素之一，蘋果官網(wǎng)將漸變這種原理加入到頁面和元素中，配合精美的產(chǎn)品圖片，讓頁面保持了非常高的品質(zhì)感。
那么是否還有其他要素的存在，能夠提升質(zhì)感呢？
仔細(xì)觀察蘋果的所有元素設(shè)計(jì)，在漸變的同時，還加入了微量的投影和豐富的細(xì)節(jié)，使所有的元素在簡潔中充滿了細(xì)膩的質(zhì)感。
我們可以總結(jié)一下，讓設(shè)計(jì)獲得品質(zhì)感的幾個要點(diǎn)：細(xì)膩的漸變+輕微的光影+細(xì)節(jié)/紋理。
發(fā)現(xiàn)這些原理以后，我們可以嘗試將這些原理運(yùn)用到設(shè)計(jì)中，從而提升設(shè)計(jì)的品質(zhì)感。下面的幾個案例，就是我在研究時所做的一些練習(xí)，在不同的頁面細(xì)節(jié)中都可以看到以上原理的運(yùn)用效果。
看完前面的內(nèi)容，大家會發(fā)現(xiàn)，其實(shí)配色并沒有想象中那么復(fù)雜。
只要掌握正確的配色策略，并逐漸適應(yīng)這種方法，就可以應(yīng)付各種不同的設(shè)計(jì)類型。最后，我們將前面講的配色法則做一個簡要的總結(jié)：明確目標(biāo) – 確定主色 – 精簡層級 – 選擇色系豐富配色 – 提升品質(zhì)感。
希望大家讀完這篇文章以后，能夠真正理解和掌握策略性配色法則，在不同的項(xiàng)目中靈活運(yùn)用，并最終形成自己的優(yōu)秀配色習(xí)慣。
藍(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ì)的小編 http://sillybuy.com