國(guó)內(nèi)互聯(lián)網(wǎng)近幾年發(fā)展迅速，在很多方面都超過了一些其他國(guó)家互聯(lián)網(wǎng)的發(fā)展階段。隨著國(guó)內(nèi)互聯(lián)網(wǎng)產(chǎn)品競(jìng)爭(zhēng)日趨激烈，很多企業(yè)都把目光投向了用戶量龐大的海外市場(chǎng)。而疫情對(duì)于全球經(jīng)濟(jì)的影響更是加速了海外市場(chǎng)的數(shù)字化進(jìn)程。據(jù) Sensor Tower 數(shù)據(jù)顯示，2020年Q1全球移動(dòng)互聯(lián)網(wǎng)應(yīng)用下載量達(dá)336億次，同比增長(zhǎng)了20.3%。

產(chǎn)品出海的第一道屏障就是語言。但若想打造一款能夠適應(yīng)海外市場(chǎng)的產(chǎn)品，只完成不同語種的翻譯是遠(yuǎn)遠(yuǎn)不夠的。在產(chǎn)品設(shè)計(jì)的過程中，我們需要考慮兩個(gè)方面：國(guó)際化與本土化。

國(guó)際化+本地化的策略，也就是“glocal—global+local”，指的是結(jié)合國(guó)際統(tǒng)一和地區(qū)差異。這種策略在統(tǒng)一的前提下，通過靈活配置保障地區(qū)的個(gè)性化體驗(yàn)，既能滿足統(tǒng)一維護(hù)提升產(chǎn)品效率，也能保障當(dāng)?shù)赜脩舻奶厥庠V求，是一種性價(jià)比很高的設(shè)計(jì)方案。

產(chǎn)品設(shè)計(jì)的國(guó)際化

產(chǎn)品的國(guó)際化，即全球化。國(guó)際化的通用設(shè)計(jì)能夠?yàn)楫a(chǎn)品打造一個(gè)全球統(tǒng)一的形象與內(nèi)核。

Chrome的不同地區(qū)首頁功能與樣式基本一致

一套通用的設(shè)計(jì)系統(tǒng)和設(shè)計(jì)規(guī)范，既可以幫助我們?cè)诋a(chǎn)品的國(guó)際化設(shè)計(jì)中 樹立產(chǎn)品調(diào)性，又可以保證操作的 一致性，同時(shí)提升設(shè)計(jì)的 高效性。阿里旗下面向東南亞市場(chǎng)的購物平臺(tái)Lazada在開發(fā)之初，通過使用Fusion Design的設(shè)計(jì)系統(tǒng)，大大節(jié)省了設(shè)計(jì)的時(shí)間。在如此復(fù)雜的電商業(yè)務(wù)場(chǎng)景之下，整套產(chǎn)品的設(shè)計(jì)最終僅3靠個(gè)設(shè)計(jì)師就完成了。

設(shè)計(jì)系統(tǒng)對(duì)產(chǎn)品研發(fā)成本的影響

除此之外，一致的內(nèi)核也能夠幫助企業(yè)在全球范圍內(nèi)建立起統(tǒng)一的品牌形象，增強(qiáng) 品牌的識(shí)別度與知名度。

產(chǎn)品設(shè)計(jì)的本土化

想要讓產(chǎn)品在某一個(gè)市場(chǎng)上站穩(wěn)腳跟，對(duì)于本土化的思考是必不可少的。本土化的核心是 因地制宜，根據(jù)地區(qū)差異相應(yīng)調(diào)整產(chǎn)品策略。

UC瀏覽器在不同地區(qū)的首頁布局

為什么說本土化對(duì)于產(chǎn)品的出海非常重要？其原因并不難理解。Charles Eames說過，“Recognizing the need is the primary condition for design.” 任何設(shè)計(jì)的本質(zhì)都脫離不開對(duì)需求和問題本身的理解。好的設(shè)計(jì)是在對(duì)需求、動(dòng)機(jī)、心理、環(huán)境等相關(guān)因素有了充分了解之后所產(chǎn)出的解決方案。

針對(duì)海外設(shè)計(jì)研究的思維框架

在考慮產(chǎn)品的本土化時(shí)，我們需要關(guān)注到用戶的需求是什么、是否仍然成立，用戶的行為模式是什么樣的，以及整個(gè)外在社會(huì)物質(zhì)、精神環(huán)境等方面的狀況。螞蟻金服團(tuán)隊(duì)通過海外本土化設(shè)計(jì)實(shí)踐，總結(jié)出了一套“環(huán)境-人-需求“的研究框架，列出了可以去調(diào)研的多個(gè)方面。

螞蟻金服-“環(huán)境-人-需求”出海產(chǎn)品設(shè)計(jì)研究框架（做了小部分修改）

需求（價(jià)值）

首先，我們要做的第一步判斷就是原來的 用戶需求是否成立。產(chǎn)品在原市場(chǎng)想要解決的問題，是否在新的市場(chǎng)仍然存在，即我們的產(chǎn)品是否 有用？這個(gè)問題的答案決定了原先的產(chǎn)品是否對(duì)于該市場(chǎng)的用戶是有 價(jià)值的。如果有價(jià)值，那么就可以深入探索如何讓用戶用起來；如果沒有價(jià)值，那么就需要進(jìn)一步判斷是否要繼續(xù)開拓這個(gè)市場(chǎng)，以及如果繼續(xù)開拓這個(gè)市場(chǎng)，在原有的產(chǎn)品形態(tài)上，我們能否通過改造的手段讓它符合在新市場(chǎng)的用戶群中挖掘出來的、不一樣的 新價(jià)值？達(dá)到了“有用”的標(biāo)準(zhǔn)，我們則需要開始考慮“ 好用”的問題。只有滿足“好用”這一條件，產(chǎn)品才能夠被用戶用起來、從而真正在新市場(chǎng)落地。在實(shí)現(xiàn)“好用”的過程中，我們可以關(guān)注以下幾個(gè)層面的影響因素：

生活形態(tài)、價(jià)值觀

生活環(huán)境與社會(huì)環(huán)境會(huì)塑造當(dāng)?shù)赜脩舻纳钚螒B(tài)與習(xí)慣。下圖分別是日本和北美地區(qū)的新聞資訊類App。同樣是推送新聞資訊，兩者在表現(xiàn)形式上卻大相徑庭?？梢钥闯鋈毡镜男侣凙pp布局緊湊、信息量大、頁面坪效很高；而北美的新聞App則更注重突出重點(diǎn)內(nèi)容，信息密度相對(duì)來說并不高。

日本-新聞資訊類App

北美-新聞資訊類App

這種差異的背后，其實(shí)是兩地上班族生活形態(tài)的差異。日本城市小、人口密度大，上班族通勤大多會(huì)選擇地鐵。而北美地區(qū)面積大，大部分人會(huì)駕車上班。駕車的人雙手需要長(zhǎng)時(shí)間控制方向盤，同時(shí)開車也需要持續(xù)注意路況，只能在間隙中查看新聞內(nèi)容；而乘坐地鐵的人雙手更加自由，也有較長(zhǎng)的通勤時(shí)間需要消磨，故可以接受更多的信息，也能夠接受更繁瑣的操作。

北美（左）和日本（右）各自的生活形態(tài)

有時(shí)候，某個(gè)地區(qū)的用戶長(zhǎng)期習(xí)慣的操作模式，會(huì)與主流的操作模式有所差異。設(shè)計(jì)師junu在個(gè)人博客中講述了他為Melon（一個(gè)韓國(guó)主流音樂播放器）進(jìn)行體驗(yàn)優(yōu)化的一段經(jīng)歷。他發(fā)現(xiàn)Melon當(dāng)時(shí)的播放操作邏輯比較冗長(zhǎng)，用戶需要先點(diǎn)選列表中的多首樂曲，再點(diǎn)擊底下的播放鍵，此時(shí)Melon會(huì)將用戶所選歌曲自動(dòng)生成一個(gè)列表并進(jìn)行播放。這和當(dāng)時(shí)Spotify等音樂播放器“點(diǎn)擊即播放”的主流交互邏輯相比，要更復(fù)雜和麻煩，尤其是在用戶只是想要立即聽到某一首歌曲的時(shí)候。因此，junu 提議引入“點(diǎn)擊=播放”的操作方式。但當(dāng)他們?cè)O(shè)計(jì)出了這樣的優(yōu)化方案后，卻發(fā)現(xiàn)在測(cè)試過程中老用戶們對(duì)這樣的交互方式感到陌生和沮喪?；谟脩舴答?，最終，他們采取了一個(gè)折中的方案，既保留了原先的復(fù)選框作為多選操作的區(qū)域，讓用戶仍然能夠選擇樂曲生成列表并且播放；同時(shí)又引入了點(diǎn)擊單曲直接播放的操作。相比第一版優(yōu)化方案，用戶的接受程度有了明顯提升。

Melon播放器的點(diǎn)選操作邏輯

設(shè)備環(huán)境

10年前，高端大屏幕手機(jī)在東南亞和非洲市場(chǎng)普及率并不高，因此產(chǎn)品出海時(shí)需要考慮當(dāng)?shù)爻Ｒ姷脑O(shè)備是什么，并作出相應(yīng)的適配。近幾年，隨著市場(chǎng)經(jīng)濟(jì)的發(fā)展以及中國(guó)手機(jī)的成功出海，即使是東南亞和非州的發(fā)展中國(guó)家，高端移動(dòng)設(shè)備的普及率也已經(jīng)很高，這為設(shè)計(jì)師在考慮通用性的過程中減輕了不少負(fù)擔(dān)。不過，在為每個(gè)地區(qū)的用戶做產(chǎn)品設(shè)計(jì)時(shí)，仍然需要調(diào)研清楚當(dāng)?shù)卦O(shè)備的使用情況，比如什么樣設(shè)備更流行、普及率更高；如果某一地區(qū)的設(shè)備不夠發(fā)達(dá)，那么設(shè)計(jì)的操作也需要考慮到設(shè)備不同所造成的差異。

業(yè)態(tài)/監(jiān)管

在不同的國(guó)家或者地區(qū)，各個(gè)行業(yè)的標(biāo)準(zhǔn)與制度也可能存在很大區(qū)別。例如財(cái)會(huì)軟件行業(yè)中，在北美和英國(guó)占據(jù)了重要市場(chǎng)份額的Quickbooks、Xero等公司，卻無法成功打入歐洲一些國(guó)家的市場(chǎng)。因?yàn)樨?cái)會(huì)軟件本身的功能、流程設(shè)計(jì)與當(dāng)?shù)氐呢?cái)務(wù)制度是緊密相關(guān)的。在這樣的情況下，歐洲本土的企業(yè)顯然會(huì)對(duì)當(dāng)?shù)氐恼吆椭贫雀邮煜?，也更容易設(shè)計(jì)出符合當(dāng)?shù)仄髽I(yè)與會(huì)計(jì)需求的財(cái)會(huì)產(chǎn)品。

2015年，Airbnb進(jìn)入中國(guó)市場(chǎng)。在最初的市場(chǎng)調(diào)研和用戶調(diào)研之后，針對(duì)本土化，他們所邁出的第一步就是根據(jù)中國(guó)的業(yè)態(tài)環(huán)境對(duì)產(chǎn)品的前10%和后10%做了改造。其中，產(chǎn)品的前10%指的是登錄這一類用戶開始使用產(chǎn)品所需要進(jìn)行的步驟，而后10%指的則是支付等用戶完成一個(gè)完整流程所需要進(jìn)行的操作。因?yàn)楫?dāng)用戶進(jìn)入到產(chǎn)品主要鏈路中時(shí)，其功能流程基本相通（搜索地點(diǎn)、挑選房間、瀏覽信息等），不需要做過多的改變；但產(chǎn)品的前10%和后10%則決定了用戶能不能把產(chǎn)品用起來并不遇到障礙。因此，針對(duì)登錄的部分，愛彼迎將原先的Facebook等第三方登錄替換成了微信與微博賬號(hào)的登錄；而在支付的部分，愛彼迎引入了支付寶與微信支付的方式，打破了中國(guó)本土用戶進(jìn)入產(chǎn)品和完成訂單的壁壘。

Airbnb產(chǎn)品中國(guó)本土化的“前10%與后10%”策略

社會(huì)經(jīng)濟(jì)

社會(huì)經(jīng)濟(jì)環(huán)境的不同代表著社會(huì)階層狀況的不同，它會(huì)影響人們?cè)谙M(fèi)時(shí)的行為方式。螞蟻金服在調(diào)研菲律賓市場(chǎng)時(shí)發(fā)現(xiàn)，當(dāng)?shù)負(fù)碛秀y行賬戶的人口僅占了總?cè)丝诘?4%，同期中國(guó)擁有銀行賬戶的人口則占了總?cè)丝诘?5%。而這34%的人基本上都是當(dāng)?shù)氐母蝗思爸挟a(chǎn)階層。在貧富分化嚴(yán)重的菲律賓，大部分普通民眾是沒有銀行賬戶的。這一人口學(xué)特征很大程度影響了螞蟻金服電子錢包業(yè)務(wù)對(duì)菲律賓目標(biāo)用戶的描繪，繼而影響了產(chǎn)品各個(gè)層面的設(shè)計(jì)。

文化/宗教

在各個(gè)文化/宗教里存在著不同的意象，也會(huì)有各自的表達(dá)方式與禁忌等等。在某個(gè)文化下表示友好的行為，在另一種文化下可能是一種冒犯。這些都是在設(shè)計(jì)時(shí)需要去注意的。除此之外，在不同的文化/宗教語境下，人們會(huì)有不同的行為模式與價(jià)值取向，這里我們會(huì)引入一個(gè)模型——霍夫斯泰德文化維度模式，來對(duì)這一問題進(jìn)行更詳細(xì)的解讀。

霍夫斯泰德文化維度模式（Hofstede’s Model of Cultural Dimensions）

霍夫斯泰德文化維度模式是荷蘭心理學(xué)家吉爾特·霍夫斯泰德提出的用來衡量不同國(guó)家文化差異的一個(gè)理論框架。它可以幫助我們對(duì)于不同文化群體的價(jià)值觀有一個(gè)較為全面的了解，從而更明白該文化群體中人們的行為傾向。此理論總結(jié)了衡量各文化價(jià)值觀的六個(gè)維度：

