如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
小時(shí)候我們很多經(jīng)驗(yàn)都是來自于寓言故事，故事總能幫你更好地理解一些事情和道理。關(guān)于設(shè)計(jì)，這個(gè)道理同樣適用。今天的文章，我們就跟著一個(gè)設(shè)計(jì)師的經(jīng)歷來學(xué)點(diǎn)什么吧。我有一個(gè)朋友，名字叫做 Jimmy，這的確是一個(gè)很普遍的名字。當(dāng)我認(rèn)識他的時(shí)候，他正供職于一家名為 Shmuckle 的公司，而他正是這家公司的設(shè)計(jì)師。和所有的設(shè)計(jì)師一樣，他日思夜想夢寐以求的，是成為一名著名的設(shè)計(jì)師，而喬布斯的經(jīng)歷對他有著不可磨滅的影響。Jimmy 和很多設(shè)計(jì)師一樣，著迷喬教主。好在 Jimmy 的崇拜并不是停留在嘴上，而是身體力行，力圖在公司里面推行好的設(shè)計(jì)。在 Jimmy 的眼中，好的設(shè)計(jì)應(yīng)該是直觀的、創(chuàng)新且令人愉悅的。
當(dāng)然，故事的發(fā)展如果總是一帆風(fēng)順就沒有意思了。Jimmy 果然一如正常的劇情推進(jìn)……他碰到障礙了。
這一次，Jimmy 正在執(zhí)行一個(gè)重要的項(xiàng)目，這個(gè)項(xiàng)目的成敗將會直接影響到他的職業(yè)生涯。這次的任務(wù)，他需要為他們公司的一款產(chǎn)品，重新設(shè)計(jì)整個(gè)控制面板。而就在這次的項(xiàng)目當(dāng)中，Jimmy 發(fā)現(xiàn)他沒有辦法拿出一套足夠優(yōu)秀的解決方案。好在他還有 Plan B，那就是重新找靈感。Jimmy 開始重新播放他最喜歡的設(shè)計(jì)類的視頻，閱讀曾經(jīng)給他啟發(fā)的文章，收聽其他同行所開設(shè)的播客，以期在其中找到感覺或者靈感。
可惜，靈感并沒有如期而至。局面尷尬了。
就在此刻，援手到了。Sarah 是公司的資深設(shè)計(jì)師，正巧這個(gè)時(shí)候路過 Jimmy 的工位，看到了 Jimmy 糾結(jié)掙扎的樣子。這是多么熟悉的場景啊，她早年入行的時(shí)候，同樣經(jīng)歷過這樣的狀態(tài)，為求一好設(shè)計(jì)而痛苦不已。如今，她已經(jīng)能夠輕松駕馭不同的需求，足以應(yīng)對復(fù)雜多變的設(shè)計(jì)項(xiàng)目。
「Hey Jimmy，老遠(yuǎn)就看到你正在揪頭發(fā)，看樣子正在構(gòu)思新設(shè)計(jì)吧，瞧你這個(gè)狀態(tài)，應(yīng)該不太順利吧？」
「誒，客戶說讓我給他們重新設(shè)計(jì)整個(gè)控制面板。他們覺得不夠好使，希望新的控制面板能夠更好展示信息，提升效率，最好再把幾個(gè)比較明顯的可訪問性問題給解決一下。但是我怎么設(shè)計(jì)……都覺得不對?？蛻裟沁呌胁簧偃藚⑴c了測試，有人覺得挺棒的，有人又非常討厭，還有一部分直接說還得接著改?，F(xiàn)在，我覺得無能為力，不知道要怎么弄了?！笿immy 保持著撓頭的姿勢，盯著屏幕說道。
「別糾結(jié)，」Sarah 微笑道：「如果一直盯著問題解決問題是常常會陷入這樣的困境的，解決方案其實(shí)并不復(fù)雜，你需要從根子上來想辦法。只要讓整個(gè)設(shè)計(jì)方案貼合規(guī)則基礎(chǔ)穩(wěn)固了，問題就會迎刃而解了。其實(shí)，關(guān)鍵也就是幾個(gè)基本的設(shè)計(jì)原則?！?
「雖然這話經(jīng)常聽到，但是真的能行？」Jimmy 狐疑地盯著 Sarah，思忖兩秒感覺到大姐頭這是要傳授秘籍，便摸過小本子，端正坐姿，準(zhǔn)備做筆記：「那么，都有哪些原則呢？」
Sarah 拍了拍 Jimmy 的肩膀，端了杯咖啡，說道：「下樓散步吧，咱們邊走邊聊?！?
「其實(shí)，在產(chǎn)品完成之后，是需要基于幾個(gè)基本的原則來重新審視和調(diào)整設(shè)計(jì)的?！筍arah 喝了一口咖啡，慢慢地開始說。
Jimmy，如果腦子里面的思路沒有梳理清晰，很難做出條理清晰的產(chǎn)品的。因此，在設(shè)計(jì)產(chǎn)品之前，先應(yīng)當(dāng)消除思維中的混亂，有幾個(gè)事情，在設(shè)計(jì)的過程中要始終保持關(guān)注：
產(chǎn)品的外觀最終都是在清晰的設(shè)計(jì)（或者不夠清晰的設(shè)計(jì)）之下的副產(chǎn)物。清晰的設(shè)計(jì)意圖，最終會轉(zhuǎn)化為清晰的產(chǎn)品設(shè)計(jì)?！狹assimo Vignelli
「我記得 Massimo Vignelli 在他的《The Vignelli Canon》中寫道，一個(gè)混亂而復(fù)雜的產(chǎn)品始終是源自于制造者本身的混亂，說明這個(gè)人本身內(nèi)心深處心態(tài)復(fù)雜而想法混亂?！筍arah 說道。Jimmy 此刻若有所思。
「接下來的這一點(diǎn)也同樣很重要。我們設(shè)計(jì)的數(shù)字產(chǎn)品必須清晰，也要專注于當(dāng)前的任務(wù)，一個(gè)交互性強(qiáng)、可操作性優(yōu)秀的 APP 才是用戶所需要的，而要做到這一點(diǎn)，屏幕上的內(nèi)容應(yīng)當(dāng)始終是的，并且始終保持較高的相關(guān)性。與此同時(shí)，APP 也應(yīng)當(dāng)作為用戶意圖的延伸。如果用戶打開了你的 APP，想要解決某個(gè)問題，執(zhí)行某個(gè)任務(wù)，而你的 APP 做不到這一點(diǎn)，那么情況就很糟糕了?！筍arah 說道。
她停了幾秒鐘，梳理了一下思路，繼續(xù)說道：「你看，我們所做的一切都是為了確保我們的方案，能夠在正確的環(huán)境中，面對著對的用戶，解決亟需解決的問題。當(dāng)然，我們要經(jīng)歷很多次的迭代，才能靠近這一目標(biāo)?！?
「許多設(shè)計(jì)師和開發(fā)者都在說，APP 應(yīng)該靈活，應(yīng)該滿足所有客戶的需求。好吧，Jimmy，這些說法都是胡說八道的。但是有一個(gè)說法很真實(shí)，也需要你時(shí)刻謹(jǐn)記：試圖取悅每個(gè)人只會帶來無盡的壓力和痛苦，讓你沮喪，失去資源。所以，不要害怕失去一部分用戶，真正需要擔(dān)心的是失去愿景和遠(yuǎn)見?！?
「一個(gè)偉大的而足夠優(yōu)秀的數(shù)字產(chǎn)品，必須始終清楚它到底是服務(wù)于誰的。只有牢記真正的用戶，明白他們的需求，才能開發(fā)出真正有效的解決方案。最好的數(shù)字產(chǎn)品當(dāng)中，都是藏著愿景的?！筍arah 和 Jimmy 走到了大樓的窗戶附近，看著外面來往的人流，Jimmy 忍不住問到：「那其他的用戶呢？」Sarah 笑著回答：「當(dāng)我們滿足目前的目標(biāo)之后，才能顧的上其他的人。我們的目標(biāo)用戶才是核心，其他的人不喜歡，和我們的愿景不匹配，也不用操心。市場上會有其他的應(yīng)用或者服務(wù)能夠滿足他們，讓他們高興，而我們總是只能身處一個(gè)陣營，你不可能什么都擁有。」Sarah 笑著回答 Jimmy 的疑問。
當(dāng)人們尋找軟件和服務(wù)的時(shí)候，他們要的并不是功能，他們要的是解決問題的方法，一個(gè)和自己相匹配的愿景。——37Signals《Getting Real》
下一個(gè)原則，也是一個(gè)很重要的注意事項(xiàng)，那就是反饋。反饋能夠幫用戶確定操作是否執(zhí)行了，明白結(jié)果是否發(fā)生，讓用戶明白當(dāng)前的情況：
「我想你應(yīng)該知道，即使技術(shù)如此的進(jìn)步，人類本身的生物性決定了我們依然是依靠反饋來確知互動的結(jié)果和狀態(tài)的。我們的身體（視覺或者觸感）需要感受到反饋，再像大腦發(fā)出信號，而虛擬的界面背后到底在發(fā)生什么，需要全面的交互設(shè)計(jì)傳遞出來，只有這樣用戶才不會費(fèi)勁巴拉地去思考之前的點(diǎn)擊或者滑動交互是否操作成功了。反饋給用戶的信息也應(yīng)該是能夠被輕松理解的，用戶不應(yīng)該在這個(gè)事情上再費(fèi)勁去思考了。因此，你手邊應(yīng)該有關(guān)于心理學(xué)、行為學(xué)這類能夠揭示人類思考的圖書，因?yàn)樗鼈兡軌驇湍闾嵘寄??！筍arah 喝了一口咖啡，潤了潤嗓子，帶著 Jimmy 又溜達(dá)上樓，回到了辦公室。
「隱喻——我這里說的并不是文學(xué)中的隱喻，」Sarah 又提到了一個(gè)看似無用但是經(jīng)常被說起的概念：「你看，UI界面中的設(shè)計(jì)元素和交互方式和我們的現(xiàn)實(shí)生活中的元素和交互方式是如此的相似，這就是借用隱喻將我們的熟悉的元素和交互都投射到虛擬的數(shù)字產(chǎn)品當(dāng)中。這樣一來，用戶會更快地學(xué)會和理解?！?
「正是因?yàn)殡[喻的存在，現(xiàn)實(shí)的經(jīng)驗(yàn)和虛擬的交互產(chǎn)生了關(guān)聯(lián)，用戶交互因此而更加自然地發(fā)生。視線隨著被精心設(shè)計(jì)的布局而游移到重點(diǎn)上，用戶會下意識地點(diǎn)擊被高亮顯示的、和現(xiàn)實(shí)按鈕差不多的交互控件，他們還會下意識地在虛擬的屏幕上滑動，在界面之前自然游走。因此，你有必要了解你的核心用戶每天都在使用哪些 APP，他們都是如何交互的。這有助于你吸收經(jīng)驗(yàn)，消除不良的體驗(yàn)，創(chuàng)造舒適的交互，降低學(xué)習(xí)的壓力，更好地轉(zhuǎn)化?！筍arah 一邊說著，一邊下意識地模擬著交互并解釋道。
「接下來我們還是用案例來說明一下，會更容易理解?！拐f著 Sarah 坐到椅子上，并且打開電腦屏幕，說道：「比如我們要做一個(gè)日歷，你認(rèn)為它應(yīng)該是網(wǎng)格，還是做成列表？」Jimmy 撓頭想了一下，遲疑道：「恩……我們應(yīng)該堅(jiān)持使用網(wǎng)格的樣式。它更加緊湊也更加有條理，我說的對嗎？」
「其實(shí)這取決于用戶的主要目標(biāo)是什么。如果這個(gè)日歷元素是出現(xiàn)在報(bào)告文檔當(dāng)中，應(yīng)該是用網(wǎng)格的樣式還是列表的樣式呢？一樣的，這要看情況。我們是否要在每個(gè)應(yīng)用中都使用全局導(dǎo)航？同樣是需要基于上下文情況來決定的。一致的設(shè)計(jì)不止是表面樣式上的一致，還需要從需求、內(nèi)容、用戶使用場景和體驗(yàn)上來保持一致性。如果在特定的情況下，獨(dú)特的設(shè)計(jì)能夠帶來更大的價(jià)值，那么這是有意義的，這種特殊情況下不同是有必要的?！筍arah 細(xì)心地為 Jimmy 解釋道。
良好的設(shè)計(jì)，應(yīng)該是特定語境經(jīng)過評估后定制的副產(chǎn)物，而不是脫離使用場景而憑空創(chuàng)造出來的，否則，無論多么炫酷都是不合時(shí)宜的?！狹assimo Vignelli
「最后要說的，是防御性設(shè)計(jì)?！筍arah 轉(zhuǎn)身對著 Jimmy，然后說道最后一個(gè)規(guī)則。
「防御性設(shè)計(jì)？什么東西？」Jimmy 感覺今天學(xué)到了不少，最后這個(gè)原則也被他寫到小本子上了?！高@個(gè)啊，也就是大家常說的直覺性設(shè)計(jì)。」Sarah 微微一笑。
「我知道！喬布斯以前就經(jīng)常說這個(gè)概念！」Jimmy 終于找到一個(gè)他足夠熟悉的概念，興奮不已。
「可是，你真的知道什么是直覺性的設(shè)計(jì)么？」Sarah 看著興奮的 Jimmy 賣了個(gè)關(guān)子。
「預(yù)測用戶行為？然后在用戶要執(zhí)行下一個(gè)操作之前幫他解決需求？」Jimmy 狐疑地問道。
「是也不是。它并不是讓你去預(yù)測用戶的行為，防御性設(shè)計(jì)是為了避免出錯(cuò)。無論你如何謹(jǐn)慎地去做設(shè)計(jì)，總會有錯(cuò)誤發(fā)生，無論你做過多少調(diào)研，你計(jì)劃有多么妥帖，你的產(chǎn)品總會需要一個(gè)備用方案來規(guī)避問題?！筍arah 說道：「防御性設(shè)計(jì)，是讓你找到可能會出現(xiàn)的問題?！?
相信我，你的產(chǎn)品如果給了用戶負(fù)面的體驗(yàn)，他們絕對不會忘記。
「我還是沒明白你的意思……」Jimmy 習(xí)慣性地?fù)项^。Sarah 耐心地開始解釋：「以開車為例來說明這個(gè)事兒吧。當(dāng)你開車的時(shí)候，總會盡量避免道路上各種可能出現(xiàn)的危險(xiǎn)情況，比如魯莽駕駛的大貨車，三心二意橫穿馬路的行人，懵懂無知在路邊打鬧的兒童，甚至野外竄上馬路的野鹿，等等。同樣的，作為設(shè)計(jì)師，我們需要預(yù)料到可能會出現(xiàn)的問題，以及始終保持專注來修復(fù)這些問題。這樣我們就不會破壞整個(gè)用戶體驗(yàn)。我們要有良好的防御性的設(shè)計(jì)意識，維持住體驗(yàn)，改善體驗(yàn)?！筍arah 說到這個(gè)地方的時(shí)候，Jimmy 感覺她身上散發(fā)著某種光芒。
然后 Sarah 起身，帶著 Jimmy 回到他的工位?！冈趺礃?，這些東西你都記下來了嗎？」Sarah 打趣地歪著頭看著低著頭還在琢磨的 Jimmy，如同大男孩一樣的 Jimmy 驚訝地抬頭問道：「什么意思？這就是全部嘛？難道只有這些？」
Sarah 呼出一口氣，微笑著對 Jimmy 說道：「好了好了，設(shè)計(jì)原則、規(guī)則、規(guī)范、技巧有太多，可是對于每個(gè)人，每個(gè)公司而言，都有屬于自己的一套方法和策略。你可以盡興地去探索，但是即使你不知道全部，也可以借助你所熟知的幾個(gè)原則和策略，拿出足夠優(yōu)秀的設(shè)計(jì)。我把我最熟悉的、掌握地最嫻熟、體會最深刻的幾個(gè)原則分享給你，它們足以幫你開啟一條走向好設(shè)計(jì)的道路，我覺得你要是真的體會到了，就已經(jīng)能夠拿出比別人更好的東西了。其他的設(shè)計(jì)原則，只要你有耐心和時(shí)間，還可以繼續(xù)探索。該工作啦。」
就像 Sarah 說的，設(shè)計(jì)原則太多了，誰又規(guī)定死了具體有幾條呢？每個(gè)人心中的哈姆雷特都不一樣，每個(gè)人眼里的哈利波特又何嘗是一樣的呢？
最重要的問題在于，許多人知道原則，卻并不會在設(shè)計(jì)項(xiàng)目當(dāng)中運(yùn)用它們。洞悉每個(gè)設(shè)計(jì)項(xiàng)目當(dāng)中的重點(diǎn)，了解客戶的需求，明白首要的設(shè)計(jì)目標(biāo)，在產(chǎn)品和用戶之間，找到平衡點(diǎn)，用心地思考，利用好設(shè)計(jì)原則這一利器。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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)這里
隨著消費(fèi)升級的步伐，商家總結(jié)出在帶動消費(fèi)能力上小孩>女人>寵物>男人的規(guī)律，爸爸們作為商家最不重視的一個(gè)角色，該如何在父親節(jié)以爸爸為主角制作一款 H5 呢？手機(jī)充值作為一個(gè)日活數(shù)千萬的工具型產(chǎn)品，親密充作為多號碼充值的首要場景，對話費(fèi)充值的生態(tài)與成長起到至關(guān)重要的作用。未來，在新用戶增速放緩環(huán)境下，發(fā)揮親密充功能沉淀的用戶充值關(guān)系，將成為我們新的探索方向。
所以此次在父親節(jié)進(jìn)行發(fā)力，制作一款可以對手機(jī)充值親密充有拉動作用的 H5 品宣。
相對于每年母親節(jié)的聲勢浩大，但是一到父親節(jié)世界就都安靜了。這是機(jī)會也是挑戰(zhàn)，機(jī)會在于因?yàn)楦赣H節(jié)平均聲量較小，所以產(chǎn)出較容易被大家所看到，同時(shí)也面臨著關(guān)注度不夠的客觀情況的挑戰(zhàn)。
這個(gè)用戶的狀態(tài)反映了許多人父親節(jié)送禮物的常態(tài)，送來送去好像什么都不合適，最終還是充了一筆話費(fèi)，這恰好也是此次話費(fèi)充值父親節(jié)品宣的落腳點(diǎn)。此次品宣的雛形就初現(xiàn)了，一個(gè)在老家缺少關(guān)心的空巢父親與一個(gè)在外地工作費(fèi)盡心思送禮物的兒子，他們之間發(fā)生的火花。
但若單單如此，則略顯單調(diào)，如何增加趣味性與可玩性呢？
確定了主題后開始具體著手項(xiàng)目具體制作，由于第一次制作劇情動畫、配音與答題三者相結(jié)合的故事性交互 H5，下面會每一步說明，我們在這些地方都是怎么做的。
劇本是故事性交互 H5 的重中之重，也是其對用戶是否吸引的關(guān)鍵因素，若缺乏吸引力用戶則無法到達(dá)最后看到品牌曝光，一個(gè)劇本最基本的需要一個(gè)通順且合理的劇情，更高的要求是要充分利用用戶好奇心，獲取用戶注意力，完成品牌與功能的曝光。按照寫文章的方法，一個(gè)飽滿的劇本需要有三部分組成。
具體的配音工作交給配音外包商就好，我們要做的就是對最后效果的把控。
首先要了解匹配原理，為了節(jié)省開發(fā)時(shí)間與資源，六種方言動畫全部采用同一種幀數(shù)與時(shí)間，所以需要匹配每一句的配音時(shí)長。
配音時(shí)長可以通過三種方法控制：
確定好玩法流程后，進(jìn)入視覺階段，這次整體的設(shè)定是不同區(qū)域的爸爸形象，要表現(xiàn)出各區(qū)域的特色，結(jié)合好配音，才會達(dá)到比較理想的效果。
在人物的刻畫上，視覺是有很多表現(xiàn)形式的，但會根據(jù)整體方案的氣質(zhì)去選擇合適的視覺呈現(xiàn)。由于這次的方案會有人物配音，為了使整體效果更自然，更接近用戶的想象，加上對產(chǎn)品用戶群的定位，我們摒棄了低齡卡通的設(shè)計(jì)方向，在人物設(shè)計(jì)上選擇了寫實(shí)的設(shè)計(jì)風(fēng)格，更符合用戶心理對父親這個(gè)嚴(yán)肅、嚴(yán)謹(jǐn)?shù)男睦碛∠蟆?
結(jié)合對話的內(nèi)容以及動畫的表現(xiàn)形式，在細(xì)節(jié)刻畫顏色搭配上增加復(fù)古的味道，使人物更活潑不呆板將字體圖形化設(shè)計(jì)，結(jié)合中國元素，提煉各省市的簡稱加上有特點(diǎn)的人物設(shè)計(jì)，能更快速的幫用戶選擇以及增加親切感，以下就是各區(qū)域的爸爸形象設(shè)計(jì)，有沒有一款打動你呀。
人物的設(shè)定出來后，主頁面的視覺風(fēng)格就比較好把控了，復(fù)古的老式畫報(bào)風(fēng)格，是一個(gè)很好的選擇～既能突出人物形象，又能把內(nèi)容很好的劃分整合。
板式設(shè)定：
主頁面整體視覺風(fēng)格確立以及版式布局，畫面主體還是以人物形象為主，配合動畫讓整個(gè)畫面更有動感，強(qiáng)調(diào)打電話的動作，更貼近產(chǎn)品。
在動畫的設(shè)計(jì)上，也是遇到了很多困難，因?yàn)?個(gè)區(qū)域人物分為獨(dú)白、對話、聽電話3個(gè)部分的動畫，而為了防止圖片過多文件過大每個(gè)動作都要控制在6/7幀的范圍內(nèi)，又要保證形態(tài)的自然有趣，又要能對上字幕配音。
這里的難度非常非常的大，需要每個(gè)步驟都配合的剛剛好，非常感謝開發(fā)哥哥耐心打磨，最后的呈現(xiàn)還是很滿意的。
動畫效果，頁面過多就選一部分進(jìn)行展示：
最后整體數(shù)據(jù)效果還是比較理想，用戶完成全部選項(xiàng)占比整體 UV 34.89%，說明 H5 內(nèi)容對用戶吸引度較高，能夠用內(nèi)容本身吸引用戶到達(dá)廣告落地頁，完成運(yùn)營目標(biāo)。也帶來較高的親密充數(shù)據(jù)，相較平時(shí)有顯著提升，給親密充帶來綁定與充值。
第一次制作配音動畫相關(guān)的運(yùn)營 H5，制作初期既期待又緊張，中間也遇到了幾次看似無法逾越的難題，最終呈現(xiàn)結(jié)果也還較為滿意。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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)這里
Alex Schleifer 是 Airbnb 的設(shè)計(jì)副總裁。在加入 Airbnb 之前，他曾在 Say Media 擔(dān)任設(shè)計(jì)創(chuàng)意部高級副總裁。他在這篇文章中分享了目前設(shè)計(jì)行業(yè)在發(fā)展中存在的一些問題與挑戰(zhàn)，并分析了背后的原因，同時(shí)還分享了解決問題的方法以及打造一個(gè)設(shè)計(jì)友好型公司的三大秘訣。我的設(shè)計(jì)師同仁們，我發(fā)現(xiàn)我們進(jìn)入設(shè)計(jì)這個(gè)行業(yè)都是非常偶然的。以 Airbnb 的設(shè)計(jì)團(tuán)隊(duì)為例，在 Airbnb 目前的設(shè)計(jì)團(tuán)隊(duì)的設(shè)計(jì)師里，有人之前是做圖書館管理員的，有人之前是技工，還有人之前是壽險(xiǎn)代理或理療師的?？傊诔蔀樵O(shè)計(jì)師之前，他們從事過的職業(yè)是五花八門，做什么的都有。由于他們內(nèi)心是喜歡創(chuàng)意方面的工作的，這推動他們最終走上了設(shè)計(jì)這條道路。我對這一切是非常欣慰的，然而我總會忍不住去想，究竟還有多少有設(shè)計(jì)天賦的人才最終沒能走上設(shè)計(jì)這條職業(yè)道路。我知道未被挖掘的設(shè)計(jì)人才非常多，這也是我們現(xiàn)在想招聘優(yōu)秀的設(shè)計(jì)師如此艱難的重要原因之一。
Airbnb 以設(shè)計(jì)驅(qū)動型文化著稱，公司的兩位聯(lián)合創(chuàng)始人也都畢業(yè)于聞名全球的設(shè)計(jì)學(xué)院：羅德島設(shè)計(jì)學(xué)院，對于這樣的一家公司，想招聘優(yōu)秀的設(shè)計(jì)師都非常難，你可能會覺得難以置信，但事實(shí)確實(shí)如此。其實(shí)不光是 Airbnb，我曾經(jīng)和包括 Apple、Google 和 Facebook 在內(nèi)的很多非常注重設(shè)計(jì)的大公司高管都交流過，他們也同樣面臨類似的問題。現(xiàn)在看似是沒有足夠多的設(shè)計(jì)師滿足市場需求，設(shè)計(jì)師人才供不應(yīng)求。早期創(chuàng)業(yè)公司對這個(gè)問題應(yīng)該感觸更深。每周，我都會從擁有很好發(fā)展前景的創(chuàng)業(yè)公司或中等規(guī)模公司的人那里聽說他們正在為招不到設(shè)計(jì)師而發(fā)愁。
即使設(shè)計(jì)不是公司最重要的部門，要想讓公司、尤其是資金資源有限的創(chuàng)業(yè)公司坐著等設(shè)計(jì)師在自己需要的時(shí)候自動出現(xiàn)是不現(xiàn)實(shí)的。如果我母親不是一位堅(jiān)信設(shè)計(jì)是能成為一個(gè)職業(yè)的藝術(shù)家的話，我可能也不會進(jìn)入設(shè)計(jì)師這個(gè)行當(dāng)。能通往設(shè)計(jì)師的路徑有很多，設(shè)計(jì)師的角色也千變?nèi)f化。如果設(shè)計(jì)師沒有一個(gè)清晰的職業(yè)發(fā)展通道的話，要想找到下一代優(yōu)秀的設(shè)計(jì)人才，我們依然只能靠意外的好運(yùn)氣。
在各個(gè)行業(yè)的公司能為設(shè)計(jì)師從業(yè)者創(chuàng)造一種融洽的工作環(huán)境和清晰的職業(yè)發(fā)展通道之前，有必要和大家分析一下目前阻礙設(shè)計(jì)行業(yè)發(fā)展的幾大主要挑戰(zhàn)和障礙。
1. 缺乏對設(shè)計(jì)全面而深入的理解
在設(shè)計(jì)行業(yè)之外，有些人會知道一點(diǎn) UI 和 UX，但總的來說，相比大眾對產(chǎn)品研發(fā)的理解，人們對設(shè)計(jì)是缺乏全面的認(rèn)識與理解的。電子產(chǎn)品已成為每個(gè)人生活中必不可少的一部分，在一個(gè)設(shè)計(jì)能決定交互型電子產(chǎn)品與平臺體驗(yàn)的行業(yè)，在功能之外還要更加注重整個(gè)產(chǎn)品的流暢性。對設(shè)計(jì)全面而深入的理解有助于設(shè)計(jì)師走出自己的小世界，從而打造一個(gè)更偉大的產(chǎn)品。
2. 缺乏標(biāo)準(zhǔn)化的組織架構(gòu)
工程技術(shù)和產(chǎn)品管理團(tuán)隊(duì)的組織架構(gòu)非常清晰，也有清晰明確的匯報(bào)體系，相比而言，設(shè)計(jì)師團(tuán)隊(duì)的組織架構(gòu)形式各異。有的公司采用代理模式，在這種模式下，設(shè)計(jì)師會不停地從一個(gè)項(xiàng)目轉(zhuǎn)向下一個(gè)項(xiàng)目，為全公司提供設(shè)計(jì)支持，很多公司都會默認(rèn)采用這種模式。有的公司的設(shè)計(jì)師會全程參與產(chǎn)品的所有開發(fā)過程，從最開始到完成，這種模式下，設(shè)計(jì)主管和產(chǎn)品主管、工程主管一樣向同一個(gè)領(lǐng)導(dǎo)匯報(bào)。還有一些公司，它的設(shè)計(jì)團(tuán)隊(duì)會向產(chǎn)品、工程或市場團(tuán)隊(duì)主管匯報(bào)工作。在設(shè)計(jì)領(lǐng)域，我們越早建立一個(gè)行業(yè)統(tǒng)一、清晰流暢的組織結(jié)構(gòu)，那么在公司內(nèi)部就越容易打造一種設(shè)計(jì)文化和清晰的設(shè)計(jì)師職業(yè)發(fā)展通道。
3. 缺少被大眾熟知的設(shè)計(jì)師行業(yè)的榜樣
在工程技術(shù)領(lǐng)域，大家熟知的行業(yè)榜樣很多，包括 Bill Gates、Mark Zukerberg 和 Marissa Mayer 等。在產(chǎn)品領(lǐng)域，也有 Sundar Pichai、Reid Hoffman 和 Kevin Systrom 等眾多行業(yè)榜樣。如果讓大家列舉一些知名的設(shè)計(jì)師出身的人擔(dān)任公司創(chuàng)始人或高管的例子，我敢肯定，在設(shè)計(jì)圈之外，除了 Jony Ivee 和 Yves Béhar 這極少數(shù)名字外，大家應(yīng)該列不出其他人了，而這兩個(gè)人還都是工業(yè)設(shè)計(jì)師。當(dāng)然，我們并不是為了樹立這些行業(yè)榜樣而樹立行業(yè)榜樣，但是我們是可以能從為大眾熟知的行業(yè)榜樣的多少來了解設(shè)計(jì)師行業(yè)的是否成熟，以及設(shè)計(jì)師的職業(yè)發(fā)展通道是否清晰暢通。只有有足夠多的行業(yè)榜樣，設(shè)計(jì)師行業(yè)才能得到更好地發(fā)展。
如果一個(gè)國家全由設(shè)計(jì)師構(gòu)成，那么我們會將哪個(gè)設(shè)計(jì)師的頭像放在這個(gè)國家的法定貨幣上呢？
設(shè)計(jì)師行業(yè)所面臨的問題挑戰(zhàn)和設(shè)計(jì)師的薪資待遇沒有多大關(guān)聯(lián)，它主要和設(shè)計(jì)師團(tuán)隊(duì)在公司里的位置有關(guān)系。對設(shè)計(jì)師的需求一直在那里，但設(shè)計(jì)師的職業(yè)發(fā)展通道卻一直不清晰。下面就給大家分享幾種方法，所有公司都可以采用這些方法去吸引優(yōu)秀的設(shè)計(jì)人才，設(shè)計(jì)主管也可以更好地帶領(lǐng)大家前進(jìn)。
1. 從一開始就融合工程、產(chǎn)品和設(shè)計(jì)
在一些科技公司，包括 Airbnb 在內(nèi)，工程（engineering）、產(chǎn)品（product）和設(shè)計(jì)（design）團(tuán)隊(duì)是捆綁在一起的，它們?nèi)咄ǔ１缓戏Q為 EPD。以設(shè)計(jì)團(tuán)隊(duì)來說，團(tuán)隊(duì)里負(fù)責(zé)各個(gè)領(lǐng)域的所有設(shè)計(jì)師都會參與到從產(chǎn)品開始開發(fā)到發(fā)布的全過程。如果一個(gè)項(xiàng)目組負(fù)責(zé)一項(xiàng)新功能開發(fā)、產(chǎn)品營銷或用戶反饋，那么工程、產(chǎn)品和設(shè)計(jì)這三個(gè)團(tuán)隊(duì)都會分別至少指派一個(gè)人去參與其中。這種三者聯(lián)合不僅能聚集產(chǎn)品的主要開發(fā)負(fù)責(zé)人，同時(shí)有助于所有三個(gè)團(tuán)隊(duì)成員職業(yè)發(fā)展通道的正規(guī)化。
這種三者融合的團(tuán)隊(duì)度就像下面這個(gè)三條腿的凳子，三條腿分別代表開發(fā)產(chǎn)品所需的三個(gè)不同團(tuán)隊(duì)，即工程、產(chǎn)品和設(shè)計(jì)團(tuán)隊(duì)。只有從產(chǎn)品開發(fā)伊始就做到三條腿協(xié)同并進(jìn)（如Figure A圖），那么在公司規(guī)模擴(kuò)張的過程中才能保證三條腿一樣長（如Figure B 圖）。
我發(fā)現(xiàn)，從一開始就在工程、產(chǎn)品和設(shè)計(jì)三者的協(xié)調(diào)平衡方面做得比較好的公司一般都會做以下兩項(xiàng)工作：
如果你不在一開始遵循這個(gè)原則，那么最后你只能做出一個(gè)蹩腳的產(chǎn)品，就會像下面的凳子那樣不穩(wěn)固。如果產(chǎn)品開發(fā)之初一個(gè)設(shè)計(jì)師都沒有，那么你的產(chǎn)品就會像下面 Figure C圖里的凳子一樣，少一條腿。如果你在產(chǎn)品已經(jīng)開發(fā)到一定階段且比較成熟之后再讓設(shè)計(jì)師參與，那么你做出的產(chǎn)品可能就會像 Figure D圖中的凳子那樣，三條腿不一樣長。
要想避免自己的產(chǎn)品像上面的凳子那樣蹩腳，最好的方法就是從一開始就同時(shí)打造三條腿（工程、產(chǎn)品和設(shè)計(jì)）。在實(shí)際操作中，要從一開始就招聘設(shè)計(jì)、工程和產(chǎn)品主管，三者向同一個(gè)人匯報(bào)工作。以 Airbnb 為例，Airbnb 的設(shè)計(jì)、工程與產(chǎn)品主管是平級的，而且都直接向創(chuàng)始人匯報(bào)工作。其實(shí)不光是工程、產(chǎn)品和設(shè)計(jì)部門的主管需要緊密協(xié)同，在涉及到每一個(gè)具體的項(xiàng)目時(shí)也需要三個(gè)部門的協(xié)同配合。
一款產(chǎn)品主要由以下三個(gè)要素來定義的：商務(wù)、代碼與像素。在所有的產(chǎn)品決策中，要讓每一個(gè)要素都有發(fā)言的機(jī)會。
在 Airbnb 的設(shè)計(jì)團(tuán)隊(duì)，我們采取了以下幾項(xiàng)措施來明確設(shè)計(jì)師是能夠引導(dǎo)公司發(fā)展的，同時(shí)讓設(shè)計(jì)師能有一個(gè)清晰的職業(yè)發(fā)展通道。
2. 為資深設(shè)計(jì)師開辟一條清晰的職業(yè)發(fā)展路徑
公司里的資深員工尤其是資深設(shè)計(jì)師所面臨的一個(gè)問題是，隨著他們在所負(fù)責(zé)的具體工作領(lǐng)域變得越來越資深，他們就會觸碰到職業(yè)「天花板」，然而處于相應(yīng)管理位置的人員卻不會遇到這個(gè)問題。一般來說，這和他們的能力、工作表現(xiàn)或影響力沒有太大關(guān)系，主要是因?yàn)樗麄冋莆盏募寄芙M合是封閉、無法轉(zhuǎn)移共享的。我們在 Airbnb 主要采取以下幾項(xiàng)措施來抑制這種負(fù)面影響：
只要能將上面兩種做法結(jié)合，那么你就能提高下面這個(gè)地方的表現(xiàn)：
3. 發(fā)現(xiàn)和使用新工具，創(chuàng)建一個(gè)自己的設(shè)計(jì)術(shù)語庫
我承認(rèn)，直到今天我依然無法擺脫對 Photoshop 的依賴。使用 Photoshop 已經(jīng)成為我的一種習(xí)慣，就好比是設(shè)計(jì)師們曾將鉛筆看做是他們的手的延伸一樣。有些工具我們已經(jīng)使用了20年，我們通常會根據(jù)自己的習(xí)慣和肌肉記憶來選擇使用的軟件，所以新工具能否適應(yīng)設(shè)計(jì)師的使用習(xí)慣是至關(guān)重要的。
在新工具挖掘方面，我們有自己的實(shí)驗(yàn)人員，但最好能有人專門負(fù)責(zé)嘗試和整合新設(shè)計(jì)工具。這就是為什么 Airbnb 會在設(shè)計(jì)運(yùn)營團(tuán)隊(duì)上進(jìn)行了大量投入，這個(gè)團(tuán)隊(duì)主要負(fù)責(zé)幫助設(shè)計(jì)團(tuán)隊(duì)在公司擴(kuò)張過程能能更地開展工作。設(shè)計(jì)運(yùn)營團(tuán)隊(duì)要確保設(shè)計(jì)工具能和工程、產(chǎn)品及其它部門使用的工具保持協(xié)調(diào)。
即使你現(xiàn)在還無法組建一支專門的設(shè)計(jì)運(yùn)營團(tuán)隊(duì)，你同樣可以采取一些小措施去進(jìn)行工具整合和結(jié)構(gòu)調(diào)整，讓設(shè)計(jì)師更加便捷地工作。要從最基礎(chǔ)的層面進(jìn)行整合，盡可能統(tǒng)一大家的使用規(guī)范和語言。這不僅適用于開發(fā)一個(gè)設(shè)計(jì)系統(tǒng)，同時(shí)還適用于一些更常規(guī)的工作中，如何為文件命名、在哪里存儲文件、如何管理版本等等。所有人都能遵循同一個(gè)規(guī)范要遠(yuǎn)比找到一種完美的規(guī)范重要得多。
這種規(guī)范與整合也為打造一套屬于我們自己的設(shè)計(jì)語言系統(tǒng)（DLS）奠定基礎(chǔ)。DLS 系統(tǒng)不光是一個(gè)視覺選擇和設(shè)計(jì)模式語言，同時(shí)也是一個(gè)設(shè)計(jì)師和開發(fā)者協(xié)同開發(fā)產(chǎn)品的系統(tǒng)。DLS 的主要目的之一就是讓設(shè)計(jì)師和開發(fā)者共同定新功能組件，一旦定義之后，這個(gè)組件名稱將會同時(shí)應(yīng)用在 iOS、安卓和 web平臺上。盡管這些功能組件是不同開發(fā)人員在不同開發(fā)環(huán)境下開發(fā)的，但他們的名字都一樣，而且它們對公司所有人而言都有同樣的核心概念。
△ Airbnb的設(shè)計(jì)語言系統(tǒng)組件頁面
這個(gè)系統(tǒng)打造完成之后，公司就可以在所有部門中打造一個(gè)共同的術(shù)語庫。這不僅能提高溝通效率，同時(shí)也能讓每一個(gè)人都能對公司的所有設(shè)計(jì)流程有更清晰的了解。Airbnb 內(nèi)部開發(fā)的一些產(chǎn)品，如原生組件瀏覽器和 Airshots，能讓公司的任何員工瞬間獲取上千個(gè)設(shè)計(jì)界面。所有同事都可以在我們支持的任何語言與設(shè)備上看到任何應(yīng)用版本的界面圖。對于設(shè)計(jì)師，這有助于消除設(shè)計(jì)和最終產(chǎn)品之間的抽象層，最大限度減少設(shè)計(jì)師的困惑與混亂。
工程師通常都會快速更新自己所使用的工具與語言，設(shè)計(jì)師在這方面向工程師學(xué)習(xí)的東西有很多。工程師之所以快速更新所使用的工具，這是因?yàn)樗麄冃枰诟偁幦遮吋ち业氖袌鲋懈斓匕l(fā)布代碼。有些公司有上千個(gè)工程師，他們就像一群魚一樣在一個(gè)共享代碼庫里游，并可根據(jù)同伴的狀況進(jìn)行調(diào)整姿勢。作為設(shè)計(jì)師的我們，現(xiàn)在在使用工具方面還沒有達(dá)到這種同步性，要想達(dá)到這種同步性，首先需要嘗試市場上現(xiàn)有的工具，如果找不到自己需要的工具，也不要擔(dān)心需要自己開發(fā)。
一個(gè)行業(yè)標(biāo)準(zhǔn)的術(shù)語庫有助于推動我們設(shè)計(jì)師的職業(yè)發(fā)展，而不是會限制它。在 Airbnb，除了統(tǒng)一規(guī)范我們設(shè)計(jì)界面的方式之外，我們還統(tǒng)一了我們工作語言。未來，我們希望公司內(nèi)部討論產(chǎn)品設(shè)計(jì)的方式在 Airbnb 外部同樣適用，也希望 Google 和 Facebook 這樣的巨頭聯(lián)合起來共同打造一個(gè)設(shè)計(jì)行業(yè)通用的術(shù)語庫。
在字典里，每個(gè)字都有一些特定的含義，而詩歌所需要的所有要素都蘊(yùn)含在其中。
可能是因?yàn)樵O(shè)計(jì)是一種視覺效果工作，所以我們很容易將其想象成一種唯美浪漫的工作。設(shè)計(jì)師往往很容易陷入色彩、字體、動畫與圖案中，而忘記設(shè)計(jì)是可以成為公司核心部門，并可以有更好的職業(yè)發(fā)展。在電影行業(yè)里，每當(dāng)有新工具出現(xiàn)，如電影制作流程或硬件升級，電影行業(yè)都會專門召開一次會議對新工具展開討論。如今，我自己也只參加那些不光討論靈感與創(chuàng)意過程，同時(shí)還會討論新出現(xiàn)的設(shè)計(jì)工具的會議。
在不限制設(shè)計(jì)師創(chuàng)作自由的情況下，設(shè)計(jì)部門最好有一個(gè)清晰的標(biāo)準(zhǔn)流程。在我看來，一位優(yōu)秀的設(shè)計(jì)師是不僅能夠和工程、產(chǎn)品部門同事一起讓整個(gè)產(chǎn)品開發(fā)過程更加流程，同時(shí)還能積極學(xué)習(xí)工程、產(chǎn)品方面的專業(yè)知識。我發(fā)現(xiàn)能這么做的設(shè)計(jì)師少之又少，然而這是非常必要的，為了公司，也為了自己的職業(yè)發(fā)展。
在設(shè)計(jì)創(chuàng)意魔法的背后有工具在起作用，未來的設(shè)計(jì)需要同時(shí)依賴這兩者。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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)這里
做產(chǎn)品，繞不開「需求」二字。很多產(chǎn)品從0到1需要團(tuán)隊(duì)付出很多努力，但如果在把握用戶需求的時(shí)候出了錯(cuò)誤，再好的團(tuán)隊(duì)、再牛的執(zhí)行力、再牛逼的技術(shù)也阻止不了項(xiàng)目的失敗，所以，分辨用戶需求就成了產(chǎn)品的關(guān)鍵。
需求有「真需求」，也有「偽需求」，「真需求」可以實(shí)現(xiàn)用戶的強(qiáng)關(guān)聯(lián)，從而實(shí)現(xiàn)產(chǎn)品的穩(wěn)定增長，而「偽需求」要么無法獲得用戶，要么曇花一現(xiàn)。比如魔漫相機(jī)，超級課程表這類曾經(jīng)的「現(xiàn)象級」產(chǎn)品，在短暫的瘋狂后迅速被用戶拋棄，其實(shí)都是因?yàn)闆]有正確識別用戶需求。
那么，如何找到買家真正的需求呢？
「黃金圈法則」是西蒙·斯涅克在《從為什么開始》中提出的一種思維方法。
他用三個(gè)同心圓來描述人的思維模式，黃金圈從外到內(nèi)依次是：做什么（what）、怎么做（how）以及為什么（why）。
黃金圈思維可以讓人們穿破事物的現(xiàn)象，看到事物的本質(zhì)，從而做出最佳決策。
它不僅可以用于自我激勵(lì)和成長，同時(shí)也可以應(yīng)用于營銷、管理與溝通等領(lǐng)域，而我們今天要重點(diǎn)討論如何用它來識別真需求及偽需求。
what（用戶反饋）、how（用戶行為）、why（真正的需求）：
通過這三個(gè)層面，我們可以發(fā)現(xiàn)需求、驗(yàn)證需求，進(jìn)一步挖掘需求，最終識別出用戶真正的消費(fèi)動機(jī)，從而找到有效的解決方案。這三個(gè)步驟形成了一個(gè)「需求驗(yàn)證漏斗」：
what層面是用戶評價(jià)和用戶痛點(diǎn)，它讓你「發(fā)現(xiàn)可能的機(jī)會」，但這個(gè)機(jī)會不一定會形成需求。
比如你要做零售產(chǎn)品創(chuàng)新，那就可以直接去淘寶，看同類產(chǎn)品的買家評價(jià)。尤其是差評，就是等待你解決的「痛點(diǎn)」。
身邊的朋友都抱怨淘寶上買東西經(jīng)常要找好半天，找不到自己喜歡的，那么「產(chǎn)品多、篩選難」就是個(gè)待解決的「痛點(diǎn)」。
隔壁養(yǎng)金毛狗的女孩經(jīng)常抱怨狗糧太重快遞又不送上樓，減肥成功的男士原來的衣服都不合身了，這些我們平時(shí)很容易發(fā)現(xiàn)的抱怨類的信息，就是用戶使用產(chǎn)品過程中的痛點(diǎn)，也都有可能成為新產(chǎn)品的機(jī)會。
發(fā)現(xiàn)機(jī)會，并不代表我們要立刻開始尋求解決方案，因?yàn)樾枨罂赡苤皇莻涡枨?，或者根本就不具備任何可行性?
1. 需求本身是「偽需求」，用戶對問題表述「錯(cuò)誤」或者缺乏對解決方案的「想象力」。
就像喬布斯說的那樣：「不要問客戶他需要什么，因?yàn)樗麄兏静恢??！乖谄桨咫娔X出來之前，用戶并不知道自己需要一臺完全沒有鍵盤的電腦。
2. 項(xiàng)目不具備可行性
比如消費(fèi)人群不夠大，對這類「硬造性場景」感興趣的都是小眾，無法落實(shí)到真實(shí)的大眾生活里去，產(chǎn)品無法扎根；就像現(xiàn)在的O2O上門服務(wù)，大多都是偽需求，上門洗車、上門美容都屬于這一類，消費(fèi)頻次太低，而且家對于多數(shù)人來說是個(gè)非常私密的地方，并不希望陌生人到訪。
What層面會呈現(xiàn)出的「需求」，我們并不能馬上開始基于這個(gè)層面去尋求解決方案，而是要通過「how」來進(jìn)行進(jìn)一步驗(yàn)證。
「how」就是「用戶行為」。用戶反饋可以說謊，但行動不會。
一個(gè)女生說我選老公的標(biāo)準(zhǔn)是：這個(gè)人要孝順，帥氣，結(jié)果她選擇了一個(gè)有錢人；
一個(gè)男生說我選擇老婆的標(biāo)準(zhǔn)是：要善良，結(jié)果他選擇了一個(gè)漂亮身材好的人；
小島居民經(jīng)常說他們討厭穿鞋子，因?yàn)樾訒?jīng)常進(jìn)沙子，但實(shí)際上他們依然在穿鞋。
也就是說，用戶經(jīng)常「說一套、做一套」。
比如你問用戶喜歡什么顏色，十個(gè)人中可能有五個(gè)告訴你他喜歡綠色，但如果你真的生產(chǎn)一堆綠帽子然后就沒有然后了。
還有我們一開始提到的「魔漫相機(jī)」，你如果采訪用戶的話，十個(gè)人可能有八個(gè)告訴你他非常喜歡這個(gè)應(yīng)用，但實(shí)際上他們玩一次之后就把它拋棄了，因?yàn)椤笭€大街」了，用戶只是在跟風(fēng)，他本身根本沒有這個(gè)需求。
因此，判斷需求不能只是聽用戶怎么說（what），一定要通過看他怎么做（how）來驗(yàn)證。
那如果驗(yàn)證了之后發(fā)現(xiàn)用戶「言行不一」，是不是需求就不存在了呢？也不是，我們要跳出用戶的思維，從主動的角度，也就是「why」這個(gè)角度去挖掘用戶的真正需求，開發(fā)解決方案。
Why是用戶反饋及用戶行動背后的原因，找到這個(gè)原因，才能最終驗(yàn)證需求是否是真需求，也決定了用戶最后是否會為你的解決方案買單。
我們先拿「小島居民的鞋子」來舉例：
小島居民鞋子很容易進(jìn)沙子，這就是一個(gè)痛點(diǎn)，也就是what層面的需求。
如果要解決這一痛點(diǎn)，是不是就提倡大家不穿鞋呢？這要從how這個(gè)層面來判斷，也就是用戶如何表現(xiàn)，結(jié)果發(fā)現(xiàn)雖然鞋里經(jīng)常進(jìn)沙子，大家依然在穿鞋。
最后經(jīng)過調(diào)查我們發(fā)現(xiàn)，沙灘里面有很多碎貝殼，不穿鞋會劃傷腳，所以，「不能劃傷腳」比起「進(jìn)沙子」的需求顯然是更為迫切，因此，用戶的真實(shí)需求是「舒適地行走在沙灘上」，那么解決方案不是提倡大家「不穿鞋」，而是提供一雙舒適的、不會積沙的鞋子。
再說一個(gè)我身邊一位朋友創(chuàng)業(yè)的真實(shí)案例：
朋友安妮是個(gè)喜歡喝奶茶的女孩子，她幾乎每天都要喝上一杯。在某天和同事討論奶茶的時(shí)候，她們開始吐槽奶茶的各種不好，尤其是「不健康」，奶茶的主要成分是植脂末和茶粉、淀粉，不僅不健康，而且容易長胖。安妮上網(wǎng)搜索了一下相關(guān)信息，發(fā)現(xiàn)很多買家都對奶茶的不健康有所擔(dān)心。
于是，安妮決定開個(gè)店鋪，專門做「健康的奶茶」。
但實(shí)際上她的店鋪開張后生意卻非常冷清，除了一開始有些熟人會過去捧場，大多數(shù)時(shí)間店里都是門可羅雀。
安妮的奶茶確實(shí)做到了健康，完全用純牛奶和新鮮的茶葉沖泡，糖都是用的上等的果糖。
但為什么大家現(xiàn)在反而不喝呢？
因?yàn)椤感枨蟆拱盐斟e(cuò)誤。
消費(fèi)者在抱怨奶茶不健康的時(shí)候，他不是想要健康的奶茶，而是想要口味不變、價(jià)格不變、包裝漂亮、環(huán)境舒適的情況下，更為健康的奶茶。
我們?nèi)绻傧騱hy層面進(jìn)行探索，就會發(fā)現(xiàn)問題的實(shí)質(zhì)：
為什么大家要喝奶茶，如果想要追求健康，為什么不是果汁、酸奶、牛奶、咖啡？
因?yàn)槟滩韬煤龋诟胸S富、有層次、有趣味，這是其他飲品無法比擬的。
到此為止，我們會發(fā)現(xiàn)，用戶的真實(shí)需求其實(shí)是「好喝而有趣的飲料」。
對于大多數(shù)飲食類產(chǎn)品，口味絕對是第一位的，犧牲口味而滿足用戶的其他需求一概是偽需求。
在「七宗罪」中有一條是「貪食」，喜歡美味的食物是人的天性，大多數(shù)人只有在真的生病之后才會在乎健康，在這之前，他愿意為了絕妙的口感冒第二天中風(fēng)的危險(xiǎn)。
由此可見，由發(fā)現(xiàn)需求到驗(yàn)證需求，是要經(jīng)歷「how」層面直接的驗(yàn)證，同時(shí)追索到「why」層面進(jìn)行分析才能最終確認(rèn)。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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)這里
每個(gè)時(shí)代都有特定的印跡，我們感受比較直接的或許是每個(gè)時(shí)代的穿著打扮變化，其實(shí)人、事、物都會有時(shí)代特征，字體也不例外。但是如何將字體穿越到過往呢？今天要從字型變化和字體效果兩個(gè)方面聊聊如何把字體打造成我們口中所說的懷舊與復(fù)古。
舉個(gè)我們最熟悉的例子，電話從轉(zhuǎn)盤撥號到功能機(jī)再到智能機(jī)一直都在更新?lián)Q代，單從外觀看是變得越來越簡潔，其實(shí)衣食住行我們都可以找到相類似的變化。從過去到現(xiàn)在每一天都在變，我們是否可以從千絲萬縷中總結(jié)出一些大趨勢，為字體所用？
上圖是書法字體中篆書、隸書、行書和楷書，依序也是書法的演變過程，如果對此無感的話可以想一想繁體字到簡體字的變化，從中不難總結(jié)由繁至簡的變化規(guī)律。那么說僅僅是把文字造型做的「繁雜」就能夠成功「穿越」嗎？當(dāng)然不是，下面用幾個(gè)實(shí)例分享幾個(gè)具體的方法。
字體設(shè)計(jì)中的很多形變要有根有據(jù)，比如我們要設(shè)計(jì)一款有年代的古風(fēng)字體其實(shí)就可以借閱古時(shí)書法中的一些寫法，其中最具代表性的當(dāng)屬篆書。
篆書具有文字形體的象形性特征，雖然當(dāng)下已失去實(shí)用性質(zhì)但是我們可以根據(jù)自身的需求做一定的優(yōu)化，以達(dá)到古為今用的目的。
下面以「詩畫集」三字做分解。上圖文字是從網(wǎng)絡(luò)中搜尋的「詩畫集」的篆書寫法，一眼望去是不是非常的「繁雜」，甚至同一字會有多種不同的寫法，結(jié)構(gòu)變化也是很多樣，那么在眾多的文字中我們又應(yīng)該如何挑選適合的呢？
一般來講大家可以注意以下三個(gè)規(guī)律：
如上圖是我選出比較中意的三個(gè)字，按照上面提出的幾個(gè)標(biāo)準(zhǔn)很顯然第一個(gè)字會被淘汰，但是我更看重的是左邊「言」字旁的筆法，右邊當(dāng)然要舍棄重做。
第一步就是依據(jù)上面的字用線條勾勒出結(jié)構(gòu)框架，最后一個(gè)字相比前面的字是比較扁平一些的在做的過程中要進(jìn)行拔高以保持三個(gè)字的統(tǒng)一。
前面說了這種方法不是完全照搬，我們一起看看有哪些地方做了調(diào)整：
僅僅完成了結(jié)構(gòu)的搭建肯定還是不充分的，細(xì)節(jié)的處理一定少不了。等線的筆畫本身是比較直接的，可適當(dāng)添加一些圓角處理，這也更符合篆書的字體特征。如上圖，第一個(gè)字未做任何處理，第二個(gè)字筆畫折角由原來的直角變?yōu)閳A角處理。第三個(gè)字又從前面基礎(chǔ)上增加內(nèi)部的圓角，如此一來筆畫有了些許頓挫感，更加耐看。
色彩和版式也是細(xì)節(jié)的一部分，最后選用深藍(lán)色并配紅色印章點(diǎn)綴，一組比較復(fù)古但又符合現(xiàn)代人審美的文字設(shè)計(jì)就完成了。這種古為今用的方法看下來很簡單，但是除了上面講的注意事項(xiàng)，字體的空間配置均勻有序也是至關(guān)重要的一環(huán)，任何字都如此。
就像電視劇布景一樣，盡可能還原當(dāng)時(shí)的場景，拍出來的影片才能有更強(qiáng)的代入感；而我們要設(shè)計(jì)有年代感的字體最直接有效的方式就是還原那個(gè)年代的字體特征。和第一種方式原理類似，但實(shí)際還是有些許不同。下面我們由古代穿越到近代，還是「詩畫集」三字。
網(wǎng)絡(luò)上有很多關(guān)于老字體的圖片，平時(shí)遇見了要保存一下，說不定什么時(shí)候會用得到，另外沒有保存也不要緊，我們字體學(xué)堂公眾號會不定期更新收集的老字，方便大家學(xué)習(xí)參考。
老字的年代感除了紙張的斑駁更重要的是字型的特征，大概分類的話一個(gè)是宋體字另一種是有一些幾何形態(tài)的應(yīng)用變化，另外由于老字多由手工繪制，有很強(qiáng)的隨意性，這也是老字的一大特征。
第一步是常規(guī)筆畫的提取，由于年代久遠(yuǎn)又加上拍攝等因素，很多字體細(xì)節(jié)是模糊不確定的，不要把客觀因素造成的字體細(xì)節(jié)變化也原封不動的照搬過來，而應(yīng)該是邊提取邊優(yōu)化。
有一些我們所需的筆畫可能老字當(dāng)中并沒有，這個(gè)時(shí)候就要根據(jù)老字的風(fēng)格做筆畫擴(kuò)展；另外老字中的筆畫轉(zhuǎn)角不會很銳利，通常會有一點(diǎn)圓角，筆畫的線條也不是筆直，這些都可以在后期統(tǒng)一添加，勿從初始筆畫添加。
基礎(chǔ)筆畫搞定下一步就可以進(jìn)行結(jié)構(gòu)搭建了，除了筆畫的借用結(jié)構(gòu)空間特征我們也可以參閱，「三防常識」這幾個(gè)字整體是扁平的，內(nèi)部空間比較緊，這是本組字結(jié)構(gòu)上的特點(diǎn)要抓住。
基礎(chǔ)筆畫可不是一成不變，像是「集」字橫筆居多，如果保持原來的橫筆粗細(xì)的話空間上會變得非常擠也不美觀，所以將橫筆減細(xì)處理；同一筆畫在不同的字體中都會有所差異，這一點(diǎn)就要求大家對字形結(jié)構(gòu)要了解的更透，做字要「活」。
最后如上圖，其實(shí)基礎(chǔ)結(jié)構(gòu)搭建出來到最后的確定字型，你看到的結(jié)果只是兩步帶過，期間是有很多細(xì)碎反復(fù)的調(diào)整，好字多磨！
這種方法會上癮，以「汽水」兩字再來一組。過程同上就不再復(fù)述，直接看結(jié)果。
今天選的這兩組老字筆畫上還不算最有特點(diǎn)的，還有一些個(gè)性更突顯，大家不妨動手一試，看看是不是真如你所看到的這樣簡單。
如果平時(shí)來不及設(shè)計(jì)想快速「穿越」這種情形也是有的，所以字體效果營造出表面的年代感還是要講一下，因?yàn)槭擒浖幕A(chǔ)操作所以就不很細(xì)致咯。
1. 紋理疊加
最簡單常用的肯定是各種紋理疊加，甚至這是很多同學(xué)做年代感的文字必備選項(xiàng)。如上圖，左邊是常規(guī)字體，右邊以此為基礎(chǔ)疊加紋理。說兩個(gè)注意點(diǎn)：一是紋理不在多，要避免紋理搶風(fēng)頭；二是紋理也有虛實(shí)對比，不可做的太平均。
2. 粗糙輪廓
使用同樣的字庫字，利用 Ai 軟件中的「粗糙化」實(shí)現(xiàn)字體輪廓的粗糙處理，要掌握好粗糙化中的兩個(gè)數(shù)值大小的變化，另外還可以通過路徑位移制造字體內(nèi)部的紋理變化，使之更有歲月斑駁感。
以上分享你會發(fā)現(xiàn)，年代感的字體設(shè)計(jì)由內(nèi)及外是相對復(fù)雜化，同時(shí)要善于抓特征，幾個(gè)思路幫大家梳理一遍，有沒有收獲一點(diǎn)呢？
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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)這里
網(wǎng)頁設(shè)計(jì)是什么？
網(wǎng)頁設(shè)計(jì)也被稱為Web Design、網(wǎng)站設(shè)計(jì)、Website design、WUI等。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計(jì)。雖然現(xiàn)在我們常使用移動端上的APP來獲取資訊，但是顯然基于個(gè)人電腦平臺的網(wǎng)站上網(wǎng)方式陪伴我們的歷史要比手機(jī)久很多：從1987年錢天白教授向德國發(fā)出第一封電子郵件到2000年搜狐、新浪、網(wǎng)易在美國納斯達(dá)克掛牌上市，再到現(xiàn)在網(wǎng)站遍地；中國的網(wǎng)站高速發(fā)展了近三十年。我是在小學(xué)開始去網(wǎng)吧“上網(wǎng)沖浪”的，那時(shí)的電腦屏幕非常小，分辨率只有800x600像素（對比一下，iPhone8的分辨率是750x1334px），網(wǎng)速也很慢，經(jīng)常掉線或者加載失敗。那時(shí)的網(wǎng)站性能和體驗(yàn)都不好，而現(xiàn)在網(wǎng)站設(shè)計(jì)和過去已經(jīng)有了巨大的變化：注重用戶體驗(yàn)、注重頁面動效、富媒體等設(shè)計(jì)讓如今的網(wǎng)站體驗(yàn)并不比軟件和手機(jī)APP差。加上個(gè)人電腦的普及，網(wǎng)站仍然是人機(jī)交互中非常重要的平臺之一。那么作為UI設(shè)計(jì)師我們就必須掌握網(wǎng)站設(shè)計(jì)的規(guī)范和理解網(wǎng)站運(yùn)行的原理，才能更好地駕馭這個(gè)平臺。今天就向您好好說道一下網(wǎng)站必須懂得的那些事兒。
工作流程
首先讓我們來看一下網(wǎng)站設(shè)計(jì)的工作流程吧：除了之前介紹過的用戶研究、撰寫產(chǎn)品需求文檔、市場文檔、做競品調(diào)研等工作之外，與設(shè)計(jì)師密切相關(guān)的網(wǎng)站項(xiàng)目流程可以分為原型圖階段、視覺稿階段、設(shè)計(jì)規(guī)范階段、切圖階段、前端代碼階段、項(xiàng)目走查階段六個(gè)階段。每個(gè)階段都需要設(shè)計(jì)師參與和了解，千萬不要只在意視覺稿這個(gè)階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個(gè)一個(gè)來了解它們吧。
原型圖階段
原型圖階段中設(shè)計(jì)師需要和產(chǎn)品經(jīng)理溝通需求，這時(shí)要注意，并不是產(chǎn)品經(jīng)理向設(shè)計(jì)師下發(fā)需求，而是需要相互就自己擅長的方面進(jìn)行溝通。視覺方面具體呈現(xiàn)也許設(shè)計(jì)師會有更好的方式，這時(shí)需要在設(shè)計(jì)之前與產(chǎn)品經(jīng)理達(dá)成一致。
構(gòu)建網(wǎng)站原型圖（工具：Axure RP ）
視覺稿階段
視覺稿階段就是我們要根據(jù)原型圖確定的內(nèi)容和大體版式完成網(wǎng)站的界面設(shè)計(jì)了，在設(shè)計(jì)網(wǎng)站的時(shí)候，我們需要一些圖像和靈感的素材。比如做世界杯專題時(shí)，我們除了收集很多素材之外，也可以設(shè)計(jì)一個(gè)“情緒板”（Mood Board）。簡單說情緒板就是將一些與主題相關(guān)的資料和素材拼貼在一起，這樣可以更好地指引我們整個(gè)需求的設(shè)計(jì)主題和大體感覺。另外，很多網(wǎng)站的頭部通常需要主視覺來抓人眼球，這時(shí)可能會使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進(jìn)行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標(biāo)了。主視覺下面的信息排布更強(qiáng)調(diào)合理性，這時(shí)也需要和產(chǎn)品經(jīng)理溝通從后臺調(diào)取的圖片尺寸、標(biāo)題字段長度等，然后根據(jù)這些要求完成頁面信息部分的設(shè)計(jì)。總之，設(shè)計(jì)過程中需要我們不斷思考和溝通才可以完成一個(gè)比較棒的視覺稿。
視覺稿設(shè)計(jì)階段（工具：Photoshop）
設(shè)計(jì)規(guī)范
當(dāng)視覺稿通過后，很多設(shè)計(jì)師可能不會主動去做設(shè)計(jì)規(guī)范。其實(shí)每一個(gè)可迭代的產(chǎn)品都需要設(shè)計(jì)師來總結(jié)設(shè)計(jì)規(guī)范，設(shè)計(jì)規(guī)范就是所有頁面中共性的東西，比如說字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶訪問網(wǎng)站時(shí)會理解成固定概念的憑證。比如同樣的分享功能如果采用兩種截然不同的樣式就會讓用戶困惑。那么設(shè)計(jì)規(guī)范主要也是在約束設(shè)計(jì)師我們自己，在用戶有限的記憶力中減少思考的成本。同時(shí)，設(shè)計(jì)規(guī)范也可以保證同一個(gè)項(xiàng)目的不同設(shè)計(jì)師都能輸出一樣風(fēng)格的設(shè)計(jì)來。最后，設(shè)計(jì)規(guī)范對于設(shè)計(jì)師個(gè)人來說也是對項(xiàng)目影響的一個(gè)佐證，可以證明你的思考和你在項(xiàng)目中的地位。所以我認(rèn)為設(shè)計(jì)師應(yīng)該主動去做設(shè)計(jì)規(guī)范和項(xiàng)目總結(jié)。設(shè)計(jì)規(guī)范如何去做？其實(shí)設(shè)計(jì)規(guī)范就是把主要頁面的元素固定成統(tǒng)一元素即可。具體來說一個(gè)產(chǎn)品的設(shè)計(jì)規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。
視覺規(guī)范（工具：Photoshop）
切圖
網(wǎng)頁設(shè)計(jì)師通常不需要為前端工程師切圖。因?yàn)榍岸斯こ處熗ǔＰ枰莆誔S軟件技能。如果遇到特殊情況需要我們切圖時(shí)，我們可以使用諸如Cutterman、Zeplin等切圖插件中的Web選項(xiàng)為前端切出網(wǎng)站所使用的圖片。
從PSD中提取出來的切圖（插件：cutterman）
前端代碼
前端工程師會用代碼重構(gòu)我們設(shè)計(jì)的頁面，把圖紙變?yōu)殪o態(tài)頁面。然后和后端工程師對接調(diào)取數(shù)據(jù)接口，一個(gè)網(wǎng)站就活了起來。工程師們?yōu)榱朔奖懔私饩W(wǎng)站是不是達(dá)到了我們要求的數(shù)據(jù)，也會進(jìn)行埋點(diǎn)。埋點(diǎn)就是在頁面代碼里插入一些統(tǒng)計(jì)代碼，方便我們之后確定哪些頁面訪問量高，哪些沒有達(dá)到預(yù)期。在此后其實(shí)還會有測試工程師介入來發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等，這里省略。
前端工程師代碼編譯（工具：Notepad +）
項(xiàng)目走查
網(wǎng)頁設(shè)計(jì)完成后還需要設(shè)計(jì)師進(jìn)行項(xiàng)目走查，來確定網(wǎng)頁還原度是否有問題。如果發(fā)現(xiàn)有和設(shè)計(jì)稿出入很大的，就需要要求前端工程師進(jìn)行調(diào)整。這個(gè)步驟非常重要，因?yàn)榫W(wǎng)站的成品才是我們最終的輸出，不要認(rèn)為設(shè)計(jì)稿很漂亮而實(shí)現(xiàn)后的頁面就不需要我們負(fù)責(zé)了。
將實(shí)現(xiàn)后的截圖和設(shè)計(jì)稿進(jìn)行比對（工具：Photoshop）
網(wǎng)站種類
網(wǎng)站的分類按對象來劃分可以分為To C端和To B端兩種。To C端就是面向用戶和消費(fèi)者，例如門戶網(wǎng)站、企業(yè)網(wǎng)站、產(chǎn)品網(wǎng)站、電商網(wǎng)站、游戲網(wǎng)站、專題頁面、視頻網(wǎng)站、移動端H5等，均是面向用戶和消費(fèi)者的產(chǎn)品。由于是面向用戶和消費(fèi)者，所以設(shè)計(jì)上一定要可以吸引人，并且以用戶為中心考慮體驗(yàn)設(shè)計(jì)。而To B端作為一個(gè)需求量很大的類別，其實(shí)往往被設(shè)計(jì)師所忽視。什么是To B端項(xiàng)目呢？比如電商網(wǎng)站供貨商的后臺、Dashboard、企業(yè)級OA、網(wǎng)站統(tǒng)計(jì)后臺等這些面向商家和專業(yè)人士的網(wǎng)站就是To B類網(wǎng)站項(xiàng)目了。這些項(xiàng)目的要求和To C端網(wǎng)站的要求大相徑庭：To B類項(xiàng)目最重要的是效率而不是體驗(yàn)，因?yàn)檎f白了我們在設(shè)計(jì)使用者工作的工具，我們在設(shè)計(jì)時(shí)必須首先要保證操作者可以地完成他們所需要完成的工作。那么讓我們來了解一下網(wǎng)站的不同門類吧。
門戶網(wǎng)站
門戶網(wǎng)站國內(nèi)比較知名的有新浪、騰訊、網(wǎng)易、搜狐；國外比較知名的如Naver、Llinternaute等。我們可以看得出，門戶網(wǎng)站都是大而全包羅生活萬象的。比如騰訊網(wǎng)就有新聞、財(cái)經(jīng)、視頻、體育、娛樂、時(shí)尚、汽車、房產(chǎn)、科技、游戲等不同頻道。門戶網(wǎng)站的門檻很高，必須要有雄厚的實(shí)力才可以建立起一個(gè)門戶網(wǎng)站，而門戶網(wǎng)站需要的設(shè)計(jì)師數(shù)量也驚人。首先門戶網(wǎng)站需要產(chǎn)品方向的界面設(shè)計(jì)師以迭代的方式維護(hù)迭代網(wǎng)站首頁、二級頁面、底層頁等網(wǎng)站基石。然后需要各個(gè)頻道的設(shè)計(jì)師來處理日常需求：比如巴黎時(shí)裝周需要負(fù)責(zé)時(shí)尚頻道的設(shè)計(jì)師來設(shè)計(jì)對應(yīng)的專題、世界杯小組出線需要負(fù)責(zé)體育頻道的設(shè)計(jì)師來設(shè)計(jì)對應(yīng)的專題等。地球上的每一天都有大事發(fā)生，那么門戶網(wǎng)站中的設(shè)計(jì)工作就不會少。另外，具體對接頻道的設(shè)計(jì)師也需要有一定擅長之處：比如對接體育頻道的設(shè)計(jì)師起碼應(yīng)該熟悉足球籃球等體育項(xiàng)目、時(shí)尚頻道的設(shè)計(jì)師要懂得各個(gè)大牌的設(shè)計(jì)風(fēng)格、佛學(xué)頻道的設(shè)計(jì)師需要懂得基本的佛學(xué)知識和忌諱、文化頻道的設(shè)計(jì)師需要對傳統(tǒng)文化有所涉獵。所以基本上門戶網(wǎng)站的設(shè)計(jì)師可以分為產(chǎn)品組和頻道組兩種。
韓國門戶網(wǎng)站Naver
企業(yè)網(wǎng)站
每個(gè)企業(yè)都需要有一個(gè)網(wǎng)站來對外展示自己的能力、介紹自己的產(chǎn)品等。現(xiàn)在接觸一個(gè)陌生的企業(yè)時(shí)，很多老百姓都會上網(wǎng)搜索一下其官方網(wǎng)站驗(yàn)證真?zhèn)?。網(wǎng)站已經(jīng)是中小企業(yè)的標(biāo)配了。企業(yè)網(wǎng)站設(shè)計(jì)時(shí)通常會有網(wǎng)站首頁、公司介紹、產(chǎn)品中心、公司團(tuán)隊(duì)、在線商城、聯(lián)系我們等這幾個(gè)模塊，企業(yè)網(wǎng)站會展示很多諸如公司環(huán)境、團(tuán)隊(duì)成員、企業(yè)文化等實(shí)際的照片，配合一些資料進(jìn)行設(shè)計(jì)。企業(yè)網(wǎng)站通常也追求所謂“高端”、“大氣”、“上檔次”的風(fēng)格，也就是為了達(dá)到讓消費(fèi)者認(rèn)同品牌這個(gè)要求。所以如果我們接到了企業(yè)網(wǎng)站的設(shè)計(jì)需求，不妨多去瀏覽參考一些更加大牌的企業(yè)網(wǎng)站作為競品來參考。
美國通用公司官網(wǎng)
產(chǎn)品網(wǎng)站
從蘋果公司的iPhone介紹頁到小米手機(jī)8的介紹頁，我們會發(fā)現(xiàn)一種新鮮的產(chǎn)品營銷模式，就是產(chǎn)品網(wǎng)站。設(shè)計(jì)這類網(wǎng)站的內(nèi)容主要是該產(chǎn)品的工藝、技術(shù)、設(shè)計(jì)、特點(diǎn)、構(gòu)造、使用場景等。這樣的產(chǎn)品頁希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，然后配合一些如視差滾動等方式讓我們感覺到這個(gè)產(chǎn)品的精細(xì)。由于中國互聯(lián)網(wǎng)和產(chǎn)品設(shè)計(jì)發(fā)展很快，所以產(chǎn)品類網(wǎng)站設(shè)計(jì)需求一定會越來越多。
蘋果公司產(chǎn)品介紹頁
電商網(wǎng)站
電商設(shè)計(jì)師也屬于網(wǎng)頁設(shè)計(jì)師嗎？是的。如果按照平臺細(xì)分，無疑電商設(shè)計(jì)師所在的平臺大部分屬于網(wǎng)站。以淘寶、天貓為代表的電子商務(wù)發(fā)展得太快了，以至于從內(nèi)蒙的牧民到海南島的漁民，甚至臺灣、日本、東南亞的商人都開始在中國電商平臺上開店鋪了。店鋪其實(shí)本身屬于平臺本身的頁面。但是為了增強(qiáng)每個(gè)店的個(gè)性，平臺為商店開通了一些頁面自定義的裝飾功能，比如寶貝詳情、店鋪排版、banner頭圖設(shè)計(jì)等。這樣商鋪有一定權(quán)限在平臺規(guī)定的范圍內(nèi)使用圖片和一部分css樣式代碼來裝飾自己的店鋪，電商設(shè)計(jì)應(yīng)運(yùn)而生。雖然帶著鐐銬跳舞，但是有很多店鋪因?yàn)樵O(shè)計(jì)精良而能帶動銷售。那么電商設(shè)計(jì)師當(dāng)然就變得非常重要了。
淘寶網(wǎng)首頁
游戲網(wǎng)站
游戲是一個(gè)巨大的產(chǎn)業(yè)，很多公司的收入大半壁江山都來自游戲產(chǎn)業(yè)。那么除了游戲需要制作精良之外，游戲的官網(wǎng)也必須設(shè)計(jì)精美。不要忘記，每一個(gè)玩家都需要訪問你的游戲官網(wǎng)才能完成下載、充值、社交等重要操作。國外游戲網(wǎng)站比如暴雪娛樂公司（https://www.blizzard.com）的官網(wǎng)設(shè)計(jì)得極其精美，每個(gè)游戲的官網(wǎng)都是一個(gè)精品。比如魔獸世界、星際爭霸2等游戲官網(wǎng)，頭部都是視覺沖擊非常強(qiáng)烈的動畫。然后網(wǎng)站界面的元素都帶有游戲的風(fēng)格，仿佛登錄這個(gè)網(wǎng)站你就在游戲之中了。
暴雪公司星際爭霸2游戲官網(wǎng)
專題頁面
當(dāng)然不管是電商還是門戶網(wǎng)站，在節(jié)日都會需要設(shè)計(jì)師來設(shè)計(jì)一些專題頁面增加曝光。比如兒童節(jié)、情人節(jié)、母親節(jié)、圣誕節(jié)等節(jié)日往往會有促銷、專題報(bào)道等各式活動。專題設(shè)計(jì)生命周期很短，上線后基本過了流量的那個(gè)點(diǎn)就基本沒用了。所以我們找不到前幾年的618或者雙11專題頁面，因?yàn)檫^了特定的時(shí)期專題頁面就無人問津了。所以在那么短的生命周期怎么抓住人的眼球？當(dāng)然不能使用現(xiàn)代主義設(shè)計(jì)那種性冷淡風(fēng)格，而應(yīng)該在頭部盡量刺激用戶，用刺激對比強(qiáng)的色彩、復(fù)雜立體的造型、沖擊感強(qiáng)的文字吸引用戶來看。畢竟每個(gè)人可能只會看一次，不能放過這個(gè)機(jī)會。所以專題設(shè)計(jì)和產(chǎn)品設(shè)計(jì)正相反，專題設(shè)計(jì)必須刺激。
極有家淘寶專題頁面
視頻網(wǎng)站
視頻網(wǎng)站的訪問量驚人，并且用戶的黏著度更高。很多視頻網(wǎng)站除了購買版權(quán)之外還有很多UGC內(nèi)容。多說幾句，UGC（User Generated Content）是指用戶產(chǎn)生的原創(chuàng)內(nèi)容，很早之前web1.0時(shí)代用戶主要是單向?yàn)g覽網(wǎng)站，web2.0提出的UGC概念就是說用戶不僅在瀏覽也會上傳內(nèi)容。那么視頻網(wǎng)站為什么會火呢？首先要感謝帶寬的發(fā)展。在今年我們國內(nèi)點(diǎn)擊視頻就立馬可以播放了，而在幾年前需要等待幾分鐘才可以加載夠緩存。視頻網(wǎng)站的設(shè)計(jì)主要是要考慮應(yīng)用場景：視頻是用戶主要觀看的區(qū)域，所以視頻區(qū)域首先要足夠大，另外顏色應(yīng)該以暗色為主，因?yàn)榱辽珪蓴_到用戶觀看視頻。然后其他的區(qū)域圖片比例應(yīng)都為16:9的視頻尺寸，方便后期編輯在后臺添加。視頻網(wǎng)站的設(shè)計(jì)師同樣也可以分為產(chǎn)品組和運(yùn)營組兩個(gè)種類來處理產(chǎn)品方向和運(yùn)營方向的不同需求。
騰訊視頻播放頁面
移動端H5
你一定在朋友圈被《穿越未來來看你》、《淘寶造物節(jié)》等H5刷過屏吧？平時(shí)我們經(jīng)常被這種好玩兒的H5刷屏。其實(shí)H5全稱是HTML5，并不是僅僅指移動端，而是網(wǎng)頁前端的開發(fā)語言，由于約定俗成的概念，我們現(xiàn)在常常把手機(jī)中的集合視頻、動效、互動的這種營銷形式成為H5。其實(shí)它的本質(zhì)是運(yùn)用網(wǎng)頁技術(shù)運(yùn)行在手機(jī)瀏覽器或內(nèi)置瀏覽器內(nèi)的網(wǎng)頁。隨著技術(shù)日新月異的發(fā)展，H5顯得越來越有傳播價(jià)值和份量。微信、瀏覽器等平臺級產(chǎn)品在手機(jī)端中火爆促進(jìn)了依靠入口而傳播的H5的發(fā)展。如果設(shè)計(jì)出色，你的項(xiàng)目可能會在朋友圈產(chǎn)生病毒傳播的效果。
使用前端語言編譯的適合手機(jī)瀏覽的H5界面
移動端H5尺寸
設(shè)計(jì)移動端H5項(xiàng)目的時(shí)候，我們一般以用戶量較高的iPhone6/7/8的尺寸：750x1334px 為準(zhǔn)，然后我們要在頂部預(yù)留出微信或者瀏覽器導(dǎo)航區(qū)域。主要內(nèi)容區(qū)域就可以自由設(shè)計(jì)了。一般H5的操作是上下滑動。字體方面使用蘋方字體，并且字號設(shè)置為24PX以上，渲染方式設(shè)置成銳利。英文則需要使用SF-UI代替。當(dāng)然H5可以調(diào)用背景音樂、視頻、鏈接等多媒體，讓體驗(yàn)更佳。除了讓前端小哥哥們開發(fā)之外，其實(shí)還有一種方式可以無需代碼生成簡易版的H5，就是通過H5工具生成。目前比較火的H5生成工具有：MAKA、iH5、兔展等，如果我們要自己生成而不是通過前端開發(fā)，那么我們設(shè)計(jì)稿的尺寸需要設(shè)置為640x1008PX。這些工具較為簡單，注冊后將PSD上傳即可對每個(gè)原件進(jìn)行動效的設(shè)置了。但是如果需要復(fù)雜的動效和交互，還是需要前端工程師的配合。
H5項(xiàng)目的尺寸
后臺網(wǎng)站
后臺網(wǎng)站又叫Dashborad，中文翻譯為儀表盤。其含義就是有一大堆數(shù)據(jù)與統(tǒng)計(jì)信息。后臺網(wǎng)站是To B類型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數(shù)據(jù)?？墒菙?shù)據(jù)非常枯燥，我們可以使用諸如“折線圖”、“餅狀圖”、“曲線圖”、“表格”等不同方式來展現(xiàn)這些繁瑣的數(shù)據(jù)，這種圖形表達(dá)數(shù)據(jù)的方式也叫做數(shù)據(jù)可視化。后臺網(wǎng)站不需要特別可愛的插圖以及卡通形象，最重要的是效率。所以如果您經(jīng)常處理To C類的需求，接到了To B類的產(chǎn)品需求時(shí)一定要注意這一點(diǎn)。后臺網(wǎng)站因?yàn)樾枰蟮漠嬅?，通常會使用全屏式排版，也就是撐滿整個(gè)畫布。那如果小屏怎么辦呢？前端會使用相對布局縮小各個(gè)元素，排版的位置也會用百分比來確定。
微信公眾號后臺
CRM系統(tǒng)
CRM即Customer relationship management，翻譯過來是客戶管理管理系統(tǒng)。CRM是企業(yè)對客戶進(jìn)行信息化管理的一種形式，用互聯(lián)網(wǎng)技術(shù)實(shí)現(xiàn)對客戶信息進(jìn)行收集、管理、分析，對企業(yè)的銷售、服務(wù)、售后進(jìn)行監(jiān)控。常見的功能有員工日程管理、訂單管理、發(fā)票管理等。我們在設(shè)計(jì)這種項(xiàng)目時(shí)一定要將信息按所屬的邏輯關(guān)系分類，加強(qiáng)對比、對齊、重復(fù)、親密性的原則，使操作者在使用的時(shí)候感覺到便利。
Admin CRM dashboard by Divan Raj
SaaS
如果我們服務(wù)于為企業(yè)搭建CRM、ERP或者OA等系統(tǒng)的第三方公司，那么我們可能會老聽到SaaS這個(gè)詞。SaaS是(Software-as-a-Service)，即軟件就是服務(wù)。其他公司會來提供SaaS服務(wù)的公司定制系統(tǒng)，然后服務(wù)公司會為客戶提供從服務(wù)器到設(shè)計(jì)一體化的服務(wù)。這里提到這個(gè)詞是防止設(shè)計(jì)師誤解它的定義。
企業(yè)OA
企業(yè)OA，即(Office Automation)，也就是辦公自動化系統(tǒng)。在六七十年代就興起了一場使用電腦來改變傳統(tǒng)辦公方式的革命。在大型企業(yè)時(shí)常會面臨人員眾多、地域廣袤、辦理公司事宜手續(xù)冗長等問題，那么企業(yè)OA可以很好地解決這方面的問題。通過企業(yè)OA可以完成請假、調(diào)休、離職、查詢公司規(guī)章制度、請示、匯報(bào)等工作。這樣減少了很多窗口成本和員工的時(shí)間成本，增強(qiáng)了公司辦事效率。互聯(lián)網(wǎng)公司更是提供給員工除了企業(yè)OA之外的交流功能，比如建立員工BBS和留言板等，在上面大家可以對公司提出建議和意見。企業(yè)OA一般出于安全和保密性的原因，很多公司都更加愿意自己開發(fā)。設(shè)計(jì)師在設(shè)計(jì)此類項(xiàng)目時(shí)同樣要以操作者的體驗(yàn)和效率為重，讓操作者輕易可以找到在當(dāng)前頁面中最重要的功能。
Robo Advisor - Projection, List and Questionnaire by Michal Parulski
網(wǎng)站組成部分
了解了網(wǎng)站的不同類別后，讓我們來看看組成一個(gè)網(wǎng)站需要哪些部分吧。網(wǎng)站是由不同網(wǎng)頁通過超鏈接連接而成的，而不同網(wǎng)頁也是由不同模塊組成的。我們設(shè)計(jì)的是一個(gè)像蜘蛛網(wǎng)一樣的網(wǎng)絡(luò)，而不是一張海報(bào)。所以我們在設(shè)計(jì)網(wǎng)站時(shí)要格外考慮從用戶角度出發(fā)看到的網(wǎng)站，而不能孤立地把它想象成一個(gè)平面作品。
首頁
訪問一個(gè)網(wǎng)站時(shí)第一個(gè)我們觸及的就是網(wǎng)站首頁。首頁別名叫作Index或者Default，是索引和目錄的意思。在網(wǎng)站發(fā)展的前期階段，網(wǎng)站并不是富媒體，而是類似于一本書一樣：首頁類似書籍的目錄，需要查看哪個(gè)子網(wǎng)頁就點(diǎn)擊鏈接即可進(jìn)入。到了現(xiàn)在，網(wǎng)站首頁仍然是引導(dǎo)用戶進(jìn)入不同區(qū)域的一個(gè)“目錄”，這個(gè)目錄除了導(dǎo)航功能外也要露出一部分內(nèi)容給用戶來吸引點(diǎn)擊，露出的部分一定要有一個(gè)“更多”按鈕來指引用戶找到二級頁面。
首頁原型圖
二級頁面
在邏輯上，首頁是一級頁面，從首頁點(diǎn)擊進(jìn)入的頁面均為二級頁面。二級頁面之后還有三級頁面等級別。從點(diǎn)擊的概率上來說，自然是越靠前訪問量越高，頁面層級越深越不容易被用戶找到。一般網(wǎng)站有三級頁面，就是為了避免用戶迷失。為此還會在頁面中加入面包屑導(dǎo)航。面包屑導(dǎo)航就是在頁面第一屏出現(xiàn)的諸如 首頁 > 體育 > NBA頻道 這樣的超鏈接結(jié)構(gòu)，方便用戶理解自己在那里，并且點(diǎn)擊可以回到其他頁面。
二級頁面原型圖
底層頁
在網(wǎng)站結(jié)構(gòu)中最后提供用戶實(shí)質(zhì)資訊的頁面就是底層頁。比如，在門戶網(wǎng)站首頁或二級頁面中我們點(diǎn)擊感興趣的標(biāo)題后，在底層頁中才會看到全部的資訊。待用戶閱讀完底層頁的信息后可以順勢在左側(cè)或右側(cè)的側(cè)欄尋找用戶可能感興趣的相關(guān)內(nèi)容；在底側(cè)可以看到網(wǎng)友的評論；底側(cè)也會有分享按鈕、贊功能等；如果側(cè)欄用戶轉(zhuǎn)化率比較差，最底部還可以再次出現(xiàn)推薦相關(guān)資訊的功能?？傊?，在用戶閱讀完自己喜歡的資訊后，要繼續(xù)吸引用戶順勢閱讀其他的資訊或者回到頻道。
底層頁原型圖
廣告
門戶類網(wǎng)站如何盈利？廣告是變現(xiàn)方法之一。網(wǎng)站的廣告一般由負(fù)責(zé)運(yùn)營需求的設(shè)計(jì)師負(fù)責(zé)，但是也可能由頻道設(shè)計(jì)師、產(chǎn)品側(cè)設(shè)計(jì)師來完成。在網(wǎng)站中常見到的廣告圖形式就是banner。banner一般尺寸巨大，在網(wǎng)站之中非常顯眼。因此也不一定是外部廣告，也有內(nèi)部活動、推薦資訊等。那么banner圖的尺寸有固定嗎？答案是沒有。Banner的寬度有兩種，一種是滿屏（1920PX）、一種是基于安全距離的滿尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px為基準(zhǔn)的用戶屏幕，加上瀏覽器本身與插件和底部工具條等距離，留給網(wǎng)站的一屏高度大概為900px，所以banner不可以做得很高，否則第一屏信息會顯示得不夠。你可能會說，那就讓用戶往下拉啊。但是在網(wǎng)站的訪問用戶之中，第二屏觸及到的用戶比第一屏?xí)俸芏?。也就是很多用戶可能點(diǎn)擊網(wǎng)站后就會跳走或者關(guān)閉，那么第一屏的信息真的非常重要了，可謂是寸土寸金。所以我們的banner不應(yīng)該占據(jù)過大的區(qū)域。比如站酷網(wǎng)的Banner區(qū)域?yàn)?380x350px。那么除了首頁巨大的banner廣告位，網(wǎng)站還有哪些廣告形式呢？
對聯(lián)廣告。在門戶網(wǎng)站中我們經(jīng)常會看到網(wǎng)站左右安全區(qū)域之外會有連個(gè)隨屏幕滾動的像“對聯(lián)”一樣的廣告，通常banner也會是一個(gè)廣告內(nèi)容，并且居中會彈出由HTML5技術(shù)或Flash技術(shù)制作出來的彈窗廣告。這種廣告一般組合售賣，也就是說一進(jìn)網(wǎng)站你就會被全面轟炸，無法不注意到這個(gè)廣告的存在。這種廣告點(diǎn)擊進(jìn)入還有配合的專題頁等，可見需要設(shè)計(jì)師配合的地方非常多。
對聯(lián)廣告形式
信息流廣告。信息流廣告是埋在信息流中的一種廣告形式。這種形式利用了格式塔原理，用戶會不自覺地閱讀起廣告的內(nèi)容，原因是因?yàn)樗男问胶推渌畔⒁粯?。比如朋友圈、知乎、Facebook都采用了信息流廣告，信息流廣告的效果非常強(qiáng)，但是會犧牲一定的用戶體驗(yàn)。信息流廣告的尺寸與信息流相同。
知乎APP中信息流中的廣告
以上從廣告的形式上簡單介紹了三種常見的網(wǎng)站廣告形式，如果我們在閱讀需求時(shí)看到了cpm、pv等單詞是什么意思呢？他們是廣告的收費(fèi)模式。cpm是指按照廣告pv來收費(fèi)，cps是指按照用戶消費(fèi)收費(fèi)，cpa是指按照用戶注冊數(shù)收費(fèi)，cpc是指按照用戶點(diǎn)擊付費(fèi)。針對不同的收費(fèi)模式，在設(shè)計(jì)時(shí)也會采取不同策略來增強(qiáng)廣告需要達(dá)到的目的。
Footer
在網(wǎng)站具體的頁面設(shè)計(jì)中，底部會有一個(gè)區(qū)域我們稱之為footer。一般footer的顏色都會比上邊內(nèi)容區(qū)域要暗，因?yàn)閒ooter的信息在邏輯的級別上是次要的。footer區(qū)域的主要功能是版權(quán)聲明、聯(lián)系方式、友情鏈接、備案號等信息。在設(shè)計(jì)時(shí)一定要降級處理，不要讓footer變得特別明顯。
技術(shù)原理
網(wǎng)頁設(shè)計(jì)師在做項(xiàng)目之前必須了解網(wǎng)頁背后的技術(shù)原理，技術(shù)決定了哪些設(shè)計(jì)和交互是可以實(shí)現(xiàn)的、哪些是不可以的。同時(shí)技術(shù)原理也決定了我們需要如何配合前端工程師來完成一些復(fù)雜的交互。其實(shí)在過去網(wǎng)頁前端工程師和設(shè)計(jì)師是一個(gè)崗位，就叫做網(wǎng)頁美工，這個(gè)職位需要在完成視覺設(shè)計(jì)后把頁面做成靜態(tài)網(wǎng)頁交給下面的環(huán)節(jié)。隨著分工越來越細(xì)致，產(chǎn)生了網(wǎng)頁設(shè)計(jì)師和前端工程師兩個(gè)工種。但是網(wǎng)頁設(shè)計(jì)師不可以脫離技術(shù)局限天花亂墜地去設(shè)計(jì)。下面讓我們來了解網(wǎng)站的基本存儲原理：在您的電腦C盤保存一個(gè)叫l(wèi)ogo.jpg的圖片，然后在瀏覽器打開這個(gè)網(wǎng)址：C:\logo.jpg你看到了什么？對，就是這張圖片。這就是網(wǎng)站的原理：網(wǎng)站的資源和文件存儲在一個(gè)類似我們電腦的東西里，那就是服務(wù)器。我們通過域名來調(diào)取網(wǎng)中不同的頁面和文件，如果服務(wù)器關(guān)機(jī)了那么網(wǎng)站也就癱瘓了。每次當(dāng)我們通過瀏覽器訪問網(wǎng)站時(shí)，敲擊一個(gè)網(wǎng)址，這時(shí)這個(gè)域名會轉(zhuǎn)向一個(gè)IP地址，這個(gè)IP地址就是服務(wù)器所在的門牌號碼。找到了以后，我們的瀏覽器會從服務(wù)器上下載網(wǎng)站的代碼并把代碼翻譯成我們能看懂的界面，比如文字、邊框、表格等實(shí)際上都是代碼的形式。瀏覽器還會把網(wǎng)站中所需要的圖片、視頻等單獨(dú)下載到緩存里。當(dāng)我們通過表單輸入用戶名和密碼時(shí)，我們的信息就會上傳到服務(wù)器中，服務(wù)器處理完（比如登陸成功這個(gè)信息）然后再下發(fā)給我們的瀏覽器。所以平時(shí)我們訪問網(wǎng)站時(shí)，我們的電腦和瀏覽器要通過互聯(lián)網(wǎng)與服務(wù)器進(jìn)行多次“握手”。當(dāng)然老“握手”會造成加載速度變慢，于是我們聰明的瀏覽器會把已經(jīng)下載過的資源緩存下來，避免浪費(fèi)。這個(gè)機(jī)制就是“cookies”：瀏覽器會自動存儲你訪問過的網(wǎng)址、網(wǎng)站圖片、視頻、表單信息等。
基于鼠標(biāo)的手勢操作
基于鼠標(biāo)的交互
在不久的未來，個(gè)人電腦可能通過多點(diǎn)觸控、語音交互等方式與我們交互，但目前網(wǎng)站設(shè)計(jì)最主流的交互方式還是鼠標(biāo)和鍵盤。來讓我們看看鼠標(biāo)有什么結(jié)構(gòu)吧！我們對鼠標(biāo)的使用無外乎移動、左鍵、右鍵、拖拽四種方式。我們在頁面中的大部分操作都是通過鼠標(biāo)左鍵點(diǎn)擊完成的，所以網(wǎng)頁也是點(diǎn)擊的藝術(shù)。右鍵一般會喚起右鍵菜單，但是很多網(wǎng)站與網(wǎng)頁應(yīng)用程序也會將右鍵自定義設(shè)計(jì)一些操作和交互。與鼠標(biāo)發(fā)生交互的主要是超鏈接與按鈕。那么讓我們來了解一下超鏈接的四個(gè)狀態(tài)吧（前端術(shù)語是：超鏈接標(biāo)簽的CSS四個(gè)偽類）。
按鈕與文字的不同狀態(tài)
Link是指超鏈接正常的時(shí)候的狀態(tài)。一般超鏈接需要與普通文字區(qū)別開來，比如換一種顏色或者加下劃線。當(dāng)然下劃線還有一個(gè)作用就是方便弱視群體區(qū)分超鏈接與普通文字。Link默認(rèn)都是藍(lán)色的（色值：#72ACE3），但是為了增強(qiáng)網(wǎng)站的品牌性我們也可以把鏈接顏色更換成另一種顏色?？傊欢ㄒ谛问缴吓c普通文字產(chǎn)生差別才可以。
Visited是超鏈接被點(diǎn)擊以后的狀態(tài)。比如新浪網(wǎng)新聞非常多，所以點(diǎn)擊完一個(gè)新聞后用戶可能不知道自己看過沒看過這條新聞了。所以新浪網(wǎng)使用了Visited屬性，點(diǎn)擊后的新聞?lì)伾筒灰粯恿?，方便用戶區(qū)別自己哪些新聞還沒有瀏覽。
Hover：是超鏈接鼠標(biāo)經(jīng)過狀態(tài)。這個(gè)狀態(tài)是連接中最為重要的狀態(tài)。其實(shí)不只超鏈接，按鈕和圖片以及視頻等一切可交互的元素都應(yīng)該設(shè)置Hover屬性，也就是鼠標(biāo)懸停時(shí)的狀態(tài)。一般來說變換顏色和放大是Hover狀態(tài)的基本方式。
Active：是指超鏈接的激活狀態(tài)。點(diǎn)擊后超鏈接可以通過CSS加載一個(gè)狀態(tài)。
同樣的鏈接樣式也可以應(yīng)用在圖片、按鈕、表單之上。點(diǎn)擊、鼠標(biāo)懸停、鼠標(biāo)按下都可以設(shè)計(jì)成不同的樣式，方便用戶通過鼠標(biāo)感知這個(gè)物體是被我按下去的，這種給用戶的暗示我們也叫做“點(diǎn)擊感”。當(dāng)然按鈕會和鏈接稍有不同，按鈕除了具備正常和鼠標(biāo)懸停等狀態(tài)，還有一種狀態(tài)叫不可點(diǎn)擊。這種狀態(tài)將按鈕置灰，提示用戶這個(gè)功能因?yàn)闂l件不滿足不可以點(diǎn)擊。好了，您可以舉出幾個(gè)點(diǎn)擊感Web設(shè)計(jì)的例子嗎？
靜態(tài)網(wǎng)頁
了解完基本技術(shù)背景、鼠標(biāo)的交互之后，讓我們來聊點(diǎn)真格的。我們一般看到的網(wǎng)頁都是靜態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是由HTML編譯的，我們在服務(wù)器上存儲的網(wǎng)頁代碼基本都是HTML格式。HTML全稱是HyperText Markup Language，即超文本標(biāo)記語言?！俺谋尽笔钦f這種語言內(nèi)可以包含文字元素以及調(diào)用圖片、鏈接、音樂等非文字元素。HTML語言對于沒有編程的人來說可能會很頭疼，但是它已經(jīng)是所有編程代碼中最簡單的一種了。別緊張，你可以把它當(dāng)做摩爾代碼，它是服務(wù)器和瀏覽器之間的密語，瀏覽器會將這些密語翻譯成我們能看懂的色彩和鏈接等。那么如果我們用HTML語言寫一段文字會是什么樣呢？
模擬代碼編譯過程
沒錯(cuò)，代碼就是這么一點(diǎn)一點(diǎn)編起來的。在任何網(wǎng)站空白處右鍵點(diǎn)擊查看網(wǎng)頁源代碼你就可以看到網(wǎng)頁的HTML代碼啦。HTML這種代碼是由一個(gè)國際組織 - W3C發(fā)布和維護(hù)的。W3C創(chuàng)建于1994年，是網(wǎng)站國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。W3C已經(jīng)發(fā)布了HTML的諸多版本，其中影響最深遠(yuǎn)的是HTML4版本。而HTML5簡稱H5則可以說是劃時(shí)代的版本了。H5的標(biāo)簽更加接近現(xiàn)代，并且本身可以播放視頻，這就可以淘汰掉Flash插件了。（Flash插件帶來了比如系統(tǒng)漏洞、加載速度過慢等問題）同時(shí)H5對多平臺支持很好，所以適應(yīng)移動端為王的當(dāng)今時(shí)代。H5甚至還可以變成游戲、Webapp（在網(wǎng)頁上如本地程序一樣工作的網(wǎng)站，比如藍(lán)湖等）、多媒體等多種形式。可是由于IE瀏覽器這類不支持HTML5效果的瀏覽器在用戶中占比還很高，所以造成了HTML5發(fā)展的制約。瀏覽器可以理解為一個(gè)代碼閱讀器，由于它對HTML5代碼的翻譯工作不好就會造成所謂“兼容性”的問題。比如HTML5中可以通過代碼給一個(gè)DIV添加投影，那么在某些瀏覽器中就顯示不了這個(gè)效果。不難理解為什么有程序員會穿著 i hate IE字樣的T恤了吧。在每次做完一個(gè)網(wǎng)站項(xiàng)目時(shí)，測試工程師都會用Chrome、Safari、Firefox、Opera、IE、Edge等多個(gè)瀏覽器測試網(wǎng)站的兼容性，這時(shí)通常讓前端工程師非常頭疼。因?yàn)榇a動一發(fā)牽全身，經(jīng)常這個(gè)好了那個(gè)又不行了。但是針對這種問題也有一些解決方案，比如減少對用戶占比不高瀏覽器的支持、對不好搞的瀏覽器單獨(dú)加載特定的適配代碼等。道高一尺魔高一丈呀。
其他前端語言
有了HTML這個(gè)骨架，加上圖片和多媒體后，網(wǎng)站的發(fā)展速度就更快了。但是服務(wù)器的損耗很大：所有用戶都需要重復(fù)地來服務(wù)器下載代碼和圖片等資源進(jìn)行“握手”，而且很多HTML代碼都是重復(fù)的，造成了資源的浪費(fèi)。比如，如果我網(wǎng)站的頭部都是黃色的、鏈接都是藍(lán)色的，那么每個(gè)頁面都會啰嗦這幾句代碼。這個(gè)問題沒多久就被一種嶄新的代碼解決了：CSS技術(shù)。CSS是層疊樣式表的意思：我們可以理解為現(xiàn)在把網(wǎng)站的樣式（顏色、大小、位置等樣式信息）也就是CSS和網(wǎng)站的內(nèi)容（文字、圖片、鏈接等內(nèi)容信息）也就是HTML完全分開，并且一個(gè)網(wǎng)站可以下載一份CSS然后不同頁面都調(diào)取這份CSS的緩存，那么就節(jié)省了服務(wù)器資源。另外，由于網(wǎng)站需要一些交互效果，比如點(diǎn)擊和菜單等，那么需要前端工程師使用Javas cript代碼來配合。Javas cript是一種比較短小精悍的語言，構(gòu)建一些基于瀏覽器的非常順手。所以目前主流的網(wǎng)站配置是HTML5+CSS3+JS代碼的組合，當(dāng)然為了兼容那些低端瀏覽器也可能使用HTML4+CSS+JS的套餐。這取決于我們的主要目標(biāo)用戶群在使用什么樣的瀏覽器。當(dāng)然，我講這些并不是要求您去學(xué)習(xí)HTML、CSS、JS代碼然后進(jìn)行前端開發(fā)，因?yàn)樵诂F(xiàn)代互聯(lián)網(wǎng)公司里已經(jīng)有專業(yè)的前端工程師了。我們了解這些主要是要理解前端工程師的工作以便更好地配合他們。
主流形式：HTML + CSS + JS
動態(tài)網(wǎng)頁
了解完靜態(tài)網(wǎng)頁還不夠，現(xiàn)在讓我們談?wù)劸W(wǎng)站如何動起來。動態(tài)網(wǎng)頁不是說它有狂拽酷炫的動畫，而是動態(tài)網(wǎng)頁會隨著時(shí)間、內(nèi)容和數(shù)據(jù)庫的調(diào)用而產(chǎn)生動態(tài)的網(wǎng)頁。比如今天看到的新聞網(wǎng)站和昨天的新聞肯定不一樣了，可是網(wǎng)站首頁的HTML代碼并不需要人去手工修改，而是讓小編通過后臺錄入新聞、上傳圖片就好了。小編上傳后臺的過程就會輸入數(shù)據(jù)庫，而動態(tài)網(wǎng)頁又是調(diào)取數(shù)據(jù)庫內(nèi)容顯示給用戶的一種形式。動態(tài)網(wǎng)頁會隨時(shí)調(diào)取數(shù)據(jù)庫中的信息給用戶，而對用戶來說似乎靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁長得都是一樣的。那么最傻瓜的判斷方式是看網(wǎng)址結(jié)尾，靜態(tài)網(wǎng)頁結(jié)尾是html或htm，而動態(tài)網(wǎng)頁由于使用了高級網(wǎng)頁編程技術(shù)，結(jié)尾則是Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi都是動態(tài)網(wǎng)頁的語言，當(dāng)然有的時(shí)候?yàn)榱俗尵W(wǎng)站效率提升也會使用偽靜態(tài)結(jié)構(gòu)，結(jié)尾和靜態(tài)網(wǎng)頁就一致了，但是實(shí)際上是會在用戶訪問前調(diào)取一遍數(shù)據(jù)庫的。同時(shí)動態(tài)網(wǎng)頁的網(wǎng)址會有一個(gè)特點(diǎn)，含有？符號。動態(tài)語言目前最火的是Php，較早而現(xiàn)在比較少見的是Asp、Cgi，最安全的是Jsp，所以很多銀行采用JSP編譯。了解完這些，我們基本就弄清楚網(wǎng)站的運(yùn)行原理了。
主流后臺編譯語言：PHP ASP JSP CGI
雪碧圖
我們經(jīng)?？吹骄W(wǎng)站中會有動畫，那么動畫實(shí)現(xiàn)的原理一般有如下這么幾個(gè)：第一，HTML5視頻播放；這種方式缺點(diǎn)就是不兼容低端瀏覽器。第二，F(xiàn)lash Player播放器播放；這種方式的缺點(diǎn)是Flash安全性很低而且效率慢。第三，動畫使用Gif格式；這種方式的問題是動畫長度不夠，并且這個(gè)格式僅僅支持透明和不透明兩級屬性。那么像Google首頁Doodle的動畫是怎么實(shí)現(xiàn)的呢？這種技術(shù)叫做：雪碧圖。CSS雪碧 即CSS Sprite，也有人叫CSS精靈，它是一種CSS圖像合并技術(shù)。它本身調(diào)用的圖片是支持多級透明的PNG格式，然后把動畫并排排列出來。比如一個(gè)卡通人物的動畫每幀寬度是100px，那么就把它的動作1 動作2 動作3 動作4 并排放在一張寬度是400px的PNG圖片里。然后代碼在一個(gè)100px的寬度框子內(nèi)背景圖調(diào)用這張png，我們就看到了動作1，然后過一秒鐘代碼會悄悄移動100px我們就看到了動作2。由于速度很快就讓我們看到了連續(xù)動畫。雪碧圖也有自身的缺點(diǎn)：如果幀數(shù)太多，會消耗很大的內(nèi)存。所以幀數(shù)一定要控制少。如果你的動作設(shè)計(jì)了12幀，那么我建議你可以試試將2,4,6,8,10刪除，保留一半的動作。
雪碧圖
視差滾動
視差滾動是一種運(yùn)動速率不一樣的設(shè)計(jì)效果，用以實(shí)現(xiàn)空間感。比如密爾沃基警察局官網(wǎng)就大量運(yùn)用了視差滾動效果。其實(shí)現(xiàn)原理是，代碼判定網(wǎng)頁滾動，滾動時(shí)頁面中三層圖片運(yùn)動速率和位移距離不同。這樣給人造成的視覺體驗(yàn)仿佛是我們在物理現(xiàn)實(shí)中看到的空間感一樣。視差滾動已經(jīng)不是什么高新技術(shù)，如果你的網(wǎng)站比較適合視差滾動，請大膽設(shè)計(jì)并和前端工程師提需求，相信前端工程師可以滿足你的要求。我們需要準(zhǔn)備的就是運(yùn)動速率不同的分層靜態(tài)PSD文件。
運(yùn)用了視差滾動效果的密爾沃基警察局官網(wǎng)（milwaukeepolicenews.com）
網(wǎng)頁設(shè)計(jì)規(guī)范
終于，經(jīng)歷過長篇大論網(wǎng)站的原理與組成部分后，我們要談?wù)劸W(wǎng)站設(shè)計(jì)的規(guī)范了。網(wǎng)站設(shè)計(jì)并無具體平臺限定的風(fēng)格，也沒有必須要設(shè)計(jì)的系統(tǒng)級導(dǎo)航欄和工具欄。所以網(wǎng)站設(shè)計(jì)更加靈活，然而因?yàn)樘`活也會讓我們的設(shè)計(jì)師無從下手。那么接下來我將介紹網(wǎng)站設(shè)計(jì)的規(guī)范，在您工作的時(shí)候可以參考。注意，在設(shè)計(jì)之前一定要和前端溝通我們使用的尺寸、字體、交互等，這樣有助于后期不會有誤會。
畫板尺寸
因?yàn)榫W(wǎng)頁尺寸與用戶屏幕相關(guān)，而用戶屏幕的種類難以統(tǒng)計(jì)。所以我們的設(shè)計(jì)稿只能主要顧及主流用戶的分辨率，其他分辨率用適配的方式來解決。在版Photoshop網(wǎng)站W(wǎng)eb預(yù)設(shè)尺寸給了我們一些啟示：常見尺寸（1366x768px）、大網(wǎng)頁（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。這些是主流尺寸，而我們?nèi)绻鼍W(wǎng)站時(shí)建議按主流的分辨率1920x1080px來設(shè)計(jì)。所以我們通常設(shè)計(jì)網(wǎng)站時(shí)的網(wǎng)站寬度為1920px，每個(gè)屏幕的高度約為900px。為什么是900px呢？因?yàn)?080還要減去瀏覽器頭部和底部高度，大約就是900px了。內(nèi)容安全區(qū)域?yàn)?200px （或1000px / 1400px）。以這個(gè)尺寸來設(shè)計(jì)相對標(biāo)準(zhǔn)。當(dāng)然在設(shè)計(jì)網(wǎng)頁前需要知會前端設(shè)計(jì)尺寸，因?yàn)閷τ谶m配的方式和后續(xù)配合他們更有發(fā)言權(quán)。
網(wǎng)站的尺寸規(guī)范
文字規(guī)范
我們現(xiàn)在都知道了網(wǎng)站上面的文字是通過前端工程師重新寫在代碼里的。那這種文字在瀏覽器上的渲染與系統(tǒng)和瀏覽器有關(guān)。比如在蘋果電腦上看到的文字效果和Windows系統(tǒng)電腦上看到的文字效果就有所不同：蘋果會對文字進(jìn)行渲染，而windows的文字幾乎充滿了像素顆粒。按照用戶占比來說無疑Windows的用戶是主流，所以盡管我們可能使用蘋果電腦設(shè)計(jì)網(wǎng)頁，但是設(shè)計(jì)出來的網(wǎng)頁效果也應(yīng)該和Windows顯示一致。否則我們設(shè)計(jì)完漂亮的設(shè)計(jì)稿，程序員無法還原成我們設(shè)計(jì)的樣子。另外，字號的大小也非常重要。網(wǎng)頁的顯示區(qū)域決定了文字不可以過大，在網(wǎng)站設(shè)計(jì)中我們的文字大小一般來說是12-20像素。為什么不能比12px更小？因?yàn)槿绻?2像素更小的中文無法放得下復(fù)雜的筆畫了。而且奇數(shù)的文字表現(xiàn)和適配都不好做，也就是說我們必須使用偶數(shù)的字號來設(shè)計(jì)。那么總結(jié)一下：文字使用宋體、大小為12px、渲染方式選擇無。稍大一些的字體使用微軟雅黑、大小為14-20px、渲染方式選擇Windows Lcd或銳利。另外，英文和數(shù)字需使用Arial字體，渲染方式選擇無。
網(wǎng)站字體規(guī)范
圖片規(guī)范
網(wǎng)站設(shè)計(jì)中的圖片常用4（寬）：3（高）、16（寬）：9（高）、1:1等比例。具體圖片大小沒有固定要求，但整數(shù)和偶數(shù)為佳。主要是考慮到一些適配的問題。作為內(nèi)容出現(xiàn)的圖片一定需要有介紹信息和排序信息。圖片的格式有很多，比如支持多級透明的png格式、圖片文件很小的jpg格式、支持透明/不透明并且支持動畫的gif格式等。在保證圖像清晰度地情況下文件大小越小越好，如何讓網(wǎng)頁使用的圖片更小呢？
第一種方法，給程序員切圖的時(shí)候我們可以適當(dāng)縮小圖片文件的大小。比如Photoshop中存儲為web所用格式就會比快速存儲文件更小。
第二種方法，可以嘗試使用例如Tinypng、智圖等工具再次壓縮圖片。這些工具會把圖片中的多余信息刪除并且壓縮，而圖像質(zhì)量不受損失。
第三種方法，Google研發(fā)了一種Webp格式，它的圖片壓縮體積大約只有JPEG的2/3，能節(jié)省大量的服務(wù)器寬帶資源。比如Facebook、Ebay還有我們設(shè)計(jì)師常用的站酷圖片存儲都是使用了Webp圖片格式。
第四種方法，瀏覽器和服務(wù)器握手時(shí)需要下載網(wǎng)頁所調(diào)用的圖片資源，那么如果一個(gè)網(wǎng)站有一百張圖片的話，瀏覽器和服務(wù)器就得握一百次。第一會耗費(fèi)服務(wù)器資源，第二訪問速度就會慢一些。所以前端工程師們有一種做法，就是把網(wǎng)頁中所使用的圖片拼成一大張png。然后每個(gè)調(diào)用圖片的元素都調(diào)用這張圖片然后分別位移一點(diǎn)兒，顯示的那塊區(qū)域移動到一大張圖片中所需要的那個(gè)圖像。
在線壓縮工具Tinypng網(wǎng)站
按鈕
按鈕的風(fēng)格在過去的十幾年發(fā)生了很大的變化，由一開始的“斜面與浮雕”風(fēng)格過渡到后面的“擬物風(fēng)格”，現(xiàn)在更流行的是扁平風(fēng)格。如果按鈕在一張圖片中，為了不影響圖片的美觀性，會去掉填充只保留邊框，這種設(shè)計(jì)方式叫做幽靈按鈕。注意在設(shè)計(jì)按鈕時(shí)記得同時(shí)設(shè)計(jì)好按鈕的鼠標(biāo)懸停、按下狀態(tài)。
不同時(shí)代下不同的按鈕風(fēng)格
表單
在網(wǎng)站設(shè)計(jì)中我們經(jīng)常需要使用一些輸入框、下拉菜單、彈窗、單選框、復(fù)選框、編輯器等。這些都是系統(tǒng)級的控件，一般是直接調(diào)用系統(tǒng)設(shè)計(jì)的。但是系統(tǒng)設(shè)計(jì)有時(shí)不能滿足我們的要求：系統(tǒng)內(nèi)置的表單高度不夠，點(diǎn)擊起來不舒服；不符合網(wǎng)站整體設(shè)計(jì)的品牌感等。那么我們可以通過CSS給這些表單增加樣式，包括顏色、大小、內(nèi)外邊距等。所以我們遇到涉及到表單的需求時(shí)也可以進(jìn)行自定義設(shè)計(jì)。
表單不同風(fēng)格的設(shè)計(jì) UIDE Kit by Mateusz Dembek
柵格
我們把整體寬度定義為W。然后整個(gè)寬度分成多個(gè)等分單元A。每個(gè)單元A中有元素a和間距i。所以他們之間的關(guān)系就是 (A×n)-i=W。當(dāng)然每個(gè)應(yīng)用的尺寸不止可以整除成一種柵格，這就要看我們內(nèi)容排版的疏密程度了。之后，我們將過多內(nèi)容的柵格和另一個(gè)柵格相加得到更大的排版空間；其他元素都須老老實(shí)實(shí)呆在自己的柵格內(nèi)，這樣就完成了一個(gè)布局非?？茖W(xué)的設(shè)計(jì)了。 比如
如果網(wǎng)頁寬度是1000px，我們可以使用：
20列每列40px和10像素間隔
20列每列30px和20像素間隔
25列每列30px和10像素間隔
25列每列20px和20像素間隔
如果網(wǎng)頁寬度是990px，我們可以使用：
11列每列80px和10像素間隔
18列每列35px和20像素間隔
25列每列45px和10像素間隔
33列每列20px和10像素間隔
如果網(wǎng)頁寬度是980px，我們可以使用：
14列每列60px和10像素間隔
14列每列50px和20像素間隔
28列每列25px和10像素間隔
柵格系統(tǒng)具體有以下優(yōu)勢：能大大提高網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下，頁面中所有組件的尺寸都是有規(guī)律的。另外，基于柵格進(jìn)行設(shè)計(jì)，可以讓整個(gè)網(wǎng)站各個(gè)頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗(yàn)。
網(wǎng)站的柵格化會使網(wǎng)站看起來更有秩序感
適配Retina屏幕
2012年蘋果發(fā)布了Retina Macbook Pro，Retina屏幕的電腦占有量越來越高了。Retina屏幕簡單地說就是屏幕密度是傳統(tǒng)屏幕的兩倍，擁有更大地清晰度。甚至可以滿足我們視網(wǎng)膜最高的識別度，所以也叫視網(wǎng)膜屏幕。這種屏幕下我們設(shè)計(jì)的安全距離大約為1000像素的網(wǎng)站就顯得非常粗糙了。所以如果我們現(xiàn)在Retina屏幕下顯示一個(gè)400X300PX的區(qū)域，實(shí)際上我們需要提供給前端一張800X600PX的切圖才行，因?yàn)镽etina屏幕一個(gè)點(diǎn)頂過去兩個(gè)像素。那么我們的用戶是視網(wǎng)膜屏占比更多的用戶，比如設(shè)計(jì)師群體，那怎么兼顧高清屏幕和普通屏幕呢？
首先我們需要以視網(wǎng)膜屏幕大小完成設(shè)計(jì)稿，建議是傳統(tǒng)設(shè)計(jì)稿的兩倍。之后切出兩套切圖（非Retina屏幕用戶如果也加載雙倍大小的資源會很慢），普通的切圖命名為如logo.jpg，Retina切圖命名為logo@2x.jpg。前端用代碼來識別，如果屏幕是Retina就加載雙倍尺寸，不是則加載普通尺寸。前端可以使用Retina.js（https://retinajs.com/）提供的技術(shù)進(jìn)行識別。
自適應(yīng)與響應(yīng)式網(wǎng)站
我們看到有些網(wǎng)站使用電腦端或者手機(jī)端甚至iPad去瀏覽時(shí)體驗(yàn)都非常好。這就需要我們?yōu)榱擞脩趔w驗(yàn)而進(jìn)行網(wǎng)站的自適應(yīng)或響應(yīng)式布局了。響應(yīng)式與自適應(yīng)的原理是相似的，都是通過代碼檢測設(shè)備屏幕寬度，根據(jù)不同的設(shè)備加載不同的css。
自適應(yīng)網(wǎng)站
自適應(yīng)網(wǎng)站的設(shè)計(jì)稿是一致的，但是設(shè)計(jì)稿需要考慮屏幕變小時(shí)的變化方式。比如一個(gè)網(wǎng)站的內(nèi)容有5個(gè)區(qū)塊和4個(gè)間距，那么如果寬度縮小成900時(shí)需要如何變化，這就是自適應(yīng)布局。比如站酷網(wǎng)、Dribbble等網(wǎng)站都采用了自適應(yīng)布局。
響應(yīng)式網(wǎng)站
響應(yīng)式網(wǎng)站則需要設(shè)計(jì)不同版本的設(shè)計(jì)稿，然后根據(jù)不同的設(shè)備提供不同的CSS樣式。比如判定你設(shè)備的寬度是750px，那么網(wǎng)站就知道你使用了手機(jī)來訪問，就會給你導(dǎo)入一份手機(jī)才有的樣式；如果是電腦的寬度就給你導(dǎo)入電腦的CSS樣式。對于設(shè)計(jì)師來說，自適應(yīng)需要考慮網(wǎng)站在不同設(shè)備寬度下的整除與排版；響應(yīng)式則需要設(shè)計(jì)電腦、平板、手機(jī)等至少三套設(shè)計(jì)稿（但這三套設(shè)計(jì)稿的內(nèi)容是一致的）?？傊?，自適應(yīng)和響應(yīng)式都是網(wǎng)站為了用戶體驗(yàn)所適應(yīng)瀏覽設(shè)備而做出的努力。
適配的規(guī)范
手機(jī)方面：適配手機(jī)頁面時(shí)，我們一般以iPhone為畫布標(biāo)準(zhǔn)。原因是iPhone相對顯示比較清晰，并且要求較高。而且用戶占有量也很高。在適配時(shí)我們一般以750x1334px尺寸為主，然后將網(wǎng)站導(dǎo)航改變?yōu)槭謾C(jī)APP常常使用的漢堡包+抽屜式導(dǎo)航的形式。同時(shí)網(wǎng)站里的按鈕也需要變?yōu)槭謾C(jī)APP中我們看到的左右?guī)缀鯘M屏的按鈕，并且每個(gè)按鈕要大于88PX，方便手指的點(diǎn)擊。字體方面，我們要把網(wǎng)站的字體全部改為蘋方字體，并且字號設(shè)置為24PX以上，渲染方式設(shè)置成銳利。英文則需要使用SF-UI代替。也就是將網(wǎng)站改變成一個(gè)類APP的手機(jī)網(wǎng)頁，這樣才可以保證手機(jī)用戶體驗(yàn)良好。如果用戶使用安卓手機(jī)，那么前端代碼則會基于設(shè)計(jì)稿的設(shè)計(jì)適度加大圖片與間距來適應(yīng)安卓屏幕。
iPad：iPad的尺寸為1024x768、2048x1536px等，無論怎么變基本與電腦屏幕尺寸類似。所以在iPad上瀏覽網(wǎng)頁是基本舒適的。因此，很多網(wǎng)站并沒有專門為iPad做適配，如果我們希望iPad用戶用的更爽，可以從文字大?。?4PX以上）、按鈕大?。?8PX左右以及以上）、交互形式（抽屜式導(dǎo)航、導(dǎo)航不隨屏幕滾動）等方式入手。
不同設(shè)備的注意事項(xiàng)
總結(jié)
無論您面對的項(xiàng)目是To C的還是To B的網(wǎng)站產(chǎn)品，我們都應(yīng)該首先確立設(shè)計(jì)風(fēng)格 > 尋找設(shè)計(jì)素材 > 建立情緒板 > 完成視覺稿 > 切圖標(biāo)注 > 建立視覺規(guī)范 > 進(jìn)行項(xiàng)目走查。
如果設(shè)計(jì)一般網(wǎng)站的頁面，可以按照1920 X 1080px尺寸設(shè)計(jì)。每屏高度900px，字體使用宋體 12px 無 和微軟雅黑 14-20 Windows LCD。Banner盡量滿屏，但是圖片需要按照4:3或16:9等比例來設(shè)計(jì)。做網(wǎng)站時(shí)可以建立柵格以更好地進(jìn)行自適應(yīng)和響應(yīng)式布局，我們也要為超鏈接和按鈕設(shè)計(jì)不同的相應(yīng)鼠標(biāo)的狀態(tài)；另外我們也可以多多嘗試在網(wǎng)站設(shè)計(jì)中加入視差滾動、雪碧圖動畫等好玩的交互。
如果設(shè)計(jì)手機(jī)端的頁面，可以按照750X1334PX尺寸設(shè)計(jì)。字體使用蘋方 24PX以上 銳利。英文字體使用SF UI。按鈕和點(diǎn)擊區(qū)域需要大于88PX方便手指點(diǎn)擊。并且頭部需要預(yù)留出微信或?yàn)g覽器的導(dǎo)航區(qū)域。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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)這里
有時(shí)一個(gè)新功能的上線，新內(nèi)容的更新，會導(dǎo)致在一個(gè)頁面中出現(xiàn)層疊式的引導(dǎo)內(nèi)容，頁面上大部分引導(dǎo)的觸發(fā)時(shí)機(jī)也比較接近。那么，對于這種多重引導(dǎo)，要如何處理呢？
交互設(shè)計(jì)流程中，每當(dāng)有新功能上線或者新的內(nèi)容優(yōu)化更新時(shí)，對應(yīng)版本中一定會出現(xiàn)新手引導(dǎo)或者相應(yīng)形式的提示內(nèi)容，這在業(yè)界似乎已經(jīng)成為一個(gè)約定俗成的東西。
畢竟，酒香也怕巷子深，在這個(gè)用戶注意力被極度分散的時(shí)代，任何一個(gè)應(yīng)用都不敢說，自己可以占據(jù)用戶每天絕對時(shí)長的時(shí)間，讓用戶來“充分”自己挖掘每個(gè)版本的更新內(nèi)容。
所以，“自薦”似的引導(dǎo)出現(xiàn)在了每一次的應(yīng)用安裝或者更新中。
在一次版本驗(yàn)收中出現(xiàn)了這樣一個(gè)問題：最初的設(shè)計(jì)過程中，由于功能模塊都是單獨(dú)提出需求的，所以交互設(shè)計(jì)文檔給出的時(shí)候也是拆分成不同的模塊提交，可是實(shí)際驗(yàn)收時(shí)，當(dāng)所有的新功能都在一個(gè)頁面中呈現(xiàn)的時(shí)候，問題就出現(xiàn)了。
由于頁面功能改版較大，既有新功能的上線，又有新內(nèi)容的更新，所以在一個(gè)頁面中出現(xiàn)了層疊式的引導(dǎo)內(nèi)容，頁面上大部分引導(dǎo)的觸發(fā)時(shí)機(jī)也比較接近，因此就會在某些頁面出現(xiàn)氣泡、蒙層引導(dǎo)堆疊顯示效果，讓人防不勝防。
在于產(chǎn)品和開發(fā)同學(xué)溝通后發(fā)現(xiàn)，除了需要合理統(tǒng)籌調(diào)整觸發(fā)時(shí)機(jī)以外，需求提出時(shí)并未嚴(yán)格區(qū)分每個(gè)引導(dǎo)是根據(jù)用戶ID來判斷，還是依據(jù)設(shè)備ID來判斷，實(shí)現(xiàn)過程中統(tǒng)一默認(rèn)以用戶ID作為了引導(dǎo)出現(xiàn)的標(biāo)準(zhǔn)。
結(jié)果導(dǎo)致頁面中出現(xiàn)引導(dǎo)堆積的情況出現(xiàn)，將引導(dǎo)的觸發(fā)條件增加一條設(shè)備ID和用戶ID，本質(zhì)目的是將引導(dǎo)出現(xiàn)的時(shí)機(jī)更加合理化，在不影響用戶操作流程的情況下向用戶傳遞信息，提升用戶體驗(yàn)。
如何解決這個(gè)問題？
還是需要從本源找起：一是引導(dǎo)的目的，二是觸發(fā)的判斷依據(jù)。
（1）新用戶操作引導(dǎo)
主要是指用戶第一次安裝應(yīng)用后出現(xiàn)的引導(dǎo)，告知用戶核心操作方法和流程。
（2）功能更新引導(dǎo)
主要針對產(chǎn)品功能升級后，用來告知用戶新功能的入口、操作方式等內(nèi)容。
（3）與用戶權(quán)益相關(guān)更新或說明
當(dāng)更新內(nèi)容與用戶權(quán)益、身份屬性內(nèi)容相關(guān)時(shí)，需要出現(xiàn)適當(dāng)?shù)囊龑?dǎo)或者氣泡形式的提示來告知用戶，這種引導(dǎo)與用戶的激勵(lì)體系、產(chǎn)品玩法高度相關(guān)。
（4）常規(guī)功能操作引導(dǎo)
這種操作引導(dǎo)較為常見，每次更新應(yīng)用或者新安裝時(shí)都會出現(xiàn)，幾乎成為例行出現(xiàn)的“常識性”引導(dǎo)，例如：頁面中的手勢操作引導(dǎo)等。
以上4中引導(dǎo)類型，在具體展示形式上主要包括前置引導(dǎo)和過程中引導(dǎo)兩類。
前置引導(dǎo)：類似于引導(dǎo)頁，在用戶開始使用應(yīng)用前直接告知用戶更新的功能、玩法等enrich，一般都是全端出現(xiàn)的。
過程中引導(dǎo)：是指用戶在實(shí)際使用到，或者進(jìn)入該功能入口所處界面時(shí)出現(xiàn)的引導(dǎo)，這種引導(dǎo)需要用戶的觸發(fā)時(shí)機(jī)。而且由于出現(xiàn)在操作過程中，對操作本身具有阻礙的副作用，所以也只會出現(xiàn)一次而已。
了解了使用引導(dǎo)的目的，再來看一下觸發(fā)引導(dǎo)的判斷依據(jù)——設(shè)備ID和用戶ID。
（1）設(shè)備ID
是指Device ID，是一臺設(shè)備的識別標(biāo)識，正常情況下，一款移動設(shè)備上的應(yīng)用，無論切換都少個(gè)登錄賬戶，其設(shè)備ID是不變的（刷機(jī)除外）。
（2）用戶ID
即User ID 或者UID，是用戶在登錄應(yīng)用后的身份識別碼。用戶ID產(chǎn)生的條件是需要用戶注冊生成賬戶后登錄App，這樣用戶就可以想服務(wù)器發(fā)送和接收消息，服務(wù)器也可以通過UID來進(jìn)行準(zhǔn)確的push消息推送，用戶與服務(wù)器之間可以進(jìn)行交互。
除去一些純工具類型的產(chǎn)品，大部分應(yīng)用都需要用戶注冊登錄后使用，當(dāng)然，在這里就不深究是否強(qiáng)制用戶登錄等邏輯。
明確了以上兩方面內(nèi)容，同時(shí)考慮引導(dǎo)使用的形式，其實(shí)也就不難判斷，應(yīng)該如何處理頁面中多層引導(dǎo)的問題了。
（1）新用戶操作引導(dǎo)/功能更新引導(dǎo)
這類引導(dǎo)如果使用前置引導(dǎo)類型，則信息傳遞是面向全局的。
當(dāng)功能引導(dǎo)與用戶個(gè)人信息無關(guān)，只是功能操作或者內(nèi)容更新時(shí)，往往可以以設(shè)備ID作為推送判斷標(biāo)準(zhǔn)，即一個(gè)設(shè)備，在一次應(yīng)用安裝周期中，出現(xiàn)一次即可。若用戶在引導(dǎo)出現(xiàn)后，切換了登錄賬戶，再次打開該界面時(shí)，不在出現(xiàn)重復(fù)的新手引導(dǎo)。
簡單來說，此類引導(dǎo)的出現(xiàn)不需要區(qū)分用戶信息，甚至不需要用戶登錄即可使用，所以基本上此類引導(dǎo)均已設(shè)備ID為觸發(fā)判斷的基本條件。
若此類引導(dǎo)使用過程中引導(dǎo)，則需要在實(shí)際使用過程中抓取適當(dāng)?shù)挠|發(fā)時(shí)機(jī)，此時(shí)如果出現(xiàn)多重引導(dǎo)時(shí)，則需要適當(dāng)區(qū)分使用用戶ID或者設(shè)備ID作為觸發(fā)條件，從而將引導(dǎo)出現(xiàn)的時(shí)機(jī)合理區(qū)分。
（2）與用戶權(quán)益相關(guān)更新或說明
此類引導(dǎo)一般需要細(xì)分用戶身份信息，準(zhǔn)確推送用戶所需的內(nèi)容。例如：會員與非會員之前在某個(gè)功能上有權(quán)益的差別，引導(dǎo)或者提示的內(nèi)容則需要按身份不同來推送。使用前置形式時(shí)，可以根據(jù)實(shí)際需求調(diào)整判斷依據(jù)；使用過程中中引導(dǎo)，這時(shí)則基本上需要使用用戶ID作為觸發(fā)依據(jù)，其他引導(dǎo)可使用設(shè)備ID用以區(qū)分不同引導(dǎo)。
（3）常規(guī)功能操作引導(dǎo)
『例行』出現(xiàn)的引導(dǎo)，不受場景限制，與用戶權(quán)益關(guān)聯(lián)度較低，因此以設(shè)備ID作為觸發(fā)的基本判斷依據(jù)即可。
當(dāng)頁面功能過多的時(shí)候，難免會遇到多重引導(dǎo)的問題出現(xiàn)，除了通過展示形式、頁面內(nèi)的觸發(fā)時(shí)機(jī)來區(qū)分以外，還可以通過設(shè)備ID和用戶ID的作為觸發(fā)依據(jù)來細(xì)化和區(qū)分引導(dǎo)出現(xiàn)的時(shí)機(jī)和場景。
不過這種判斷方式也并不是一成不變的，需要靈活處理，例如：當(dāng)引導(dǎo)出現(xiàn)時(shí)，該場景下用戶處于未登錄狀態(tài)，此時(shí)服務(wù)器根本無法獲取用戶ID，在此場景下討論設(shè)備ID還是用戶ID顯然毫無意義，需要重新調(diào)整引導(dǎo)出現(xiàn)的時(shí)機(jī)或者展示形式。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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)這里
在工作中，有時(shí)會遇到這樣的一個(gè)現(xiàn)象：自以為是最優(yōu)的設(shè)計(jì)方案，用戶卻并不會按照預(yù)期的方式使用。每每發(fā)生這樣的事情都會讓我很困惑，用戶為什么不聽話呢？
試想這樣一個(gè)場景：假設(shè)有電話打進(jìn)來，你卻沒有接，試想一下可能有哪些原因?qū)е铝恕笡]接電話」 的這個(gè)行為呢？
問題可能出現(xiàn)在三個(gè)方面：
通過上述的例子不難發(fā)現(xiàn)，用戶的行為是受多種因素影響的，我們姑且將這些影響分為三類：動機(jī)、能力、觸發(fā)。
現(xiàn)在試著用這三個(gè)要素來分析一個(gè)身邊的案例：雖然我知道這樣不好，但是我依然熱衷于打王者榮耀，這是為什么呢？
1. 動機(jī)
王者榮耀作為一款游戲，自帶著「好玩」 的屬性，可以讓玩家在其中獲取快樂，抵御痛苦；另外，來自朋友的邀請、因?yàn)橥嬗螒蛴螒蚨鴰淼恼勝Y、通過提升段位獲得的群體認(rèn)同感等等都可能成為強(qiáng)有力的游戲動機(jī)。
2. 能力
王者榮耀成功的將 DOTA、LOL 等 MOBA 游戲從 PC 端遷到移動端，只要擁有一部智能手機(jī)和一個(gè)穩(wěn)定的網(wǎng)絡(luò)環(huán)境，隨時(shí)隨地都可以拿出手機(jī)玩上一局王者榮耀，MOBA 類游戲的設(shè)備門檻從未被如此降低；另外，游戲的操作、套路等等也被極度簡化，沒有了 PC 端 MOBA 游戲極高的學(xué)習(xí)門檻，讓更多人可以具備加入這款游戲的能力。
3. 觸發(fā)
來自朋友的邀請通常無法拒絕，這就是依托于社交的病毒式傳播所具有的巨大威力，當(dāng)茶余飯后，朋友喊你一起開黑時(shí)，一次有效的觸發(fā)就已經(jīng)達(dá)成了。除此之外還有來自官方的 push 消息、微信中的每周戰(zhàn)報(bào)等等，這些都在不停地觸發(fā)用戶，讓玩家不斷強(qiáng)化對于游戲的印象。直到有一天，當(dāng)你閑來無事的時(shí)候不由自主的想到拿起手機(jī)打一局王者榮耀，這時(shí)它就已經(jīng)達(dá)成了來自玩家內(nèi)部的觸發(fā)，成為了你的一個(gè)習(xí)慣。
擁有強(qiáng)烈的游戲動機(jī)、具備參與游戲的能力、再加上合理的觸發(fā)機(jī)制，這些因素共同造就了玩家熱衷于打王者榮耀的行為。
由上述案例可以看出，動機(jī)、能力及觸發(fā)這三個(gè)因素對于用戶的行為有著十分重要的影響，而且如果你仔細(xì)思考會發(fā)現(xiàn)，這三個(gè)因素不僅僅適用于上述的案例，而是可以用來解釋絕大多數(shù)場景下用戶行為產(chǎn)生的原因，所以接下來我們展開分析這三個(gè)影響用戶行為的關(guān)鍵因素。
1. 行為動機(jī)的根源
用戶的行為動機(jī)大致可以分為三種：
追求快樂、逃避痛苦：用戶更加喜歡能夠快速帶來快樂的產(chǎn)品，例如微視等短視頻產(chǎn)品，讓用戶通過快速消費(fèi)幾秒鐘的短視頻就可以馬上獲取快樂，這也是越來越多的用戶沉迷其中的重要原因之一。
追求希望、逃避恐懼：用戶也會為了追求希望/逃避恐懼做出許多下意識的行為。例如我曾經(jīng)觀察到，很多人在點(diǎn)擊保存文件時(shí)會連續(xù)點(diǎn)擊多次工具欄中的保存按鈕，或者多次在鍵盤上按下「Ctrl+S」 的快捷鍵，這樣的行為大概是害怕不小心丟掉自己的勞動成果。這種下意識的多次點(diǎn)擊保存的行為，就是「追求希望、逃避恐懼」 的一個(gè)具體表征。
追求認(rèn)同、逃避排斥：人是具有社會屬性的，我們都會追求他人的認(rèn)同，避免被他人排斥。因此在社交網(wǎng)站上的點(diǎn)贊、評論、轉(zhuǎn)發(fā)等互動往往會給作者提供源源不斷的創(chuàng)作動力，其本質(zhì)上是人類追求他人認(rèn)同的心理成為了強(qiáng)有力的驅(qū)動力。
2. 能力限制
用戶的能力限制來自六個(gè)方面：時(shí)間、金錢、體力、腦力、社會偏差、非常規(guī)性。
前四種能力限制比較容易理解，在此不做贅述。
社會偏差，是指他人對該項(xiàng)活動的接受程度。例如曾經(jīng)在社交平臺中隨處可見的「不轉(zhuǎn)不是中國人」 、「為了家人轉(zhuǎn)起來」 之類的綁架式傳播，現(xiàn)在已經(jīng)很少見了，因?yàn)榇蠹叶疾幌矚g這樣的東西，所以當(dāng)用戶遇到類似的內(nèi)容時(shí)，也不太容易選擇轉(zhuǎn)發(fā)了。
非常規(guī)性，是指該項(xiàng)行為與常規(guī)活動的匹配程度或者矛盾程度。例如大型超市會在用戶的常規(guī)的行動路線上放置一些小商品，這樣用戶就很可能會產(chǎn)生計(jì)劃外的購買行為，如果放置小商品的位置與用戶常規(guī)的行動路線不匹配，甚至互相矛盾，顯然就達(dá)不到引導(dǎo)用戶產(chǎn)生額外購買行為的目的。
3. 觸發(fā)方式
觸發(fā)大致可以分為外部觸發(fā)和內(nèi)部觸發(fā)兩種。
外部觸發(fā)可以理解為產(chǎn)品為了觸達(dá)用戶而做的事情，又可細(xì)分為四種：
付費(fèi)型觸發(fā)：通過付費(fèi)的形式進(jìn)行推廣，最常見的就是廣告，商家花錢做廣告，使其產(chǎn)品讓更多人知道。
回饋型觸發(fā)：通過正向反饋獲取的曝光，例如產(chǎn)品在應(yīng)用商店的排行榜中位于榜首，自然會獲得更多的觸達(dá)用戶的機(jī)會。
人際型觸發(fā)：通過口口相傳的方式觸達(dá)用戶。
自主型觸發(fā)：產(chǎn)品自主產(chǎn)生的觸達(dá)行為，例如新聞APP 每天在固定時(shí)間 PUSH 的新聞給用戶，久而久之，即使一個(gè)不怎么經(jīng)?？葱侣劦挠脩粢矔烙羞@樣的一個(gè) APP 可以查看新聞。
相較于外部觸發(fā)，內(nèi)部觸發(fā)則顯得更加有價(jià)值。內(nèi)部觸發(fā)是指用戶的內(nèi)在情緒/情感等驅(qū)動而觸發(fā)的用戶行為，這是所有產(chǎn)品的最終目標(biāo)。例如用戶發(fā)現(xiàn)通過玩某款游戲可以治療「無聊」 的情緒時(shí)，一旦其產(chǎn)生無聊的情緒，就會自然而然的想到玩這款游戲。這樣產(chǎn)品就與用戶建立了一個(gè)內(nèi)在的良性聯(lián)系。
外部觸發(fā)往往是曇花一現(xiàn)，而內(nèi)部觸發(fā)才能真正讓用戶產(chǎn)生習(xí)慣。
總結(jié)起來，用戶的行為規(guī)律是有跡可循的，總體上符合這樣的一個(gè)模型：
行為（Behaviour） = 動機(jī)（Motivation） + 能力（Ability） + 觸發(fā)（Trigger）
如果一個(gè)產(chǎn)品/功能使用起來比較難，則需要用戶有較高的動機(jī)，再加上合理的觸發(fā)，才能讓用戶的行為觸發(fā)成功；反之，如果用戶的動機(jī)較低，則必須讓產(chǎn)品/功能非常易于使用，再加上合理的觸發(fā)，才能讓用戶的行為觸發(fā)成功。動機(jī)、能力、觸發(fā)三者共同制約著用戶的行為，缺一不可。
因此，如果再遇到「用戶不聽話」 的情況，不妨用這個(gè)模型來檢驗(yàn)自己的產(chǎn)品/功能是否存在問題：用戶的使用動機(jī)是否較低？使用難度是否太大？是否合理的觸達(dá)了用戶？相信這樣一輪檢視下來，總會有一些收獲的！
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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)這里
主要是對云圖項(xiàng)目進(jìn)行一些回顧，起到一個(gè)鞏固的作用，望能通過這個(gè)總結(jié)講述出設(shè)計(jì)在項(xiàng)目中的價(jià)值體現(xiàn)。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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)這里
沒有字庫版權(quán)？設(shè)計(jì)字體沒參考？這篇教程精細(xì)講解，教你如何在字體設(shè)計(jì)道路上通關(guān)。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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://www.yvirxh.cn