我們常說，現(xiàn)在是體驗(yàn)至上的時(shí)代，用戶對(duì)產(chǎn)品的使用不再是單純的需求滿足，更要獲得滿意的體驗(yàn)。服務(wù)設(shè)計(jì)的發(fā)展為我們改善用戶的體驗(yàn)提供了新的思路，從本質(zhì)出發(fā)，任何產(chǎn)品都是在提供某種服務(wù)，服務(wù)的質(zhì)量從根本上決定了用戶的體驗(yàn)。

什么是服務(wù)設(shè)計(jì)

服務(wù)設(shè)計(jì)一直在我們的生活中，我們無時(shí)無刻不在體驗(yàn)著各式各樣的服務(wù)。荷蘭一家專業(yè)的服務(wù)設(shè)計(jì)機(jī)構(gòu)31 Volts是這樣描述服務(wù)設(shè)計(jì)的：“如果有兩家緊挨著的咖啡店，出售同樣價(jià)格的咖啡時(shí)，服務(wù)設(shè)計(jì)是讓你走進(jìn)其中一家而不是另一家的原因。”這個(gè)描述很生動(dòng)，同時(shí)也說明了服務(wù)設(shè)計(jì)的作用。

其實(shí)服務(wù)設(shè)計(jì)的定義還有很多，行業(yè)內(nèi)不同的專家和學(xué)者都有自己的理解和解讀，不管定義如何，重要的是服務(wù)設(shè)計(jì)的思維方式，可以幫助我們從全局改善服務(wù)體驗(yàn)。

服務(wù)設(shè)計(jì)的原則及案例說明

2010年在《This is Service Design Thinking》一書中，作者首次提出了5個(gè)服務(wù)設(shè)計(jì)基本原則，這些原則之后也被廣泛使用，但隨著服務(wù)設(shè)計(jì)的不斷發(fā)展，其中的一些原則也需要重新去審視和思考，因此在2017年作者將其更新修訂為6項(xiàng)。

a.以人為中心(Human-centered)

以人為中心的設(shè)計(jì)理念在產(chǎn)品設(shè)計(jì)、交互設(shè)計(jì)等領(lǐng)域已經(jīng)得到了廣泛的應(yīng)用，服務(wù)設(shè)計(jì)當(dāng)然也沒有例外，以人為中心就是要站在用戶的角度上看待和思考問題，考慮所有被服務(wù)影響的人。

在日本，農(nóng)產(chǎn)品市場存在這樣一個(gè)問題，農(nóng)產(chǎn)品批發(fā)商無法及時(shí)從種植者處了解農(nóng)產(chǎn)品的相關(guān)狀況、收獲量等信息，因此他們也就無法與要購買農(nóng)產(chǎn)品的人進(jìn)行談判，這樣造成的結(jié)果可能是糧食的浪費(fèi)。日本的一家軟件公司NJC（Nippon Jimuki Co. Ltd.）發(fā)現(xiàn)了這一問題，他們希望利用自身能力（軟件方面的優(yōu)勢）去解決這一問題，因此將目標(biāo)設(shè)定為：創(chuàng)建一個(gè)可以提供有用數(shù)據(jù)而又不給農(nóng)民或農(nóng)產(chǎn)品批發(fā)商帶來負(fù)擔(dān)的系統(tǒng)。

最終的產(chǎn)出的結(jié)果是Fudoloop這個(gè)應(yīng)用程序，通過Fudoloop，批發(fā)商可以提前一天從農(nóng)民那里收到信息，進(jìn)而協(xié)調(diào)買家的各種要求。Fudoloop的使用者分為兩種，一種是需要更新農(nóng)產(chǎn)品信息的農(nóng)民，一種是從Fudoloop上獲取農(nóng)產(chǎn)品信息的批發(fā)商，F(xiàn)udoloop分別為兩種用戶進(jìn)行了設(shè)計(jì)。

圖片來源：Fudoloop

在設(shè)計(jì)Fudoloop時(shí)存在這樣一個(gè)問題，農(nóng)產(chǎn)品市場中的相關(guān)從業(yè)人員普遍年齡較大、受教育程度低、軟件使用經(jīng)驗(yàn)很少，面對(duì)這樣的用戶，顯然通常的軟件設(shè)計(jì)并不符合他們的需求，因此Fudoloop的界面設(shè)計(jì)非常簡單且信息突出，從事農(nóng)產(chǎn)品相關(guān)工作的人員可以輕松的使用Fudoloop完成農(nóng)產(chǎn)品信息的更新，而不會(huì)因?yàn)閷W(xué)習(xí)產(chǎn)生很大的壓力。Fudoloop還在大型農(nóng)業(yè)貿(mào)易展覽會(huì)邀請(qǐng)了一些行業(yè)內(nèi)的人員和用戶參與到了產(chǎn)品的體驗(yàn)中，并收集了他們反饋的建議，以改善產(chǎn)品。

圖片來源：IDEO

NJC在設(shè)計(jì)Fudoloop時(shí)充分堅(jiān)持了以人為中心的原則，考慮到服務(wù)涉及的不同用戶，并根據(jù)用戶本身的特點(diǎn)和需求進(jìn)行設(shè)計(jì)。NJC的CMO佐藤賢一是這樣評(píng)價(jià)Fudoloop的：“當(dāng)簡單、以人為本的思想?yún)R聚在一起時(shí)，創(chuàng)新就會(huì)發(fā)生”。

b.協(xié)作(Collaborative)

這條原則說的是，不同背景和職能的利益相關(guān)者應(yīng)該參與到服務(wù)設(shè)計(jì)流程中，收集多方訴求，發(fā)現(xiàn)不同看待問題的角度，才會(huì)更好的解決問題。

在美國舊金山，有一所學(xué)校和Revolution Foods這家餐飲公司合作，為學(xué)校內(nèi)的人員提供豐富的、營養(yǎng)的午餐，但是實(shí)際來餐廳就餐的人數(shù)與預(yù)期相差很大，數(shù)據(jù)顯示，有72%可以承擔(dān)起午餐費(fèi)用的人并沒有來到食堂吃午餐。經(jīng)過調(diào)查發(fā)現(xiàn)其中的原因，很多學(xué)生等校內(nèi)人員并不愿意排長隊(duì)或者匆忙的吃完午餐，因此他們選擇了去校外享受午餐的時(shí)間。

為了改善這種情況，這所學(xué)校請(qǐng)來了全球頂尖的設(shè)計(jì)咨詢公司IDEO，他們與1300多名學(xué)生、父母、營養(yǎng)人員、董事會(huì)專員、校長、老師和社區(qū)團(tuán)體等利益相關(guān)者一起工作，重新去設(shè)計(jì)了學(xué)校的午餐，并且制定了針對(duì)三種年齡的就餐體驗(yàn)的建議，完成了飲食、就餐空間、新技術(shù)使用等多方面的優(yōu)化和設(shè)計(jì)。

圖片來源：IDEO

最終，學(xué)校完美的改善了午餐服務(wù)的體驗(yàn)，這其中包含了所有利益相關(guān)者的想法和工作，因此設(shè)計(jì)成果也被人們所接受，越來越多的校內(nèi)人員會(huì)選擇學(xué)校的午餐，之后，這種設(shè)計(jì)模式也被舊金山的許多學(xué)校采納和推出。

所以，服務(wù)中涉及到的利益相關(guān)者有很多，多收集他們的想法與建議，甚至讓他們參與到服務(wù)設(shè)計(jì)中去，問題會(huì)得到更好的解決。

c.迭代(Iterative)

迭代是一個(gè)不斷接受反饋不斷優(yōu)化的過程，如此重復(fù)執(zhí)行，讓產(chǎn)品變得越來越好。服務(wù)設(shè)計(jì)也需要迭代，不要避免犯錯(cuò)誤，而是從錯(cuò)誤中學(xué)習(xí)和改變，同時(shí)也要不斷的收集各方的反饋信息，這些信息是服務(wù)進(jìn)行迭代的核心所在。隨著互聯(lián)網(wǎng)的發(fā)展，迭代的思維早已滲透到每一個(gè)互聯(lián)網(wǎng)產(chǎn)品，此處就不再過多解釋。

d.有序(Sequential)

服務(wù)設(shè)計(jì)應(yīng)該是一系列相互關(guān)聯(lián)的活動(dòng)，并且是按照順序進(jìn)行的，精準(zhǔn)的把控服務(wù)每一個(gè)環(huán)節(jié)的節(jié)奏，用戶才能獲得更愉悅的體驗(yàn)。

以外賣為例，用戶的使用過程包含訂外賣時(shí)的商家選擇到下單過程，下單后配送外賣，用戶收到外賣和用餐后這幾個(gè)過程，而服務(wù)的提供者主要包括商家、平臺(tái)和外賣小哥，為了保證用戶能夠獲得流暢的服務(wù)體驗(yàn)，需要各個(gè)服務(wù)提供者在服務(wù)展開的不同環(huán)節(jié)推出優(yōu)質(zhì)的服務(wù)，如下圖。

在訂外賣時(shí)，平臺(tái)會(huì)為用戶推出“超值優(yōu)惠”“限時(shí)秒殺”等優(yōu)惠活動(dòng)，商家推薦、訂單歷史等商家選擇渠道，以及不同的篩選條件，以上的目的都在于幫助用戶快速找到自己期望的、合適的商家。在用戶選定商家后，進(jìn)入到選擇商品并下單的過程，一方面，商家會(huì)推出優(yōu)惠的活動(dòng)、推薦菜品等，另一方面，平臺(tái)也會(huì)給出自己的優(yōu)惠。

下單后，用戶面臨的是一個(gè)配送過程中的等待時(shí)間，為了緩解用戶在等待過程中的焦慮情緒，平臺(tái)會(huì)及時(shí)更新和推送外賣小哥的狀態(tài)，如到達(dá)商家、取餐中、與用戶的距離等，同時(shí)會(huì)給出用戶預(yù)期的送達(dá)時(shí)間，若超過預(yù)期時(shí)間用戶還可進(jìn)行催單，商家可以聯(lián)系用戶表達(dá)歉意，整個(gè)過程用戶對(duì)配送狀態(tài)是可視的。

用戶收到外賣時(shí)首先會(huì)與外賣小哥接觸，包括與外賣小哥提前確定取餐的時(shí)間地點(diǎn)，取外賣時(shí)的短暫對(duì)話等，這些都會(huì)影響用戶對(duì)服務(wù)的印象，因此外賣小哥需要保證服務(wù)態(tài)度的禮貌和友好。收到外賣后，食品包裝首先給到了用戶對(duì)商家的第一印象，然后是餐品是否符合用戶預(yù)期，讓用戶滿意。

在用戶就餐后，首先平臺(tái)要提供給用戶評(píng)價(jià)的功能，用戶可以分享自己就餐的感受，商家也可以通過平臺(tái)為用戶提供更多的優(yōu)惠，引導(dǎo)用戶能夠再次回到商家訂餐。

從外賣的案例中我們可以看到，服務(wù)是一個(gè)過程，是需要有序展開的，每一個(gè)環(huán)節(jié)的體驗(yàn)都會(huì)影響到用戶對(duì)服務(wù)的印象，在恰當(dāng)?shù)沫h(huán)節(jié)提供恰當(dāng)?shù)膬?yōu)質(zhì)服務(wù)，才能確保用戶的整體體驗(yàn)。

e.真實(shí)(Real)

服務(wù)本質(zhì)上是無形的，應(yīng)該用“物理元素”來可視化，這樣可以用戶的服務(wù)記憶，增強(qiáng)用戶對(duì)他們所接受服務(wù)的感知。

同樣以上述外賣為例，商家為用戶提供餐食，這部分是借助美團(tuán)這個(gè)平臺(tái)和外賣小哥來完成的，用戶和商家的接觸僅僅是送達(dá)的餐食，因此無法通過像到店體驗(yàn)一樣，讓用戶感知到商家提供的更多服務(wù)。

為了讓服務(wù)變得更加“有形化”，商家就需要花費(fèi)更多的心思，如圖，商家為了增強(qiáng)用戶對(duì)服務(wù)的感知，一般會(huì)在在包裝上花費(fèi)很多功夫，精致的包裝讓商家的形象更好且更加值得信任，一些有趣的包裝還可能讓用戶的心情變得愉悅。另外，商家也可以通過一張便利貼的溫馨問候或者贈(zèng)送小禮品等方式讓用戶更真實(shí)的感受到服務(wù)，通過這樣的手段，即使用戶并沒有真的接觸到商家，體驗(yàn)也會(huì)變得很好，商家的形象也會(huì)提升很多。

圖片來源：古田路9號(hào)

f.整體(Holistic)

整體就是要著眼于整個(gè)用戶旅程，考慮用戶與服務(wù)的每個(gè)觸點(diǎn)（觸點(diǎn)的概念后文會(huì)進(jìn)行介紹），并兼顧多方利益相關(guān)者的需求。也就是所謂的全方位服務(wù)體驗(yàn)，考慮服務(wù)環(huán)境的方方面面，沒有任何遺漏。這個(gè)原則實(shí)施起來并不是那么簡單，從整體角度思考問題會(huì)使問題變得復(fù)雜。不過在服務(wù)設(shè)計(jì)中，是有一些方法和工具是可以幫助我們完成整體思考的，比如服務(wù)藍(lán)圖。

服務(wù)設(shè)計(jì)的常用方法-服務(wù)藍(lán)圖

a.服務(wù)藍(lán)圖簡介

服務(wù)藍(lán)圖是一張圖表，通過列出在每個(gè)階段發(fā)生的、不同角色執(zhí)行的所有活動(dòng)，顯示了服務(wù)的整個(gè)過程。如圖所示是一個(gè)服務(wù)藍(lán)圖的簡單示例，垂直方向上展示服務(wù)中的利益相關(guān)者，水平方向上為用戶的歷程，也就是用戶經(jīng)歷的不同階段。在服務(wù)藍(lán)圖中有兩條線，一條是可見線（line of visibility），可見線上方為用戶可與之交互的服務(wù)，也可以稱之為“前臺(tái)”，可見線下方代表的是后臺(tái)進(jìn)程，用戶無法看到但需要給用戶提供支持，后臺(tái)進(jìn)程還可以存在內(nèi)部交互線，用來表示內(nèi)部人員的聯(lián)系。用戶與前臺(tái)服務(wù)之間存在另外一條交互線（line of interaction），用來表示用戶與服務(wù)之間的接觸。

圖片來源：Service Design Tools

明確了服務(wù)藍(lán)圖的大致框架之后，還需要注意服務(wù)藍(lán)圖中一個(gè)非常重要的概念——觸點(diǎn)。觸點(diǎn)就是在服務(wù)的各階段，用戶和產(chǎn)品、服務(wù)、后臺(tái)產(chǎn)生的接觸，每個(gè)觸點(diǎn)也是服務(wù)可以進(jìn)行展開和優(yōu)化的方向。

b.Uber服務(wù)藍(lán)圖繪制

為了明確服務(wù)藍(lán)圖的繪制和分析過程，下面將結(jié)合下圖所示的Uber服務(wù)藍(lán)圖進(jìn)行說明。

圖片來源：Medium

(1) 明確用戶歷程

用戶使用Uber打車服務(wù)主要可以簡單分為以下三個(gè)階段：注冊(cè)（下載APP - 新用戶注冊(cè)），乘車階段（下單 - 等待車輛到達(dá) - 乘車 - 到達(dá)目的地）、乘車后（付款 - 評(píng)價(jià)）。

(2) 明確利益相關(guān)者

用戶與之產(chǎn)生互動(dòng)的前臺(tái)服務(wù)人員為司機(jī)，而設(shè)計(jì)師、開發(fā)人員、項(xiàng)目經(jīng)理等負(fù)責(zé)后臺(tái)的服務(wù)支持，以保證Uber按照預(yù)期的目標(biāo)運(yùn)作。

(3) 明確前后臺(tái)活動(dòng)

一方面，需要明確和用戶接觸的前臺(tái)活動(dòng)有哪些，Uber打車服務(wù)中和用戶產(chǎn)生接觸的主要為司機(jī)及車輛，因此需要確保司機(jī)是合格的、車輛內(nèi)部的環(huán)境是干凈舒適的，同時(shí)司機(jī)在與用戶接觸的過程中需要提供禮貌的問候和交流，滿足用戶在乘車過程中的要求，完成乘車費(fèi)用的收取，提醒用戶離開前帶好隨身物品，以及評(píng)價(jià)乘客等。

另一方面，用戶對(duì)后臺(tái)的流程可能并不了解，但需要明確哪些后臺(tái)活動(dòng)和支持會(huì)對(duì)用戶產(chǎn)生影響。比如在用戶下單時(shí)能夠自動(dòng)獲取用戶定位，告知用戶預(yù)期的時(shí)間和價(jià)格，以及發(fā)送給用戶司機(jī)的狀態(tài)等。

在明確前后臺(tái)活動(dòng)時(shí)，我們可以以用戶歷程為線，分步驟進(jìn)行分析，確保每個(gè)環(huán)節(jié)中涉及到的前后臺(tái)活動(dòng)沒有被遺漏。

(4)明確關(guān)鍵觸點(diǎn)

在服務(wù)藍(lán)圖中我們可以標(biāo)注用戶與服務(wù)的主要接觸點(diǎn)，針對(duì)觸點(diǎn)進(jìn)行設(shè)計(jì)是提升服務(wù)體驗(yàn)的一個(gè)重要和有效的手段。

在Uber打車服務(wù)中還有一些需要注意的觸點(diǎn)，一是等待時(shí)間，這包括用戶發(fā)起乘車請(qǐng)求后、付款時(shí)以及評(píng)價(jià)司機(jī)時(shí)，等待時(shí)間是造成用戶體驗(yàn)較差的一個(gè)原因，因此需要注意標(biāo)注出這些觸點(diǎn)，并想辦法優(yōu)化，在服務(wù)設(shè)計(jì)中需要注意相關(guān)環(huán)節(jié)的應(yīng)盡量簡單，減少用戶的等待。另外需要注意的是會(huì)對(duì)體驗(yàn)影響較大的觸點(diǎn)，如司機(jī)態(tài)度不友好、乘客下車時(shí)忘記帶隨身物品等，可能造成失敗的服務(wù)體驗(yàn)的觸點(diǎn)應(yīng)該精心地去設(shè)計(jì)，避免這樣的情況發(fā)生。

通過以上過程我們完成了Uber服務(wù)藍(lán)圖的繪制，從中可以獲取到Uber打車服務(wù)的整體概貌及其相互關(guān)系。

///

結(jié)語

服務(wù)設(shè)計(jì)的思維能夠幫助我們從全局的角度去審視和思考，發(fā)現(xiàn)更多改善服務(wù)的可能性，從而為用戶提供更好的體驗(yàn)。因此對(duì)于產(chǎn)品和設(shè)計(jì)等相關(guān)人員來說，不能僅僅把目光放在產(chǎn)品本身，而是要從服務(wù)的角度去正確看待產(chǎn)品和用戶的關(guān)系，以用戶為中心，找到用戶與產(chǎn)品的每一個(gè)接觸點(diǎn)來進(jìn)行服務(wù)設(shè)計(jì)，這樣才能保證用戶在整個(gè)流程中都能得到好的體驗(yàn)。

文章來源：站酷  作者：百度MEUX

藍(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ù)

2021年的第一篇萬字長文，文章主題是一次偶然的反思中總結(jié)出的設(shè)計(jì)師思維進(jìn)階的過程，詳細(xì)講述了我在兩年間從一名應(yīng)屆非科班設(shè)計(jì)師成長為一名高級(jí)體驗(yàn)設(shè)計(jì)師的思維進(jìn)階過程。與一篇UI教程、一篇交互分析的文章不同，這篇文章希望能夠從底層的思維層面幫助你明確自己的狀態(tài)，并提供一個(gè)快速進(jìn)階的思路，所謂授人以魚不如授人與魚正是這個(gè)道理。

一：前言：靈感與反思 

靈感始末