• 權(quán)力距離指數(shù)（power distance index，縮寫為PDI）：指在家庭、公司、社區(qū)等組織機(jī)構(gòu)中地位較低的成員對(duì)于權(quán)力分配不平等的接受程度。權(quán)力距離指數(shù)高的文化，組織更中心化、有特定的等級(jí)秩序、更容易聽從領(lǐng)袖的決策；而權(quán)力距離指數(shù)低的文化，組織更扁平化、主張人人平等、更傾向于自己做判斷而不易受控制。
• 個(gè)人主義（individualism，縮寫為IDV）：與集體主義相對(duì)，指?jìng)€(gè)人融入集體的程度。個(gè)人主義越高的文化，自我意識(shí)更強(qiáng)烈，更看重依靠個(gè)人努力獲取利益和價(jià)值，追求隱私保證和自由；而個(gè)人主義程度越低的文化，會(huì)期望得到“團(tuán)體”的照顧，更忠誠(chéng)地依賴于群體和熟悉的社交關(guān)系，更傾向跟隨主流價(jià)值觀做決定。
• 不確定性規(guī)避指數(shù)（uncertainty avoidance index，縮寫為UAI）：指社會(huì)能在多大程度上容忍不確定性。不確定性規(guī)避指數(shù)越高，人們會(huì)更遵循規(guī)則，恐懼變化、喜歡熟悉，并且習(xí)慣通過已知經(jīng)驗(yàn)推演事物邏輯。而不確定性規(guī)避指數(shù)越低，人們會(huì)更有更強(qiáng)的安全感，對(duì)變化的包容性更強(qiáng)，有著更輕松的生活態(tài)度，鼓勵(lì)冒險(xiǎn)，對(duì)風(fēng)險(xiǎn)的承受度更高。
• 男性化（masculinity，縮寫為MAS）：與女性化（femininity）相對(duì)，指人們（不論男女）更富有競(jìng)爭(zhēng)精神，自信與野心，注重財(cái)富和社會(huì)資源的積累，而女性化社會(huì)責(zé)注重人們之間的關(guān)系和生活的品質(zhì)。故男性化程度高的社會(huì)，人們會(huì)更加自信、進(jìn)去、好勝，追求英雄主義，關(guān)注物質(zhì)成功及權(quán)利地位；而男性化程度低的社會(huì)，人們會(huì)更加注重合作與謙和，信奉中庸共識(shí)主義，更享受生活、關(guān)愛他人。
• 長(zhǎng)期導(dǎo)向（long-term orientation，縮寫為L(zhǎng)TO）：最初名為“儒家動(dòng)力”（Confucian dynamism），指社會(huì)對(duì)未來的重視程度。長(zhǎng)期導(dǎo)向的社會(huì)，注重堅(jiān)持不懈和節(jié)儉，愿意計(jì)劃未來生活，也會(huì)設(shè)定長(zhǎng)期目標(biāo)；而短期導(dǎo)向的社會(huì)，會(huì)認(rèn)為活在當(dāng)下更重要。
• 放任與約束（indulgence vs. restraint，縮寫為IVR）：指社會(huì)成員在多大程度上意圖控制自身的欲望。放縱指數(shù)越高的社會(huì)，人們會(huì)更加樂觀、積極、沖動(dòng)，認(rèn)同隨心所欲的觀點(diǎn)，更傾向自我欲望的滿足和表達(dá)；而克制指數(shù)越高的社會(huì)，則會(huì)在心態(tài)上更加嚴(yán)肅、嚴(yán)謹(jǐn)、審慎，會(huì)有更嚴(yán)格的社會(huì)規(guī)范制度，而認(rèn)為休閑娛樂不重要。

使用他們官方網(wǎng)站（https://www.hofstede-insights.com/）上的 Culture Comparison Tool，可以查詢到各個(gè)國(guó)家的文化維度指數(shù)，也可以選擇不同的國(guó)家進(jìn)行對(duì)比。

• 日本與荷蘭的文化維度指數(shù)對(duì)比 - hofstede

在為特定地區(qū)的用戶設(shè)計(jì)產(chǎn)品時(shí)，我們可以以從這些維度去解讀他們的行為傾向，并據(jù)此提出相應(yīng)的解決方案或者設(shè)計(jì)方案。滴滴團(tuán)隊(duì)在開拓墨西哥市場(chǎng)時(shí)，根據(jù)墨西哥的文化維度指數(shù)在產(chǎn)品的本土化上制定了從功能到外觀等不同層面上的設(shè)計(jì)策略。

墨西哥地區(qū)的文化特征指數(shù)

滴滴墨西哥的本土化設(shè)計(jì)策略

這類源于文化差異的設(shè)計(jì)差異并不少見。在淘寶等國(guó)內(nèi)的電商平臺(tái)上，“按照銷量排序”是一個(gè)被高頻使用的功能，消費(fèi)者們認(rèn)為什么產(chǎn)品買的人多，什么產(chǎn)品就更好。這樣的觀念也催生了一大批店家刷單的行為。但當(dāng)在北美的電商平臺(tái)亞馬遜上，我們會(huì)發(fā)現(xiàn)并沒有按銷量排序這個(gè)選項(xiàng)。因?yàn)槊绹?guó)的用戶相對(duì)來說個(gè)人主義更強(qiáng)、更相信自己的判斷和選擇，他們不認(rèn)為他人推薦的就一定是好的。

• 

國(guó)內(nèi)外電商平臺(tái)對(duì)比

在企業(yè)即時(shí)通訊工具行業(yè)，國(guó)內(nèi)的主流產(chǎn)品，如企業(yè)微信、釘釘?shù)龋歼x擇了藍(lán)色這一比較沉穩(wěn)的顏色作為主色調(diào)，在產(chǎn)品功能的形態(tài)上也偏向于嚴(yán)肅。而海外的辦公產(chǎn)品Slack，視覺色彩更加豐富；整體的產(chǎn)品定位也更加活潑歡樂，常常會(huì)有“不嚴(yán)肅”的表達(dá)，比如在界面多處都使用了emoji。這樣的產(chǎn)品形態(tài)差異，其背后是兩種文化在放縱（享樂）/克制（嚴(yán)肅）這一維度上的差異。

企業(yè)微信與slack的產(chǎn)品風(fēng)格對(duì)比

內(nèi)容本土化

除了功能框架上的設(shè)計(jì)需要考慮本土化外，產(chǎn)品中運(yùn)營(yíng)內(nèi)容的本土化也是不可輕視的一環(huán)。Spotify Design 團(tuán)隊(duì)在《 Designing for Belonging: Why Image Localization Matters 》一文中，記錄了他們對(duì)于內(nèi)容本地化的一些經(jīng)驗(yàn)和思考。同樣，內(nèi)容的翻譯僅僅是本土化的第一步。在地區(qū)之間區(qū)別不大時(shí)，完成內(nèi)容的翻譯便能夠滿足其他地區(qū)的需求。如下圖中 “浴室歌單（ Songs to sing in the shower）”的播放列表，列表上的文案一經(jīng)翻譯，就能夠推送給德國(guó)、波蘭、以色列、意大利等一眾國(guó)家的用戶。但當(dāng)內(nèi)容的閱讀群體有著更顯著的差異時(shí)，僅僅翻譯是不夠的。在看到這張圖片的時(shí)候，其他人種比如亞洲人可能就不會(huì)產(chǎn)生很強(qiáng)的代入感，也會(huì)缺少對(duì)產(chǎn)品的一種歸屬感（這個(gè)產(chǎn)品并不是為”我“設(shè)計(jì)的）。

Spotify "Songs to sing in the shower" 歌單

下圖展示的是Spotify另一個(gè)歌單—— “快樂時(shí)光（ Happy Hits)" 的封面在不同國(guó)家的呈現(xiàn)形式?？梢钥吹?，面對(duì)文化差異更大的群體時(shí)，Spotify在保持了統(tǒng)一的樣式風(fēng)格的基礎(chǔ)上，針對(duì)每一個(gè)國(guó)家和地區(qū)都展示了當(dāng)?shù)厝嗽谒麄兊纳钪小翱鞓贰钡臉幼?。這種本地化內(nèi)容更加貼近當(dāng)?shù)赜脩?，也能夠讓用戶產(chǎn)生更強(qiáng)的連結(jié)感與共感。

Spotify "Happy Hits" 歌單

結(jié)語

回到那句話 —— ”Recognizing the need is the primary condition for design.“  產(chǎn)品的出海其實(shí)只是我們?cè)谠O(shè)計(jì)中會(huì)遇到的一種場(chǎng)景，在這個(gè)特定場(chǎng)景下我們的設(shè)計(jì)思考與其他場(chǎng)景下是互通的。如果僅僅完成了翻譯這一步，那我們就忽視了在新市場(chǎng)下另一群用戶的特征、需求、使用情景、操作習(xí)慣等關(guān)鍵信息。無論是不是在為產(chǎn)品的出海而設(shè)計(jì)，我們始終應(yīng)該保持對(duì)用戶的好奇，讓最終的設(shè)計(jì)實(shí)現(xiàn)我們期望達(dá)成的目標(biāo)。

文章來源：UI中國(guó)  作者：酷家樂用戶體驗(yàn)設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

為什么要寫這片文章？

自己入行交互一年多，最近從梁寧老師的《產(chǎn)品思維30講》和《增長(zhǎng)思維30講》獲得了兩套思維框架，并從中銘記了兩句話：“世界如此精彩，當(dāng)然不能置身局外”，“愿你向世界交付你的價(jià)值”，于是想通過運(yùn)用這兩套思維框架，重新審視各類產(chǎn)品，把自己訓(xùn)練成一個(gè)客觀的人，并向世界交付我自己的價(jià)值。

微信作為一款從2G時(shí)代出現(xiàn)的產(chǎn)品，跨越了十一年的時(shí)間，成為了如今國(guó)民級(jí)的應(yīng)用，甚至正逐漸成為我們的生活方式，卻一直保持著簡(jiǎn)單和連接的理念。就在今年一月份，微信推出了8.0版本，其中添加了很多新奇有趣的功能，站在用戶視角上，能看到評(píng)價(jià)有褒有貶，有人說微信根本不了解用戶而且孤傲，有人說微信正在變得臃腫，有人說微信體驗(yàn)不好但是沒有替代品不得不用?？戳撕芏嘟榻B微信8.0的文章，發(fā)現(xiàn)都只是在介紹微信8.0更新了什么，但是沒有看到有人會(huì)更深層次地聊微信為什么要這樣更新；上周我在聽完張小龍的微信十周年演講后，感觸良多，并從中窺探出了微信更新的些許用意。于是想試著從用戶體驗(yàn)的角度去分析微信，所以我想把第二個(gè)思維框架分析對(duì)象確定在了微信身上。

愿讀完這篇文章，你能獲得我所希望交付的價(jià)值～

上期傳送門：《從用戶體驗(yàn)的角度分析王者榮耀》

微信是一款什么軟件？

先說結(jié)論，微信本質(zhì)上是一款連接的信息流流量平臺(tái)。

在很多人人眼中，微信就應(yīng)該是一款社交工具，希望微信能夠做好社交的本職工作就夠了，不需要再加上其他雜七雜八的功能；有人抱怨說微信變得越來越臃腫，很多功能其實(shí)自己并不用得到，還占用手機(jī)的內(nèi)存，已經(jīng)丟失原來簡(jiǎn)單的模樣。

但是要知道，你眼中所看到的世界，其實(shí)是由各種外部和內(nèi)部的因素所塑造的。就像幾年前有一句特別火的話：你的眼睛里，有你走過的路，看過的風(fēng)景，讀過的書和愛過的人。你能成為你今天的樣子，其實(shí)是由你的人生經(jīng)歷所決定的。所以微信十年來不斷改版，從一款通訊工具變成如今的連接信息流的平臺(tái)，其實(shí)是由微信的基因所決定的。張小龍?jiān)?021年1月微信十周年公開課中講到：“微信10年，如果非要用兩個(gè)詞來描述微信，我想一個(gè)是連接，一個(gè)是簡(jiǎn)單。從一開始微信從一開始的連接人，到后來的連接企業(yè)，微信支付功能后開始連接現(xiàn)金流，到如今8.0的視頻號(hào)來連接視頻，短視頻的信息流，微信基于連接的理念從來沒有變過。這也是為什么當(dāng)年微信能夠戰(zhàn)勝米聊成為當(dāng)今最火熱的社交工具的原因。

在2014年的時(shí)候，微信1.0版本的時(shí)候，微信只有400萬用戶，而雷軍米聊有2000萬用戶，兩者的差距從微信3.0推出陌生人社交拉開，從推出微信支付功能開始徹底打敗了米聊。是因?yàn)槊琢氖侵皇窃谏缃?，而微信卻是在做連接；微信把社交看成一種信息流，從而把更多的信息流整合連接自己的體系內(nèi)；因?yàn)橐迅嗟男畔⒘髡系狡脚_(tái)上，于是微信變得越來越大，占用的內(nèi)存越來越多。看似有意為之，實(shí)則情非得已。另外說一句，雷軍貌似是在這次大戰(zhàn)之后學(xué)會(huì)了教訓(xùn)，并把這套戰(zhàn)略用在了小米身上，于是能看到你OPPO，ViVO把手機(jī)作為核心盈利產(chǎn)品，而小米卻只是把手機(jī)作為流量連接的入口，繼而發(fā)展出小米智能家居這一龐大的產(chǎn)業(yè)鏈。

所以你以為微信只是一款社交工具，但其實(shí)微信是連接信息流的流量平臺(tái)。

什么是信息流？字節(jié)跳動(dòng)的張一鳴認(rèn)為世界是由人流、物流、資金流、信息流組成。比如文字，語音，視頻，支付、都是信息流的一個(gè)分類。你可以把互聯(lián)網(wǎng)想象成一條大江大河，無數(shù)的企業(yè)將大江大河中的水引入自己的支流中，使自己變得強(qiáng)大；所以互聯(lián)網(wǎng)的的競(jìng)爭(zhēng)，本質(zhì)上是流量的競(jìng)爭(zhēng)，流量指的其實(shí)就是信息流。

