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