最初，在一個(gè)偶然的機(jī)會(huì)讀到一本規(guī)范相關(guān)的書籍，然后我開始反思自己是否有積累成系統(tǒng)的設(shè)計(jì)規(guī)范、設(shè)計(jì)技能樹，為了驗(yàn)證這一點(diǎn)，我便以設(shè)計(jì)一個(gè)彈窗為例子開始模擬演繹，演繹完畢后進(jìn)一步思考，我是如何積累這些方法論或思維模型的？正因此發(fā)現(xiàn)了我作為非科班設(shè)計(jì)師，從最初開始自學(xué)設(shè)計(jì)到如今晉升到高級(jí)體驗(yàn)設(shè)計(jì)師的思考方式的轉(zhuǎn)變。進(jìn)一步從現(xiàn)象中探究原因，于是輸出了本文。

如何設(shè)計(jì)一個(gè)彈窗？  

在做任何需求的時(shí)候，甚至是一個(gè)極小的需求，你有沒有持續(xù)思考過？有沒有進(jìn)一步思考過？又有沒有刻意、主動(dòng)完善設(shè)計(jì)思路，積累思考模型？如果沒有，你可以從接下來這個(gè)思考案例中反思一些東西。

設(shè)計(jì)彈窗時(shí)，我畫的第一個(gè)元素——彈窗的矩形背景時(shí)，是如何思考的，考慮了哪些元素。進(jìn)一步設(shè)計(jì)我還要考慮哪些因素？下面是我的瞬時(shí)思考能整理的有效信息。

方法1：根據(jù)彈窗內(nèi)容進(jìn)行界定（根據(jù)內(nèi)容極限情況，及你的設(shè)計(jì)系統(tǒng)定義的間距來控制整個(gè)彈窗的尺寸）

方法2：根據(jù)固定比例，主要適用于移動(dòng)端，例如3比4的矩形比例較美觀，計(jì)算彈窗面積與屏幕整體面積的比例、計(jì)算留白與彈窗的比例、參考黃金比例Golden Ratio、白銀比例Silver Ratio等。 

方法3：根據(jù)你的系統(tǒng)定義的柵格進(jìn)行界定，如小彈窗使用1/4,1/3,1/2，大彈窗使用1/2,2/3,3/4柵格。

方法4：柵格+比例，方法3界定寬度，方法2界定高度 。

更上層規(guī)則

設(shè)計(jì)延展性：考慮彈窗內(nèi)的內(nèi)容發(fā)生變化時(shí)的自適應(yīng)情況，內(nèi)容過多的極限情況/內(nèi)容過少的極限情況。 自適應(yīng)的規(guī)則，彈窗窗口尺寸的延展方式（橫向拓展/縱向拓展）

交互：彈窗又叫模態(tài)視圖，其通過遮罩突出彈窗視區(qū)，在蒙層遮罩上方的最高層，根據(jù)通用規(guī)則，大部分情況我們不應(yīng)當(dāng)在彈窗上再次疊加界面層。若彈窗場景下有新的縱深層，如下一級(jí)操作或內(nèi)容界面，此時(shí)如何處理？

如下方，PC端google drive，就在結(jié)構(gòu)上使用類平級(jí)跳躍的形式來“借面板”解決新的操作需求。

而再下方的IOS使用的bottom sheet則采用了完全不同的解決方案，表面上似乎是違背了彈窗模態(tài)上重復(fù)疊加的規(guī)則，但在移動(dòng)端一屏僅僅解決一個(gè)問題、完成一個(gè)任務(wù)的語境下，反而更加合理。（而這些成熟的模式、范式，或者說設(shè)計(jì)單元，正是在主動(dòng)思考和被動(dòng)思考階段設(shè)計(jì)師需要積累的設(shè)計(jì)經(jīng)驗(yàn)，它們將作為設(shè)計(jì)師知識(shí)庫中的組成部分，指導(dǎo)設(shè)計(jì)并進(jìn)一步提效和促使設(shè)計(jì)合規(guī)）

常規(guī)易用性：如退出機(jī)制——關(guān)閉的解決方案，通過關(guān)閉按鈕退出，那關(guān)閉按鈕尺寸在當(dāng)前彈窗尺寸下定義為多少合適，視覺尺寸與hover實(shí)際可點(diǎn)擊尺寸分別是多少？PC端是否只能使用關(guān)閉按鈕退出？點(diǎn)擊空白區(qū)域退出是否更，如下方的dribble，點(diǎn)擊上方黑色空白區(qū)域即可退出，而無相關(guān)經(jīng)驗(yàn)的用戶也可以在右上角看到關(guān)閉icon的暗示線索。

場景與業(yè)務(wù)背景：詳細(xì)了解當(dāng)前需求的業(yè)務(wù)背景與場景，進(jìn)一步概覽整體業(yè)務(wù)背景，即兼顧其他可能性的業(yè)務(wù)場景。如我設(shè)計(jì)的B端系統(tǒng)包括辦公室類工作場景，同時(shí)也包括站立、遠(yuǎn)距離觀看屏幕的工作場景，這將涉及到信息能否直觀清晰的被傳達(dá)、獲取。當(dāng)前需求的業(yè)務(wù)是主流場景？可向上向下兼顧大部分同系統(tǒng)的其他業(yè)務(wù)場景？還是無法兼顧而需要同時(shí)列出更多場景來制定通用規(guī)則？以我所設(shè)計(jì)的B端系統(tǒng)為例，較高頻的出現(xiàn)在彈窗下存在下一級(jí)操作或展示頁面的場景，因此我考慮在工作空閑時(shí)輸出一份彈窗場景下有縱深的下一級(jí)信息或操作的解決方案，并將其作為產(chǎn)品相同場景的應(yīng)用解決方案。

視覺合規(guī)性：保證主要信息的對(duì)比度，清晰度，保證所有信息傳遞和展示時(shí)的節(jié)奏和梯度優(yōu)先級(jí)。從字號(hào)到字重再到段落行高間距等，從彈窗中ICON的樣式選擇，到Icon語義清晰度等。

...

如果進(jìn)一步思考，其實(shí)可以思考more and more。你會(huì)發(fā)現(xiàn)，從基礎(chǔ)的結(jié)構(gòu)涉及的柵格，到基礎(chǔ)的視覺合規(guī)性涉及到的字體設(shè)計(jì)、icon設(shè)計(jì)。再到交互涉及到的典型設(shè)計(jì)單元，通用交互模型范式等，在設(shè)計(jì)一項(xiàng)內(nèi)容前，我們有很多的思考空間，或者稱之為思考機(jī)會(huì)點(diǎn)更為合適。將充足的思考納入設(shè)計(jì)過程后，初期設(shè)計(jì)時(shí)間線被拉長，但長遠(yuǎn)來看避免了思慮不足引發(fā)的風(fēng)險(xiǎn)與反復(fù)更改的成本，合理的設(shè)計(jì)預(yù)測與分析則向上向下兼容未來場景，提高設(shè)計(jì)輸出物的通用性與成效，即所謂的磨刀不誤砍柴工。

那么這樣成熟（我自己其實(shí)是偽成熟，還不夠完善和系統(tǒng)）的思考過程，分析過程是如何學(xué)習(xí)或者說培養(yǎng)的？

二：設(shè)計(jì)思考的三個(gè)階段

這其實(shí)是我接下來要講的正題，我將設(shè)計(jì)中的思考分為三個(gè)階段，無思考——主動(dòng)思考——被動(dòng)思考，這是一個(gè)初期線性發(fā)展，后期循環(huán)迭代的過程。其實(shí)我定義這一套思考階段的分級(jí)是在短暫的靈感爆發(fā)后立即輸出的，來源于我對(duì)自己2年間從一個(gè)非科班新手到如今高級(jí)體驗(yàn)設(shè)計(jì)師思考邏輯的發(fā)展變化的回顧。我發(fā)現(xiàn)其確實(shí)有跡可循，在地鐵上很興奮很興奮的頭腦沸騰過程中快速記錄下大綱，到了工位立即記錄并輸出。 

無思考階段

大意為，新手設(shè)計(jì)師，或沒有刻意練習(xí)、思考、總結(jié)的習(xí)慣的設(shè)計(jì)師，最初由于沒有通用的設(shè)計(jì)經(jīng)驗(yàn)、沒有相關(guān)成熟設(shè)計(jì)模型或組件與設(shè)計(jì)單元的使用和設(shè)計(jì)經(jīng)驗(yàn)，因此設(shè)計(jì)一個(gè)新內(nèi)容實(shí)際為從0開始，此時(shí)設(shè)計(jì)師可能會(huì)單憑直覺 隨意設(shè)計(jì)，例如設(shè)計(jì)彈窗就隨便畫一個(gè)矩形，然后隨機(jī)調(diào)整?；蛘呤褂贸墒斓慕M件系統(tǒng)，直接套用，純粹執(zhí)行。這就是處于 0思考階段，憑直覺設(shè)計(jì)（注意和直覺性設(shè)計(jì)區(qū)分開，直覺性設(shè)計(jì)是從用戶的維度定義的，即用戶可以單憑直覺理解設(shè)計(jì)，這也是我們常說的可供性"affordance"原理）

主動(dòng)思考階段

而主動(dòng)思考階段的起點(diǎn)是，隨著設(shè)計(jì)師接觸的工作范圍、工作內(nèi)容、合作對(duì)象的擴(kuò)大或增加，及接觸同類工種（其他設(shè)計(jì)師、設(shè)計(jì)leader）的輸出思考過程、輸出物、行為模式、思維模型等等設(shè)計(jì)價(jià)值觀與執(zhí)行模式等信息后。 

前者會(huì)使新手設(shè)計(jì)師（或沒有有意識(shí)的反思、總結(jié)沉淀的初中級(jí)設(shè)計(jì)師，或剛剛轉(zhuǎn)換行業(yè)的各等級(jí)設(shè)計(jì)師）逐漸暴露并意識(shí)到自己的問題，大概率可能涉及到輸出物質(zhì)量、規(guī)范性、平臺(tái)或行業(yè)壁壘造成的經(jīng)驗(yàn)缺失等。

后者則是一個(gè)對(duì)比與發(fā)現(xiàn)的過程，即接觸到更優(yōu)質(zhì)的輸出物，更合規(guī)的輸出過程，更的設(shè)計(jì)流程、協(xié)作流程等等。可能是被動(dòng)接受的，如leader或同事的分享，及日常工作中為提高團(tuán)隊(duì)整體效率而被灌輸?shù)男碌墓ぷ鞣椒ê瓦M(jìn)入新公司要強(qiáng)制適應(yīng)的新的工作流，也可能是主動(dòng)接受，如發(fā)現(xiàn)同事設(shè)計(jì)到輸出的質(zhì)量和效率等遠(yuǎn)優(yōu)于自身而自發(fā)去了解，學(xué)習(xí)。

因此，在主動(dòng)思考階段，會(huì)有一個(gè)從發(fā)現(xiàn)問題到解決問題的過程，是不是和設(shè)計(jì)本身的職能很像，而在這個(gè)過程中，設(shè)計(jì)師自身就是被設(shè)計(jì)的對(duì)象，即如何解決自己身上存在的問題？如何使自己變得更完善更優(yōu)秀？

你可以回顧下，在你初入行業(yè)時(shí)，最熱情的接納各種信息、知識(shí)、經(jīng)驗(yàn)的階段，你當(dāng)時(shí)的狀態(tài)是什么樣的？概括來講就是遇到感興趣的內(nèi)容-發(fā)現(xiàn)自己在此間的不足-了解學(xué)習(xí)并掌握。從基礎(chǔ)的某個(gè)視覺效果的實(shí)現(xiàn)方式，到某個(gè)設(shè)計(jì)方法論、某個(gè)解決典型問題的交互設(shè)計(jì)等。

主動(dòng)思考階段與興趣（對(duì)某個(gè)領(lǐng)域的衷情）、個(gè)人行為習(xí)慣（自學(xué)習(xí)慣，求知與自發(fā)研究的習(xí)慣）、周邊環(huán)境等因素有關(guān)。因此核心是與本人、其他個(gè)人（同事，設(shè)計(jì)圈關(guān)系人）、團(tuán)隊(duì)相關(guān)。某些人天生對(duì)未知事物、信息及技能有濃厚的興趣，所以會(huì)自發(fā)的廣泛接收各種新的信息，并在這個(gè)過程中養(yǎng)成思考總結(jié)的習(xí)慣（比如在下），同理，個(gè)人在大學(xué)期間，甚至成長過程中有養(yǎng)成良好的自學(xué)習(xí)慣，有訂立目標(biāo)并逐步實(shí)現(xiàn)的習(xí)慣，他們會(huì)長期甚至一直處于主動(dòng)思考階段。另一種情況則是周邊環(huán)境，社交關(guān)系人對(duì)你所產(chǎn)生的主動(dòng)及被動(dòng)的影響，如leader布置課題及學(xué)習(xí)計(jì)劃，同事，好友，行業(yè)人員的協(xié)作共創(chuàng)活動(dòng)，分享會(huì)等。

所以，主動(dòng)思考階段應(yīng)該是優(yōu)秀設(shè)計(jì)師需要長期自發(fā)維持的一個(gè)設(shè)計(jì)狀態(tài)，持續(xù)的發(fā)現(xiàn)身邊的問題，發(fā)現(xiàn)自身的不足，發(fā)現(xiàn)新內(nèi)容新趨勢新動(dòng)態(tài)。并在發(fā)現(xiàn)新的內(nèi)容并與自身能力模型對(duì)比的過程中，發(fā)現(xiàn)不足并持續(xù)思考和輸入信息，反思，輸入，鞏固，沉淀。是一個(gè)升級(jí)打怪的過程更是一個(gè)知識(shí)資本的原始積累階段，與無思考階段相比，由于它是一個(gè)主動(dòng)，刻意學(xué)習(xí)的過程，因此積累知識(shí)的效率要遠(yuǎn)遠(yuǎn)高于懵懂狀態(tài)的初級(jí)設(shè)計(jì)師。（這應(yīng)該也能解釋為什么一些沒有進(jìn)入主動(dòng)思考階段的設(shè)計(jì)師，工作四五年卻被一些一兩年的新人設(shè)計(jì)師趕超）。

從新人設(shè)計(jì)師“無思考”階段到主動(dòng)思考階段關(guān)系到一個(gè)設(shè)計(jì)師能否完成初級(jí)到中級(jí)的進(jìn)階。主要差別則是輸出物的不確定性（初級(jí)）與輸出質(zhì)量趨于穩(wěn)定并持續(xù)迭代提升（中級(jí)）。

這個(gè)思考階段線性過程的第一個(gè)門檻，雖然是初中級(jí)設(shè)計(jì)師面臨的門檻，卻是能持續(xù)影響設(shè)計(jì)師整個(gè)設(shè)計(jì)生涯的關(guān)鍵轉(zhuǎn)型點(diǎn)，奇異點(diǎn)。就像先賺它一個(gè)億中所謂的一個(gè)億啟動(dòng)資金?？邕^這個(gè)門檻，設(shè)計(jì)師會(huì)迎來第一個(gè)爆發(fā)期，中級(jí)設(shè)計(jì)師我的理解是下限清晰，上限無窮。即在主動(dòng)思考階段，設(shè)計(jì)師可以將個(gè)人設(shè)計(jì)能力，從技巧到方法推動(dòng)到一個(gè)較高上限的地步，概括定義———擁有在從事行業(yè)領(lǐng)域內(nèi)輸出高質(zhì)量設(shè)計(jì)方案的能力。

如何跨過新手期，從無思考到主動(dòng)思考？

刻意練習(xí)與學(xué)習(xí)

最優(yōu)解是從興趣到發(fā)現(xiàn)，即培養(yǎng)興趣，調(diào)動(dòng)興趣去開展某個(gè)內(nèi)容或者技能的研究學(xué)習(xí)，并逐步掌握為自身技能樹的一部分。次解則是從目標(biāo)到強(qiáng)制規(guī)劃自我再到研究學(xué)習(xí)和逐步掌握。以興趣為老師是最易收獲的方法，但確定目標(biāo)并刻意學(xué)習(xí)才是大多數(shù)人要走的路。完美解則是興趣驅(qū)動(dòng)同時(shí)嚴(yán)格規(guī)劃。在我作為非科班設(shè)計(jì)師開始自學(xué)到工作的早期，每天固定不變的是大量瀏覽作品，大量閱讀文章，大量練習(xí)技巧，后面逐漸選擇性瀏覽，選擇性閱讀，選擇性練習(xí)。這期間發(fā)生了什么？是綜合當(dāng)前工作場景和設(shè)計(jì)趨勢等各方條件后的縝密思考所做的決策，也就是一個(gè)反思的過程，從發(fā)散到收束，以提高在當(dāng)前工作場景下的個(gè)人能力，集中精力在核心能力的提升上。

也是這種能力使我快速B端轉(zhuǎn)型C端，使我在上手新軟件Figma后由一個(gè)新手使用者快速蛻變?yōu)橹v師、分享輸出者?？桃饩毩?xí)和學(xué)習(xí)的能力與傾向，應(yīng)當(dāng)在主動(dòng)思考階段養(yǎng)成為習(xí)慣。

What——How——Why

從淺層思考到深層思考，最簡單的就是所謂的黃金圈法則。What僅僅讓你了解到所見是什么,能提高你的審美，積累設(shè)計(jì)相關(guān)的表層信息。而當(dāng)你思考How時(shí)，你將掌握如何實(shí)現(xiàn)該效果的能力。再進(jìn)一步，當(dāng)你開始思考Why時(shí)，你終于探尋到設(shè)計(jì)的本質(zhì)，該設(shè)計(jì)是在遇到了一個(gè)什么設(shè)計(jì)課題、問題的基礎(chǔ)上提出的，解決了什么問題，如何解決的，有沒有更優(yōu)解？目前的解法能否納入自己的知識(shí)庫？

T型構(gòu)建能力模型

T型中縱深為你所對(duì)應(yīng)的領(lǐng)域、行業(yè)、業(yè)務(wù)強(qiáng)關(guān)聯(lián)的能力。 以UIUX為例，其中又以基礎(chǔ)UI界面輸出能力為例。

視覺：布局結(jié)構(gòu)、柵格、字體、配色、間距、ICON及插畫繪制、對(duì)應(yīng)平臺(tái)尺寸規(guī)范...

交互：信息架構(gòu)、業(yè)務(wù)梳理、導(dǎo)航設(shè)計(jì)、流程設(shè)計(jì)、原型設(shè)計(jì)、交互演繹

業(yè)務(wù)：當(dāng)前從事行業(yè)、細(xì)分領(lǐng)域、細(xì)分到業(yè)務(wù)的理解程度，細(xì)分需求的業(yè)務(wù)背景的理解程度

橫向?yàn)橥卣鼓芰?，通用能力如?jīng)常講的共情能力，溝通能力，協(xié)作能力，邏輯思維能力，復(fù)盤輸出能力等等。除此之外還有特殊能力，比如UI UX以插畫 ，3D作為特殊能力項(xiàng)。

關(guān)注環(huán)境

在最初定義主動(dòng)思考階段時(shí)，我就講過個(gè)人覺醒主動(dòng)思考的過程中，他人和環(huán)境的影響因素十分關(guān)鍵，因?yàn)檫@是一個(gè)發(fā)現(xiàn)不足然后去解決問題的過程。整體環(huán)境如整個(gè)大的設(shè)計(jì)團(tuán)隊(duì)，及細(xì)分的每個(gè)設(shè)計(jì)組，從小環(huán)境到大環(huán)境都有相當(dāng)多的團(tuán)隊(duì)沉淀和個(gè)人沉淀可以供你吸收成長。如我們?cè)O(shè)計(jì)團(tuán)隊(duì)定期舉辦的月度會(huì)議包含超高質(zhì)量的分享，公共Drive保存有設(shè)計(jì)團(tuán)隊(duì)成立來的所有設(shè)計(jì)輸出積淀。再如你的設(shè)計(jì)小組的定期分享，以及你身邊擁有個(gè)人特長能力的同事們，關(guān)注優(yōu)秀的內(nèi)容，優(yōu)秀的解決問題的思路，身邊就是老師，萬物都是書。例如我從C端轉(zhuǎn)型B端后，在一兩個(gè)月內(nèi)快速融入團(tuán)隊(duì)，期間從不同的同事身上學(xué)到了時(shí)間管理（正經(jīng)的）、項(xiàng)目管理、規(guī)范體系的制定等特長能力，而我給團(tuán)隊(duì)成員的反饋是智能組件系統(tǒng)的制定方法同時(shí)搭建了一套常用智能組件，大大提升了復(fù)用界面的設(shè)計(jì)效率，至少百分五十以上。沒有對(duì)應(yīng)的環(huán)境和社會(huì)關(guān)系人，靠自己悶頭苦學(xué)很難有這樣的效果 。