什么是平臺(tái)？美團(tuán)副總裁張川的理解是：平臺(tái)首先是動(dòng)態(tài)不平衡，你不知道你能在這里遇到誰；第二條，用戶彼此之間要產(chǎn)生網(wǎng)絡(luò)效應(yīng)；第3條，用戶之間永遠(yuǎn)有彼此的需求，無法握手，需要平臺(tái)從中撮合。

微信里有的那么多陌生的人，陌生的公眾號(hào)，你不知道你能在這里遇到誰，你在微信中與熟人，陌生人社交，能夠產(chǎn)生巨大的網(wǎng)絡(luò)效應(yīng)，催生出了微信支付、公眾號(hào)這樣的龐大商業(yè)體系；用戶與熟人或陌生人之間、用戶與公眾號(hào)之間、用戶與商家之間，永遠(yuǎn)存在需求，而微信在從中充當(dāng)了連接的作用。

張小龍說過一段特別牛逼的話：讓產(chǎn)品自然生長(zhǎng)。微信作為超級(jí)巨大的流量平臺(tái)，真正做到了不打擾用戶，讓微信的流量自然碰撞、發(fā)酵，構(gòu)建出了如今如此龐大的微信帝國(guó)。

微信帶給了用戶什么樣的確定性？

微信始終致力于連接于簡(jiǎn)單，十年來不曾改變。

連接上面已經(jīng)說過了，下面來說說簡(jiǎn)單。微信提供了簡(jiǎn)單的確定性，每一個(gè)功能都切中要害，張小龍說微信最驕傲的是，十年的樣子和今天的樣子并沒有什么改變。通過最簡(jiǎn)單的方式做到最大程度滿足用戶的需求，這對(duì)產(chǎn)品經(jīng)理對(duì)用戶情緒把控要求特別高。分析一個(gè)產(chǎn)品一般要從三個(gè)角度去分析，首先是從宏觀視角看這個(gè)產(chǎn)品是附著在什么樣的經(jīng)濟(jì)體上，競(jìng)爭(zhēng)對(duì)手是誰，也就是常說的看大局，看清楚誰是自己的朋友，誰是自己的敵人。然后是從中觀視角去分析產(chǎn)品的服務(wù)人群，功能流程，信息結(jié)構(gòu)，并由此得出用戶畫像、用戶體驗(yàn)地圖、痛點(diǎn)癢點(diǎn)爽點(diǎn)等用戶體驗(yàn)相關(guān)的結(jié)論。最后是從微觀視角，從用戶內(nèi)心的底層情緒出發(fā)，去探究產(chǎn)品對(duì)于用戶內(nèi)心情緒的影響，由此來進(jìn)一步分析產(chǎn)品帶給用戶什么樣的確定性。

一般來說，用戶體驗(yàn)設(shè)計(jì)師掌握好中觀視角，基本上就能在行業(yè)內(nèi)生存下來。中觀視角更多靠的是經(jīng)驗(yàn)和套路，掌握分析產(chǎn)品的方法和路徑，多花時(shí)間去實(shí)踐，假以時(shí)日，你就能成為行業(yè)內(nèi)合格的用戶體驗(yàn)設(shè)計(jì)師。但更難的，其實(shí)是掌握好宏觀視角和微觀視角。宏觀視角是打大仗的能力，需要你站在足夠高的視角去俯瞰整個(gè)大局，看清楚產(chǎn)業(yè)周期，產(chǎn)業(yè)的方向，靠的其實(shí)是定戰(zhàn)略，和找杠桿，入行不久的體驗(yàn)設(shè)計(jì)師或產(chǎn)品經(jīng)理通常沒經(jīng)歷過大仗，是很難體會(huì)到的，我自己也沒經(jīng)歷過，所以只是聽梁寧老師介紹，學(xué)了一些這方面的思維框架而已，感興趣的讀者可以去了解。但其實(shí)梁寧老師更希望我們做到的，是掌握分析微視角的能力。

張小龍就是一個(gè)對(duì)產(chǎn)品的微觀視角特別敏感的人，他能從用戶底層細(xì)微的情緒變化中分析出用戶的需求點(diǎn)。想想微信從通訊工具到熟人社交，再到陌生人社交，再到公眾號(hào)、微信支付，直到今天的視頻號(hào)，都是精準(zhǔn)地把握了用戶最底層的情緒需求的結(jié)果。比如，微信的朋友圈從完全開放，到僅設(shè)置三天可見，再到三個(gè)月或半年可見，直到可直接管理是否看朋友圈，到了微信8.0，甚至要求用戶驗(yàn)證好友時(shí)就首先確定朋友圈權(quán)限，這一連串改變，其實(shí)都是源于張小龍對(duì)用戶在當(dāng)下社交情緒逐漸發(fā)生變化的精準(zhǔn)把控能力，這也是為什么都稱張小龍是產(chǎn)品經(jīng)理之神的原因。

微信為什么推出視頻號(hào)？

微信為什么推出視頻號(hào)呢？在我看來是為了爭(zhēng)奪信息流。這是騰訊繼2018年微視在短視頻大戰(zhàn)戰(zhàn)敗后發(fā)起的第二波戰(zhàn)爭(zhēng)。

上面說到過，互聯(lián)網(wǎng)的本質(zhì)其實(shí)是信息流，誰擁有的信息流越多，誰就能獲得更大的勢(shì)能。淘寶靠著電商和支付的信息流，就成為了中國(guó)第一的電商公司，字節(jié)跳動(dòng)靠著短視頻載體的抖音和長(zhǎng)視頻載體的西瓜視頻以及新聞?shì)d體的今日頭條在幾年間迅速成為了互聯(lián)網(wǎng)巨無霸級(jí)別的存在。

我們可以倒回幾年前回顧一下那場(chǎng)大戰(zhàn)，戰(zhàn)場(chǎng)上有抖音、快手、微視、還有就是一些草莽或腰部的小視頻軟件。當(dāng)時(shí)快手用戶數(shù)是高于抖音和微視的，甚至放出不屑于花錢買廣告做推廣的言論。結(jié)果就在2018年春節(jié)，抖音8天燒了5億美元，重金做推廣，吸引了大批短視頻愛好者和流量；隨后快手感覺勢(shì)頭不對(duì)，也開始瘋狂重金砸廣告，做補(bǔ)貼，并成了2020年春晚贊助商。而微視的做法是，大量補(bǔ)貼的同時(shí)，借助騰訊的杠桿，直接將入口做在了QQ和微信中，全面禁止非騰訊系短視頻鏈接在微信朋友圈中擴(kuò)散。結(jié)果出乎意料的是，微視和一眾其他成為了短視頻大戰(zhàn)的犧牲品，從此短視頻市場(chǎng)二分天下，南抖音北快手的陣容確定下來。與此同時(shí)，還有一件事值得關(guān)注，就是2019年，三家互聯(lián)網(wǎng)企業(yè)對(duì)微信發(fā)起了挑戰(zhàn)，一個(gè)是馬桶MT,一個(gè)是羅永浩的  聊天寶，最后一個(gè)是抖音的多閃，最后是以微信的不理會(huì)作為收?qǐng)觥?

為什么短視頻如此重要？因?yàn)樗芸赡苁俏磥硇畔⒘髦髁鞯妮d體。

不知道你有沒有感受到，微信公眾號(hào)沒以前那么火了，其實(shí)很大的原因是因?yàn)槲覀儼芽次⑿殴娞?hào)文章的時(shí)間拿去刷抖音、看短視頻了 。在2018年之前，微信公眾號(hào)是微信信息流非常重要的入口。在PC互聯(lián)網(wǎng)時(shí)代，搜索引擎百度是流量的入口，旗下的百度貼吧，百度知道，百度百科組成了中國(guó)最大的中文互聯(lián)網(wǎng)內(nèi)容創(chuàng)作社區(qū)，使得百度成為了BAT三巨頭的頭部企業(yè)。但是在移動(dòng)互聯(lián)網(wǎng)時(shí)代，各大應(yīng)用開始自建搜索引擎，自營(yíng)內(nèi)容對(duì)百度進(jìn)行了封鎖；微信公眾號(hào)從中崛起成為了新的流量入口，無數(shù)的自媒體創(chuàng)業(yè)者通過微信公眾號(hào)上創(chuàng)作內(nèi)容，成為了移動(dòng)互聯(lián)網(wǎng)時(shí)代的信息流入口。但是，隨著4G技術(shù)帶來了更高的網(wǎng)絡(luò)帶寬與傳輸速率，視頻內(nèi)容開始發(fā)展，短視頻應(yīng)運(yùn)而生。

短視頻為什么能夠取代文章？

回到底層情緒來看，是因?yàn)槿藗儽绕鹞淖直灸艿馗芾斫夂?jiǎn)單、直接的圖像。文字帶給人的反饋是延時(shí)的：你得先識(shí)別文字本身，理解語義，上下文聯(lián)想，最后你才能得出一段文字的含義。而短視頻是帶來即時(shí)反饋的，它沒有閱讀成本，能通過視覺和聽覺，就能給用戶帶來更加深刻和即時(shí)的情緒上的變化。其次，短視頻的創(chuàng)作門檻比寫文章低，張小龍?jiān)谘葜v中說到，許多人其實(shí)是不擅長(zhǎng)寫長(zhǎng)文章的，但是你讓他用手機(jī)拍一段視頻，這是一件很容易就能做到的事情。最后是因?yàn)楫?dāng)代人的心智提上去了，這時(shí)代的人們的觀念正在逐漸開放，更加樂于表達(dá)自己，短視頻當(dāng)然就能使更多人參與進(jìn)來，自然就能成為下一階段主流的信息流載體，微信當(dāng)然不能置身局外。

所以，到這里，你其實(shí)就已經(jīng)能看清一些微信在做的事情了。微信為什么要開設(shè)視頻號(hào)？就是為了爭(zhēng)奪下一階段信息流入口。為什么當(dāng)年支付寶要推微信？是為了爭(zhēng)奪的信息流。

當(dāng)前階段，誰是微信的競(jìng)爭(zhēng)對(duì)手？信息流的上游是人，誰掌握了最大的信息流誰就是競(jìng)爭(zhēng)對(duì)手，目前能看到的是抖音，2018年抖音推出多閃，其實(shí)就是為了構(gòu)建自己信息流平臺(tái)；在之后，可以預(yù)見到抖音和微信在短視頻流量爭(zhēng)奪上必有一戰(zhàn)。

微信能不能贏？

我覺得微信這次能贏，因?yàn)槿诵缘娜觞c(diǎn)推動(dòng)了互聯(lián)網(wǎng)的流量，但人性的光明構(gòu)筑了商業(yè)的文明。

互聯(lián)網(wǎng)商業(yè)本質(zhì)是流量*轉(zhuǎn)化率，字節(jié)跳動(dòng)鼓勵(lì)人們?cè)诙兑?、西瓜視頻上發(fā)視頻，采用的是補(bǔ)貼的方式，這會(huì)使得視頻博主在其平臺(tái)上發(fā)布視頻的目的變得利益化，是在變相鼓勵(lì)視頻創(chuàng)作者生產(chǎn)更具強(qiáng)吸引力的題材，取夸張的標(biāo)題名字來吸引更多用戶點(diǎn)擊，從而獲得更多流量，并通過廣告商的投資，帶來商業(yè)的變現(xiàn)。去年甚至還爆發(fā)了直播帶貨的新藍(lán)海，其實(shí)本質(zhì)上都是幫助視頻創(chuàng)作者帶來商業(yè)利益。色欲作為人類的本能，自然是最能吸引用戶的手段，所以你能看到與性相關(guān)的視頻在抖音，快手等平臺(tái)占比是最多的。

這種利用人性的弱點(diǎn)（貪婪、色欲、虛榮、窺視）構(gòu)筑的互聯(lián)網(wǎng)流量，使得抖音快手在短視頻草莽時(shí)代逐漸成為了短視頻中的頭部平臺(tái)，但是在存量競(jìng)爭(zhēng)市場(chǎng)上這一機(jī)制終究不可持續(xù)。相比，我更喜歡微信視頻號(hào)的做法。

微信選擇只做內(nèi)容承載和傳遞的載體，這就意味著微信不會(huì)去生產(chǎn)內(nèi)容，也不會(huì)去買內(nèi)容，并不會(huì)關(guān)注具體的內(nèi)容到底是什么，而是真正做到讓用戶自發(fā)地去生產(chǎn)和分享內(nèi)容，讓產(chǎn)品自然生長(zhǎng)。張小龍說視頻號(hào)的目標(biāo)是，希望人人都能夠很容易地通過視頻化的方式去公開表達(dá)內(nèi)容。這使得內(nèi)容創(chuàng)作者本身很難帶有利益目的。視頻號(hào)的初衷，就不是讓一部分內(nèi)容創(chuàng)作者獲得極高的關(guān)注度，成為網(wǎng)紅，獲得商業(yè)變現(xiàn)，而是希望人人都能夠像在朋友圈發(fā)布圖文一樣，以視頻化的形式去表達(dá)自己的內(nèi)容。微信能這么做，是因?yàn)槠鋼碛芯薮蟮男畔⒘?，有足夠的能力去做這件事。

盡管現(xiàn)在打開視頻號(hào)，里面同樣充斥各種基于人性的弱點(diǎn)所創(chuàng)作的內(nèi)容，微商、網(wǎng)課、低俗，誘惑等內(nèi)容遍地，但現(xiàn)在你看到的它的樣子，絕不是它本該有的樣子。我相信隨著微信對(duì)視頻號(hào)的迭代，視頻號(hào)終會(huì)成為微信所目標(biāo)的那個(gè)人人都能表達(dá)自己的樣子。

為什么張小龍說直播新的表達(dá)方式？

張小龍?jiān)诠_課中講到：未來直播可能變成一種很多人都在用的、個(gè)人表達(dá)方式。為什么？因?yàn)橹辈ツ軌驙I(yíng)造場(chǎng)景。