善用工具

這里專指記錄，輸出類工具，例如印象筆記。從舊的設(shè)計(jì)過程中獲得收獲與經(jīng)驗(yàn)的核心在于復(fù)盤。忌諱對(duì)所知和所得模棱兩可，因此需要在記錄，總結(jié)的復(fù)盤過程中真正鞏固從設(shè)計(jì)思考和實(shí)踐中獲得的反饋，并進(jìn)一步加深為自身的持續(xù)性積淀。沒有復(fù)盤過的設(shè)計(jì)師可能不會(huì)意識(shí)到，你的每一個(gè)需求設(shè)計(jì)經(jīng)過一次復(fù)盤后都有可能發(fā)現(xiàn)新的問題，思慮不足的點(diǎn)或者仍然未解決的痛點(diǎn)等，當(dāng)然也很可能發(fā)現(xiàn)能持續(xù)復(fù)用的思路、設(shè)計(jì)模塊等優(yōu)質(zhì)資源。

除了筆記類工具，公開分享甚至私人交流都可以作為復(fù)盤工具，在這個(gè)過程中你會(huì)回顧自己的設(shè)計(jì)流程和思考過程，并在言辭交鋒間發(fā)掘新的機(jī)會(huì)點(diǎn)。因此當(dāng)你完成一次自我感覺良好的需求設(shè)計(jì)乃至小的版本迭代后，嘗試著與身邊的工具人同事溝通，嘗試在設(shè)計(jì)小組內(nèi)分享，在籌備分享與交流思路時(shí)，對(duì)于該需求的設(shè)計(jì)思路便躍然而紙上了。

被動(dòng)思考階段

被動(dòng)思考階段有兩個(gè)核心特征，這里的被動(dòng)不是指傾向性，而是指無意識(shí)且自動(dòng)處理信息的狀態(tài)。可以理解為游戲中的被動(dòng)技能。

第一個(gè)特征，即達(dá)到在主動(dòng)思考的基礎(chǔ)上，持續(xù)積累和迭代知識(shí)庫的信息，然后將設(shè)計(jì)規(guī)范，典型范式，通用經(jīng)驗(yàn)思考模型等內(nèi)化后的階段。

何謂內(nèi)化，抓起超燙的茶杯會(huì)自動(dòng)放開手，反應(yīng)速度不會(huì)超過零點(diǎn)幾秒，這就是人自我保護(hù)機(jī)制的內(nèi)化，即整個(gè)過程已經(jīng)不需要刻意去思考和醞釀，而是在無意識(shí)的過程中自發(fā)的做出反應(yīng)，完成系統(tǒng)的思考并形成一個(gè)規(guī)范的方案建議。

與主動(dòng)思考階段相比，主要差別在于對(duì)已有能力的使用熟練度，調(diào)用效率，及思考的全局性。

說的通俗些，遇到一個(gè)設(shè)計(jì)問題時(shí)，處于主動(dòng)思考階段的設(shè)計(jì)師會(huì)在遇到設(shè)計(jì)問題后，從過往經(jīng)驗(yàn)，相似解決問題的思路中篩選，尋找一個(gè)合適的解，這些解是零散的，且需要設(shè)計(jì)師主動(dòng)去回憶甚至瀏覽歷史文件來搜集。而對(duì)于被動(dòng)思考階段的設(shè)計(jì)師來講，若是面對(duì)一個(gè)較為熟悉的設(shè)計(jì)問題，如一個(gè)彈窗設(shè)計(jì)，此時(shí)該設(shè)計(jì)的解答方案會(huì)自然而然的出現(xiàn)在腦海，并且存在多個(gè)方案進(jìn)行對(duì)比，并且每個(gè)方案都完整全面，從業(yè)務(wù)的考量到體驗(yàn)的權(quán)衡，再到業(yè)務(wù)與體驗(yàn)的相互平衡。方案如何推進(jìn)，按照經(jīng)驗(yàn)會(huì)遇到哪些阻力，需要說服哪些利益相關(guān)者，案例如何演示，有否有設(shè)計(jì)還原類風(fēng)險(xiǎn)？如何解決等等。

因此，處于被動(dòng)思考階段的設(shè)計(jì)師能夠自然并的調(diào)用個(gè)人積累的成體系的技能和經(jīng)驗(yàn)以及執(zhí)行和推進(jìn)設(shè)計(jì)的流程，從輸出設(shè)計(jì)到推動(dòng)方案落地一氣呵成，宛若天成。在沒有一定思考和實(shí)踐經(jīng)驗(yàn)積累的情況下，主動(dòng)思考階段的設(shè)計(jì)師則可能需要花費(fèi)成倍的時(shí)間在方案探索輸出再到落地的過程上，期間遇到的典型性問題則會(huì)一點(diǎn)點(diǎn)被消化并推動(dòng)設(shè)計(jì)師向被動(dòng)型晉升。

第二個(gè)特征則是視野與維度，視野也就是常掛在我們口中的全鏈路視野，維度則指的是看待問題或方案的更高維度。這一特征使用實(shí)際案例來說明或許更易于理解，

案例1微信紅包早期推廣的案例

微信紅包作為微信的一個(gè)核心功能，初期花費(fèi)大量成本推廣并成為一個(gè)現(xiàn)象級(jí)“產(chǎn)品”，作為產(chǎn)品設(shè)計(jì)師，底層的視覺設(shè)計(jì)師與交互設(shè)計(jì)師在產(chǎn)品視覺交互邏輯等方面投入較大精力，他們只需要將自己負(fù)責(zé)的需求完成，輸出達(dá)標(biāo)的基礎(chǔ)方案，可能會(huì)聚焦于如何設(shè)計(jì)紅包樣式更易于理解，如何設(shè)計(jì)紅包樣式能賦予其可供性，幫助用戶快速理解產(chǎn)品與現(xiàn)實(shí)中的紅包的映射關(guān)系，在進(jìn)一步可能要考慮不同年齡階層對(duì)紅包樣式的接受度，而交互設(shè)計(jì)師可能要考慮如何縮短用戶路徑，使紅包開啟的愉悅感能夠最的被用戶觸達(dá)。

而此時(shí)產(chǎn)品負(fù)責(zé)人是如何考慮該紅包功能設(shè)計(jì)的？答案是通過微信病毒式傳播，的綁定銀行卡，為微信支付業(yè)務(wù)鋪路。綁卡才是當(dāng)時(shí)該產(chǎn)品設(shè)計(jì)的核心。這就是維度的差異，同一個(gè)產(chǎn)品，不同的崗位不同的身份，不同階段的設(shè)計(jì)師看到的會(huì)是不同的維度視角，更高的維度往往意味著更長遠(yuǎn)的考慮，意味著碾壓式的決策。“為支付業(yè)務(wù)奠基”與“糾結(jié)紅包是否要帶花紋”相比，維度視野的差距，高下立判。

案例2與設(shè)計(jì)團(tuán)隊(duì)負(fù)責(zé)人評(píng)審 Logo方案

上圖是該提案的部分PPT，在一次品牌LOGO提案的評(píng)審過程中，我花費(fèi)較多的精力去宣講Logo的品牌理念和故事，分析圖形的演化過程，同時(shí)輸出多個(gè)方案用于對(duì)比。設(shè)計(jì)負(fù)責(zé)人一針見血的指出幾個(gè)核心問題。

第一點(diǎn)，在設(shè)計(jì)過程中不要過早的給圖形設(shè)計(jì)融入顏色，顏色是第二層信息會(huì)干擾設(shè)計(jì)過程，當(dāng)然也會(huì)干擾需求方的理解過程。一次只闡述一件事情，設(shè)計(jì)圖形，講解圖形就使用灰度模式。

第二點(diǎn)，給群體及普通需求方宣講可以使用較多包裝或附上比較詳細(xì)的設(shè)計(jì)思路，而需要給企業(yè)級(jí)Boss過稿時(shí)則切記簡化一切過程，開門見山，直接鋪陳LOGO圖形，對(duì)不同利益相關(guān)者采用不同的策略。

第三點(diǎn)，該品牌LOGO的單獨(dú)設(shè)計(jì)輸出物看起來不錯(cuò)，但需要置于我們跨國的多個(gè)產(chǎn)品品牌構(gòu)成的總的品牌體系中，判斷其品牌一致性等問題，一致的產(chǎn)品品牌效果不僅能闡釋品牌歸屬，同時(shí)也能很大程度上降低推廣成本。作為設(shè)計(jì)師，既要細(xì)化到每一像素，又要高屋建瓴從全局層面考慮問題。

當(dāng)你收到的反饋或建議都是你從來沒有考慮到的問題和想法時(shí)，這有可能就是維度的差異。

資源3：周陟 《設(shè)計(jì)師如何解決全過程問題》

周陟分享的《設(shè)計(jì)師如何解決全過程問題》是一個(gè)全局性與高緯度思考的典型案例。該分享詳細(xì)的闡述了設(shè)計(jì)師如何從產(chǎn)品的底層框架，結(jié)合業(yè)務(wù)的思考，市場趨勢、歷史數(shù)據(jù)對(duì)比分析，定義核心設(shè)計(jì)問題并探索設(shè)計(jì)方案的過程。

其中即有低維度的設(shè)計(jì)師底層能力方面的闡述，如從產(chǎn)品用戶體驗(yàn)五個(gè)層面的設(shè)計(jì)思考（戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、視覺層）到具體的可讀性、視覺舒適度等具體的設(shè)計(jì)問題。更有高緯度的市場銷售趨勢、不同手機(jī)廠商間的用戶流失流轉(zhuǎn)情況、市占率、信任度等業(yè)務(wù)層思考。從上帝視角，全覽產(chǎn)品各個(gè)階段的場景及問題，并在對(duì)比分析中聚焦核心問題，探索方案去持續(xù)解決。 

《設(shè)計(jì)師如何解決全過程問題》資源鏈接

我們可以用一個(gè)超級(jí)樸實(shí)的方式來闡述主動(dòng)思考階段和被動(dòng)思考階段的差異。當(dāng)一個(gè)設(shè)計(jì)師處于主動(dòng)思考階段，你可以把他置于他所熟悉的設(shè)計(jì)領(lǐng)域，他將會(huì)輸出高質(zhì)量的設(shè)計(jì)物，能夠較好的解決當(dāng)前遇到的設(shè)計(jì)問題，體驗(yàn)問題。

而一個(gè)被動(dòng)思考階段的設(shè)計(jì)師，你可以把他置于有一定相關(guān)性的各個(gè)設(shè)計(jì)領(lǐng)域（比如互聯(lián)網(wǎng)方向的設(shè)計(jì)不能被置于廣告方向），他會(huì)在較短的時(shí)間內(nèi)理解不同領(lǐng)域的特征和需求，并輸出高質(zhì)量的解決方案，且能夠兼顧各個(gè)利益相關(guān)者，主動(dòng)推動(dòng)產(chǎn)品實(shí)現(xiàn)進(jìn)度，并提前規(guī)避各類問題。這其中的差別在于，是否有自己沉淀的一套解決問題的方法和過程，是否將通用設(shè)計(jì)經(jīng)驗(yàn)系統(tǒng)化，是否有足夠廣闊的視野及更高的維度。這也映射了你是一名所謂的UI設(shè)計(jì)師，還是一名高級(jí)體驗(yàn)設(shè)計(jì)師，前者限制在一個(gè)領(lǐng)域內(nèi)，后者已然破圈。 

如何從主動(dòng)思考階段跨越到被動(dòng)思考階段

在體驗(yàn)設(shè)計(jì)的領(lǐng)域，主動(dòng)思考階段的設(shè)計(jì)師與被動(dòng)思考階段的設(shè)計(jì)師，在單純的設(shè)計(jì)能力上，其實(shí)沒有太大的差距，即輸出物本身沒有太大差距。都能夠快速輸出達(dá)標(biāo)的設(shè)計(jì)方案，解決大部分體驗(yàn)類問題。那么關(guān)鍵差距提現(xiàn)在哪里？

其一是從設(shè)計(jì)到落地的總的效率。主動(dòng)思考階段的設(shè)計(jì)師在整個(gè)設(shè)計(jì)過程中需要頻繁的遇到問題，并陷入陷阱，然后持續(xù)的糾正方案，一步步推進(jìn)，踩著荊棘摸到最終方案所在的那塊石頭。而被動(dòng)思考階段的設(shè)計(jì)師只需要在知識(shí)庫中的成熟方案中選擇一條更加應(yīng)景的路，多個(gè)方案已經(jīng)擺在那里，而設(shè)計(jì)師只需要去考慮低維到高維的一系列影響因素，從基礎(chǔ)體驗(yàn)，用戶習(xí)慣，再到業(yè)務(wù)和戰(zhàn)略上的布局，最終選擇全局視野下最正確的方案。

第二點(diǎn)差距在于可能性，被動(dòng)思考階段的設(shè)計(jì)師有精力和能力去思考如何把方案做到超標(biāo)準(zhǔn)，超出需求本身的要求，超出利益相關(guān)者的期待（如需求方和開發(fā)人員）。我們經(jīng)常會(huì)講行業(yè)標(biāo)準(zhǔn)這個(gè)詞，作為一個(gè)設(shè)計(jì)方案的基礎(chǔ)判斷標(biāo)準(zhǔn)，但行業(yè)標(biāo)準(zhǔn)永遠(yuǎn)不是上限。微信的撤回功能，從僅撤回到撤回后可編輯就是一次體驗(yàn)上的超標(biāo)方案。

第三點(diǎn)則是打通上下游的能力，即涉及到上游的需求理解與轉(zhuǎn)化，詳細(xì)的設(shè)計(jì)項(xiàng)目還會(huì)涉及到用研類信息的接受與轉(zhuǎn)化，下游則涉及到開發(fā)還原的質(zhì)量與效率問題。在有意識(shí)的關(guān)注設(shè)計(jì)全流程和生命周期的情況下，被動(dòng)思考階段的設(shè)計(jì)師可以更輕松的管理設(shè)計(jì)并反饋到整個(gè)項(xiàng)目的開發(fā)周期上。

想要從主動(dòng)思考階段跨越到被動(dòng)思考階段，我總結(jié)以下三個(gè)建議。

從輸入到梳理

首先是核心的底層設(shè)計(jì)能力方面，表面上是基礎(chǔ)能力與通用能力的的刻意學(xué)習(xí)鍛煉，而關(guān)鍵在于對(duì)知識(shí)體系的梳理。在我們初入職場逐漸積累設(shè)計(jì)經(jīng)驗(yàn)的過程中，一些典型的設(shè)計(jì)過程，流程，針對(duì)某個(gè)領(lǐng)域甚至模塊的典型解決方案，將其拆解匯總?cè)缓笫崂矸诸?，不論使用印象筆記等筆記產(chǎn)品，還是思維導(dǎo)圖等腦圖類產(chǎn)品，都能夠幫你實(shí)現(xiàn)這個(gè)目的。

忍受立即獲得解決方案的誘惑

其次，在真正開始做項(xiàng)目時(shí)，主動(dòng)思考，刻意將個(gè)人知識(shí)庫梳理的信息與項(xiàng)目需求進(jìn)行對(duì)照，主動(dòng)回憶和驗(yàn)證積累的方案，盡可能多的羅列場景，羅列可能性，不要被第一時(shí)間想到的方案所誘惑而止于此。設(shè)計(jì)師在遇到一個(gè)設(shè)計(jì)問題后，會(huì)第一時(shí)間想到的方案往往是最普通，未經(jīng)思考的初步方案，但往往該方案可以一定程度上解決當(dāng)前的問題。此時(shí)設(shè)計(jì)師需要強(qiáng)制自己從最簡單的方案中脫離，進(jìn)一步思考，并大量的舉例、演繹，探索更多機(jī)會(huì)點(diǎn)，調(diào)動(dòng)腦海中更多可能性的方案。每當(dāng)想要就此停下時(shí)，反問自己，我能否做的更好，是否有更好的方案可以解決這個(gè)問題。

視野和維度來源于廣泛閱讀、案例、及復(fù)盤

被動(dòng)思考階段的設(shè)計(jì)師橫跨了高級(jí)體驗(yàn)設(shè)計(jì)師到設(shè)計(jì)專家這個(gè)范圍。抵達(dá)這個(gè)階段的設(shè)計(jì)師視野將拓展至整個(gè)企業(yè)機(jī)構(gòu)，而不局限于設(shè)計(jì)團(tuán)隊(duì)的個(gè)人的視野。除了強(qiáng)大的解決設(shè)計(jì)問題的能力，相較于普通設(shè)計(jì)師，他們往往有更高的思考維度，全局性的設(shè)計(jì)視野，此類中后設(shè)計(jì)生命周期中的經(jīng)驗(yàn)往往需要通過閱讀、項(xiàng)目實(shí)踐等多個(gè)方面持續(xù)輸入，然后復(fù)盤并沉淀為自己的經(jīng)驗(yàn)。

因此這要求設(shè)計(jì)師廣泛的閱讀各類設(shè)計(jì)項(xiàng)目總結(jié)，參考實(shí)際案例，并在真實(shí)的項(xiàng)目中持續(xù)計(jì)劃、嘗試、驗(yàn)證，然后復(fù)盤。需要脫離設(shè)計(jì)師基礎(chǔ)能力層面的視野，更多的關(guān)注解決問題的思路與流程，最終掌握的設(shè)計(jì)思路或能力可以稱之為通用性設(shè)計(jì)解決能力。 

當(dāng)然，上面所講的都是我從個(gè)人思考方式的轉(zhuǎn)變中總結(jié)出來的經(jīng)驗(yàn)，其目的是分享設(shè)計(jì)師應(yīng)該如何思考？不同階段應(yīng)該聚焦于哪些問題領(lǐng)域才能最大化提升思考方式的進(jìn)階速度等問題，而不是在講設(shè)計(jì)師如何從初級(jí)進(jìn)階到高級(jí)，進(jìn)階到體驗(yàn)專家（非設(shè)計(jì)師位階的進(jìn)階）。因?yàn)椴煌髽I(yè)對(duì)不同位階、不同專供方向的設(shè)計(jì)師有不同的具體要求，比如設(shè)計(jì)leader可能更傾向于業(yè)務(wù)的理解與把控度，設(shè)計(jì)推進(jìn)，研發(fā)流程中不同團(tuán)隊(duì)成員間的溝通合作等能力 。

如果有關(guān)于此的疑問，我只能以我的理解解答，不論是什么位置的設(shè)計(jì)師，判斷其位置層次的標(biāo)準(zhǔn)必然是由上層的企業(yè)來制定的，而企業(yè)制定規(guī)則的出發(fā)點(diǎn)源于利益本身，換言之，你能獲得的位置和你能夠?yàn)閳F(tuán)隊(duì)和企業(yè)貢獻(xiàn)的利益正相關(guān)，所以我們很容易理解，設(shè)計(jì)師的職業(yè)后期或者用于解決超級(jí)復(fù)雜的設(shè)計(jì)問題， 以對(duì)應(yīng)的價(jià)值映襯其收入，偏具體設(shè)計(jì)能力層面，或者用于承擔(dān)全局性企業(yè)需求，如帶領(lǐng)設(shè)計(jì)團(tuán)隊(duì)支撐某個(gè)業(yè)務(wù)線，偏業(yè)務(wù)理解和統(tǒng)籌方面。

從線性流程到循環(huán)往復(fù)的迭代過程

我們回顧一個(gè)努力的設(shè)計(jì)打工仔的職業(yè)生涯，首先，一個(gè)新手設(shè)計(jì)師從純粹執(zhí)行的無思考階段，進(jìn)階到主動(dòng)思考階段，當(dāng)他的基礎(chǔ)設(shè)計(jì)能力不斷進(jìn)階后，開始拓展視野，思考業(yè)務(wù)，并在大量的項(xiàng)目鍛煉中形成自己的一套成熟的設(shè)計(jì)方法論，從設(shè)計(jì)思考流程到具體的設(shè)計(jì)流程，從而進(jìn)階到被動(dòng)思考階段。但這是一個(gè)理想化的描述，真實(shí)情況是，設(shè)計(jì)師會(huì)在這三個(gè)階段中循環(huán)往復(fù)，而甚至有些設(shè)計(jì)師可能會(huì)在前兩個(gè)階段循環(huán)往復(fù)。

人都有惰性，你我都如此。在主動(dòng)設(shè)計(jì)思考階段，因?yàn)橐淮涡￠L假，因?yàn)榉N種原因，我們可能會(huì)退步回?zé)o思考的階段。持續(xù)性學(xué)習(xí)是一件 令人興奮的事，也是一件需要莫大毅力的事情。技巧經(jīng)驗(yàn)會(huì)隨著時(shí)間消磨，這是設(shè)計(jì)師需要警惕的問題，因?yàn)檫@個(gè)行業(yè)就是如此，我們只能變化，只能持續(xù)不斷的學(xué)習(xí)。

而當(dāng)將經(jīng)驗(yàn)與成體系的思考范式內(nèi)化后，設(shè)計(jì)師會(huì)養(yǎng)成核心的通用設(shè)計(jì)解決問題的能力。此時(shí)，設(shè)計(jì)師期去接觸一個(gè)新的領(lǐng)域，不再需要從0開始，而是可以使用自己積累的通用設(shè)計(jì)能力，來指導(dǎo)和規(guī)范化新的設(shè)計(jì)領(lǐng)域的需求，并快速融入該領(lǐng)域。而新的領(lǐng)域的經(jīng)驗(yàn)與視野會(huì)被納入你的整體設(shè)計(jì)理解中。

從主動(dòng)思考，到經(jīng)驗(yàn)內(nèi)化，不斷脫離舒適區(qū)，納入新的設(shè)計(jì)領(lǐng)域、新的視野維度，在這個(gè)過程中使個(gè)人的通用設(shè)計(jì)能力螺旋進(jìn)步。

最佳啟動(dòng)：消滅設(shè)計(jì)的不確定性

我知道，我的讀者中有很大一批人都處于設(shè)計(jì)能力良莠不齊，沒有系統(tǒng)的設(shè)計(jì)思路與設(shè)計(jì)流程，介于初中級(jí)設(shè)計(jì)師之間的狀態(tài)。而當(dāng)今國內(nèi)的設(shè)計(jì)領(lǐng)域也是如此，初中級(jí)別的設(shè)計(jì)師完全飽和，而企業(yè)對(duì)高級(jí)體驗(yàn)設(shè)計(jì)師又求而不得，這種人才斷層既有培訓(xùn)爆火下的積弊，也和設(shè)計(jì)門檻與崗位收益相關(guān)，大環(huán)境無法改變，能改變的只有自身。

在這里，我總結(jié)一個(gè)更簡單的設(shè)計(jì)思路，只要你按照該方法去執(zhí)行和反思，應(yīng)該會(huì)有很大的收獲。即從今天開始，對(duì)你所接到的每個(gè)設(shè)計(jì)需求都提出唯一一個(gè)標(biāo)準(zhǔn)——消滅不確定性。現(xiàn)在停下來詢問自己，你接到的每個(gè)需求，對(duì)于你輸出的設(shè)計(jì)結(jié)果，你認(rèn)為其最終效果是確定的嗎？換言之，你認(rèn)為你的設(shè)計(jì)真的解決了該需求的問題了嗎？

你只需要把你個(gè)需求設(shè)計(jì)的思考分為設(shè)計(jì)前和設(shè)計(jì)后。

設(shè)計(jì)前請(qǐng)思考，我如何設(shè)計(jì)這個(gè)需求能確定以及肯定的解決這個(gè)問題，沒思考清楚前不要?jiǎng)邮衷O(shè)計(jì)，想到第一個(gè)方案后也不要?jiǎng)邮衷O(shè)計(jì)，繼續(xù)思考，延遲設(shè)計(jì)決策。

如果你乍一想到的方案自己都認(rèn)為模棱兩可，那不要執(zhí)行設(shè)計(jì)。此時(shí)發(fā)揮主觀能動(dòng)性去思考，我如何能夠獲得相關(guān)信息，來輔助我做出這個(gè)設(shè)計(jì)決策，我需要去參考一些競品？我需要列出目前存在的疑問點(diǎn)，或者我無法解決的問題點(diǎn)去詢問設(shè)計(jì)專家設(shè)計(jì)leader？或者我把場景，整體的體驗(yàn)流、用戶操作流都列出來，然后繼續(xù)埋頭探索方案？

千萬千萬不要在方案還沒想清楚前就開始設(shè)計(jì)，這將輸出無意義的方案，且浪費(fèi)大量時(shí)間，千萬千萬不要在想到第一個(gè)方案后立即開始設(shè)計(jì)，這將不會(huì)給你帶來任何進(jìn)步，以后遇到相同場景你也僅有一個(gè)可選方案，千萬千萬不要忽略競品忽略他人閉門造車。

千萬千萬試著思考盡可能多的方案，乃至輸出多個(gè)方案（僅指體驗(yàn)設(shè)計(jì)類，而不是視覺設(shè)計(jì)）。作為體驗(yàn)設(shè)計(jì)師，必須鍛煉的技能是方案演繹能力，在腦海中演繹可能的方案，如果有精力則可以借助工具甚至把演繹過程記錄輸出。  如下方我進(jìn)行的一個(gè)需求的方案演繹與思考。

設(shè)計(jì)前保證方案確定性，第一關(guān)要能夠經(jīng)受自己的邏輯考驗(yàn)，當(dāng)你探索多個(gè)方案后最終確定了一個(gè)符合業(yè)務(wù)場景，同時(shí)體驗(yàn)良好的方案，作為設(shè)計(jì)師自己給該方案打上一個(gè)“確定”的標(biāo)簽，此時(shí)再去執(zhí)行并輸出，而這過程中的思路，從糾結(jié)到?jīng)Q策都是最終設(shè)計(jì)輸出的關(guān)鍵證明，既能提高設(shè)計(jì)說服力，又能鍛煉個(gè)人能力，而這正是初級(jí)設(shè)計(jì)師容易忽略的部分。

設(shè)計(jì)后的確定性則是指，產(chǎn)品還原與產(chǎn)品驗(yàn)證方面。產(chǎn)品還原度是設(shè)計(jì)稿的視覺確定性，確保開發(fā)還原的線上效果與設(shè)計(jì)一致，這不僅僅要靠開發(fā)的努力，更要有設(shè)計(jì)師的具體標(biāo)注說明的輔助。驗(yàn)證則是產(chǎn)品上線后的必要環(huán)節(jié)，不論是預(yù)先根據(jù)業(yè)務(wù)指標(biāo)設(shè)定埋點(diǎn)，還是設(shè)計(jì)師通過各種途徑獲得用戶反饋，最終都要保證你所設(shè)計(jì)的產(chǎn)品體驗(yàn)的確定性是達(dá)標(biāo)的，確定解決了需求提到的問題，確定能滿足用戶需求。若沒有，則重復(fù)這個(gè)過程，重新思考然后設(shè)計(jì)。

作為設(shè)計(jì)師，應(yīng)該理解自己也能作為設(shè)計(jì)對(duì)象。在我看來，設(shè)計(jì)師就是遇到一個(gè)問題解決一個(gè)問題，遇到兩個(gè)解決兩個(gè)，直到面前再也沒有問題。所以當(dāng)不清楚自己該如何設(shè)計(jì)，下一步該如何做時(shí)？你只需要思考，把解決當(dāng)前的迷惑作為一個(gè)需求，去思考，深入思考，列出所有可能性，不管是百度還是詢問同事查閱資料，總歸在思考后，你會(huì)有所收獲。 

結(jié)語

最后，我們一直在思考，在定義，到底什么是設(shè)計(jì)？

我自己一直遵循的理念是——設(shè)計(jì)解決問題，形式追隨功能。

而有人說設(shè)計(jì)是做選擇（決策），有人說設(shè)計(jì)是永遠(yuǎn)做正確的事情。

事實(shí)上這些說法都有其正確性，也都有各自的評(píng)價(jià)標(biāo)準(zhǔn)，因?yàn)閳鼍?，趨勢，市場各種因素都在發(fā)展變化， 設(shè)計(jì)最終要兼顧場景兼顧各種利益相關(guān)者，在正確的時(shí)間做正確的選擇并最終做到正確的事情。

解決問題有多個(gè)方案 ，設(shè)計(jì)師需要在其中做出抉擇，選擇最佳方案，最佳方案如何判斷的？對(duì)當(dāng)下場景，對(duì)主流用戶，對(duì)更多利益相關(guān)者來講是更正確的選擇。那它就是最終方案。

當(dāng)設(shè)計(jì)被置于真實(shí)的環(huán)境，真實(shí)的市場下 實(shí)際上其傾向性和評(píng)價(jià)標(biāo)準(zhǔn)一直在發(fā)展變化從最初重視覺到重體驗(yàn)再到重商業(yè)。設(shè)計(jì)傾向性一直在變就像設(shè)計(jì)潮流，唯一不變的是設(shè)計(jì)師面對(duì)復(fù)雜的場景和問題時(shí)一如既往的優(yōu)雅的解決問題的思路，并幫助設(shè)計(jì)師讓世界變的更美好。

文章來源：UI中國     作者：AI-玲玲

藍(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ì)隨筆：ui用戶界面中的表格設(shè)計(jì)

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

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

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

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

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

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

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

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

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

方法一

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

方法二

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

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

方法三

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

藍(lán)藍(lán)設(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ù)

原創(chuàng)藝仁 藍(lán)藍(lán)設(shè)計(jì) 2020-12-18

      其中，3D成為2021年的主要趨勢，我們?cè)谒械脑O(shè)計(jì)類型中都可以找到它。2021年3D的新穎之處在于應(yīng)用在了UI界面上，而在此之前，UI界面一直被平面設(shè)計(jì)所主導(dǎo)。即將發(fā)布的Mac新操作系統(tǒng)Apple Big Sur也讓3D在UI設(shè)計(jì)中得到更頻繁的使用。

      ios14的界面更新將影響所有的UI設(shè)計(jì)。ios14新推出的Widgets小工具分為大、中、小三種尺寸，用戶可以自由布置界面。因此設(shè)計(jì)師需要設(shè)計(jì)3種樣式的Widgets小工具圖標(biāo)。

       線稿填色這種插畫風(fēng)格的流行在2020年已經(jīng)初見端倪，在2021年也將繼續(xù)流行下去。

      近年來3D風(fēng)靡設(shè)計(jì)界，有一些精致的插畫給我們留下了深刻的印象。簡約而配色鮮明的3D插畫將成為2021年插畫的流行風(fēng)格之一

       時(shí)尚是個(gè)圈，70、80年代懷舊風(fēng)漫畫將在2021年重回潮流。這種經(jīng)典風(fēng)格的插畫特點(diǎn)是使用輪廓、簡單的形狀和一些細(xì)節(jié)填充。

       這種風(fēng)格的插畫非常像凌亂的涂鴉，乍看未完成，但所有的細(xì)節(jié)都是經(jīng)過深思熟慮的。重疊的形狀和強(qiáng)烈的色彩讓這些插畫與眾不同，同時(shí)能有效激發(fā)靈感。

       VFX或視覺，是將現(xiàn)有的鏡頭與計(jì)算機(jī)生成的圖像相結(jié)合，創(chuàng)造出逼真的場景。隨著眾多方便友好的軟件出現(xiàn)，VFX開始在視頻和短片中會(huì)變得更加普及。

       3D影響了所有的設(shè)計(jì)領(lǐng)域，我們甚至可以說，2021年，它主導(dǎo)了幾乎所有的數(shù)字設(shè)計(jì)。隨著虛擬現(xiàn)實(shí)在越來越多的App、網(wǎng)站或軟件中的應(yīng)用，3D也將越來越重要。而設(shè)計(jì)師們可以將3D和攝影或2D結(jié)合起來，創(chuàng)造出一種不同的設(shè)計(jì)效果。

       動(dòng)態(tài)logo已經(jīng)出現(xiàn)了好幾年了，但現(xiàn)在他們被更多的品牌使用，因此非常值得我們的注意。打開App之后，我們首先看到的就是logo，將logo與動(dòng)效結(jié)合能給用戶留下深刻印象，從而更容易記住品牌。

       因?yàn)橐咔楦綦x，很多公司開始投資AR技術(shù)。在未來，我們可以看到，在人工智能和機(jī)器學(xué)習(xí)的幫助下，增強(qiáng)現(xiàn)實(shí)技術(shù)將大規(guī)模應(yīng)用于各個(gè)領(lǐng)域，無論是醫(yī)藥、藝術(shù)、商業(yè)、客戶服務(wù)還是導(dǎo)航。

       排版是設(shè)計(jì)中最重要的元素，有經(jīng)驗(yàn)的設(shè)計(jì)師甚至可以只使用文字排版來設(shè)計(jì)視覺標(biāo)識(shí)。排版對(duì)于建立信息、建立強(qiáng)大的視覺層級(jí)、傳遞信息以及為用戶創(chuàng)造良好的體驗(yàn)都很重要。

       從上世紀(jì)初開始，幾何形狀就已經(jīng)用于視覺藝術(shù)中，盡管這不是一種新的設(shè)計(jì)趨勢，但在2021年的平面設(shè)計(jì)中，無論是海報(bào)、印刷品、包裝還是品牌識(shí)別，都將聚焦于幾何形狀。

       線條藝術(shù)充滿魅力，并可以在各種設(shè)計(jì)領(lǐng)域內(nèi)應(yīng)用。

       疫情讓人們對(duì)環(huán)境保護(hù)格外重視，因此包裝行業(yè)必須開始采取措施，減少對(duì)環(huán)境的影響，使用可生物降解的材料。

       經(jīng)過深思熟慮后設(shè)計(jì)的獨(dú)特插畫可以為你的品牌故事產(chǎn)生廣泛影響。因此你必須謹(jǐn)慎地選擇能夠傳達(dá)你的品牌故事的插畫。它們必須是有意義，并給品牌帶來一致性的。

       在銷售產(chǎn)品時(shí)，用優(yōu)質(zhì)的包裝設(shè)計(jì)講述有關(guān)品牌的迷人故事，能有效激發(fā)出購買欲。包裝上的所有元素都應(yīng)該為客戶帶來獨(dú)特的體驗(yàn)。

       在人人都離不開手機(jī)的時(shí)代，包裝也可以和手機(jī)產(chǎn)生互動(dòng)，比如使用AR等手段創(chuàng)造品牌知名度。

       權(quán)威色彩機(jī)構(gòu) Pantone 公布了2021年度雙流行色：灰+亮麗黃。

       這是繼2016年水晶粉+寧靜藍(lán)之后，第二次推出組合年度色，寓意光明，傳遞力量與希望。灰+亮麗黃這兩個(gè)獨(dú)立的色彩，聯(lián)手打造出夢(mèng)寐以求的色彩組合，像是自然風(fēng)化的巖石上浮起的日出，帶來了一種更深層的體貼和踏實(shí)感，同時(shí)也表現(xiàn)了對(duì)未來充滿希望的樂觀精神。

       當(dāng)人們期望尋求能量來強(qiáng)化自己，克服持續(xù)的不確定感時(shí)，堅(jiān)實(shí)可靠而又熱情洋溢的色調(diào)，恰好能夠滿足我們對(duì)生命力的追求。

       在過去幾年里，潘通的選擇充滿了社會(huì)意義，被看作是對(duì)全球情緒的捕捉。

       目前，已有相關(guān)設(shè)計(jì)產(chǎn)品使用了潘通2021流行色：

       本文藍(lán)藍(lán)設(shè)計(jì)著重介紹一個(gè)未來可以配合3D設(shè)計(jì)趨勢的全新設(shè)計(jì)風(fēng)格-新擬態(tài)設(shè)計(jì)。

       光是人眼感知世界的媒介，溫和柔美的光影變化輔以精致優(yōu)雅的配色紋理展現(xiàn)出真實(shí)世界原本物體的豐富質(zhì)感。光影的把控影響著事物的情感表達(dá)，光影的流轉(zhuǎn)變化傳遞出不同的情緒，同時(shí)也影響人對(duì)事物空間感的判斷。

       新擬態(tài)是一種圖形樣式，其原理是通過簡單富有層次的光影變化為界面的UI元素賦予真實(shí)感。新擬物算擬物風(fēng)格的一種，只不過表現(xiàn)形式相對(duì)特立獨(dú)行，最早出現(xiàn)在國外網(wǎng)站dribbble上,之后陸續(xù)被收錄在2020設(shè)計(jì)趨勢預(yù)測中，在2019年的年末慢慢被大家熟知，討論，重視起來。

       在2020年2月11號(hào)舉行的三星視覺發(fā)布會(huì)使用新擬態(tài)的設(shè)計(jì)手法作為設(shè)計(jì)海報(bào)。帶有漸變的淺灰色背景，結(jié)合富有層次感的光影漸變，充滿未來感。相對(duì)克制的色彩選擇和多角度的光影變化，強(qiáng)調(diào)出產(chǎn)品豐富的質(zhì)感和科技感，簡潔而神秘。

       這是一款多平臺(tái)記錄工具，有道云筆記的擬物化設(shè)計(jì)風(fēng)格相對(duì)謹(jǐn)慎，主要的操作按鈕部分，均采用了“擬物化的”風(fēng)格，但是在大面積的展示區(qū)域和非功能性按鈕依然沿用了簡潔的扁平化設(shè)計(jì)。在保證“新擬物”質(zhì)感的同時(shí)，保證主體內(nèi)容的可閱讀性，和整體頁面的清爽感。

      藍(lán)藍(lán)設(shè)計(jì)也在設(shè)計(jì)項(xiàng)目中結(jié)合目前流行趨勢進(jìn)行探索設(shè)計(jì)，容器元素通過光影的變化，展現(xiàn)出不同的狀態(tài)，通過模擬物理層面“高程”的不同，形成不同的組件狀態(tài)，從而演變成承載各式功能的基本元素。

      在扁平風(fēng)大行其道的當(dāng)下，公眾審美難免已經(jīng)疲勞，設(shè)計(jì)風(fēng)格再次回歸擬物化，或許已經(jīng)是主流趨勢。未來，3D設(shè)計(jì)，輕立體設(shè)計(jì)將與扁平化的設(shè)計(jì)風(fēng)格相結(jié)合，產(chǎn)生新的設(shè)計(jì)語言和領(lǐng)域。

      從輕擬物風(fēng)格到Glassmorphism風(fēng)格，擬物化設(shè)計(jì)的演變進(jìn)程已然開啟，未來，無論是3D設(shè)計(jì)的加入還是扁平風(fēng)格的延續(xù)，“質(zhì)感”都將成為設(shè)計(jì)過程中被著重強(qiáng)調(diào)的風(fēng)格。

藍(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ù)

降本增效一直是為B端賦能的首要宗旨，那么我們?cè)撊绾螐脑O(shè)設(shè)層面為用戶提高表單錄入的效率呢？

文章來源：UI中國     作者：AI-玲玲

藍(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ù)

一般進(jìn)行軟件首頁的設(shè)計(jì)，我們先思考：

• 首頁要放什么內(nèi)容？哪些是核心的，用戶最在意、最常用的。

• 軟件產(chǎn)品提供什么樣的核心價(jià)值？

• 用戶常用的功能是哪些？

• 未來1到3年軟件會(huì)增加什么重要的功能？發(fā)展方向？

• 需要借助軟件產(chǎn)品傳達(dá)哪些企業(yè)價(jià)值觀？

• 在交互上和需求上先和軟件公司做一些交流，雙方達(dá)成一致再進(jìn)行。