什么是場(chǎng)景？場(chǎng)就是時(shí)間+空間。景呢？是能夠觸發(fā)情緒的交互。直播比起視頻，更能夠激發(fā)用戶內(nèi)心的情感，能夠讓主播和聽眾之間產(chǎn)生更深刻的連接。這種感受其實(shí)是視頻無法比擬的。就像你在現(xiàn)場(chǎng)看演唱會(huì)和看錄播體驗(yàn)是完全不一樣的，周邊的環(huán)境會(huì)影響用戶的情緒。令我很深刻的體驗(yàn)是，今年王者榮耀冬季賽決賽第四局DYG對(duì)戰(zhàn)南京Hero戰(zhàn)隊(duì)，當(dāng)時(shí)的局面是0:3，如果第四局DYG沒有贏就意味著比賽的結(jié)束。當(dāng)時(shí)直播中所有人的心都很緊張，結(jié)果DYG里的清清用一手關(guān)羽力挽狂瀾，贏得比賽，在場(chǎng)主持人，和屏幕前的觀眾都被DYG清清的不服輸感動(dòng)，場(chǎng)面一度到達(dá)高潮，我的內(nèi)心也被深深震撼到了。但是之后看錄播，就會(huì)發(fā)現(xiàn)有人在看外星人似的，發(fā)彈幕很冷淡地表示都是基本操作，完全不懂我們?cè)诩?dòng)什么。這才使我意識(shí)到，直播真的比視頻更能激發(fā)用戶的情緒。

現(xiàn)在你打開微信直播，內(nèi)容質(zhì)量其實(shí)并不好，是因?yàn)樾铝髁咳肟跁?huì)帶來新紅利，投機(jī)者當(dāng)然不會(huì)放過這個(gè)機(jī)會(huì)。但實(shí)際上，微信直播應(yīng)該和會(huì)如今刷禮物求關(guān)注，公會(huì)云集的直播平臺(tái)不一樣，會(huì)呈現(xiàn)出一個(gè)更加開放、生活化的樣子。

微信為什么要在表情包、狀態(tài)上的創(chuàng)新？

微信8.0更新了動(dòng)態(tài)表情包，動(dòng)態(tài)，把視頻放在名片，音樂播放器優(yōu)化上等一系列新有趣的小功能。這些功能按照張小龍的說法是人們對(duì)情緒的表達(dá)更強(qiáng)烈了：他覺得人們喜歡表達(dá)更加強(qiáng)烈的表情，他覺得設(shè)置狀態(tài)能夠幫助用戶找到同類，他覺得音樂播放器不該是一個(gè)電唱機(jī)放在那里轉(zhuǎn)，而應(yīng)該給用戶更直觀的視覺表達(dá)。你會(huì)發(fā)現(xiàn)，張小龍描述需求的方式，是極度自我的表現(xiàn)，他會(huì)用心里想的美好的用戶故事來解釋為什么要加這個(gè)功能，而沒有根據(jù)數(shù)據(jù)來得出結(jié)論。甚至他說想做一個(gè)功能，讓十幾億人都能在同一張畫布上畫畫，然后看最后畫出來的是什么樣子。這些一些功能，張小龍就是拉一個(gè)一二十人的團(tuán)隊(duì)，討論了一下自己的想法，就這么簡(jiǎn)單的做了，就這么推出了。

這里我想說說自我與自律。成為高手的路徑是一萬小時(shí)定律，但是，想讓一個(gè)人持續(xù)在一件事情上花費(fèi)一萬個(gè)小時(shí)是很難的，有兩種方法可以實(shí)現(xiàn)。一個(gè)是保持自律，帶著對(duì)失敗的恐懼，堅(jiān)持下去；另一個(gè)是對(duì)這件事保持滿足和愉悅感，靠著對(duì)做這件事的熱愛來度過這一萬個(gè)小時(shí)。自我和自律的人都能成為非常成功的人，你從小受學(xué)校的灌輸自律的理念其實(shí)是為了便于管理。但自我的人，是充滿創(chuàng)造力的，對(duì)不滿意的事物是抱有強(qiáng)烈的情緒的，他們不能容忍不完美的事情，并會(huì)去努力改變它。蘋果大神喬布斯是一個(gè)極度自我的人，他能樂此不疲地對(duì)著ppt演練上百次，他不能容忍手機(jī)附帶個(gè)鍵盤笨重的樣子，喬布斯讓自己追求卓越的精神成為了蘋果的設(shè)計(jì)理念。梁寧老師說，張小龍是一個(gè)極度自我的產(chǎn)品經(jīng)理，正是由于其對(duì)用戶在社交需求上極其敏感的感受，才催生出了如今簡(jiǎn)單并且連接世界的微信，張小龍說自己是被上帝選中的，其實(shí)是因?yàn)槌掷m(xù)做出了正確的決定，而這決定，與其對(duì)用戶情緒的深刻把控有關(guān)。所以騰訊出產(chǎn)品經(jīng)理，阿里出運(yùn)營(yíng)人才。

你吸收誰的營(yíng)養(yǎng)，你就變成誰。你靠什么滿足你，你就會(huì)成為它的樣子。什么東西持續(xù)滿足你的東西，什么東西永遠(yuǎn)讓你不爽，這就是你的命運(yùn)。

總結(jié)

這次分析微信，我沒有嚴(yán)格根據(jù)梁寧老師給的中觀思維框架來分析（痛點(diǎn)癢點(diǎn)爽點(diǎn)、用戶畫像、用戶故事、用戶體驗(yàn)地圖、服務(wù)藍(lán)圖等），而是從微觀情緒和宏觀大局上分析了微信帶給人的確定感，微信視頻號(hào)的意義所在，聊了些關(guān)于自我與自律的事情。因?yàn)槲矣X得微信成為今天這個(gè)樣子，服務(wù)著如此龐大的用戶量，它已經(jīng)成為了我們生活中不可或缺的一部分了，人生百態(tài)，微信包容了無數(shù)種用戶畫像，在其上也書寫著無數(shù)的感動(dòng)人心的故事，我覺得這時(shí)再去聊中觀套路其實(shí)已經(jīng)沒有什么意義了。微信從1.0，跨越2G到5G的技術(shù)革新，從一個(gè)簡(jiǎn)單的通訊工具，不忘簡(jiǎn)單和連接的理念，十年時(shí)間迭代成為了我們離不開的一種生活方式，這放在人身上該是一個(gè)多么勵(lì)志的事情??！

最后我想交付給你一句，也是梁寧老師交付給我的，一直觸動(dòng)鼓勵(lì)我堅(jiān)持下去的話：

今天你在什么樣的點(diǎn)位上其實(shí)并不重要，重要的是在未來，你會(huì)以哪種方式，持續(xù)迭代。

文章來源：站酷   作者：努力的橙子

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

前言 

近期改版了小米商城APP的新品板塊，改版的過程總結(jié)了很多非常實(shí)用且有價(jià)值的設(shè)計(jì)方法，所以要盡快分享給大家。 

這次分享的內(nèi)容會(huì)從思維到技術(shù)全面講解，會(huì)告訴你如何從設(shè)計(jì)的角度理解需求，針對(duì)性的解決問題，以及交付設(shè)計(jì)時(shí)的溝通技巧，可謂是清清楚楚明明白白的分享設(shè)計(jì)經(jīng)驗(yàn)。 

案例解析 

電商產(chǎn)品運(yùn)營(yíng)板塊改版，很大一部分原因是數(shù)據(jù)不好或不夠美觀需要提升視覺，下面是改版前的截圖和調(diào)研UI設(shè)計(jì)滿意度的結(jié)果。 

調(diào)研的結(jié)果中其實(shí)前六項(xiàng)都是在講一件事，就是頭圖不夠好看，最后一個(gè)是運(yùn)營(yíng)的需求，查看更多入口點(diǎn)擊率過低，希望能提升打開率，這點(diǎn)的改版下面會(huì)詳細(xì)講解。 

從設(shè)計(jì)的角度找問題根源

舊版頭圖第一眼看過去，色調(diào)、質(zhì)感其實(shí)說的過去，但如果仔細(xì)觀察分析，就會(huì)發(fā)現(xiàn)有很多不恰當(dāng)?shù)牡胤健?nbsp;

比如投影與主光源不符、主光源在左側(cè)沒有專屬感、背景雜亂、空間感太強(qiáng)商品擺設(shè)置后，就像是在遠(yuǎn)處觀看物體，這樣會(huì)導(dǎo)致商品不突出，視覺上容易疲勞。 

上圖這些問題普通用戶一般不會(huì)準(zhǔn)確發(fā)現(xiàn)，但其實(shí)用戶能夠感知到不舒服，因?yàn)椴环先藵撘庾R(shí)認(rèn)知的物理規(guī)律。 

所以問卷中大家會(huì)提出不夠高大尚、沒有高級(jí)感、不夠簡(jiǎn)潔，這些就是普通用戶說不出哪里出了問題的語言表達(dá)。 

作為設(shè)計(jì)師應(yīng)該能夠從用戶的語言中，通過專業(yè)的設(shè)計(jì)角度去挖掘問題的根源。 

比如不夠簡(jiǎn)潔，是因?yàn)楸尘爸须s亂的東西太多；容易視覺疲勞是因?yàn)樯唐放c空間的關(guān)系沒有掌握好；主光源在左側(cè)，不容易營(yíng)造商品專屬舞臺(tái)的感覺，而且使用暖色調(diào)還會(huì)增加視覺疲勞感。 

找到問題的根源后，首先是改善展示商品的舞臺(tái)，解決商品空間上展示的問題，渲染出一張干凈的背景，不會(huì)有雜亂的感受，然后通過燈光和舞臺(tái)材質(zhì)質(zhì)感打造商品的專屬感。 

了解商品才能更好的打造舞臺(tái)

舞臺(tái)是為商品服務(wù)的，所以我們要了解大多數(shù)展示 商品的色調(diào)、拍攝角度、質(zhì)感材質(zhì)等，這樣才能夠更合理的思考舞臺(tái)的設(shè)計(jì)。 

另外，還要結(jié)合新品板塊的特征去研究設(shè)計(jì)方案，比如新品產(chǎn)品具有神秘感屬性，那就需要打造一個(gè)貼合新品特征的環(huán)境氛圍。 

米家商品 

小米手機(jī) 

米家的產(chǎn)品大多是白色，小米手機(jī)都是絢麗多彩的屏幕和有質(zhì)感的外框，加上新品商品的屬性較為適合有神秘感的氛圍，所以綜合來看我們需要一個(gè)暗色系且有質(zhì)感的舞臺(tái)。 

強(qiáng)調(diào)舞臺(tái)質(zhì)感是因?yàn)槟軌蚺c有質(zhì)感的手機(jī)產(chǎn)品形成一種呼應(yīng)，手機(jī)是小米的支柱產(chǎn)品，當(dāng)然會(huì)寵他，所以在設(shè)計(jì)上需要傾向手機(jī)的展示。 

什么是舞臺(tái)？

何為舞臺(tái)，舞臺(tái)是為演出者服務(wù)，其最終目的是給觀眾更好的視覺體驗(yàn)。 

回到舊版的案例中，商品放置空間的后方，就等于給用戶買的是最便宜的后排座位，后排視角當(dāng)然不會(huì)有好的視覺體檢，第一排的C位才應(yīng)該是我們?yōu)橛脩魷?zhǔn)備的視角。 

演唱會(huì)舞臺(tái) 

舞臺(tái)中的主光源一定是對(duì)稱、居中打在舞臺(tái)中央的，因?yàn)檫@樣觀眾的視線能更好的聚焦在演員身上，并且能渲染氛圍，呈現(xiàn)一種專屬感。 

所以我們舊版案例中主光源在左側(cè)，右側(cè)是投影，會(huì)導(dǎo)致用戶的視覺焦點(diǎn)很分散，從而不能把視線有效的引導(dǎo)在商品本身。 

C4D渲染舞臺(tái)

通過上面總結(jié)分析，我們大概對(duì)舞臺(tái)有了一個(gè)清晰的設(shè)計(jì)思路，背景用暗色系讓視覺更好的聚焦在商品身上，有反射高光質(zhì)感能與手機(jī)產(chǎn)品形成呼應(yīng)，空間上給用戶近距離的視覺體驗(yàn)，好了打開C4D干... 

C4D渲染舞臺(tái) 

非常簡(jiǎn)單的一個(gè)場(chǎng)景，使用一個(gè)階梯的圓柱體，放個(gè)背景，正前方放一個(gè)主光源，左右兩個(gè)對(duì)稱的輔助光，材質(zhì)球上加輕微的反射與高光，這樣渲染出來更有質(zhì)感，材質(zhì)顏色使用了藍(lán)色調(diào)，原因有三點(diǎn)： 

第一，小米剛剛推出的小米11主打的是靚麗的藍(lán)色調(diào)，輕裝上陣，暗藍(lán)色的舞臺(tái)與明亮的小米11放在一起會(huì)毫無違和感，同時(shí)也會(huì)呈現(xiàn)強(qiáng)烈的對(duì)比效果。 

第二，小米有太多白色的商品，暗藍(lán)色的背景會(huì)讓白色商品渲染的更加靚麗。 

第三，小米也有很多黑色的商品，偏藍(lán)色的背景能夠避免與黑色調(diào)商品撞色。 

最終舞臺(tái)效果圖 

最終的的調(diào)色在Ps中完成，舞臺(tái)的中央是亮的，營(yíng)造了一種聚光燈打在舞臺(tái)中央的感覺，這樣上面放上商品就會(huì)體現(xiàn)一種專屬感，這種效果是在C4D中材質(zhì)球使用漸變色。 

另外，暗藍(lán)色的氛圍上有一種神秘的感覺，這非常符合新品的亮相方式，整個(gè)舞臺(tái)沒有很強(qiáng)的反射和高光質(zhì)感，是因?yàn)?nbsp;舞臺(tái)的質(zhì)感要弱于商品本身的質(zhì)感，否則容易喧賓奪主。

新舊對(duì)比 

上圖中有質(zhì)感的舞臺(tái)可以增加手機(jī)的寫實(shí)投影，視覺上融合的非常好，下圖中是白色和黑色商品的展示，在暗藍(lán)色的背景下都能夠有效的突出商品。 

黑白商品圖展示 

優(yōu)化頭圖比例

新版與舊版還有一個(gè)最大的區(qū)別，新版頭圖的比例縮小至1:1，為什么是這個(gè)比例？舊版的長(zhǎng)圖為什么不合適？ 