• 重要的內(nèi)容放在第一屏重要的地方，按照人類的閱讀習(xí)慣，從左到右，從上到下。重點(diǎn)的字大區(qū)塊占比大，非重點(diǎn)的弱化小字，歸納為一組，可隱藏。
• 用好對(duì)比，不要讓人思考，該提示的地方要提示（直接打開頁面時(shí)彈出或在需要提醒的位置附近，一個(gè)地兒一個(gè)地兒輪播閃現(xiàn)都可以），盡量傻瓜式的，不要讓人培訓(xùn)后才懂怎么使用（節(jié)省用戶時(shí)間）。
• 思考用戶第一次進(jìn)入軟件，如何引導(dǎo)他使用的流程和步驟，并在首頁就能開始第一步。（目前B端的產(chǎn)品常見問題就是功能橫向單一，每個(gè)功能一個(gè)菜單，之間缺乏串連使用的路徑，用戶根本不知道如何使用）
• 如果是工具類的操作軟件，在首頁要給足相應(yīng)的操作輔導(dǎo)文案和視頻。如果是辦公任務(wù)類軟件，在首頁要很明確展示要做的總數(shù)、待辦具體事情，想了解的信息。

設(shè)計(jì)后的效果圖

1. 理解用戶所需，優(yōu)化交互，增加部分內(nèi)容。告警事件除了原型中的時(shí)間線按順序發(fā)生外，加了用戶頭像，已處理、待處理、緊急任務(wù)統(tǒng)計(jì)數(shù)字，讓用戶可以總覽全局，做到對(duì)工作量心中有數(shù)。

2. 數(shù)據(jù)中心信息，秉承著信息簡單易懂，界面引導(dǎo)友好的理解，把信息分組，4個(gè)關(guān)鍵信息總數(shù)并列2排，設(shè)計(jì)了相應(yīng)的擬物化圖標(biāo)，美觀整理有秩序。在線和離線位數(shù)增加了表達(dá)當(dāng)前比例的橫向柱狀圖，用戶從綠色和紅色的區(qū)塊長短中可以輕松感知，比原型的表達(dá)方式又多了一個(gè)緯度。

3. 本機(jī)系統(tǒng)信息，將單個(gè)的數(shù)字轉(zhuǎn)化為儀表盤，可以表現(xiàn)出高中低預(yù)警和正常的多重含義。通過輕擬物的表現(xiàn)手法，增強(qiáng)駕駛艙的沉浸式體驗(yàn)，營造中控管理氛圍的真實(shí)感。

4. 所有的設(shè)計(jì)，都是基于對(duì)業(yè)務(wù)的理解，回到本質(zhì)，思考用戶是否需要多層次信息的統(tǒng)計(jì)分析，不同的緯度呈現(xiàn)結(jié)果。最終以感性、直觀、優(yōu)美的方式視覺表達(dá)，并考慮到數(shù)據(jù)可視化的控件類型和實(shí)現(xiàn)難度。

這個(gè)案例比上一個(gè)案例更加整體，重大的項(xiàng)目應(yīng)該采用這種方式來進(jìn)行。

1   同類產(chǎn)品APP對(duì)比：

藍(lán)藍(lán)設(shè)計(jì)觀察了20家流量類的App。通過在應(yīng)用市場監(jiān)測流量平臺(tái)類app的下載量，我們選取以上三家為競品。

『流量寶』中國電信出品。

『流量銀行』中國聯(lián)通出品。

『流量來了』，世紀(jì)龍信息網(wǎng)絡(luò)有限責(zé)任公司出品。

分析內(nèi)容：

1. 界面布局對(duì)比

2. 核心功能對(duì)比

3. 色彩對(duì)比

4. 首頁印象對(duì)比

5. 界面設(shè)計(jì)優(yōu)缺點(diǎn)

2 產(chǎn)品洞察 明確產(chǎn)品的定位和發(fā)展方向

按照用戶對(duì)于流量的認(rèn)識(shí)、了解、使用的程度，通常流量經(jīng)營可以分為三個(gè)發(fā)展階段。

在流量消費(fèi)培育階段(2008-2012年)，隨著智能手機(jī)的快速普及，客戶上網(wǎng)頻率逐漸加大，對(duì)于網(wǎng)絡(luò)的使用逐漸從PC互聯(lián)網(wǎng)向移動(dòng)互聯(lián)網(wǎng)轉(zhuǎn)移，其標(biāo)志就是智能手機(jī)用戶在2013年超過了PC保有量。這個(gè)階段主要以前向流量客戶經(jīng)營為主，采取流量包月甚至流量免費(fèi)等方式驅(qū)動(dòng)流量增長。

在流量理性消費(fèi)階段(2013-2014年)，流量消費(fèi)習(xí)慣逐漸養(yǎng)成，運(yùn)營商開始改變甚至取消流量包月無限量使用策略，用戶開始感受到流量的費(fèi)用壓力，開始對(duì)自身的消費(fèi)行為和內(nèi)容進(jìn)行整理，逐步回落到用戶能夠承受的流量消費(fèi)水平。而流量經(jīng)營主要收入來源依然是個(gè)人客戶。

在流量后向經(jīng)營階段(2014年-)，隨著運(yùn)營商發(fā)現(xiàn)流量收入增速放緩的現(xiàn)象，運(yùn)營商開始嘗試定向流量、后向流量捆綁、流量800等面向后端企業(yè)的運(yùn)營。至此，運(yùn)營商正式邁入流量平臺(tái)化經(jīng)營時(shí)期。

產(chǎn)品不斷的迭代，使我們的產(chǎn)品在不斷的完善。 流量平臺(tái)的定位也在不斷的跟隨行業(yè)的變化在不斷的變化，才能使我們的產(chǎn)品得到用戶的認(rèn)可。

功能方向：使產(chǎn)品向貨幣化、社交化、媒介化轉(zhuǎn)變。

增加用戶使用率，創(chuàng)造可以長期登錄使用的情景和功能。

基于個(gè)人：監(jiān)測自己的手機(jī)流量及使用情況，提醒自己：少了可以買，也可以把多余的流量轉(zhuǎn)給家人、朋友、同學(xué)、或充入手機(jī)、

基于社交：比如：發(fā)紅包、賺流量、做任務(wù)、簽到送流量，流量兌話費(fèi)等、是可以嘗試的方向，使我們的產(chǎn)品向貨幣化、社交化、媒介化轉(zhuǎn)變。

視覺方向：使我們的產(chǎn)品更加的年輕化、擁抱90、00后。

交互方向：減化路徑、清晰簡潔

3 基于產(chǎn)品分析策劃進(jìn)行主頁的交互設(shè)計(jì)

在不斷的思考、對(duì)功能的深入理解后，交互設(shè)計(jì)師對(duì)首頁構(gòu)圖了三個(gè)方案，希望能契合產(chǎn)品定位并在布局和表現(xiàn)形式上與競品區(qū)別，展現(xiàn)出愛流量的。

團(tuán)隊(duì)討論思考后，認(rèn)為將“流量監(jiān)測和流轉(zhuǎn)“做為首頁目前重點(diǎn)，賺流量做為以后發(fā)展點(diǎn)。確定第二種布局(中），進(jìn)行視覺設(shè)計(jì)。 

4 視覺設(shè)計(jì)成果

主頁設(shè)計(jì)風(fēng)格確定后，就可以進(jìn)行其它頁面的視覺設(shè)計(jì)啦。

1. 軟件的優(yōu)化設(shè)計(jì)是一個(gè)長久的的事，挑一些典型頁來設(shè)計(jì)是基礎(chǔ)的部分。

2. 目前國內(nèi)都在進(jìn)行數(shù)字化升級(jí)進(jìn)程，這一二十年來，從不知UI為何物，到企業(yè)紛紛重視，每個(gè)企業(yè)都有自己的設(shè)計(jì)師，重點(diǎn)的項(xiàng)目再外包給專業(yè)公司。關(guān)注整個(gè)用戶體驗(yàn)，用體驗(yàn)地圖觸點(diǎn)做設(shè)計(jì)，在中小型的項(xiàng)目上存在認(rèn)識(shí)不夠或目前達(dá)不到應(yīng)有的預(yù)算和精度。未來發(fā)展中，相信會(huì)漸逐把重要軟件的整體用戶體驗(yàn)設(shè)計(jì)、服務(wù)設(shè)計(jì)、品牌設(shè)計(jì)的融入做為增長點(diǎn)。

3. 藍(lán)藍(lán)設(shè)計(jì)公司有一個(gè)群，每天都在分享好的UI設(shè)計(jì)，如果你有興趣，請(qǐng)報(bào)上姓名和公司職位，我們共同成長和學(xué)習(xí)。請(qǐng)加微信ben_lanlan, 標(biāo)注“想加入設(shè)計(jì)分享群”.

微信已經(jīng)十歲了，如今很多人會(huì)用微信作為人與人之間的聯(lián)系方式，“加個(gè)微信”也成了一種社交方式；微信這十年不斷地創(chuàng)新，開發(fā)出越來越多的功能，從社交聊天工具到現(xiàn)在的視頻號(hào)以及直播；本文是2021年微信公開課中張小龍的演講內(nèi)容，我們一起來了解一下。

2021年微信公開課，如約而至。

今年有些特別，他在視頻號(hào)上開了直播，和更多人線上見——“我覺得直播特別簡單，我都做了好幾場?！?

微信十年了。張小龍回顧了當(dāng)初做微信的初心——“出發(fā)點(diǎn)很簡單，想做一款產(chǎn)品給自己用?！?

他也感謝了微信平臺(tái)上的每一位創(chuàng)作者，因?yàn)橛兴麄?，微信才能有今天的活力?

張小龍?jiān)谝曨l號(hào)里，講了視頻號(hào)。當(dāng)初為什么想做視頻號(hào)，視頻號(hào)的意義是什么，視頻號(hào)的推薦機(jī)制是怎么考量的，視頻號(hào)有哪些新的可能等等。

除了視頻號(hào)，他還強(qiáng)忍著想劇透的心，提前透露了即將到來的微信新版本。微信表情的新玩法、可以更新你的微信狀態(tài)變成你個(gè)人“活”的名片、下拉有更多驚喜……

究竟有哪些驚喜，歡迎往下拉：

各位朋友，晚上好！

謝謝來到公開課現(xiàn)場的朋友們，讓我感受到這是一個(gè)面對(duì)面的交流，而不是一個(gè)人面對(duì)屏幕的直播。

2020，對(duì)很多人來說都是很不容易的一年，包括我們的公開課，也改為線上進(jìn)行了；雖然在幾年前的一次公開課上，我說公開課應(yīng)該線上開就好了，效率最高，但沒有想到今天是因?yàn)橐咔榈脑虮黄茸龅搅恕?

去年這個(gè)時(shí)候我們也沒有想到，這次我們已經(jīng)通過視頻號(hào)來進(jìn)行直播了。

因?yàn)橐咔椋芏喙镜哪陼?huì)都改線上了，所以這個(gè)時(shí)候，我的同事們正在努力給視頻號(hào)直播加一個(gè)能力，就是只有白名單的人才能進(jìn)入直播間的企業(yè)內(nèi)直播，希望能給需要線上開年會(huì)的企業(yè)一些幫助吧。

回頭看十年前，當(dāng)時(shí)的想法只是，希望有一個(gè)適合自己的通訊工具來用。

于是就開始了微信的第一版。但當(dāng)時(shí)絕對(duì)沒有想到，十年后的微信會(huì)是現(xiàn)在這個(gè)樣子；對(duì)此，我自己感覺特別幸運(yùn)，我想我一定是那個(gè)被上帝選中的人，因?yàn)楣饪總€(gè)人努力是做不到這一點(diǎn)的。

我分享一組數(shù)據(jù)吧，到今天，每天——

• 有10.9億用戶打開微信，3.3億用戶進(jìn)行了視頻通話；
• 有7.8億用戶進(jìn)入朋友圈，1.2億用戶發(fā)表朋友圈，其中照片6.7億張，短視頻1億條；
• 有3.6億用戶讀公眾號(hào)文章，4億用戶使用小程序；
• 還有很多，包括微信支付，企業(yè)微信，微信讀書，搜索等，就不一一說了。

如微信支付，它就像你以前的錢包一樣，已經(jīng)變成了生活常用品；而微信，也真的成為了“一個(gè)生活方式”。

今天是公開課，應(yīng)該有很多的創(chuàng)作者參與，所以，也在這里感謝微信平臺(tái)的每一個(gè)創(chuàng)作者，公眾號(hào)的、小程序的、視頻號(hào)的創(chuàng)作者；因?yàn)槟銈兊膭?chuàng)作，讓微信的生態(tài)充滿活力。

大家知道視頻號(hào)今年的變化特別大。這里也想分享一下視頻號(hào)的一些想法。

一、視頻號(hào)的起源

可能在2017年吧，我跟公眾號(hào)的團(tuán)隊(duì)說，我們現(xiàn)在公眾號(hào)只適合少數(shù)人寫長文章，但是大部分人寫不了文章；我們應(yīng)該在朋友圈下面加一個(gè)“非朋友圈”，只能發(fā)短文或者照片視頻。

但后來就不了了之了，確實(shí)是很大的工程，因?yàn)閹ぬ?hào)體系可能都完全不同了，就完全是個(gè)新的比公眾號(hào)還復(fù)雜的系統(tǒng)。

隨著時(shí)間的推移，視頻化表達(dá)其實(shí)越來越成為普通人的習(xí)慣。

來看幾個(gè)數(shù)據(jù)，最近5年，用戶每天發(fā)送的視頻消息數(shù)量上升33倍，朋友圈視頻發(fā)表數(shù)上升10倍；這時(shí)候，我們?cè)偎伎级虄?nèi)容的時(shí)候，就會(huì)想，不應(yīng)該基于短文字來做，而是應(yīng)該基于視頻化內(nèi)容來做了。

視頻化表達(dá)應(yīng)該是下一個(gè)十年的內(nèi)容領(lǐng)域的一個(gè)主題，雖然我們并不清楚，文字還是視頻才代表了人類文明的進(jìn)步，但從個(gè)人表達(dá)，以及消費(fèi)程度來說，時(shí)代正在往視頻化表達(dá)方向發(fā)展。

于是在2019年，我們組織了一個(gè)特別小的小團(tuán)隊(duì)，開始了視頻號(hào)的開發(fā)；我們也沒有問公司要什么資源專門去做，甚至沒有在公司開會(huì)立項(xiàng)，就自己悄悄做了；我覺得這很微信風(fēng)格啊，基本上微信做東西，都是成立小團(tuán)隊(duì)開始做起，而不是大規(guī)模的兵團(tuán)作戰(zhàn)。

并且我說，我們要做，就一定要做成、做大。

這并不是公司給的任務(wù)，因?yàn)橥瓿扇蝿?wù)是枯燥無味的，并且會(huì)因此動(dòng)作變形，應(yīng)該說是我們要給自己一些挑戰(zhàn)性的目標(biāo)，不然工作會(huì)顯得很無聊。

二、視頻號(hào)是什么？

視頻號(hào)是一個(gè)人人都可創(chuàng)作的短內(nèi)容平臺(tái)。

所以它是公開領(lǐng)域的內(nèi)容平臺(tái)，就不能基于微信號(hào)來創(chuàng)作了。

因此遇到的第一個(gè)問題是，需要有一種新的ID（身份）。

長期以來，微信的最大價(jià)值是每個(gè)人的微信ID，比如微信支付能很順暢，因?yàn)殄X包跟著個(gè)人ID走，這是非常自然的，就像你現(xiàn)在只拿身份證也能取錢一樣；但這個(gè)ID是通訊和社交領(lǐng)域的，因此是私密的。

因此，微信的用戶并不能公開對(duì)非好友說話，即便評(píng)論了，別人也無法聯(lián)系你，這對(duì)于社交領(lǐng)域當(dāng)然沒有問題；但對(duì)于公開領(lǐng)域，需要新的身份；而在一個(gè)產(chǎn)品里，承擔(dān)兩個(gè)身份，其實(shí)是很有挑戰(zhàn)的。

而這個(gè)新的ID，還必須特別方便，不至于在各個(gè)場景里遇到身份的沖突，所以處理得不好，雙ID會(huì)讓系統(tǒng)變得非常復(fù)雜；比如你評(píng)論，就需要選擇用哪個(gè)ID來評(píng)論。

但是這個(gè)ID的意義又特別大，一旦走出這一步，意味著微信不再局限于社交領(lǐng)域，而是進(jìn)入到公開信息領(lǐng)域。

因此視頻號(hào)的意義，與其說是視頻，不如說是“號(hào)”，因?yàn)橛辛艘粋€(gè)公開的號(hào)，意味著每個(gè)人都有了一個(gè)公開發(fā)聲的身份。

比如，直播，在視頻號(hào)里做得很順利；在視頻號(hào)之前，我們是沒法做直播的，最多做到群內(nèi)直播，那還是屬于群通信的范疇；但有了視頻號(hào)這個(gè)ID，每個(gè)人可以迅速開通自己的直播。這里，ID才是基石，它可以承載視頻內(nèi)容，可以承載直播，可以承載小程序等。

我記得當(dāng)時(shí)有個(gè)方案是，每個(gè)進(jìn)視頻號(hào)的人要?jiǎng)?chuàng)建一個(gè)視頻號(hào)ID，用這個(gè)ID來瀏覽和評(píng)論內(nèi)容。我說不對(duì)，瀏覽者應(yīng)該是微信身份，而不應(yīng)該強(qiáng)迫每個(gè)人開一個(gè)新的身份才能看和評(píng)論。

幸好當(dāng)時(shí)選擇了這樣一條路徑，不然就沒有后來的社交推薦體系了。其實(shí)產(chǎn)品的迭代是由無數(shù)這樣的選擇組成的。

ID還有一個(gè)重要的意義是針對(duì)機(jī)構(gòu)的。

大家知道PC時(shí)代每個(gè)機(jī)構(gòu)都有一個(gè)官方網(wǎng)站，其實(shí)微信一直在尋找PC時(shí)代的“官方網(wǎng)站”的替代物；做公眾號(hào)的時(shí)候，我們希望公眾號(hào)就是一個(gè)機(jī)構(gòu)比如企業(yè)的官網(wǎng)。做小程序的時(shí)候，我們希望小程序就是官網(wǎng)。

現(xiàn)在，我們希望視頻號(hào)是每個(gè)機(jī)構(gòu)的官網(wǎng)。這是合理的，官網(wǎng)是需要進(jìn)化的。所以未來視頻號(hào)會(huì)承接一個(gè)機(jī)構(gòu)的很多服務(wù)內(nèi)容，并不局限于視頻；比如一個(gè)企業(yè)的服務(wù)，可以通過小程序的方式，展示在視頻號(hào)下面。

所以我開玩笑說，如果有一天我們?cè)诿恳粋€(gè)廣告牌下面，都能看到廣告主的視頻號(hào)的二維碼，那就說明視頻號(hào)做成了想要的官網(wǎng)了。

第一個(gè)版本其實(shí)只是搭建了這樣一個(gè)ID體系。和公眾號(hào)的很類似，但是比公眾號(hào)的門檻低很多，普通微信用戶可以立即開通它。

內(nèi)容表現(xiàn)上，只是一個(gè)簡單的信息流，混合了關(guān)注的，朋友匿名點(diǎn)贊的，和系統(tǒng)推薦的內(nèi)容在里面。

但這樣的效果并不好。因?yàn)槭腔叶?，量不大，因此也吸引不到大量的?chuàng)作者來貢獻(xiàn)內(nèi)容，因此推薦的內(nèi)容也一般般。

但即使如此，我們還是希望推薦的質(zhì)量能夠好起來。我們組建了三個(gè)做推薦算法的團(tuán)隊(duì)，每個(gè)團(tuán)隊(duì)十幾個(gè)工程師。希望各自用不同方法去找到推薦的最優(yōu)解。

應(yīng)該說我們?cè)谒惴I(lǐng)域沉淀應(yīng)該還是很深的，搜一搜背后是個(gè)幾百工程師的搜索技術(shù)團(tuán)隊(duì)，同時(shí)我們自己研發(fā)的語音識(shí)別和機(jī)器翻譯，都是國內(nèi)的一流水準(zhǔn)。

對(duì)了，外界一直有人說我們的語音識(shí)別用的是第三方的技術(shù)，其實(shí)我們從未用過第三方的，一直都是我們自己研發(fā)的。現(xiàn)在微信里面的語音識(shí)別每天翻譯的語音條目在五億條以上。

雖然搜索團(tuán)隊(duì)有很強(qiáng)的算法技術(shù)人員，但是，我還是把他們從搜索團(tuán)隊(duì)抽調(diào)出來進(jìn)入到視頻號(hào)團(tuán)隊(duì)來工作。因?yàn)殚]環(huán)的小團(tuán)隊(duì)才能迅速迭代。

推薦團(tuán)隊(duì)很努力，但頭幾個(gè)月的滾動(dòng)特別困難，似乎陷入了死結(jié)，就是內(nèi)容不好看就沒有瀏覽量，就導(dǎo)致沒有人貢獻(xiàn)內(nèi)容，所以推薦系統(tǒng)也推不出好內(nèi)容，然后繼續(xù)沒有好的內(nèi)容看。

5月份的時(shí)候，我們做了視頻號(hào)最重大的一個(gè)改變。

因?yàn)榻?jīng)過幾個(gè)月的灰度，表明在現(xiàn)有的內(nèi)容下，基于機(jī)器推薦是走不通的。對(duì)比朋友點(diǎn)贊的內(nèi)容，雖然當(dāng)時(shí)朋友點(diǎn)贊還是匿名的，和機(jī)器推薦的內(nèi)容來對(duì)比，我發(fā)現(xiàn)，機(jī)器推薦的遠(yuǎn)不如人工（或者說朋友）推薦的精彩。既然這樣，就應(yīng)該以實(shí)名點(diǎn)贊的社交推薦為主，機(jī)器推薦為輔。

當(dāng)時(shí)我給的理由是，我們所看的書，大部分是因?yàn)橹車腥送扑]而去看，而不是網(wǎng)上書店推薦的書。你少看幾個(gè)機(jī)器推薦的內(nèi)容不會(huì)覺得可惜，但錯(cuò)過了朋友們都在看的內(nèi)容會(huì)覺得可惜。這是視頻號(hào)能借助社交推薦起來的理由。

于是五月份開始了變更最頻繁的兩周，幾乎每兩天就要更新一個(gè)版本。然后發(fā)布了基于朋友點(diǎn)贊的新的灰度版本，終于看到了上揚(yáng)的數(shù)據(jù)，用戶的留存非常高。

所以6月視頻號(hào)的用戶到了一個(gè)量級(jí)。數(shù)字其實(shí)不重要，但對(duì)于一個(gè)內(nèi)容形態(tài)的產(chǎn)品來說，一定量級(jí)的用戶意味著解決了生死問題，即流量的循環(huán)起來了。

這是一種典型的微信style的產(chǎn)品方法，即通過產(chǎn)品而非運(yùn)營的方法，找到事情的撬動(dòng)點(diǎn)，通過產(chǎn)品能力讓事情運(yùn)轉(zhuǎn)起來。

有這個(gè)用戶基數(shù)說明生存下來了，這時(shí)候就可以開始做基礎(chǔ)功能的完善了，比如直播能力等。沒有過生死線的話，做再多功能也是白搭。

在這里，是社交推薦發(fā)揮了作用，當(dāng)時(shí)機(jī)器推薦的占比非常小，留存也非常低，我們也差點(diǎn)就放棄了機(jī)器推薦。但是，并不是說機(jī)器推薦沒有用，而是要在內(nèi)容豐富的情況下才能發(fā)揮作用。

插一個(gè)小故事，6月份的時(shí)候，那時(shí)社交推薦的新版還在開發(fā)吧，我在黑板上寫下一個(gè)斷言：未來有一天，視頻的播放量，關(guān)注，好友推薦，機(jī)器推薦的消耗比例，應(yīng)該是1:2:10。即，一個(gè)人應(yīng)該平均看10個(gè)關(guān)注的視頻，20個(gè)朋友贊的視頻，100個(gè)系統(tǒng)推薦的視頻這樣的比例。

當(dāng)時(shí)是這么解釋的：

內(nèi)容分兩種，一種是你需要花腦力去理解的知識(shí)性信息，是學(xué)習(xí)；一種是不需要花腦力的思維舒適區(qū)的消費(fèi)類的信息，是娛樂。

朋友贊是朋友強(qiáng)迫你去獲取你未必感興趣的知識(shí)性信息，屬于學(xué)習(xí)類的；機(jī)器推薦，是系統(tǒng)投其所好而讓你很舒服的瀏覽你喜歡的消費(fèi)性信息，屬于娛樂類的。關(guān)注里面兩種信息都有。

因?yàn)殛P(guān)注的東西你已經(jīng)知道大概會(huì)是什么了，反而不會(huì)太有吸引力，因此是1。朋友贊雖然看起來累，但是不能錯(cuò)過，所以是2。而系統(tǒng)推薦，符合懶人原則，是大多數(shù)人都更容易消費(fèi)且獲得舒適感的信息，所以是10。但是我們現(xiàn)在的大盤數(shù)據(jù)，并不是這個(gè)比例?，F(xiàn)在朋友贊產(chǎn)生的整體vv，是機(jī)器推薦的2倍。

于是我讓數(shù)據(jù)同事統(tǒng)計(jì)了一下，只拿有關(guān)注的用戶來看。有關(guān)注的用戶目前極少，屬于活躍用戶，所以代表了未來活躍用戶的行為。

前幾天的數(shù)據(jù)是，有關(guān)注的用戶，人均在三個(gè)tab產(chǎn)生的vv，差不多是1：2：9。

拿到這個(gè)結(jié)果時(shí)我非常吃驚。它只是一種粗略的估計(jì)，并不是說預(yù)測特別準(zhǔn)確，而是說我們做東西的習(xí)慣是，如果這樣做，應(yīng)該先推理出來一個(gè)結(jié)果，然后用數(shù)據(jù)去驗(yàn)證，才能檢驗(yàn)方向是不是對(duì)的。

我估計(jì)未來這個(gè)9還會(huì)變得更大。因?yàn)檫@是和內(nèi)容豐富度相關(guān)的。

說到這里，可能會(huì)有人說當(dāng)機(jī)器推薦這個(gè)9變得越來越大，不是不符合用完即走嗎。用完即走跟時(shí)間長短無關(guān)，跟效率有關(guān)。

我們從來不會(huì)關(guān)注用戶在微信里停留的時(shí)長，那不是我們的目標(biāo)。當(dāng)用戶想要看內(nèi)容的時(shí)候，不管是文章還是視頻，如果他花了很多時(shí)間看，只能說明微信里面有很多值得看的內(nèi)容，而不是要刻意去消耗他的時(shí)間。

三、什么是視頻？

過程中還解決了另一個(gè)問題，即究竟什么是視頻的問題。

說到視頻，大家會(huì)想到手機(jī)相冊(cè)里面的視頻文件。就像朋友圈，只能上傳相冊(cè)的視頻。我們也確實(shí)是通過這個(gè)方式，來希望朋友圈里的視頻更多的是用戶自己拍攝的視頻。

但視頻文件其實(shí)是會(huì)消失的。

從Windows轉(zhuǎn)到蘋果手機(jī)的用戶，都會(huì)遇到一個(gè)問題，以前的文件和文件夾去哪里了。在iOS里，沒有了文件的概念。文件被各個(gè)應(yīng)用自己定義了。這是把文件應(yīng)用化了，即文件不能脫離應(yīng)用而存在，一旦脫離了，就是沒有意義無法解釋的數(shù)據(jù)。

這是一種很好的觀念。

原始視頻只是數(shù)據(jù)，它沒法關(guān)聯(lián)到其他信息，如創(chuàng)作者，觀眾數(shù)，評(píng)論等。它還需要存在本地，數(shù)據(jù)丟了就丟了。

因此未來的視頻應(yīng)該是一種結(jié)構(gòu)化數(shù)據(jù)。它存在云端，有所有的創(chuàng)作者信息，有觀眾的互動(dòng)信息，能夠很方便的分享。

文字和視頻等內(nèi)容，存在的價(jià)值在于有人看到，也就是分享。而分享，如果還需要copy整個(gè)原始數(shù)據(jù)，是很落后的。分享應(yīng)該只是一個(gè)鏈接的傳遞。

這會(huì)讓我反思，朋友圈里面上傳視頻，以后會(huì)一直用這種原始方式嗎？

所以在6月的時(shí)候，我們需要把視頻號(hào)內(nèi)容分享到朋友圈來，遇到一個(gè)問題，它應(yīng)該長得像一個(gè)鏈接呢，還是像一個(gè)本地視頻呢？其實(shí)是歸類，它應(yīng)該歸類到文章鏈接，還是一個(gè)視頻文件。

我的答案是，云端化的結(jié)構(gòu)化的視頻，才是視頻，本地的視頻文件，反而是裸數(shù)據(jù)，是應(yīng)該被淘汰的。所以你看到的朋友圈里的視頻號(hào)的視頻，和現(xiàn)在的本地視頻的展現(xiàn)沒什么區(qū)別。

在這里，視頻號(hào)是結(jié)構(gòu)化的視頻內(nèi)容的載體。我相信以后微信里面流通的視頻，越來越多的會(huì)以視頻號(hào)視頻的形式存在，而不是視頻文件的方式。這種變化，其實(shí)在公眾號(hào)體系里體現(xiàn)過一次。公眾號(hào)是一個(gè)文章的載體。

它讓文章因?yàn)榉窒矶兊糜袃r(jià)值。并且，公眾號(hào)定義了文章的展現(xiàn)形式，是所有的用戶在閱讀不同的文章時(shí)，能以一種相對(duì)一致的體驗(yàn)來閱讀和互動(dòng)。在我看來，這是對(duì)網(wǎng)頁時(shí)代閱讀體驗(yàn)的一次大的體驗(yàn)提升。

不管是文章還是視頻，他們存在的價(jià)值在于被人看到，或者說被分享。顯然，文章和視頻需要一個(gè)載體來傳播。

如果你能理解公眾號(hào)對(duì)于文章分享的價(jià)值，那么，可以用同樣的思路去理解視頻號(hào)對(duì)于視頻分享的價(jià)值。

載體的含義還體現(xiàn)在，我們自己不做內(nèi)容，也不會(huì)去買內(nèi)容。我們不關(guān)注具體的內(nèi)容是什么。我們只做內(nèi)容的承載和傳遞。

四、長視頻和短視頻

我們也遇到了超過一分鐘視頻的問題。自然而然地，大家會(huì)認(rèn)為長視頻和短視頻是兩種東西，因此應(yīng)該設(shè)計(jì)成兩種不同的內(nèi)容對(duì)象。

中間有個(gè)版本確實(shí)是視頻號(hào)有專門的長視頻這一欄的，甚至長視頻和短視頻的評(píng)論點(diǎn)贊還是分開的。

但如果仔細(xì)思考，在微信號(hào)體系里，是不應(yīng)該做這種區(qū)分的。長短視頻的區(qū)別只是消費(fèi)的場景不一樣。短視頻適合碎片時(shí)間的連續(xù)消費(fèi)，而長視頻適合有一大段時(shí)間來看。

對(duì)視頻號(hào)來說，簡化這個(gè)問題的方法，是把一分鐘以內(nèi)的視頻是為短視頻，一分鐘以上的視頻的開頭一分鐘視為這個(gè)視頻的摘要或簡介。我把它稱為封面。這樣的話，視頻號(hào)不區(qū)分長視頻短視頻，但是又能兼容短視頻的體驗(yàn)。

關(guān)于長視頻，我希望視頻號(hào)逐漸積累越來越多的長視頻，成為長視頻的云端倉庫。

將來有一天，也許我們會(huì)提供一個(gè)檢索或推薦入口，這樣用戶可以找到豐富的長視頻內(nèi)容。

這個(gè)其實(shí)也是未來非常有想象力的。

五、視頻號(hào)和個(gè)人的關(guān)系

視頻號(hào)的初衷是讓人人都能很容易通過視頻化的方式去公開表達(dá)內(nèi)容。但做產(chǎn)品的人都知道，讓用戶去發(fā)表內(nèi)容去表達(dá)是最困難的。

現(xiàn)階段我們也并沒有做到讓很多人在視頻號(hào)去發(fā)表自己的日常。但我們有個(gè)舉措，讓我們能看到希望。

我們上線了將自己的視頻號(hào)內(nèi)容關(guān)聯(lián)到自己的微信名片的功能。我們發(fā)現(xiàn)結(jié)果比預(yù)料的要好很多，到現(xiàn)在已經(jīng)有非常多人在名片展示了自己的視頻號(hào)內(nèi)容，并且還在持續(xù)增長。這是個(gè)很好的趨勢。

這里有一個(gè)很有意思的話題，有的時(shí)候大家會(huì)覺得微信做東西特別保守。其實(shí)并不是保守，而是說很多東西是不對(duì)或不應(yīng)該做的。

舉個(gè)例子，我們可以把視頻號(hào)的內(nèi)容掛在名片上，我們以前為什么不做一個(gè)類似這樣的展示自己的一些精選的照片和視頻的功能？

我們內(nèi)部討論過好多次，因?yàn)楹芏嗳伺笥讶υO(shè)置了三天可見，越來越多了，我們打開名片有的時(shí)候幾乎看不到東西。為什么不給他們提供一個(gè)可以把一些照片精選放在那里的功能，這樣朋友進(jìn)來至少可以看到一些。

之前我們不愿意做這個(gè)功能是因?yàn)?，一旦這樣做了，你可能只是把你歷史上最好的照片放到那里，永遠(yuǎn)就不去修改它了。

這次我們?cè)敢膺@樣做是因?yàn)?，如果你關(guān)聯(lián)到你的視頻號(hào)的內(nèi)容，那它就是活的，因?yàn)槟銜?huì)不停地更新你的視頻號(hào)內(nèi)容，而不是說我選幾個(gè)歷史上最好的照片作為精美的裝飾就永遠(yuǎn)不變了。

畢竟，視頻號(hào)希望的是人人都能表達(dá)，而不是只有網(wǎng)紅和大v的表演。

六、信息展現(xiàn)的方式

信息展現(xiàn)形式一直是互聯(lián)網(wǎng)產(chǎn)品里的最基礎(chǔ)部分，也是爭議最大的。這里說的是指對(duì)信息列表的展現(xiàn)形式。

常見比如有瀑布流，通俗稱呼的信息流，以及全屏。他們的區(qū)別是一屏里放多少條內(nèi)容合適。全屏就是一屏只放一條內(nèi)容。

以我自己的經(jīng)驗(yàn)來說，我把這些式樣的選擇總結(jié)為一個(gè)粗略的規(guī)律，就是——

一屏里的內(nèi)容條數(shù)，應(yīng)當(dāng)跟命中率成反比。

命中率是指用戶可能感興趣的內(nèi)容條數(shù)的比例。比如10個(gè)郵件，只有一個(gè)是我想要看的，命中率是10%。

以朋友圈舉例，因?yàn)槟悴⒉皇且疵恳粋€(gè)朋友發(fā)的內(nèi)容的，所以命中率并不高，如果改為全屏，就是災(zāi)難。同時(shí)，如果你添加的好友越來越多，命中率還會(huì)降低，因此就更不能增加每條內(nèi)容的顯示面積。

如果我們要增大顯示面積，就必須提高命中率。但朋友圈的命中率是很難提高的，因?yàn)榕笥讶Φ拿新嗜Q于朋友跟你的關(guān)系，而非他發(fā)的內(nèi)容，而我們很難知道你對(duì)哪個(gè)朋友更感興趣。

而往往關(guān)注內(nèi)容越多的人，命中率就越低。所以公眾號(hào)改版的時(shí)候，其實(shí)是一屏里的內(nèi)容條數(shù)變少了，雖然帶來了點(diǎn)擊次數(shù)的減少，但關(guān)注多的人還是會(huì)抱怨，因?yàn)檫x擇的難度增大了。但對(duì)于關(guān)注少的人，閱讀量是上升了，因?yàn)橹魂P(guān)注了幾個(gè)號(hào)的話，命中率本來就高。后來我們?cè)谟嗛喬?hào)的頂部增加了常讀號(hào)的展示，其實(shí)是提升了命中率。

視頻號(hào)的上半年，平臺(tái)的內(nèi)容豐富度不夠，命中率是很低的。所以當(dāng)時(shí)半屏式的信息流是合適的，一屏顯示超過一項(xiàng)內(nèi)容，用戶有選擇的余地。那時(shí)候如果直接上全屏，可能死的很快。

到下半年，內(nèi)容開始豐富了，命中率開始提高了。并且全屏對(duì)于單個(gè)視頻的展現(xiàn)效果當(dāng)然也會(huì)比半屏要好，我們開始灰度的切換到全屏模式。

這里說個(gè)有意思的數(shù)據(jù)。我們把關(guān)注和機(jī)器推薦灰度切換到全屏，并且和沒有灰度全屏的用戶來對(duì)比觀察。發(fā)現(xiàn)全屏后，關(guān)注tab的人均vv（video view，視頻播放量）下降了，推薦tab的上升了。這應(yīng)該可以推導(dǎo)出來，關(guān)注tab的命中率不夠高，以至于全屏后帶來了輕微的選擇困難。

我們?cè)诠娞?hào)里在給關(guān)注的號(hào)的內(nèi)容做排序，以及在視頻號(hào)里，也會(huì)通過算法對(duì)關(guān)注的內(nèi)容做排序，也是為了提高命中率。

特別是全屏之后，因?yàn)橛脩舻倪x擇余地是零了，更需要算法來做排序。

七、直播

互聯(lián)網(wǎng)歷史上，個(gè)人在公開領(lǐng)域的表達(dá)方式一直在演變。

最早的時(shí)候，需要你會(huì)寫HTML來做網(wǎng)頁。后來有了博客，博客之后是微博這樣的短文字。現(xiàn)在是圖片和短視頻。

演變的方向是往更能被普通人生產(chǎn)和消費(fèi)的方向去走的。所以會(huì)體現(xiàn)為更短更碎片化。

所以我在想，還有什么內(nèi)容形態(tài)是比短視頻更能被更多人接受的。

我覺得直播有這個(gè)機(jī)會(huì)。直播比短視頻的生產(chǎn)更容易，是因?yàn)榕囊欢味桃曨l是需要有內(nèi)容準(zhǔn)備的。

而直播，是不需要準(zhǔn)備內(nèi)容的，它就是日常聊天。這是一個(gè)非常巨大的差別，直接降低了直播的門檻。這是一種輕松的表達(dá)，普通人也能夠去生產(chǎn)出來，朋友也更愿意去消費(fèi)。

雖然直播已經(jīng)發(fā)展了很多年，大家對(duì)直播的認(rèn)知還是帶貨的領(lǐng)域，這是作為內(nèi)容形態(tài)的方式來思考，就是個(gè)人表達(dá)的形態(tài)方面來思考的。

所以，直播在未來有可能會(huì)成為一種很多人在用的個(gè)人表達(dá)方式。

做一個(gè)未來的設(shè)想，很久以后，每個(gè)人的微信名片應(yīng)該是活的，意思是，我打開你的名片，如果你剛好戴了一個(gè)可以直播的眼鏡正在直播，那我就能直接看到你看到的東西。這可能是個(gè)人直播的終極形態(tài)。

前不久有一場流星雨的直播，有超過100萬人觀看了，有點(diǎn)超出我們的意料了。因?yàn)?，我們并沒有做任何中心化的流量分發(fā)去推它，它自然就吸引了100萬人。

在這里，是社交推薦在發(fā)生作用，通過朋友圈，群聊等進(jìn)行了人群的擴(kuò)散。當(dāng)然，在視頻號(hào)和直播的入口里面，我們還是會(huì)用機(jī)器推薦來給用戶推薦適合的直播。

當(dāng)直播多了以后，除了你的朋友，我們也希望系統(tǒng)能告訴你哪個(gè)直播值得你看一下，這是我們的機(jī)器推薦有更大的考驗(yàn)。但社交推薦，仍然會(huì)是非常重要的傳播途徑。

其實(shí)我們現(xiàn)在還沒有直播的入口，下一個(gè)版本可能就有了。我們現(xiàn)在有一個(gè)附近的直播和人，把它調(diào)一下，可能叫直播和附近。

我們也在豐富直播電商的能力，包括直播里可以掛接到第三方的小程序。

春節(jié)快到了，我們都習(xí)慣了在群里發(fā)紅包搶紅包來拜年了。但其實(shí)線下傳統(tǒng)的拜年是走家串戶面對(duì)面的行為。