舊版長(zhǎng)圖占據(jù)首屏巨大的面積，這種形式一般不適合常態(tài)化功能模塊，（常態(tài)化是指產(chǎn)品中一直存在的功能模塊）長(zhǎng)圖或者整屏適用于非 常態(tài)化強(qiáng)運(yùn)營(yíng)的活動(dòng)模塊，比如節(jié)日活動(dòng)，節(jié)日過后就會(huì)下架。 

小米上新板塊是首頁中常態(tài)的功能模塊，太大的展示面積其實(shí)浪費(fèi)了首屏空間，之所以用1:1比例，是因?yàn)榉治隽巳舾蓚€(gè)競(jìng)品的上新模塊都采用的是1:1的比例。 

所以記住這句話， 當(dāng)市場(chǎng)已經(jīng)驗(yàn)證過的設(shè)計(jì)形式，最好的就是采用它，這樣大概率能避免出錯(cuò)。

調(diào)整文案排版

舊版的文案是3行，看上去會(huì)略顯啰嗦，中間文字有點(diǎn)多余，還占了面積，改為兩行足以，一個(gè)產(chǎn)品名稱，一個(gè)產(chǎn)品賣點(diǎn)。 

舊版走馬燈是常規(guī)的原點(diǎn)示意，為了能給商品展示留出相對(duì)更大的面積，新版把走馬燈改為了數(shù)字示意，如上圖右下角2/5的形式，這樣就從4行變?yōu)榱?行，直觀簡(jiǎn)潔突出。 

敲黑板！“查看更多”入口的處理

上文問卷調(diào)查中最后一條，運(yùn)營(yíng)同學(xué)希望用戶能更多的點(diǎn)擊列表中的“查看更多”入口，之所以現(xiàn)在點(diǎn)擊率不高，是因?yàn)樵O(shè)計(jì)樣式是一種輔助形式，下圖所示。 

如果按運(yùn)營(yíng)同學(xué)的需求只是去強(qiáng)化入口的視覺表現(xiàn)，那未必是一個(gè)好的設(shè)計(jì)方案。 

想要突出哪里就在視覺上強(qiáng)化哪里，這是典型的產(chǎn)品思維，而UI設(shè)計(jì)師應(yīng)該結(jié)合整體頁面結(jié)構(gòu)的交互形式去思考優(yōu)化設(shè)計(jì)。 

首先梳理一下用戶在此頁面的瀏覽過程，當(dāng)用戶打開此頁面時(shí)，第一眼看到的是頭圖，因?yàn)樗钗矍虻?，其次就是開始滑動(dòng)頁面瀏覽商品列表。 

那么這時(shí)如果“查看更多”入口，通過強(qiáng)烈的色彩表現(xiàn)，或者動(dòng)效設(shè)計(jì)的方式，那一定會(huì)有部分用戶被吸引點(diǎn)擊進(jìn)入“查看更多”頁面，而用戶沒能繼續(xù)向下瀏覽頁面，就會(huì)看不到平臺(tái)推薦的商品，這不符合產(chǎn)品的設(shè)計(jì)邏輯。 

所以，當(dāng)用戶瀏覽到列表最后的商品了，還沒有被某個(gè)商品吸引，這時(shí)再出現(xiàn)一個(gè)“查看更多”按鈕入口會(huì)較為合理， 這樣的交互方式才符合用戶瀏覽的順序，修改后如下圖。 

另外，標(biāo)題也做了優(yōu)化，舊版主標(biāo)題與副標(biāo)題上下排列的方式會(huì)占據(jù)更大的面積，而且看起來還是非常擁擠，再加上主標(biāo)題與副標(biāo)題大小對(duì)比過于大，也直接導(dǎo)致用戶視線會(huì)忽略掉副標(biāo)題。 

新版修改后縮小主標(biāo)題字號(hào)，排版方式上主副標(biāo)題成左右結(jié)構(gòu)，這樣視覺上完全不會(huì)遮擋副標(biāo)題的展示，而且最大的好處還釋放了頁面中的空間，看下圖感受一下。 

滿足運(yùn)營(yíng)需求，增加動(dòng)態(tài)iCON

為了滿足運(yùn)營(yíng)同學(xué)希望用戶更多的進(jìn)入全部新品頁面的需求，設(shè)計(jì)上除了在商品列表下方增加了“更多新品”按鈕，同時(shí)也在頁面的右上角增加了一個(gè)進(jìn)入全部新品頁面的動(dòng)效形式icon。 

當(dāng)時(shí)在構(gòu)思這個(gè)icon時(shí)，從一個(gè)視覺表現(xiàn)很強(qiáng)的動(dòng)態(tài)形式，一直做減法直至非常恰當(dāng)合理有效的融入頁面當(dāng)中，下圖中最后一個(gè)最簡(jiǎn)潔的設(shè)計(jì)是確定的方案，簡(jiǎn)單的動(dòng)效突出而不突兀，恰到好處。

↓↓

↓↓

  
↓↓

做減法的icon 

動(dòng)態(tài)元素在頁面中最為吸引人，哪怕是做了弱化處理，所以有時(shí)候在設(shè)計(jì)上有一種策略是，前期用動(dòng)態(tài)的效果去培養(yǎng)用戶的習(xí)慣和認(rèn)知，當(dāng)對(duì)動(dòng)態(tài)效果已經(jīng)發(fā)揮了作用之后，后面就可以改回非動(dòng)態(tài)效果，這樣就能避免瀏覽頁面過程中動(dòng)態(tài)元素的干擾。 

總結(jié)：

改版設(shè)計(jì)，不能根據(jù)表面需求去設(shè)計(jì)，一定要找到問題的根源所在，然后針對(duì)性的解決這些問題，當(dāng)交付設(shè)計(jì)時(shí)，一定還要告訴需求方， 這樣設(shè)計(jì)的目的是什么，解決了我們現(xiàn)有的哪些問題。 

說不出來設(shè)計(jì)目的，編也要編出來，這樣至少能鍛煉你的思考力，編的多了自然會(huì)有明確正確的設(shè)計(jì)思考了。 

最后 

如果你現(xiàn)在打開小米商城進(jìn)入小米上新，會(huì)發(fā)現(xiàn)只改了一張背景圖，因?yàn)殚_發(fā)還沒有排上期，但最終會(huì)按此次改版的效果開發(fā)上線，所以有時(shí)候遇到這種情況時(shí)，設(shè)計(jì)師還需要結(jié)合當(dāng)前產(chǎn)品的開發(fā)框架進(jìn)行適配設(shè)計(jì)。

 

文章來源：站酷  作者：吳星辰

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

Part 1

————————

信息容器的概念

信息容器是承載信息的載體，位于內(nèi)容層。要理解信息容器的概念，首先要理解界面中的層級(jí)關(guān)系。一個(gè)界面除了豎直方向和水平方向維度，還有縱深維度。

從底層（遠(yuǎn)離用戶）到頂層（靠近用戶），基本上可以分為以下幾層：

1. 背景層

2. 信息層

3. 全局操作層（各種常駐于屏幕的bar、懸浮按鈕等）

4. 浮出層（模態(tài)類型的浮出層還需要有蒙版進(jìn)行隔斷）

   
   

本文要討論的“信息容器”，指的是信息層上，裝載信息的載體。信息的類型多種多樣，可以是文字、圖片、視頻、各種操作控件等。

Part 2

————————

信息容器的常見類型

常見的信息容器主要有2大類：列表和卡片。

在整理案例的時(shí)候，我不禁產(chǎn)生了一個(gè)疑問，到底什么是列表，什么是卡片？如何界定和區(qū)分兩者？這個(gè)問題乍一聽有點(diǎn)無厘頭，列表不就是列表嗎，多個(gè)布局一致的狹長(zhǎng)單元組合在一起，就形成了列表。那么什么是卡片呢？和屏幕兩側(cè)保持一定間距，帶圓角的就是卡片嗎？

我們不妨先看看下圖案例：

2.1 列表和卡片該如何界定？

為什么類似的布局形式，上圖中，圖1給人感覺是列表，圖2給人感覺是卡片，圖3既像列表又像卡片？

從內(nèi)容層面來說，包含的信息類型有：文字、圖標(biāo)/圖片、按鈕。幾乎沒有太大區(qū)別。

是什么導(dǎo)致我們觀感上的不同呢？

電商案例也許可以給出答案。

從電商產(chǎn)品的商品列表頁中可以看到，用戶可以自主選擇兩種不同的商品展示模式：列表模式和卡片模式。

這兩種模式幾乎可以對(duì)應(yīng)“列表”和“卡片”兩種信息容器樣式。完全一致的信息量：主圖、標(biāo)題信息、價(jià)格信息、輔助信息，相似的展示效率（一屏展示約4.5個(gè)商品），不同的信息容器展示形式給人不同的感覺。

單純從信息層面或者視覺層面都不能界定列表和卡片，如果多維度疊加限定又太繁瑣，因此本文給出的列表和卡片直接的區(qū)別界定是：可以自主定位關(guān)鍵線索，規(guī)劃視覺瀏覽動(dòng)線。如果視覺瀏覽大方向是豎直的，那么就歸入列表范疇，瀏覽動(dòng)線不是豎直而是折線的，都算在卡片范疇。

2.2 常見的信息容器分類：

除了上面說的，最常見的兩類信息容器：列表和卡片之外，還有另外兩種形式，分別是：無容器和復(fù)合容器。

這些容器具體有哪些特點(diǎn)，我們一一來看。

Part 3

————————

列表

列表的定義：將結(jié)構(gòu)一致的信息單元在豎直方向上鋪陳下去，形成的信息集合。

不同場(chǎng)景要呈現(xiàn)的信息側(cè)重不同。

舉例幾種常見的列表形式：

1. 用戶/消息列表

2. 圖文列表

3. 功能列表

4. “卡片型”列表

3.1 用戶/消息列表

用戶/消息列表的內(nèi)容結(jié)構(gòu)很清晰，頭像+身份+內(nèi)容提要+輔助信息。

圖片天然地比文字更具有吸引力，視覺上的優(yōu)先級(jí)排序是頭像＞身份＞內(nèi)容提要＞輔助信息。

當(dāng)然用戶可以很方便地選擇關(guān)注的對(duì)象是圖片還是文字，這體現(xiàn)了列表的優(yōu)越性，瀏覽動(dòng)線豎直，可以方便用戶根據(jù)自己想要的索引快速定位。

這里值得討論的是頭像用方形還是圓形的問題，相信大家都想到過這個(gè)問題，同樣是社交產(chǎn)品，qq是圓頭，微信是方頭，這里邊有什么原因呢？

本文嘗試分析一下，僅是個(gè)人意見，歡迎討論。

按照理論，圓頭親切的形狀感知更加適合輕松基調(diào)的產(chǎn)品，方頭嚴(yán)謹(jǐn)?shù)男螤罡兄舆m合嚴(yán)肅基調(diào)的產(chǎn)品。這解釋了電商類型產(chǎn)品（淘寶、京東）的信息通知一般都是圓頭的，匹配輕松愉悅的網(wǎng)購體驗(yàn)，而金融類產(chǎn)品（支付寶）多是方頭。對(duì)于同是熟人社交類產(chǎn)品的微信和qq來說，qq用戶層年齡偏低，屬性相對(duì)更加活躍，更加輕松的圓頭可能更適合此類用戶。

以iOS為例，當(dāng)用戶向左滑動(dòng)列表時(shí)，呼出針對(duì)該列表單元的操作。具體列表對(duì)應(yīng)具體操作，操作項(xiàng)數(shù)量不同。

方案A：

優(yōu)點(diǎn)：操作底板寬度適應(yīng)文案，不會(huì)出現(xiàn)空間局促的現(xiàn)象。

缺點(diǎn)：當(dāng)文案字段長(zhǎng)時(shí)，列表被推出屏幕外的內(nèi)容較多，當(dāng)用戶操作分心時(shí)，可能會(huì)忘記正在操作的對(duì)象，雖然這種情況極少發(fā)生。

方案B：

優(yōu)點(diǎn)：操作底板固定，文案折行規(guī)則明確，既不會(huì)造空間擁擠，被擠出屏幕外的列表區(qū)域可控。

方案C：

優(yōu)點(diǎn)：搭配圖標(biāo)，視覺更豐富。

缺點(diǎn)：圖標(biāo)占據(jù)了一定高度，導(dǎo)致文案無法折行，列表被推出屏幕外的內(nèi)容較多，與方案A類似。

綜上，個(gè)人認(rèn)為方案B是最合理的，對(duì)于文案長(zhǎng)度的寬容度高，即便文案較長(zhǎng)，也可以保證視覺和諧，并保留較多列表內(nèi)容。

在用色策略上，使用的是為大眾所接受的“語義色”，一些具體的顏色在長(zhǎng)期經(jīng)驗(yàn)積累中形成了固定的語義。

當(dāng)用戶觸發(fā)了帶有一定破壞性的操作時(shí)，需要用戶進(jìn)行二次確認(rèn)。

并不是所有情況都需要二次確認(rèn)，二次確認(rèn)的樣式也有多種。

同樣都是模態(tài)視圖，要表達(dá)的信息也相似，都是要求用戶進(jìn)行選擇，為什么有些產(chǎn)品選擇將對(duì)話框居中，有些產(chǎn)品選擇將對(duì)話框放在底部？這里涉及到關(guān)于模態(tài)視圖的相關(guān)知識(shí)點(diǎn)，本篇文章旨在討論信息層面的內(nèi)容，模態(tài)視圖涉及到了浮出層的內(nèi)容，將在下篇文章中進(jìn)行詳細(xì)探討。本篇文章不做過多延展。

3.2 圖文列表

信息流產(chǎn)品一般是由圖片+重點(diǎn)文案+標(biāo)簽（可有可無）構(gòu)成。

不同性質(zhì)的產(chǎn)品想要突出的重點(diǎn)不同，根據(jù)內(nèi)容的重要性權(quán)重來分配視覺占比。

從上方幾個(gè)例子中我們可以看到：

在圖文比例從左到右依次提升；

圖文布局案例1-3使用了左文右圖的方式，案例4-7使用了左圖右文的方式。

搞清楚如何圖文布局和設(shè)置圖文比例，就基本解決了資訊流頁面最關(guān)鍵的問題。

資訊列表或稱feed流，主要根據(jù)用戶喜好定向推送內(nèi)容。除了從用戶日常瀏覽、搜索等行為中提取用戶喜好信息，用戶主動(dòng)反饋的信息精度更高，用戶不惜花費(fèi)更多操作成本來提示產(chǎn)品，對(duì)內(nèi)容不感興趣。

從視覺上說：

1、提交反饋的入口（小而淺的icon）都不明顯，有些產(chǎn)品用“更多”來提示用戶，有些產(chǎn)品用更加負(fù)面的“關(guān)閉”來提示用戶。當(dāng)用戶對(duì)內(nèi)容產(chǎn)生較為強(qiáng)烈的反感時(shí)，才會(huì)注意到屏蔽入口。常規(guī)瀏覽時(shí)，該圖標(biāo)不會(huì)影響用戶注意力。

2、反饋形式采用模態(tài)對(duì)話框，用戶需要選擇具體操作，是屏蔽內(nèi)容或作者、還是舉報(bào)或不感興趣。

3、對(duì)話框是否有指向性：從表意明確的角度上來說，帶有箭頭的氣泡更有利于用戶定位對(duì)象。

從交互上說：

反饋入口熱區(qū)較小，容易誤觸，大多數(shù)情況下，用戶不會(huì)注意和點(diǎn)擊該圖標(biāo)，用戶是以瀏覽為主要行為。

3.3 功能列表

列表索引一般還是定位文字為主要形式，不同用戶的認(rèn)知水平不同，圖標(biāo)表意始終是一大難點(diǎn)，多用為輔助記憶或單純提升視覺美觀。圖標(biāo)雖然是體現(xiàn)設(shè)計(jì)風(fēng)格的重點(diǎn)，但是在具體情境下，如設(shè)置頁，用戶更加在意快速找到自己要找的內(nèi)容，多度的圖標(biāo)樣式，實(shí)際上會(huì)折損用戶的檢索效率。

一般功能頁面或放置許多功能，常常會(huì)超過十幾項(xiàng)，這種情境下，檢索效率低下是一個(gè)痛點(diǎn)。

如何提高檢索效率？—— 分組

分組給用戶提供了認(rèn)知線索，根據(jù)格式塔原則，用戶總是傾向于把距離近的、樣式統(tǒng)一的元素歸位同類。

毫無分組顯然對(duì)于檢索是不利的，用戶需要逐一瀏覽，該情況適用于列表項(xiàng)無法分組時(shí)，如果有分組條件，務(wù)必分組，幫用戶節(jié)約篩選成本。

UI界面中，列表的分割方式常見的有以下3種：

1. 線條分割

2. 塊面分割

3. 間距分割

3.4 “卡片型”列表

在我們的固有觀念里，大圓角，不通欄，有投影的形象就是卡片。

這種樣式也越來越盛行，許多產(chǎn)品嘗試將列表也用“卡片化”進(jìn)行包裝。

雖然是相當(dāng)細(xì)節(jié)的點(diǎn)，但是精細(xì)化處理之后的結(jié)果就立刻會(huì)與批量化處理的結(jié)果拉開差距。

產(chǎn)品級(jí)的風(fēng)格統(tǒng)一來源于點(diǎn)滴細(xì)節(jié)。

Part 4

————————

卡片

卡片的類型繁多：?jiǎn)瘟写罂ㄆ?、泳道、?nèi)容流（兩列網(wǎng)格、瀑布流）、宮格

4.1 大卡片

從內(nèi)容展示效率上來講，單張大卡片就占據(jù)占據(jù)屏幕（劉海屏）超出一半的高度，用戶需要不斷滑動(dòng)屏幕瀏覽下方內(nèi)容，操作成本較高。大卡片形式對(duì)內(nèi)容本身，如圖片的質(zhì)量要求很高。這種模式常見于圖片社區(qū)或垂類電商產(chǎn)品，圖片社區(qū)（如躺平）本身較為小眾、即便是UGC（用戶產(chǎn)生內(nèi)容）單元，用戶上傳的圖片素材平均水平也較高，垂類電商（如Nike）圖片品質(zhì)由編輯控制，質(zhì)量高且穩(wěn)定。以上類型產(chǎn)品不以量吸引用戶，用戶往往更加在意內(nèi)容本身是否優(yōu)質(zhì)。用戶沒有帶著明確的目標(biāo)，心智更加類似于瀏覽雜志。產(chǎn)品提供什么內(nèi)容，就進(jìn)行瀏覽。從上方案例可見，除了微信讀書之外的3款產(chǎn)品首頁都沒有突出搜索功能，而是以信息流呈現(xiàn)為主。

與列表分割一致，卡片也有對(duì)應(yīng)分割方式。

大卡片占據(jù)屏幕面積大，理論上大卡片的內(nèi)容質(zhì)量是經(jīng)審查的。部分產(chǎn)品不存在大卡片容器的交互，點(diǎn)擊卡片直接進(jìn)入詳情頁。部分產(chǎn)品通過比較低調(diào)的方式向用戶收集對(duì)于內(nèi)容的意見。如微信讀書長(zhǎng)按卡片，可以選擇不再顯示該卡片內(nèi)容，產(chǎn)品收集反饋，對(duì)于用戶喜好的描述可以進(jìn)一步具象準(zhǔn)確。長(zhǎng)按不是一個(gè)高頻手勢(shì)，用戶觸發(fā)該手勢(shì)往往是試探性的，代表用戶確實(shí)對(duì)于內(nèi)容有意見要傳達(dá)。躺平使用了簡(jiǎn)約三小點(diǎn)樣式的“更多”圖標(biāo)來收納不常用的收藏和舉報(bào)操作。

4.2 泳道

何為泳道？顧名思義，常見的滑動(dòng)手勢(shì)是上下方向滑動(dòng)，但有時(shí)也會(huì)出現(xiàn)橫向滑動(dòng)的情況。一系列對(duì)象在一條橫向軌道內(nèi)左右滑動(dòng)，該類型的形式組合在一起，就好比泳道賽道一般。

可以橫向滑動(dòng)以查看內(nèi)容的呈現(xiàn)形式，稱為“泳道”。泳道可以有多種形式。

停止位置隨機(jī)：

內(nèi)容與手勢(shì)相關(guān)度高，比較自由，但停止位置隨機(jī)，不能保證停下后用戶能完美看到當(dāng)前卡片的所有信息，需要用戶微調(diào)卡片位置。

停止位置固定：

根據(jù)用戶滑動(dòng)速率，模擬物理慣性和摩擦，判斷最終展示哪張卡片，并將卡片呈現(xiàn)在屏幕中部，確?？ㄆ系男畔⒍伎梢宰x取。這種交互更加合理，給滑動(dòng)設(shè)置卡點(diǎn)，類似banner效果。

4.3 雙列卡片

雙列卡片可以看成是大卡片（單列）的另一種表現(xiàn)形式。這種形式更加提高了空間利用率，對(duì)于單一信息展示更加克制。平衡了效率和效果，是電商、圖片社區(qū)、視頻等產(chǎn)品類型的首選表現(xiàn)手法。

雙列卡片可以細(xì)分為兩大類：

卡片流（對(duì)齊）、瀑布流

卡片對(duì)齊：

優(yōu)點(diǎn)：規(guī)整統(tǒng)一，視覺動(dòng)線清晰，瀏覽舒適。

缺點(diǎn)：對(duì)主圖尺寸要求高，確定的比例會(huì)對(duì)商品展示有一定局限。

瀑布流：

優(yōu)點(diǎn)：圖片尺寸寬容度高，滿足一定比值區(qū)間即可。保證商品的展示完整度。錯(cuò)落的布局容易形成節(jié)奏。

缺點(diǎn)：不容易進(jìn)行比較，若要進(jìn)行圖片間的對(duì)比，比較困難，視覺動(dòng)線混亂。

兩列式的卡片布局需要注意內(nèi)容層與背景層的區(qū)分。

大多數(shù)產(chǎn)品的背景層是淺灰色，內(nèi)容層是白色，色差可以建立區(qū)分。部分產(chǎn)品背景層是白色，或者說取消了背景層的概念，那么要建立卡片之間的區(qū)分，就需要通過間距或者卡片加底色的方式。

個(gè)性化推薦模塊對(duì)電商產(chǎn)品尤其重要，準(zhǔn)確地將用戶可能感興趣的產(chǎn)品推薦出去，可以減少用戶的搜索、篩選步驟，提升購買效率和愉悅感，從而提升用戶對(duì)產(chǎn)品的評(píng)價(jià)。因此，不斷收集用戶的喜好相當(dāng)重要，盡管各種算法已經(jīng)讓產(chǎn)品顯得越來越智能，但依舊要給用戶留下提建議的入口。

上文介紹了資訊類產(chǎn)品中，用戶如何給出對(duì)于具體信息的反饋，電商類產(chǎn)品原理也大同小異。

從功能上來說，淘寶、閑魚、京東，都是通過用戶手勢(shì)（點(diǎn)擊圖標(biāo)或長(zhǎng)按卡片或兩者皆可）來呼出選項(xiàng)，用戶通過選擇來表達(dá)意見，從而使推送更精準(zhǔn)。

從視覺上來說，淘寶和閑魚的反饋形式類似，都是在卡片上添加一個(gè)黑色半透明蒙版，將有限的選項(xiàng)豎直碼放在卡片上，類似小型模態(tài)的概念（但是這里不同于嚴(yán)格的模態(tài)視圖，沒有限定用戶必須要做出選擇，用戶可以直接劃走）。而京東的邏輯不同，使用了傳統(tǒng)阻斷性模態(tài)視圖的處理方式，將下方卡片用蒙版遮擋，希望用戶專注于選擇。

從阻斷感上說，京東的阻斷干是最強(qiáng)的，將用戶從原本的瀏覽行為中提取出來，請(qǐng)用戶嚴(yán)肅地做出對(duì)于當(dāng)前商品的反饋。這樣收集信息的效率更高。由于選項(xiàng)是盛放在帶有指向性的小氣泡之上，針對(duì)性足夠，且延展性好，氣泡的高寬都可以調(diào)整，而淘寶和閑魚的處理方式，在極端情況下，如選項(xiàng)超過5項(xiàng)時(shí)，所有內(nèi)容放在卡片之上，空間就很緊湊。

這類操作比較隱晦，可點(diǎn)擊按鈕很不明顯，長(zhǎng)按手勢(shì)也不常用。同樣是當(dāng)用戶有明確反饋需求時(shí)，才會(huì)尋找反饋入口，一般情況下，用戶不會(huì)注意到。以用戶常態(tài)下的瀏覽行為為最優(yōu)先。

閑魚的交互做的很細(xì)致，蒙版出現(xiàn)采用了水波的形式，用戶抱著要吐槽的心態(tài)，這種精致有巧思的小動(dòng)效在一定程度上可以緩和用戶的煩躁的心理。

除了電商類產(chǎn)品，部分視頻類產(chǎn)品長(zhǎng)按卡片也會(huì)呼出對(duì)應(yīng)效果。

案例1和案例2，長(zhǎng)按卡片，都是出現(xiàn)視頻片段的預(yù)覽。效果類似iOS的3Dtouch，在相冊(cè)中按壓具體照片即可預(yù)覽。而案例3，點(diǎn)擊“更多”圖標(biāo)，呼出操作。然而選項(xiàng)只有1項(xiàng)，不符合邏輯，單一的選項(xiàng)無法構(gòu)成“選擇”，這會(huì)讓人有點(diǎn)摸不著頭腦。

4.4 宮格/網(wǎng)格

如果把界面看作是一張大網(wǎng)格，不同的內(nèi)容占據(jù)著不同位置、不同面積的頁面區(qū)域。

除了我們已經(jīng)熟悉的“有序”布置，如從上到下依次排列內(nèi)容（大卡片），或者從左往右依次排列內(nèi)容（泳道），還有更加靈活多變的排布方式可供選擇。

布局的本質(zhì)是分配界面面積，用以盛放內(nèi)容，同時(shí)運(yùn)用面積對(duì)比進(jìn)行突出。除了面積對(duì)比的方式外，還有其他方式可以突出關(guān)鍵內(nèi)容。

Part 5

————————

無容器 & 復(fù)合容器

無內(nèi)容的呈現(xiàn)形式比較簡(jiǎn)單：內(nèi)容直接置于背景層之上。減少視覺負(fù)擔(dān)，內(nèi)容為主，形式為輔。

復(fù)合容器是指超過一種的容器形式的組合，如卡片中包含列表、卡片中包含泳道等。

5.1 無容器

5.2 復(fù)合容器

Part 6

————————

組合與強(qiáng)調(diào)

不同的信息容器組合在一起，搭建一個(gè)分工明確的界面。界面中不同的信息需要套用合適的形式去呈現(xiàn)。有層級(jí)就有對(duì)比，對(duì)比越大，層次拉得越開，重點(diǎn)就越突出。

建立對(duì)比的策略：

色彩對(duì)比、面積對(duì)比、樣式對(duì)比、Z軸高度對(duì)比、靜態(tài)動(dòng)態(tài)對(duì)比

文章來源：站酷  作者：doo_W

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

引人注目的UX設(shè)計(jì)背后的心理學(xué)

前言

在這艱難又魔幻的2020年的尾聲，有必要系統(tǒng)匯總下關(guān)于UI/UX的設(shè)計(jì)發(fā)展方向，為接下來的2021的開篇帶個(gè)好頭。本文在了解這些趨勢(shì)的同時(shí)，分析特點(diǎn)并舉例落地實(shí)例，來幫助大家啟發(fā)創(chuàng)意設(shè)計(jì)工作的思考切入點(diǎn)。

流行趨勢(shì)跟人們所處的環(huán)境密切相關(guān)，從最初的方塊馬賽克——>追求極度寫實(shí)——>扁平風(fēng)——>到現(xiàn)在的質(zhì)感擬物，扁平設(shè)計(jì)霸屏的這幾年，設(shè)計(jì)風(fēng)又向更立體、豐富、更有層次感的方向發(fā)展，所以說趨勢(shì)就是一個(gè)輪回。設(shè)計(jì)風(fēng)格沒有絕對(duì)的好壞，在審美達(dá)到一定疲勞時(shí)，就會(huì)開始出現(xiàn)新的設(shè)計(jì)風(fēng)格。每一個(gè)新風(fēng)格都值得設(shè)計(jì)師去拆解、思考，本質(zhì)都是為了提升更好的交互體驗(yàn)。 