直播其實(shí)更能模擬出線下拜年這種傳統(tǒng)方式。

所以我們今年在直播這里也做了一點(diǎn)小小的東西，我們希望今年的春節(jié)能夠有一些人通過直播的方式來拜年，那就特別好。

八、關(guān)于創(chuàng)作者

很多人會(huì)關(guān)心平臺(tái)會(huì)給創(chuàng)作者什么樣的支持。

如上面提到的，我們更希望做視頻的載體，并且讓視頻號(hào)成為個(gè)人和機(jī)構(gòu)的官網(wǎng)。平臺(tái)在這里的角色是連接，而不是做內(nèi)容。

但和以前的官網(wǎng)不一樣的地方在于，微信體系里的官網(wǎng)，內(nèi)容是能自己流通的。因此你不用太擔(dān)心做了官網(wǎng)也沒有人訪問。

我剛剛說到微信里集合了很多產(chǎn)品可能沒法嘗試的東西，比如說對(duì)于信息訪問，我們可能會(huì)有關(guān)注關(guān)系可以獲得，有搜索，有推薦，有系統(tǒng)推薦和社交傳遞這樣一些方式，所以不用太擔(dān)心自己的內(nèi)容在這里沒有人會(huì)看。

剛開始我們?nèi)パ?qǐng)一些明星進(jìn)來，明星會(huì)說有沒有簽約費(fèi)。我們的回答是，我們希望你進(jìn)來，因?yàn)槟銘?yīng)該經(jīng)營自己的粉絲，最終你會(huì)實(shí)現(xiàn)盈利，但不會(huì)平臺(tái)出面來購買內(nèi)容。

所以視頻號(hào)這里，我們沒有花一分錢去購買內(nèi)容。將來也不想這么做。倒不是為了省錢，而是，當(dāng)我們不花錢買內(nèi)容的時(shí)候，創(chuàng)作者還愿意進(jìn)來，才說明創(chuàng)作者能靠自己的努力獲得回報(bào)，才說明我們建立了一個(gè)能自行運(yùn)轉(zhuǎn)起來的生態(tài)。

同時(shí)，我相信普通人的創(chuàng)作力是巨大的，相反，購買的內(nèi)容反而不一定能打動(dòng)人。

微信的歷史上，我們一直不強(qiáng)調(diào)強(qiáng)運(yùn)營，也是這個(gè)原因。

系統(tǒng)和規(guī)則會(huì)比運(yùn)營的效率高太多了。就像我們現(xiàn)在看到微信支付，其實(shí)已經(jīng)覆蓋面非常大，但是我們微信支付的人數(shù)并不算多，對(duì)于支付這樣一個(gè)需要跟線下接觸的行業(yè)來說，我們每個(gè)行業(yè)微信支付里可能就一兩個(gè)人在負(fù)責(zé)整個(gè)行業(yè)。

公眾號(hào)的那一個(gè)slogan照樣可以用在視頻號(hào)上，再小的個(gè)體，也有自己的品牌。

其實(shí)你現(xiàn)在放在視頻號(hào)上也是很適用的。

九、一些有趣的實(shí)驗(yàn)性項(xiàng)目

我們也有一些有趣好玩的實(shí)驗(yàn)性項(xiàng)目在進(jìn)行中。

前面提到，做產(chǎn)品其實(shí)是個(gè)驗(yàn)證想法的過程。

如果你腦袋里突然冒出一個(gè)想法，可能很不靠譜，但又似乎有意思。然后繼續(xù)往深里去想，如果能經(jīng)過很多次選擇，最終能變?yōu)閷?shí)現(xiàn)，就會(huì)體會(huì)到做產(chǎn)品的樂趣。

我就經(jīng)常會(huì)有一些異想天開的想法。

比如，如果你能拍一下一個(gè)人的頭像會(huì)怎么樣，如果你能朝跟你聊天的朋友扔一個(gè)炸彈在屏幕上炸開嚇?biāo)惶鴷?huì)怎么樣，如果你在聽一首歌的時(shí)候能看到其他聽歌的人眼前的畫面會(huì)怎么樣，如果你失眠的時(shí)候也能看到其他的失眠的人然后大家一起數(shù)羊會(huì)怎么樣。

甚至，如果給一個(gè)畫布，每個(gè)人上去畫一個(gè)點(diǎn)，如果有一千萬人輪流去每人依次畫一個(gè)點(diǎn)，到最后會(huì)不會(huì)形成一個(gè)圖案？如果在沒有組織的情況下，一千萬人居然畫出來一個(gè)圖案，那又意味著什么？

所有這些都是很有趣的事情。所以做產(chǎn)品絕不是枯燥無味的。雖然大多數(shù)想法都會(huì)是行不通的，但有少數(shù)的能行得通，就非常好了。

這里，我就簡單描述下微信新版本會(huì)有的幾個(gè)功能。

所有的功能在被用戶實(shí)際驗(yàn)證之前，都不能說一定會(huì)受歡迎，但是只要思路的方向沒有問題，就可以不斷改進(jìn)。有些功能也會(huì)經(jīng)歷灰度，完善了才放出來。所以不要抱以太高的期望。這里分享下這些好玩的功能的思考點(diǎn)。

一個(gè)是表情。

表情是表達(dá)方式中的一個(gè)基本元素。

說到表達(dá)方式的基本元素，這讓我想起拍一拍。