而在進(jìn)入下一個(gè)十年的過程中，我們對(duì)數(shù)字產(chǎn)品和體驗(yàn)的依賴將日益增長(zhǎng)，預(yù)測(cè)真正勝出的將會(huì)是3D動(dòng)畫和用戶界面/用戶體驗(yàn)設(shè)計(jì)的結(jié)合設(shè)計(jì)，5G技術(shù)的發(fā)展，它將重塑了我們以前無法想象的交互方式，這將是一段充滿創(chuàng)意、鼓舞人心的發(fā)展階段。在這里讓我們來看看未來那些不可忽視的設(shè)計(jì)趨勢(shì)吧。

（注:圖片來自網(wǎng)絡(luò)，均標(biāo)明出處及作者，若有侵權(quán)請(qǐng)告知?jiǎng)h除）

1、3D與UI結(jié)合

隨著且易用的3d軟件工具的出現(xiàn)，3D 元素已經(jīng)開始變得越來越受歡迎，而在這之前，UI界面一直被平面設(shè)計(jì)所主導(dǎo)。與 2D 不同，它提供了更為逼真的立體效果，從插畫、動(dòng)效、電商到平面視覺，在所有的設(shè)計(jì)類型中都能找到它，3D現(xiàn)實(shí)主義已是各個(gè)領(lǐng)域的大勢(shì)。

圈中也出現(xiàn)了很多免費(fèi)或付費(fèi)的3D預(yù)設(shè)元素及場(chǎng)景組件，幫助3D小白更快地搭建出具有沖擊力的視覺組合。

特點(diǎn)：

? 直觀感受；

? 立體真實(shí)；

? 形態(tài)豐富；

▲Izmahsa

▲Mike

▲Tran Mau Tri Tam ?

▲Vikiiing

▲https://www.awwwards.com/inspiration/3d-hover-number-reveal

實(shí)例應(yīng)用：

各大廠都開始紛紛嘗試在產(chǎn)品中加入3D元素，將自家IP立體化，植入到各個(gè)品牌靜態(tài)頁面，加深品牌印象滲入。3D技術(shù)雖然已經(jīng)出現(xiàn)有一段時(shí)間了，但是為了保證速度和性能表現(xiàn)，較少應(yīng)用到產(chǎn)品中，隨著軟件技術(shù)的提升，立體渲染產(chǎn)品將開始慢慢運(yùn)用到更多的界面交互、H5活動(dòng)中。

▲閑魚、QQ、花椒直播的3D啟動(dòng)頁

▲得物（毒）的3D空間動(dòng)效

網(wǎng)易云音樂每年的音樂總結(jié)報(bào)告都追隨著的設(shè)計(jì)潮流，今年還可以自由選擇人物形象，增強(qiáng)了用戶的主觀代入感，以下是每年的設(shè)計(jì)風(fēng)格變化：

▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場(chǎng)景

▲2020-總結(jié)陳詞H5

▲總結(jié)報(bào)告Banner的動(dòng)效

其中IP立體化最多的當(dāng)屬K12教育領(lǐng)域，除了制作IP周邊外，3D效果能適應(yīng)豐富的運(yùn)營(yíng)場(chǎng)景，高度還原現(xiàn)實(shí)世界，給小朋友帶來最真實(shí)的學(xué)習(xí)互動(dòng)體驗(yàn)。

▲洪恩識(shí)字（3D學(xué)習(xí)場(chǎng)景）、騰訊開心鼠英語ABCmouse

▲IP在播放兒歌時(shí)的互動(dòng)

值得一提的是今年蘋果發(fā)布的macOS Big Sur除了玻璃擬態(tài)的變化，圖標(biāo)還加入了3D維度的擬物視覺層次。

蘋果的 mac OS 的人機(jī)交互指南中也明確指出：“圖標(biāo)不僅是裝飾性的，而且在與用戶交流中起著至關(guān)重要的作用，它應(yīng)該傳達(dá)應(yīng)用程序的主要目的并暗示用戶體驗(yàn)。”這次扁平化和擬物化的結(jié)合，將又要引領(lǐng)一波設(shè)計(jì)趨勢(shì)。

2、軟漸變（Soft gradients）

過于強(qiáng)烈的漸變不再是趨勢(shì)，大多數(shù)設(shè)計(jì)師都開始喜歡使用非常簡(jiǎn)單和微妙的漸變，如果產(chǎn)品的目標(biāo)用戶人群需要輕松溫和的視覺環(huán)境，那么此風(fēng)格再適合不過。

軟漸變包括背景、陰影、反光，常與線條平面圖形結(jié)合，應(yīng)用于界面、網(wǎng)站、圖標(biāo)、icon等設(shè)計(jì)中。

特點(diǎn)：

? 低調(diào)溫和

? 微妙漸變

? 清新愉悅

 

2.1、柔和背景

在設(shè)計(jì)網(wǎng)站中我們已經(jīng)看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來創(chuàng)造多彩的模糊背景。它使設(shè)計(jì)看起來非常現(xiàn)代、不打擾、清新而令人愉悅，其中畫面內(nèi)容是主要視覺焦點(diǎn)。

▲Vladimir Gruev

▲Sajon

▲Anton Mikhaltsov

▲Ghani Pradita

實(shí)例應(yīng)用：

▲咔咔、美柚

▲https://takearecess.com/

2.2、柔和陰影

柔和的彩色陰影使UI有了更微妙的深度變化，在圖標(biāo)設(shè)計(jì)中經(jīng)常需要漸變或陰影來塑造物體，柔陰影使設(shè)計(jì)元素更豐富立體，并且它們有助于區(qū)分內(nèi)容之間的層次結(jié)構(gòu)。

▲Ghani Pradita

▲Sèrgi Mi

▲Taro Huang

實(shí)例應(yīng)用：

▲有道數(shù)學(xué)（已下架）

▲Uki

3、玻璃擬態(tài)（Glassmorphism）

去年新擬態(tài)掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶的閱讀性上可能會(huì)出現(xiàn)問題，新擬態(tài)更適合用在局部的少量元素點(diǎn)綴，無法完整地使用在整套應(yīng)用程序中。

▲Alexander Plyut

伴隨著今年蘋果發(fā)布的 MacOS Big Sur 操作系統(tǒng)的發(fā)布，新的擬物風(fēng)格正式回歸大眾視野，整體風(fēng)格應(yīng)用了新擬態(tài)（Neumorphism）的設(shè)計(jì)思路，利用大量的毛玻璃質(zhì)感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來的生硬不立體感。而Big Sur的圖標(biāo)也加入了 3D 質(zhì)感設(shè)計(jì)，設(shè)計(jì)語言更為時(shí)尚簡(jiǎn)潔。蘋果設(shè)計(jì)師 Alan Dye 在發(fā)布會(huì)上也提到了設(shè)計(jì)風(fēng)格轉(zhuǎn)變的原因，主要是希望「降低視覺的復(fù)雜度，讓用戶能夠?qū)⒆⒁饬性趦?nèi)容上」。

而的玻璃擬態(tài)則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質(zhì)感，模糊的邊界有細(xì)微的淺色邊框，整體效果就是讓元素之間有虛實(shí)結(jié)合的特殊空間。毛玻璃運(yùn)用在界面中對(duì)關(guān)鍵信息起到強(qiáng)調(diào)作用，用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像物理空間中真實(shí)的玻璃一樣。

特點(diǎn)：

? 透氣磨砂

? 層級(jí)空間

? 簡(jiǎn)潔擬物

▲引領(lǐng)新擬態(tài)風(fēng)格的Alexander的作品也朝著玻璃擬態(tài)變化

▲Kostia Varhatiuk

▲Ghani Pradita

▲Ibrahim emran

▲Queble

實(shí)例運(yùn)用：▲毛玻璃視覺可追溯到2007年發(fā)售的Windows Vista，而當(dāng)時(shí)的 OS X Yosemite 也大量使用了這種設(shè)計(jì)語言

▲的MacOS Big Sur操作系統(tǒng)

▲圖標(biāo)的變化

4、暗黑模式

暗黑模式是白色界面的相反版本，適用于午夜時(shí)分。之前用了很長(zhǎng)時(shí)間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見到太陽光般刺眼，果然暗黑模式用久了還是比較舒服的。

 暗黑模式和之前經(jīng)常提到的夜間模式是有區(qū)別的，簡(jiǎn)單來說暗黑模式可以在任何場(chǎng)景下使用，并沒有降低對(duì)比亮度；夜間模式則專為夜間場(chǎng)景設(shè)計(jì)，重在降低對(duì)比度，以降低在暗光環(huán)境下屏幕對(duì)人眼的刺激。

 

特點(diǎn)：

? 突出內(nèi)容

? 減輕干擾

? 沉浸體驗(yàn)

▲Tom Koszyk

▲Victa Wille

▲Golo

▲https://www.awwwards.com/inspiration/3d-hover-number-reveal

▲Tran Mau Tri Tam ?

實(shí)例應(yīng)用：

▲有道詞典

▲愛范兒（ifanr）

最常使用暗黑模式的車載系統(tǒng)：

▲小度車載

暗黑模式的靈感最早引起大家注意的應(yīng)該是抖音，在這之前大部分的應(yīng)用都是白色為主，抖音整體黑色界面帶來的沉浸以及輕打擾體驗(yàn)還是很棒的，在這之后也相繼出現(xiàn)了以黑色為主的APP設(shè)計(jì)：

▲MOO音樂(可手動(dòng)切換顏色模式)

▲Space FM

5、多彩高對(duì)比度界面

受Material Design調(diào)色板的影響，2020年用戶界面趨勢(shì)的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡(jiǎn)約的界面中明亮大膽且對(duì)比鮮明的色彩一直都處于增長(zhǎng)趨勢(shì)。熒光色一直是90后喜歡的風(fēng)格，我個(gè)人就非常喜歡熒光色，現(xiàn)在要是談到該風(fēng)格的受眾主力軍可是90后啊。

顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對(duì)比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風(fēng)格已經(jīng)成為清新、酷炫、數(shù)字時(shí)代的代名詞，而在2021一趨勢(shì)還將會(huì)繼續(xù)影響UI、平面、廣告、插畫等領(lǐng)域。

 

特點(diǎn)：

? 活潑大膽

? 對(duì)比鮮明

? 潮流科技

▲Amy Martino

▲Halo Mobile

▲Anastasia

▲Paolo Spazzini

在網(wǎng)站設(shè)計(jì)中的應(yīng)用：

▲https://www.theartcenter.nyc/

▲https://www.squadeasy.com/en/

▲https://takeboost.com/

實(shí)例應(yīng)用：

▲GoFun出行

▲開言英語

6、抽象幾何元素

從上世紀(jì)初開始，抽象構(gòu)成中的簡(jiǎn)單幾何形狀就已經(jīng)用于視覺藝術(shù)中，多用于主背景主題或色彩細(xì)節(jié)，使用鋼筆工具編輯最簡(jiǎn)單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設(shè)計(jì)看起來既規(guī)則又有趣。

幾何圖形可以運(yùn)用到UI設(shè)計(jì)中 ，將它們混合在一起以創(chuàng)建馬賽克的效果，形成具有品牌意向符號(hào)的記憶點(diǎn)。

特點(diǎn)：

? 規(guī)則組合

? 品牌印象

? 重復(fù)記憶

▲Johnny Nova

▲Vladimir Gruev

實(shí)例應(yīng)用：

最近看到的一組原色視覺剛好融合了高對(duì)比度+幾何這兩種風(fēng)格，那就是SHINee的正規(guī)六輯合輯《‘The Story of Light’》，采用紅黃藍(lán)三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化，帶來極具視覺沖擊的音樂色彩與魅力。

▲專輯的主視覺

當(dāng)然，幾何形狀不止用于色彩圖案細(xì)節(jié)，在UI界面布局中經(jīng)常使用大塊面圖形，這種設(shè)計(jì)方法受到越來越多的關(guān)注。

7、極簡(jiǎn)風(fēng)

極簡(jiǎn)設(shè)計(jì)的前身是2010年代中期精巧又花哨的設(shè)計(jì)，這種設(shè)計(jì)已經(jīng)存在很長(zhǎng)一段時(shí)間了，但在2020年，人們每天需要消化的信息量越來越多，所以現(xiàn)在用戶想要盡可能避免“視覺垃圾”，這也是為什么我們會(huì)選擇更簡(jiǎn)潔專一的界面。

特點(diǎn)

? 專注信息

? 清晰易用

? 簡(jiǎn)單操作

▲RonDesignLab

▲Quan

▲BAOLIN

▲Gregory Loshakov

▲https://snp.agency/en

談到極簡(jiǎn)主義，就不可避免會(huì)涉及到無鍵趨勢(shì)，因?yàn)榘存I越少就意味著設(shè)計(jì)越簡(jiǎn)潔，而這種簡(jiǎn)化過的設(shè)計(jì)將讓手勢(shì)操作和語音交互更為流行。

▲Taras Migulko

▲Gleb Kuznetsov?

實(shí)例應(yīng)用：

▲夸克瀏覽器的夸克寶寶

8、將視頻應(yīng)用到UI中

在 2020 年，信息的觸達(dá)的速度將會(huì)變得更快，而視頻是很好的載體，各個(gè)年齡段的用戶都喜歡觀看引人入勝的動(dòng)畫，無論是選擇通過短視頻還是電影的方式來推廣產(chǎn)品，都很好地灌輸品牌理念，建立與受眾群體的關(guān)系，加強(qiáng)用戶忠誠(chéng)信任感。

特點(diǎn)：

? 營(yíng)造氛圍

? 類型多樣

? 品牌調(diào)性

▲Fireart Studio

▲Ehsan Rahimi

實(shí)例應(yīng)用：

▲moo音樂登錄頁

▲蝦米音樂歡迎頁

9、插畫與3D的界線越來越模糊