很多人會(huì)不喜歡被拍，還有很多人因?yàn)檎`觸而拍錯(cuò)了人很尷尬。但仍然有1.2億人設(shè)置了拍一拍的尾巴，每天幾千萬人在用拍一拍。

拍一拍也是表達(dá)的一種基本元素，并且不同于其他所有方式，它是模擬人類的現(xiàn)實(shí)生活中的行為動(dòng)作，用最簡單的一個(gè)身體動(dòng)作來完成了一次信息傳遞。

有次內(nèi)部開會(huì)我開玩笑說，未來人們的生活會(huì)越來越線上化，人們會(huì)懷念這種古老的人和人之間的交互方式的。

說回到表情。

人們的表情反映出情緒越來越強(qiáng)烈了。以至于必須經(jīng)?！傲验_”了。

我的想法可能比裂開更暴力。有一天我跟開發(fā)同學(xué)說，幫我做一個(gè)功能，我扔出一個(gè)炸彈，對(duì)方的屏幕就裂開來。當(dāng)然，是動(dòng)畫效果的裂開，但要求很逼真。

實(shí)現(xiàn)是可以的，但是真的當(dāng)作一個(gè)表情功能的時(shí)候，還是會(huì)遇到很多坎。

我說尋找基本元素，即這種表情必須是底層基礎(chǔ)的，而不是一種特殊的。最終我們做到了。

一個(gè)是狀態(tài)。

現(xiàn)在大家打開一個(gè)朋友的微信名片，往往除了名字頭像，什么也看不到。朋友圈也很多人設(shè)置了時(shí)效。

但事情不應(yīng)該是這樣的，每個(gè)名片，應(yīng)該是活生生的才對(duì)。名片就是我們線上化生活的自己，它應(yīng)該反映自己真實(shí)的狀態(tài)。

我們之前嘗試用視頻動(dòng)態(tài)表達(dá)一個(gè)人的狀態(tài)，但視頻化表達(dá)在這個(gè)地方其實(shí)挺困難的，因?yàn)榇_實(shí)拍個(gè)視頻讓所有的好友看到，這個(gè)壓力還是挺大的，所以視頻動(dòng)態(tài)不算成功，每天大概有100多萬的人在發(fā)視頻動(dòng)態(tài)，我們也會(huì)把它升級(jí)一下。

升級(jí)以后的話，我們希望走到視頻的另外一面。

以前我說以前每個(gè)人發(fā)文字是很困難的，其實(shí)有一個(gè)前提，發(fā)一段讓很多人都看的文字是很困難的，其實(shí)自己隨便說一句話其實(shí)并不困難，狀態(tài)就是隨便說一句話這樣一個(gè)東西。

所以我們會(huì)走到視頻的另外一面，通過你隨便說一句話，隨便寫幾個(gè)字來表達(dá)自己的狀態(tài)。

并且，在某一時(shí)刻，一定還有其他的人跟你處在同一種狀態(tài)里，你會(huì)希望看到他們?？吹皆诖蛲粋€(gè)游戲的人，同一個(gè)咖啡吧的人，同一個(gè)景點(diǎn)旅游的人等，甚至是，同一種心情的人。

我一直認(rèn)為，社交的本質(zhì)是找到同類。

狀態(tài)，是用來給人看到的，最好還是給同類的人看到。

所以這一次，我們基于簡單的文字來組織狀態(tài)這樣一個(gè)功能。

我不知道結(jié)果會(huì)怎么樣。對(duì)于社交產(chǎn)品，因?yàn)樗侨后w互動(dòng)來導(dǎo)致結(jié)果的，所以很難預(yù)料社交功能交給用戶群體后的反應(yīng)。

但是，這樣的嘗試是應(yīng)該的。

因?yàn)?，個(gè)人的狀態(tài)表達(dá)的需求沒有被滿足。哪怕是簡單的一句“我今天很郁悶”，你不會(huì)發(fā)朋友圈，也不會(huì)跟朋友專門去說，那么，總需要一個(gè)地方可以說的。

十、歌曲

還有一個(gè)新的嘗試是關(guān)于聽歌的，在座有一位聽眾跟我聊過怎樣看見一首歌，歌不是用來聽的，是用來看的。

自從有了網(wǎng)絡(luò)、移動(dòng)互聯(lián)網(wǎng)以后，我感覺是很多人聽歌變得少了，只有在開車的時(shí)候才會(huì)聽歌，因?yàn)樵谌魏纹渌麜r(shí)候，你會(huì)寧愿去看視頻了。

微信其實(shí)是一個(gè)包含信息種類特別多的一個(gè)東西，但我一直不太滿意的一點(diǎn)是在微信里面聽歌的體驗(yàn)不太好，比如說我其實(shí)特別不理解為什么所有播放器都是一個(gè)電唱機(jī)在那里轉(zhuǎn)，因?yàn)殡姵獧C(jī)在我讀中學(xué)的時(shí)候，我家里有一個(gè)，我還自己去買唱片，但是我想應(yīng)該大部分用戶不會(huì)經(jīng)歷過那個(gè)時(shí)代，那為什么他們要看不認(rèn)識(shí)的物品，一個(gè)唱盤在那里轉(zhuǎn)。

我們?cè)诼牳璧臅r(shí)候應(yīng)該看見什么？

很多人說我們?cè)诼牳璧臅r(shí)候不應(yīng)該看見什么，而是應(yīng)該聽就好了，但我希望聽歌的時(shí)候能夠看到一點(diǎn)東西，因?yàn)槁牳璧臅r(shí)候有一點(diǎn)想象力，我們之所以希望在開車的時(shí)候聽，是因?yàn)槟愕难劬δ芸吹胶芏嗟臇|西，讓你的想象比平時(shí)更活躍了。

如果這些東西，聽同一首歌的人往往有很多人，舉個(gè)例子，你可以想象你在這里聽這首歌，另外一個(gè)人在另外的場景，還有很多類似的人，如果把他們聽歌的眼前畫面都連起來的話，總有一些人的畫面跟你是非常類似的，他能夠打動(dòng)你的，所以從這個(gè)點(diǎn)上出發(fā)，我們就把聽歌的體驗(yàn)做了一個(gè)視覺化的展現(xiàn)。

但這個(gè)難度其實(shí)特別大，因?yàn)榧夹g(shù)還沒有到那一步，我們的眼球都有一個(gè)攝像頭實(shí)時(shí)傳到云端，未來遲早會(huì)到那一步。

所以目前只能通過別的產(chǎn)品方式才能做到這一步，就是說有一些熱心的用戶可能會(huì)愿意說，我能夠把某一首歌變成一個(gè)制作得很精美的，類似MV這樣一個(gè)東西，可以分享給更多的人看到。

十一、浮窗

我其實(shí)一直很不喜歡浮窗，因?yàn)樗拖窆菲じ嗨?，這也是PC時(shí)代大部分網(wǎng)頁瀏覽的體驗(yàn)都不好的一個(gè)原因。

為了解決一篇文章要很久才看完，而中途要不斷處理微信消息的需要，我們有了浮窗功能。但它并不完美。

很多時(shí)候，一篇文章，一個(gè)長視頻，是要分很多次才看完的，如果每次都要先拖到浮窗，也是很繁瑣的。

現(xiàn)在，微信提供了一個(gè)尚未看完的內(nèi)容的列表，方便可以隨時(shí)找回這些內(nèi)容繼續(xù)看完。

尤其是對(duì)于長視頻，更加需要隨時(shí)可以切走，然后又能快速找到。

直播也一樣需要。

十二、輸入法

還有一個(gè)可以提一下的新的研發(fā)中的產(chǎn)品，是團(tuán)隊(duì)正在研發(fā)的輸入法。

我們會(huì)經(jīng)常收到投訴，說剛剛在微信里聊到什么，就在其他app里看到這個(gè)東西的廣告，是不是微信在出賣我的聊天記錄給廣告主。其實(shí)并不會(huì)。

我們從來不會(huì)去分析用戶的聊天記錄，即便因此損失了很多廣告收入。

所以當(dāng)我們的技術(shù)團(tuán)隊(duì)，就是機(jī)器語義理解的團(tuán)隊(duì)，說我們自己做輸入法可能會(huì)做的更好的時(shí)候，我當(dāng)然很贊成。

因?yàn)橹辽?，在安全性方面，我們可以做的足夠好?

我們的目標(biāo)不是一下子獲取多少用戶。

因?yàn)檩斎敕ㄊ俏淖直磉_(dá)的入口，并且輸入法必然越來越智能，可能出現(xiàn)新的輸入形態(tài)，所以還是值得投入去做的。

十三、團(tuán)隊(duì)

很多人說視頻號(hào)迭代速度特別快，事實(shí)上在微信的頭兩年，我們都是這個(gè)速度，后來有時(shí)快有時(shí)慢，其實(shí)我認(rèn)為做產(chǎn)品就是應(yīng)該快的。

我經(jīng)常說的一句話是，如果一個(gè)問題，三天沒有想出答案的話，那么三個(gè)月也想不出來，因此要么三天內(nèi)找到解決方法，要么放棄，去尋找新的路徑，而不是耗在那里。

孫子兵法說到，行軍打仗應(yīng)該要“其徐如林，其疾如風(fēng)”，做產(chǎn)品也是這樣，要么沒有想清楚，那不如什么都不做；如果要做，就要非?？焖俚牡?。

視頻號(hào)團(tuán)隊(duì)到目前為止也就一兩百人，其中還包括了三個(gè)算法團(tuán)隊(duì)，前后臺(tái)開發(fā)，產(chǎn)品運(yùn)營等。

這很微信風(fēng)格。

互聯(lián)網(wǎng)產(chǎn)品是關(guān)于創(chuàng)造力的，而不是拼人數(shù)。

如果一個(gè)一百人的團(tuán)隊(duì)做不出來一個(gè)產(chǎn)品，給一千人也照樣做不出來，甚至做的更差，因?yàn)橐磺说膬?nèi)耗太大了。

十四、關(guān)于產(chǎn)品

微信十年，如果非要用兩個(gè)詞來描述微信，我想，一個(gè)是連接，一個(gè)是簡單。

連接是很美的。

因?yàn)槭澜绲倪\(yùn)行就是靠萬事萬物的連接而進(jìn)行的。對(duì)產(chǎn)品來說，做連接，意味著做服務(wù)的底層設(shè)施，因?yàn)榛谶B接可以演變出來的結(jié)果是最豐富的。

很多的社交產(chǎn)品可能也做連接，但它止步于人，微信的連接范疇更大，公眾號(hào)、小程序目標(biāo)都是連接，連接人和內(nèi)容、人和服務(wù)，包括微信支付也可以認(rèn)為是一種貨幣的連接，視頻號(hào)的目標(biāo)也是連接。

重心不是在做內(nèi)容，而是在做底層的連接，這很重要。這也是為什么我們會(huì)提“去中心化“，因?yàn)檫B接和中心化是有些排斥的。

再說簡單。

我用簡單來作為美觀，實(shí)用，合理，優(yōu)雅的代名詞。

簡單是很美的。從一個(gè)物理公式到一個(gè)日常用品，往往是簡單的是更好的。實(shí)現(xiàn)同樣一個(gè)目標(biāo)，有一千種方法，但只有最簡單的方法是最美的。正是因?yàn)橛幸磺ХN方法存在，所以要真正做到簡單是很難的。

以前在飯否，看到很多產(chǎn)品越做越復(fù)雜，我吐槽說，“一個(gè)產(chǎn)品，要加多少功能，才能成為一個(gè)垃圾產(chǎn)品??！” 不是說加功能會(huì)讓產(chǎn)品不好，而是加了不必要的功能，或者加功能的方式不對(duì)。

十年來，微信加了很多功能。

我很慶幸的是，現(xiàn)在的微信，還幾乎和十年前的微信一樣簡單；雖然比十年前多了非常多功能，但這些功能，都已經(jīng)是用的最簡單的辦法了，所以增加的復(fù)雜度會(huì)小。

簡單才會(huì)好用，特別是一個(gè)產(chǎn)品有十億人在用的時(shí)候。

有時(shí)候也會(huì)想，很多用戶其實(shí)并不一定很在意產(chǎn)品是否簡單，粗制濫造的產(chǎn)品，也可能照樣會(huì)有很多人用的；但是我們還是會(huì)追求簡單，因?yàn)榭傆胁糠秩?，?huì)認(rèn)同這種簡單背后的美感。

微信雖然是這么大用戶量的產(chǎn)品了，并且經(jīng)歷了10年之久了；但我還是希望，它能一直保持自己的風(fēng)格，一直像一個(gè)小而美的產(chǎn)品一樣，有自己的靈魂，有自己的審美，有自己的創(chuàng)意，有自己的觀念。

而不僅僅是數(shù)字的奴隸，這樣的話，我和團(tuán)隊(duì)，才會(huì)為我們的工作而感到驕傲，并且覺得有意義，這是我對(duì)微信十年在今天的最后一個(gè)總結(jié)。

文章來源：人人都是產(chǎn)品經(jīng)理  作者：紙盒小卡車

藍(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ù)

彈窗作為應(yīng)用的輔助窗口之一，在B端產(chǎn)品中占據(jù)重要作用，很多產(chǎn)品甚至大部分功能都需要在彈窗中完成。有些彈窗會(huì)被用來承擔(dān)復(fù)雜的設(shè)置、有些彈窗會(huì)被頻繁調(diào)用、有些彈窗需要提供更詳細(xì)和更結(jié)構(gòu)化的信息，如何處理好彈窗在整個(gè)任務(wù)流中的交互對(duì)UI來說非常重要，因此本文主要探討B(tài)端產(chǎn)品中的彈窗設(shè)計(jì)和規(guī)范。文末會(huì)提供可供調(diào)研學(xué)習(xí)的B端網(wǎng)站。

如果你想了解B端系統(tǒng)圖標(biāo)的設(shè)計(jì)方法，可以瀏覽上一篇《小白適用：如何快速掌握系統(tǒng)圖標(biāo)的設(shè)計(jì)方法》，歡迎討論指正。

一、彈窗、對(duì)話框、窗口，你分清了嗎？

1、彈窗（popup）

不知道你們有沒有思考過“對(duì)話框”和“彈窗”的區(qū)別，我們平常所稱呼的“彈窗”主要著眼于動(dòng)作，意思就是彈出來的窗口，是泛指，在GUI（Graphical User Interface）屏幕中幾乎所有彈出來的對(duì)象都可以稱之為“彈窗”。

在常用的兩個(gè)前端網(wǎng)頁開發(fā)組件Ant Design和ElementUI中，沒有單獨(dú)命名為“彈窗”的組件，都是細(xì)分在各個(gè)功能分類中。比如Ant Design中相關(guān)的細(xì)分就有警告提示、全局提示、對(duì)話框、通知提醒框、氣泡確認(rèn)框等，而ElementUI中則又是不一樣的細(xì)分法，除了分類方法和命名不一樣，歸根結(jié)底達(dá)到的目的是一樣的，以上我們都可稱之為“彈窗”，當(dāng)然在工作中用細(xì)分的稱呼會(huì)更專業(yè)更明確。

2、窗口（window）

這里的“窗口”對(duì)標(biāo)“對(duì)話框”和“彈窗”的概念，窗口是承載應(yīng)用程序的區(qū)域，應(yīng)用程序的窗口被打開，則表示該應(yīng)用程序正在運(yùn)行中。窗口可以移動(dòng)、可以放大縮小，主要有二種姿態(tài)，一種是“獨(dú)占式”，一種是“暫時(shí)式”。顧名思義，“獨(dú)占式”就是需要占據(jù)大部分屏幕的應(yīng)用，ps、ai的窗口就是“獨(dú)占式”窗口，而“暫時(shí)式”則大部分時(shí)間在后臺(tái)運(yùn)行，比如音樂播放器、殺毒軟件等，只需在必要時(shí)打開即可。

一個(gè)應(yīng)用通常由一個(gè)主窗口和若干輔助窗口構(gòu)成，彈窗就是典型的輔助窗口之一。

3、對(duì)話框（dialog）

對(duì)話框強(qiáng)調(diào)了用戶與計(jì)算機(jī)進(jìn)行對(duì)話的過程，是疊加在應(yīng)用主窗口上的彈出框，一般在對(duì)話中它會(huì)給出消息或要求輸入。當(dāng)對(duì)話完成后，即可關(guān)閉對(duì)話框。說人話就是，對(duì)話框一般需要用戶進(jìn)行操作，當(dāng)用戶輸入或者點(diǎn)擊“確認(rèn)”、“取消”等按鈕時(shí)，計(jì)算機(jī)會(huì)根據(jù)指令進(jìn)行工作，這是一個(gè)人機(jī)“對(duì)話”的過程，因此稱之為“對(duì)話框”。

無論在現(xiàn)實(shí)中還是界面交互中，我們都不希望對(duì)話被打斷，所以對(duì)話框通常是模態(tài)的（下文會(huì)解釋模態(tài)和非模態(tài)的定義）。

梳理完三個(gè)容易混淆的概念之后，接下來主要從彈窗的二個(gè)角度展開討論：彈窗的分類和應(yīng)用場景；彈窗的設(shè)計(jì)細(xì)節(jié)和技巧。

二、彈窗的分類和應(yīng)用場景

1、彈窗的分類

彈窗可分為兩大類型：“模態(tài)彈窗”和“非模態(tài)彈窗”。

模態(tài)彈窗：用戶必須給予彈窗反饋，除非點(diǎn)擊關(guān)閉或者操作完成，否則彈窗會(huì)一直在。形式上來說就是給當(dāng)前頁面添加蒙層，使用戶將注意力集中在彈窗上。上文提到，無論在現(xiàn)實(shí)中還是界面交互中，我們都不希望對(duì)話被打斷，模態(tài)彈窗不會(huì)輕易被打斷，所以對(duì)話框通常也都是模態(tài)彈窗。

模態(tài)彈窗的常見場景：你打開了一個(gè)應(yīng)用的模態(tài)彈窗后沒有管它，然后切換到其他應(yīng)用程序中去，等你忙完回到原來的應(yīng)用時(shí)，那個(gè)當(dāng)初的模態(tài)彈窗仍舊在那兒等你。這就是模態(tài)彈窗，雖然看起來僵硬死板，但是它的目的和使用范圍通常是非常清晰的。

非模態(tài)彈窗：不需要給出反饋，不影響用戶的其他操作，主要有屬性配置彈窗、Tooltips、消息通知、氣泡框等類型。

下圖紅框中就是典型的非模態(tài)彈窗，它們可以同時(shí)開啟且互不影響，不會(huì)影響主程序的進(jìn)程。

非模態(tài)彈窗的另一個(gè)特點(diǎn)就是：實(shí)時(shí)生效。點(diǎn)開非模態(tài)彈窗的同時(shí)仍然可以看見主界面，主界面會(huì)根據(jù)你的操作實(shí)時(shí)變化，你可以隨心所欲地不斷選擇、改變、選擇、改變，而模態(tài)彈窗則無法在你點(diǎn)擊其中一個(gè)表單的當(dāng)下立即做出改變。

下圖例子就是非模態(tài)的屬性配置彈窗。

2、模態(tài)彈窗的應(yīng)用場景

1）通知公告類彈窗（通常是重要的信息，需要加強(qiáng)用戶關(guān)注度）

營銷彈窗

出于營銷目的，這類彈窗都會(huì)第一時(shí)間出現(xiàn)在你面前，直到手動(dòng)關(guān)閉，它的特點(diǎn)就是不用登錄也會(huì)出現(xiàn)，提高曝光率，便于拉新和轉(zhuǎn)化。

公告通知彈窗

主要是為了將一些重要信息通知給用戶，這些信息要么來自一些被觸發(fā)的事件，要么來自應(yīng)用開發(fā)者的信息，一般在用戶登錄后第一時(shí)間彈出，確保用戶不會(huì)錯(cuò)過。需要注意的是，在應(yīng)用的通知中心一般也需要保留這類重要或者高級(jí)別的通知，以便用戶可以隨時(shí)查看回顧。

提示類消息彈窗

提示類彈窗是由應(yīng)用程序主動(dòng)彈出的消息，主要有三種狀態(tài)：錯(cuò)誤、警告、確認(rèn)。通常是用戶進(jìn)行某項(xiàng)操作后給出的反饋信息，會(huì)中斷當(dāng)前工作流，屬于阻塞型提示。

以上都屬于通知公告類的“模態(tài)彈窗”，特點(diǎn)就是一般不需要用戶具體操作，用戶將其關(guān)閉或者點(diǎn)擊“確認(rèn)”等按鈕即代表用戶已經(jīng)接收到該消息，彈窗就完成了它的任務(wù)。

2）操作配置（B端應(yīng)用中大部分的模態(tài)彈窗都為這種類型）

簡單配置（表單少，操作清晰）

“簡單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入，交互清晰明了。比如創(chuàng)建項(xiàng)目、分享鏈接、更改名稱等操作。

標(biāo)簽頁彈窗

有些應(yīng)用的功能配置中有很多復(fù)雜的屬性，簡單平鋪的彈窗無法滿足需求，需要分層分類歸納，于是從20世紀(jì)90年代開始出現(xiàn)了選項(xiàng)卡/標(biāo)簽頁彈窗。它的優(yōu)點(diǎn)是合理利用了空間，也能讓用戶更好的理解信息層級(jí)。

mac os 8.5系統(tǒng)的彈窗（發(fā)布于1998年10月）

monday.com的配置彈窗（簡潔的標(biāo)簽頁）

標(biāo)簽頁彈窗的設(shè)計(jì)必須合理且適度，找到信息之間的因果關(guān)系，仔細(xì)斟酌并加以連接整理。同時(shí)，單個(gè)彈窗中的標(biāo)簽頁不宜過多，一般不超過五個(gè)（動(dòng)態(tài)可增減的標(biāo)簽頁除外）。

如果你的標(biāo)簽頁過度堆疊，你需要嘗試改變交互方式，重新整理信息。一種辦法是增加標(biāo)簽頁的深度，將能夠歸納在一起的內(nèi)容盡量整合，放置在單個(gè)標(biāo)簽頁中；另一種辦法是拆分信息，分成多個(gè)簡單的彈窗。

下圖中的例子就是第一種辦法，整個(gè)彈窗有三個(gè)標(biāo)簽頁，但是單個(gè)標(biāo)簽頁中又劃分了更詳細(xì)的結(jié)構(gòu)化信息，是一個(gè)典型的標(biāo)簽頁少但信息量大的彈窗。

流程步驟彈窗

流程步驟彈窗與標(biāo)簽頁彈窗接近，區(qū)別就是步驟彈窗需按順序進(jìn)行，一般上一步未完成之前無法進(jìn)入下一步，用戶注冊(cè)常用這種方式。

3、非模態(tài)彈窗的應(yīng)用場景

1）屬性配置彈窗

屬性配置彈窗主要為了讓用戶改變某一對(duì)象的屬性，可以是局部屬性也可以是全局屬性。

屬性配置也可以用模態(tài)彈窗，如何選擇用“模態(tài)”還是“非模態(tài)”？當(dāng)你需要讓用戶實(shí)時(shí)看到界面的變化或者表單項(xiàng)簡單的時(shí)候可以選擇“非模態(tài)”，如果操作復(fù)雜或者信息加載比較耗時(shí)，則采用“模態(tài)”更合理。

下圖為實(shí)時(shí)生效的日期選擇彈窗

2）下拉菜單

下拉菜單幾乎都是非模態(tài)，它的優(yōu)勢明顯，沒有復(fù)雜操作和各種表單，只需要鼠標(biāo)劃過點(diǎn)擊即可，快速。

3）消息提示

上文中應(yīng)用級(jí)的消息提示通常是模態(tài)彈窗，而非模態(tài)的消息提示彈窗則通常從頁面的頂部或者右側(cè)彈出，這類彈窗可以長時(shí)間駐留在屏幕邊緣，也可以一段時(shí)間后自動(dòng)消失。

4）氣泡框

點(diǎn)擊按鈕時(shí)，彈出氣泡式的彈窗就是氣泡框，氣泡框可以針對(duì)元素進(jìn)行簡單的操作，尺寸也會(huì)根據(jù)內(nèi)容大小不一。

5）Tooltips

Tooltips跟上圖的氣泡框很類似，區(qū)別在于Tooltips更輕量，屬于頁面中最小的彈窗類型，用于功能的提示說明，通常都是文字，背景用深色來與主界面拉開層次。

三、彈窗的設(shè)計(jì)細(xì)節(jié)和技巧

1、標(biāo)題

一般來說，如果是明確的屬性配置彈窗都應(yīng)該有一個(gè)標(biāo)題來說明用途或功能，以及關(guān)聯(lián)的動(dòng)詞來方便理解。比如“創(chuàng)建列表”、“刪除列表”、“修改配置”、“配置參數(shù)”等，不同標(biāo)題對(duì)應(yīng)不同的功能場景，前提是方便理解。另外，動(dòng)詞在名詞前面或者后面都可以，注意統(tǒng)一規(guī)范即可，不要一會(huì)兒在前一會(huì)兒在后。

標(biāo)題字號(hào)一般比默認(rèn)文本字號(hào)大2px或4px，也有應(yīng)用為了突出標(biāo)題，選擇使用更大的字號(hào)，但大的字號(hào)也應(yīng)該符合文字規(guī)范，而不是隨意使用。

2、關(guān)閉

模態(tài)彈窗應(yīng)至少包含一個(gè)以上的關(guān)閉方式，常見的彈窗關(guān)閉方式有4種：（1）、右上角的關(guān)閉按鈕；（2）、彈窗底部的“取消”按鈕；（3）、彈窗外的任意區(qū)域；（4）、一段時(shí)間后自動(dòng)消失。

1）關(guān)閉按鈕（彈窗外、彈窗內(nèi)、彈窗上）

“關(guān)閉”按鈕在彈窗外：常見于營銷彈窗，一方面按鈕遠(yuǎn)離彈窗，比較隱蔽，拖延用戶關(guān)閉彈窗的時(shí)間，提高信息的曝光率。

“關(guān)閉”按鈕在彈窗上：版式設(shè)計(jì)中有一個(gè)“破型”的概念，是一種打破規(guī)矩的設(shè)計(jì)技巧，能讓畫面快速吸引眼球，所以營銷類彈窗經(jīng)常采用這種設(shè)計(jì)方法。這種概念可以理解為，我們希望用戶關(guān)注于被強(qiáng)調(diào)的部分，常見的場景就是ios系統(tǒng)批量刪除App的時(shí)候，應(yīng)用圖標(biāo)左上角會(huì)出現(xiàn)“移除”按鈕。這種方式強(qiáng)調(diào)了“關(guān)閉”按鈕，視覺上增加層次外，用戶的關(guān)閉體驗(yàn)也更佳，減輕干擾性彈窗對(duì)用戶的負(fù)面情緒。

“關(guān)閉”按鈕在彈窗內(nèi)：這是應(yīng)用最廣泛最不容易出錯(cuò)的方式，對(duì)用戶來說，固定在彈窗右上角的“關(guān)閉”按鈕代表了安全感，在誤操作或者想中斷操作時(shí)我們會(huì)自然而然地去右上角點(diǎn)擊“關(guān)閉”。

2）彈窗底部的“取消”等指令性按鈕

彈窗底部的按鈕一般有2種功能:（1）、取消或者確認(rèn)；（2）、進(jìn)入下一步流程?；诖蠖鄶?shù)用戶右手掌握鼠標(biāo)的習(xí)慣，一般按鈕居右下角的設(shè)計(jì)方式更廣泛。這些按鈕上的文字大不相同，代表了對(duì)計(jì)算機(jī)的不同指令，但相同的結(jié)果都是關(guān)閉了當(dāng)前彈窗。

有些應(yīng)用也會(huì)采取按鈕居左的設(shè)計(jì)，這種方式有一個(gè)優(yōu)點(diǎn)就是減少誤操作，讓按鈕遠(yuǎn)離鼠標(biāo)點(diǎn)擊熱區(qū)。

3）、彈窗外的任意區(qū)域

這種方式一般用于模態(tài)彈窗，除了彈窗中的關(guān)閉按鈕外，點(diǎn)擊彈窗外的任意區(qū)域關(guān)閉體驗(yàn)更佳。操作配置類彈窗不建議采用這種方式，容易誤操作導(dǎo)致正在配置中的彈窗被關(guān)閉。

3、字號(hào)

B端彈窗的標(biāo)題字號(hào)通常比內(nèi)容文本大2px或4px，常用字號(hào)為12px、14px、16px，14px為默認(rèn)文本字號(hào)，12px為輔助說明字號(hào)，也有緊湊型頁面將12px作為常規(guī)字號(hào)。無論選用何種字號(hào)，都應(yīng)跟主界面的字體規(guī)范保持一致。

4、排版

左對(duì)齊：彈窗中應(yīng)用最多的對(duì)齊方式，適合表單較多的配置類彈窗。

居中對(duì)齊：常見于消息提示類彈窗，適合圖文結(jié)合或者信息較少時(shí)的排版方式。

兩邊對(duì)齊：兩邊對(duì)齊的方式讓彈窗看起來更規(guī)整，適用于平鋪的配置類彈窗。一般表單較多的情況下不建議使用兩邊對(duì)齊的方式，一方面左對(duì)齊比兩邊對(duì)齊看起來更有層次，另一方面多表單時(shí)兩邊對(duì)齊會(huì)使彈窗看起來冗長。

除了對(duì)齊方式，表單的排列是B端彈窗中最令人頭疼的一塊內(nèi)容了，在一些復(fù)雜的操作彈窗中，常常包含各種類型的表單，例如下拉框、輸入框、日期框、穿梭框以及各種組合模式的表單項(xiàng)，很容易讓表單看起來凌亂，也影響了交互操作。

單行一個(gè)表單項(xiàng)：常見的表單排列，適用于表單較少的排版方式。

單行多表單并排：在復(fù)雜場景中，單行只排列一個(gè)表單項(xiàng)會(huì)讓彈窗超長，因此會(huì)采用多個(gè)表單并列分布的方式。這種方式存在2個(gè)問題：（1）、如果表單的標(biāo)題長短不一，看起來參差不齊，下圖中的表單標(biāo)題一樣長是最理想的場景；（2）、橫向距離長，導(dǎo)致彈窗過大。

標(biāo)題與表單分行排列：越來越多的應(yīng)用采用這種表單排版方法，這種方法可以兼顧更多場景，可拓展性也更高。這種方法會(huì)增加縱向空間的占用，不過眼睛焦點(diǎn)的縱向?yàn)g覽比橫向?yàn)g覽獲取信息效率更高，所以在表單復(fù)雜的情況下，相比于上一種方法也是一種更優(yōu)解。

表單的排版不只局限于一種，我們需要根據(jù)表單內(nèi)容來設(shè)計(jì)。但是需要注意3點(diǎn)：

(1)、當(dāng)表單標(biāo)題長短不一，上下無法等距排列時(shí)，我們要盡量將標(biāo)題和表單分行排列；

(2)、一行不要出現(xiàn)太多的表單項(xiàng)，一般來說彈窗中最多一行排列三個(gè)；

(3)、表單的靈活性很強(qiáng)，哪些需要寬度固定，哪些需要根據(jù)內(nèi)容可擴(kuò)展可換行，我們都要在設(shè)計(jì)中加以規(guī)范說明，多考慮可能會(huì)出現(xiàn)的樣式問題，提前規(guī)避。

5、彈窗尺寸

彈窗是一個(gè)容器，容器的大小取決于放置其中的內(nèi)容物。這里主要討論場景復(fù)雜的對(duì)話框的尺寸規(guī)范，其他例如Tooltips之類可作為單獨(dú)的組件在需要的場景直接調(diào)用即可。

對(duì)話框的大小主要根據(jù)內(nèi)容而定，B端應(yīng)用中，一個(gè)尺寸無法滿足所有類型的彈窗需求，所以我們要設(shè)定幾種常規(guī)尺寸，一般可設(shè)定為4種：S（通知提示類）、M（配置簡單）、L（配置復(fù)雜或者擴(kuò)展詳情）、特殊（根據(jù)實(shí)際情況而定）。pc的小屏幕分辨率為1024*768，所以高度盡量控制在600px以內(nèi)（除去導(dǎo)航欄、工具欄高度），寬度控制在1000px以內(nèi)，如果你所設(shè)計(jì)的B端產(chǎn)品在某個(gè)固定的場景中使用，也可以根據(jù)使用場景而定，原則就是要讓彈窗能夠一屏展示完全。

6、設(shè)計(jì)技巧：巧用sketch組件

這里主要分享一個(gè)小技巧，對(duì)于彈窗來說很實(shí)用。sketch右側(cè)屬性面板有一個(gè)“調(diào)整尺寸“功能，非常適合各種組件化的應(yīng)用。不同場景下我們會(huì)需要不同尺寸的彈窗，有了這個(gè)功能，我們不需要每個(gè)彈窗都畫一遍，只需要?jiǎng)?chuàng)建一組基本的彈窗規(guī)范，其他尺寸可以根據(jù)所需場景調(diào)整。

未調(diào)整過的組件不能隨意更改尺寸，否則將變形不可用。

創(chuàng)建彈窗組件時(shí)，把彈窗里需要固定不便的尺寸參數(shù)設(shè)置好。（設(shè)置方法：靠左的左邊固定，靠右的右邊固定，對(duì)角的靠兩個(gè)邊固定，分割線高度固定，文字圖標(biāo)寬高都固定）。

設(shè)置好后的彈窗組件即可在設(shè)計(jì)稿中隨意調(diào)整大小，固定參數(shù)不會(huì)發(fā)生變化，因此我們?cè)谠O(shè)計(jì)規(guī)范中只需要做一種或二三種常見的彈窗樣式即可，不需要把設(shè)計(jì)稿中的每種尺寸都放到設(shè)計(jì)規(guī)范中。

表單同理，在組件中設(shè)置好參數(shù)后，調(diào)用時(shí)可以根據(jù)情況替換圖標(biāo)、文字和寬高，非常方便。

結(jié)語

在B端設(shè)計(jì)中，隨著數(shù)據(jù)量的增加和業(yè)務(wù)線的擴(kuò)大，設(shè)計(jì)師在設(shè)計(jì)時(shí)，常常需要考慮到交互的可擴(kuò)展性，我們?cè)O(shè)計(jì)的交互至少要滿足未來半年到一年的產(chǎn)品應(yīng)用。因此作為使用頻率很高的彈窗，我們?cè)谠O(shè)計(jì)時(shí)尤其需要考慮全面，不只為了滿足當(dāng)前的場景，也要考慮未來可能應(yīng)用的場景。

最后碎碎念一下，這是一篇從2020年跨越到2021年的文章，加上拖延癥，寫了很久...原本只打算簡單的分享和總結(jié)，結(jié)果越寫越多，越寫越擴(kuò)展。其中很多內(nèi)容是自己在實(shí)際工作中遇到的坑中摸索出來的，做個(gè)總結(jié)也便于自己的成長，歡迎各位大佬們批評(píng)指正。

文章來源：站酷  作者：time不休 

藍(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ù)