藝術(shù)插圖從2017年開始到現(xiàn)在仍然很流行，幾乎適用于任何類型的設(shè)計(jì)行業(yè)，是設(shè)計(jì)領(lǐng)域中最熱的趨勢(shì)之一。插畫的視覺能很好的幫助用戶理解產(chǎn)品背后的故事，為了把故事講好，我們可以創(chuàng)造出一個(gè)品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產(chǎn)品問題。這是在產(chǎn)品設(shè)計(jì)中講好故事的基礎(chǔ)，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。 

在2018年的蜘蛛俠平行宇宙中我們就已經(jīng)看到了3D與插畫的結(jié)合，藝術(shù)家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細(xì)節(jié)和質(zhì)感都放大到了熒幕上，在劇中還采用對(duì)比強(qiáng)烈的大色塊擴(kuò)大了視覺張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術(shù)家們是怎么把片子做得這么酷！

▲3D人物的畫筆觸感

▲畫面光源處由波普?qǐng)A點(diǎn)組成的背景

▲紙本漫畫書中的“聲音詞”

▲漫畫經(jīng)典線條

▲Entei Ryu在3D建模使用插畫質(zhì)感

▲Minh Pham ?在ui界面中的嘗試

實(shí)例應(yīng)用：

騰訊旗下音樂平臺(tái)JOOX最近的概念宣傳片，從MG、三維、定格、插畫多個(gè)風(fēng)格之間來回切換，給我們帶來了一個(gè)多元的音樂世界。各大視頻網(wǎng)站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關(guān)注微信視頻號(hào)“UoU_Studio”觀看完整視頻。

在3D開始迅速發(fā)展的階段，二維與三維之間的界限變得越來越模糊，插畫作品也可以具備強(qiáng)互動(dòng)性，而3D插畫與動(dòng)效的結(jié)合提供了一種奇妙的新方法，希望能夠看到未來插畫更多的可能性。

10、更多的微交互動(dòng)效

最后一點(diǎn)，還是要強(qiáng)調(diào)動(dòng)效在UI中的的作用，微交互最早出現(xiàn)在 2018 年，讓用戶更好地理解系統(tǒng)如何工作，并在引導(dǎo)其獲得更好的體驗(yàn)方面扮演著非常重要的角色。它們?cè)?UI 設(shè)計(jì)中決定了一個(gè) App 或網(wǎng)站是普通還是優(yōu)秀，從點(diǎn)擊反饋、加載等待、導(dǎo)航交互等等，為用戶界面設(shè)計(jì)增加了動(dòng)態(tài)性，交互性和直觀性。

 

動(dòng)效起到的作用：

? 引起人們對(duì)應(yīng)該做什么或接下來將要發(fā)生的事情的關(guān)注；

? 創(chuàng)造流暢和視覺愉悅的過渡；

? 帶給使用者美觀的享受；

? 指導(dǎo)我們進(jìn)行復(fù)雜的操作；

? 確認(rèn)用戶使用旅程中的操作。

▲Jakub Antalik

▲Forever D.

▲Kingyo

▲Eugene Paryhin

▲Leo Natsume

▲Taras Migulko

實(shí)例應(yīng)用：

▲GoFun選擇車輛后的頁面轉(zhuǎn)場(chǎng)動(dòng)效

結(jié)尾：

2020的趨勢(shì)在滿足用戶的美學(xué)要求上，側(cè)重內(nèi)容和感情表達(dá)，還會(huì)根據(jù)不同設(shè)備載體、新的技術(shù)而變化，為用戶提供的豐富體驗(yàn)。

借用Adobe設(shè)計(jì)副總裁 Jamie Myrold 的一句話：如今設(shè)計(jì)師要思考的，絕不僅僅是設(shè)計(jì)一款A(yù)pp、網(wǎng)站或設(shè)計(jì)工具。我們要思考的是人類的需求、用戶的需求，打造真正人性化、多元化與包容性的設(shè)計(jì)。

設(shè)計(jì)趨勢(shì)還在快速增長(zhǎng)變化，有些趨勢(shì)總能長(zhǎng)期霸屏，未來還將迎來更多新技術(shù)，每個(gè)設(shè)計(jì)人員都可以找到自己喜歡的方向，不管哪種趨勢(shì)，最重要的是如何學(xué)習(xí)并合理地運(yùn)用到產(chǎn)品中，以產(chǎn)生最大的設(shè)計(jì)商業(yè)價(jià)值。

文章來源：UI中國(guó)   作者：_阿丹a_

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

柵格系統(tǒng)知識(shí)點(diǎn) 

使用柵格系統(tǒng)很有幫助，它有助于在不同布局之間保持一致性，并加快設(shè)計(jì)決策的速度。柵格可更地控制不同屏幕尺寸之間的對(duì)齊方式及布局。本文重點(diǎn)介紹響應(yīng)式柵格的重要知識(shí)點(diǎn)，以及產(chǎn)品設(shè)計(jì)師如何在設(shè)計(jì)工作流中調(diào)整柵格。

柵格結(jié)構(gòu)

柵格由3個(gè)主要組件構(gòu)成，包括列、槽和邊距。

列

列是虛構(gòu)的垂直塊，用于對(duì)齊內(nèi)容。我們用百分比（％）或固定值定義列寬。

柵格中的列

槽

它是列與列之間的空間，有助于分隔內(nèi)容，我們將槽的寬度定義成固定值。

柵格中的槽

邊距

邊距是內(nèi)容和屏幕邊緣之間的空間。我們將邊距寬度定義為固定值，該值決定每個(gè)屏幕尺寸的最小空間。彈性邊距指的是列，槽和側(cè)邊距組成柵格后剩下的空間，它會(huì)根據(jù)不同的屏幕尺寸而變化。

柵格中的頁邊距和靈活邊距

如何使用柵格設(shè)計(jì)界面？

信息內(nèi)容（圖像，文本或UI元素）常常會(huì)被放置于可見和不可見的內(nèi)容塊中。可見內(nèi)容塊具有明顯的邊框或填充區(qū)，而不可見內(nèi)容塊則不具備，多數(shù)是透明底?？梢姷母讣?jí)內(nèi)容塊包括卡片，橫幅等組件。

卡片形式的可見內(nèi)容塊

不可見的內(nèi)容塊包括文本或功能按鈕。

內(nèi)容塊應(yīng)與列的邊緣對(duì)齊，避免與槽邊緣對(duì)齊。內(nèi)容塊中的信息是獨(dú)立的，不一定非要與列對(duì)齊。

內(nèi)容塊的列對(duì)齊

列結(jié)構(gòu)

用于構(gòu)成柵格的列數(shù)稱為列結(jié)構(gòu)。8、12、16和20是用于響應(yīng)式布局的一些最常見的列結(jié)構(gòu)，設(shè)計(jì)師可以根據(jù)設(shè)計(jì)要求選擇具體結(jié)構(gòu)。

8/12/16/20列柵格結(jié)構(gòu)

12列結(jié)構(gòu)是最靈活的，它可以進(jìn)一步分解成為4–4–4或3–3–3–3大小的內(nèi)容塊。

響應(yīng)點(diǎn)

當(dāng)屏幕尺寸到達(dá)響應(yīng)點(diǎn)，那么頁面布局也會(huì)有對(duì)應(yīng)更改，以實(shí)現(xiàn)最佳的布局視圖。列結(jié)構(gòu)，列寬，槽寬度和邊距都取決于響應(yīng)點(diǎn)。內(nèi)容塊則根據(jù)不同的響應(yīng)點(diǎn)堆疊或縮放，以重新調(diào)整獲得最佳視圖。

柵格縮放和堆疊

如果較小的屏幕具備足夠空間來呈現(xiàn)，其實(shí)縮小比例就能展示完整了。如果屏幕實(shí)在是太小，就會(huì)垂直堆疊成一列。

柵格的呈現(xiàn)類型

柵格有3種呈現(xiàn)形式，一起來看下吧！

固定柵格

固定柵格有固定寬度的列以及頁面邊距，且固定的柵格具有固定的內(nèi)容塊寬度，該寬度在響應(yīng)點(diǎn)范圍內(nèi)不會(huì)出現(xiàn)變化，并且頁面邊距會(huì)占據(jù)剩余的空間。

固定寬度柵格

流動(dòng)或全寬柵格

流動(dòng)?xùn)鸥窳械膶挾仁遣欢ǖ?，但槽和頁面邊距都是固定的。流體柵格具有靈活的內(nèi)容塊寬度，該寬度根據(jù)屏幕大小來變化。流體柵格中，列會(huì)隨著可用空間變大或是縮小。

流動(dòng)?xùn)鸥?

混合柵格

混合柵格同時(shí)具有流動(dòng)寬度和固定寬度。在現(xiàn)代布局中，一些元素會(huì)完全脫離柵格。常見的例子比如頁眉，頁腳，或是出血的圖片內(nèi)容塊。

混合柵格

如果內(nèi)容塊寬度大于可用的屏幕尺寸，則固定柵格會(huì)轉(zhuǎn)變?yōu)榱鲃?dòng)?xùn)鸥駚磉m應(yīng)屏幕。

如何在原型制作工具中設(shè)置柵格系統(tǒng)？

電腦視窗

不要以1440×900、1600×900或1920×1080等高分辨率進(jìn)行設(shè)計(jì)。1280×800是電腦端內(nèi)最小的分辨率，以1280×800設(shè)計(jì)的流動(dòng)與固定寬度的布局都可以適應(yīng)更大的屏幕。

固定寬度柵格設(shè)置

要設(shè)置固定寬度的柵格，我們對(duì)槽和列都應(yīng)固定好數(shù)值。建議設(shè)置列寬為74px、槽寬32px以及16px的邊距。

固定寬度柵格設(shè)置

列寬74px、槽寬32px可以生成1240px的內(nèi)容塊寬度（不包括兩端的16px側(cè)邊距），最大化的利用了可用屏幕尺寸。在不同的響應(yīng)點(diǎn)，固定內(nèi)容寬度大于當(dāng)前屏幕尺寸時(shí)，則固定寬度柵格開始變?yōu)榱鲃?dòng)?xùn)鸥瘛?

流動(dòng)?xùn)鸥裨O(shè)置

要設(shè)置流動(dòng)寬度柵格，對(duì)槽使用數(shù)值，對(duì)列使用自動(dòng)計(jì)算的值（以％為單位）。

流體布局柵格設(shè)置

流動(dòng)?xùn)鸥窭谜麄€(gè)屏幕尺寸作為主要內(nèi)容的寬度，每側(cè)留出16px的側(cè)邊距。

移動(dòng)視窗

在移動(dòng)端使用流動(dòng)?xùn)鸥瘢酆晚撨吘嗟膶挾韧扑]設(shè)置成16px。因?yàn)橐苿?dòng)設(shè)備的屏幕分辨率較小，若再分成12個(gè)獨(dú)立的列、槽和邊距的話，設(shè)計(jì)起來也會(huì)很麻煩。

移動(dòng)端的流動(dòng)?xùn)鸥裨O(shè)置

因此，我們將3列中的每列合并以創(chuàng)建4個(gè)粗列，從而使布局柵格既簡(jiǎn)潔又方便，快速對(duì)齊。

平板視窗

平板設(shè)置柵格的方式與移動(dòng)設(shè)備非常相似，推薦槽寬和邊距分別設(shè)置為32px與16px，可以在768×1024大小的畫板上為平板設(shè)計(jì)界面。

平板電腦流動(dòng)?xùn)鸥裨O(shè)置

將12列優(yōu)化成6列，讓柵格清晰明了，谷歌的材質(zhì)設(shè)計(jì)曾建議使用24px寬的槽與頁邊距，實(shí)際應(yīng)用時(shí)，不妨都試下看哪個(gè)效果更好。

布局樣式

柵格布局的變化決定了主要內(nèi)容的結(jié)構(gòu)，針對(duì)不同的布局要求，使用不同的柵格系統(tǒng)，而頁面中的內(nèi)容塊數(shù)量決定了頁面布局的變化。

單列布局

單列布局或全寬布局，是著陸頁和首頁的風(fēng)格之一。還可以合并12列來創(chuàng)建一個(gè)單列內(nèi)容塊，也可以將12列分配到父級(jí)內(nèi)容塊中。

一級(jí)頁面常應(yīng)用單列或全寬柵格布局

雙列布局

該布局有兩個(gè)內(nèi)容塊。通常，其中的一個(gè)內(nèi)容塊會(huì)占據(jù)比較多的區(qū)域進(jìn)行信息展示。

在雙列布局中，列要么分布在9–3或8–4父級(jí)內(nèi)容塊中，其中的一個(gè)組合列區(qū)域，用來創(chuàng)建主要內(nèi)容。帶有單個(gè)邊欄的界面是兩列布局的常見呈現(xiàn)形式。

三列布局

三列布局具有三個(gè)內(nèi)容塊，主要內(nèi)容塊占據(jù)最大的展示區(qū)域，在三列布局中，列分布在3–6–3或2–8–2父級(jí)內(nèi)容塊中。

固定寬度的側(cè)邊欄布局

固定寬度的邊欄布局稍有不同。邊欄寬度在一組響應(yīng)點(diǎn)范圍內(nèi)固定，剩余空間由固定寬度或流動(dòng)寬度的內(nèi)容塊占用。

側(cè)邊欄固定布局

移交開發(fā)

在原型工具中，設(shè)計(jì)布局和編碼有很大的不同。代碼可以合并列或?qū)⑵涠询B，比如合并12列以創(chuàng)建單個(gè)列布局，或?qū)?2列分布到一組，用來創(chuàng)建不同布局變化的內(nèi)容塊。在原型設(shè)計(jì)工具中設(shè)計(jì)布局時(shí)，你需要確保開發(fā)人員清楚了解電腦端，移動(dòng)設(shè)備和平板設(shè)備上設(shè)置的列寬、槽寬及邊距。像Bootstrap，Zurb Foundation等開發(fā)軟件，其中對(duì)柵格值的設(shè)置會(huì)有出入。

自定義柵格

設(shè)計(jì)師可以多嘗試不同的柵格值設(shè)置，以找到最適合自己的呈現(xiàn)形式。如果交付開發(fā)的時(shí)間非常緊急，請(qǐng)使用文中建議的數(shù)值，更保險(xiǎn)也不會(huì)出錯(cuò)。

文章來源：站酷   作者：UX辭典

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)