AE文字動(dòng)效預(yù)設(shè)使用方法 

          在AE的窗口中打開(kāi)“效果和預(yù)設(shè)”面板，所有和文字有關(guān)的效果都在動(dòng)畫(huà)預(yù)設(shè)中的Text文件夾內(nèi)，共十七種動(dòng)效類(lèi)型

          將動(dòng)效預(yù)設(shè)拖動(dòng)到對(duì)象上，即可應(yīng)用動(dòng)效。

17種動(dòng)效預(yù)設(shè)預(yù)覽

          十七種類(lèi)型分別為：3D文字動(dòng)效、入場(chǎng)動(dòng)效、離場(chǎng)動(dòng)效、模糊動(dòng)效、曲線動(dòng)效、表達(dá)式動(dòng)效、填充與描邊動(dòng)效、圖形動(dòng)效、亮度與透明度動(dòng)效、機(jī)械化動(dòng)效、多樣化動(dòng)效、多行文案動(dòng)效、擬態(tài)化動(dòng)效、路徑動(dòng)效、旋轉(zhuǎn)動(dòng)效、縮放動(dòng)效以及字間距動(dòng)效。

預(yù)設(shè)搭配組合

          有些效果可以相互疊加組合，理論上我們能做出成百上千種不同的效果。 

文章來(lái)源：UI設(shè)計(jì)  作者：設(shè)計(jì)師深海

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

最近公司在梳理整個(gè)產(chǎn)品在用戶(hù)體驗(yàn)層面上可優(yōu)化的問(wèn)題，然后匯總整合。公司的交互專(zhuān)家就提出可以利用尼爾森可用性原則來(lái)將所以問(wèn)題歸類(lèi)，進(jìn)行整合。

What？尼爾森可用性原則是什么這么厲害？雖然之前也有聽(tīng)到過(guò)這個(gè)原則，但是具體的內(nèi)容并不是很熟悉，于是打開(kāi)百度開(kāi)始搜索……

尼爾森（Jakob Nielsen）是一位人機(jī)交互學(xué)博士，于1995年1月1日發(fā)表了「十大可用性原則」。十大可用性原則分別為：狀態(tài)可見(jiàn)、匹配現(xiàn)實(shí)、用戶(hù)可控、一致性、認(rèn)知易取、防錯(cuò)、高效靈活、優(yōu)美且簡(jiǎn)約、容錯(cuò)、人性化幫助。

十大可用性原則既可以用來(lái)指導(dǎo)Web端，也可以指導(dǎo)移動(dòng)端，當(dāng)然其他涉及交互的場(chǎng)景也同樣適用。

知道了這些基本信息之后，也看了一些其他大佬對(duì)可用性原則的理解和感悟的文章，接下來(lái)我自己羅列一些具體案例來(lái)幫助理解和記憶這些原則。

系統(tǒng)應(yīng)該在適當(dāng)?shù)臅r(shí)間給與合適的反饋，以此讓用戶(hù)了解正在發(fā)生的事情。

個(gè)人理解：產(chǎn)品應(yīng)該清楚地告訴用戶(hù)任務(wù)當(dāng)前的狀態(tài)、流程進(jìn)度。 

案例：

 「狀態(tài)加載」是最簡(jiǎn)單的狀態(tài)可見(jiàn)的展示，告訴用戶(hù)當(dāng)前是加載狀態(tài)，讓用戶(hù)在等待過(guò)程中不會(huì)焦慮

「未讀提示」讓用戶(hù)知道有需要了解的信息還是未讀狀態(tài)，讓用戶(hù)可以及時(shí)了解

「更新提示」在視頻、閱讀、電臺(tái)等產(chǎn)品中會(huì)用的比較多，讓用戶(hù)實(shí)時(shí)了解更新?tīng)顟B(tài)

外賣(mài)配送信息、快遞物流信息的顯示也是狀態(tài)可見(jiàn)的一種

「操作提示」可以幫助用戶(hù)知道自己已經(jīng)操作成功，并且在有效進(jìn)行中

系統(tǒng)應(yīng)該說(shuō)用戶(hù)習(xí)慣的語(yǔ)言，比如：用戶(hù)熟悉的單詞、短語(yǔ)和概念，而不是系統(tǒng)導(dǎo)向的術(shù)語(yǔ)。遵循現(xiàn)實(shí)世界的約定，使信息以自然且合乎邏輯的順序出現(xiàn)。

個(gè)人理解：產(chǎn)品的文案提示應(yīng)該是用戶(hù)熟悉的語(yǔ)言，設(shè)計(jì)風(fēng)格應(yīng)該符合目標(biāo)用戶(hù)的喜好，信息的呈現(xiàn)盡量貼近真實(shí)世界。

案例：

「特有風(fēng)格」在二次元、金融產(chǎn)品、某類(lèi)人群專(zhuān)用產(chǎn)品等會(huì)表現(xiàn)的更突出，特有的設(shè)計(jì)風(fēng)格和專(zhuān)業(yè)的術(shù)語(yǔ)會(huì)讓用戶(hù)對(duì)產(chǎn)品更有信賴(lài)感

「模擬現(xiàn)實(shí)」在運(yùn)動(dòng)軟件、AR游戲中比較常見(jiàn)，讓用戶(hù)更有真實(shí)感

當(dāng)用戶(hù)錯(cuò)誤地選擇了的某個(gè)功能后，系統(tǒng)需要提供一個(gè)明確的「緊急出口」，來(lái)讓用戶(hù)離開(kāi)其不想要的狀態(tài)，而且無(wú)需額外的對(duì)話框，支持撤銷(xiāo)和重做。 

個(gè)人理解：當(dāng)用戶(hù)誤操作之后，可以有撤銷(xiāo)重做的選擇，可以后悔。

案例：

「返回、關(guān)閉」就是最常見(jiàn)的讓用戶(hù)可控制的按鈕

「撤回」某些聊天軟件的幾分鐘內(nèi)信息可撤回并且支持重新編輯

我們不應(yīng)當(dāng)讓用戶(hù)去懷疑不同的語(yǔ)句、狀態(tài)或操作是否在表達(dá)同一件事。設(shè)計(jì)需遵循平臺(tái)的慣例。

個(gè)人理解：同一個(gè)產(chǎn)品需要統(tǒng)一的設(shè)計(jì)規(guī)范，同類(lèi)型的產(chǎn)品也應(yīng)該遵循基本的用戶(hù)習(xí)慣。 

案例： 

「規(guī)范統(tǒng)一」是指風(fēng)格統(tǒng)一、交互統(tǒng)一、視覺(jué)統(tǒng)一

「同類(lèi)型統(tǒng)一」可以讓用戶(hù)在使用過(guò)程中更加方便，沒(méi)有壓力

PS：網(wǎng)易云音樂(lè)和QQ音樂(lè)的操作有些不一致，切換使用會(huì)稍微不習(xí)慣

通過(guò)將對(duì)象、操作和選項(xiàng)進(jìn)行可視化，最大限度地減輕用戶(hù)的記憶負(fù)擔(dān)。用戶(hù)不需要記住對(duì)話框中某一部分到另一部分的信息。系統(tǒng)操作的指示信息需要易于被用戶(hù)發(fā)現(xiàn)和獲取。

個(gè)人理解：就是把需要記憶的信息呈現(xiàn)出來(lái)，讓用戶(hù)直接確認(rèn)就行。

案例：

「歷史記錄」保留用戶(hù)的查看和搜索信息，方便用戶(hù)后續(xù)查看

 

「關(guān)鍵信息」在購(gòu)物車(chē)中的顯示非常重要，可以方便用戶(hù)直接確認(rèn)下單

「觀看記錄」在讀書(shū)、視頻類(lèi)的產(chǎn)品中非常重要，不需要用戶(hù)去記憶上次看到的節(jié)點(diǎn)

文章來(lái)源：UI設(shè)計(jì)  作者：IAM蒼蒼君

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

日本屋文具大賞，又被譽(yù)為“文具界的奧斯卡”。從2013年開(kāi)始，文具大賞今年已經(jīng)有9屆了，每年都在二、三月公布，想在開(kāi)學(xué)季購(gòu)置文具的小伙伴，千萬(wàn)別錯(cuò)過(guò)！

據(jù)說(shuō)，今年的大賞由11位評(píng)委參與，他們對(duì)參選文具的設(shè)計(jì)、功能和想法等方面進(jìn)行打分，共選出40個(gè)文具，分別有特等獎(jiǎng)、設(shè)計(jì)獎(jiǎng)、功能獎(jiǎng)、創(chuàng)意獎(jiǎng)。

下面，數(shù)藝君帶著大家一起來(lái)看看吧?。ㄗ⒁馕婧缅X(qián)包）

特等獎(jiǎng)

吳竹吸墨空筆

今年獲得全場(chǎng)大獎(jiǎng)的是吳竹吸墨空筆。這是一支不帶墨水的空筆，被稱(chēng)作“彩墨神器”！

整套由四個(gè)部分組成：空的筆桿，吸墨水的內(nèi)芯、筆栓、小貼紙（可以把你制作的墨水涂上去，貼在筆桿上用于區(qū)分）。

上墨水的操作非常簡(jiǎn)單，海綿內(nèi)芯拆出來(lái)，插進(jìn)墨水里，吸到80%左右再裝回筆殼，搞定！

對(duì)，除了墨以外，其他所有的東西都有，你可以用內(nèi)芯吸附上任何喜歡的顏料、墨水，然后你就有了一支自定義的筆。

功能獎(jiǎng)

回轉(zhuǎn)印章機(jī)

回轉(zhuǎn)印章機(jī)也是一個(gè)很神奇的產(chǎn)品，可以幫助那些不擅長(zhǎng)繪畫(huà)的朋友印出可愛(ài)的圖案。

有很多個(gè)圖案可以選，選完就直接印在紙上，跟手寫(xiě)的簡(jiǎn)直一模一樣，是喜歡做手賬的手殘黨的福音！

印章使用的顏料是油性的，可以拿一支水性筆給圖案上色，不用擔(dān)心顏色混在一起。來(lái)看看上色的效果吧，反正不會(huì)做手賬的數(shù)藝君也心動(dòng)得不行了！

最關(guān)鍵是，可愛(ài)俏皮的圖案特別多，據(jù)說(shuō)有上百種文字、圖案，應(yīng)用場(chǎng)景廣，可以左滑下方圖片看看哦~

創(chuàng)意獎(jiǎng)

便攜便利貼

這款便攜便利貼從外觀上就擔(dān)得起創(chuàng)意獎(jiǎng)這個(gè)頭銜了！數(shù)藝君第一反應(yīng)還以為是一支筆，沒(méi)想到竟然是便利貼！

這款便利貼的創(chuàng)意在于，把一本一本的便利貼變成了卷軸。而且，在硬殼卷軸的保護(hù)下，便利貼還不容易破損。

一管里面有兩個(gè)卷軸哈，就是說(shuō)可以裝兩種便利貼，如圖，一種紅的一種白的。

使用起來(lái)也很方便，把便利貼卷軸從保護(hù)殼里抽出來(lái)，拉出一截，撕下來(lái)，就可以貼上做筆記了。

還有一個(gè)貼心的設(shè)計(jì)點(diǎn)就是，這個(gè)便利貼中間70%的部分是有粘性的，兩邊邊緣沒(méi)有粘性。這樣就可以拿著兩邊沒(méi)有粘性的地方，對(duì)準(zhǔn)了位置再貼。

種類(lèi)也很多，共有12種便利貼，有6種搭配供選擇，看這個(gè)效果，還挺實(shí)用的~

設(shè)計(jì)獎(jiǎng)

雙層透明筆盒

雖然說(shuō)透明筆盒已經(jīng)不是第一次出現(xiàn)，但這款筆盒的特色在于外層是透明，里邊放置了一個(gè)布袋，更便于收納了。

相信很多小伙伴，都曾被透明筆袋“一目了然”的功能吸引到，但大部分透明筆袋很難做到分層歸類(lèi)。而這款透明筆盒就將以上兩點(diǎn)都兼顧到位了。

便簽獎(jiǎng)

可剝離熒光貼

這款便利貼從外觀上特別是涂改帶，但功能上完美解決了熒光筆標(biāo)記筆記時(shí)，畫(huà)錯(cuò)的尷尬問(wèn)題。

半透明的熒光貼紙，可以撕下來(lái)貼在書(shū)上的重點(diǎn)知識(shí)處，覺(jué)得不合適，或者復(fù)習(xí)完畢后，還可以不留痕跡地撕下來(lái)，圖書(shū)又恢復(fù)了嶄新的狀態(tài)。

不想在圖書(shū)上寫(xiě)字，也可以寫(xiě)在這個(gè)半透明的便利貼上~再也不用擔(dān)心在書(shū)上寫(xiě)錯(cuò)別字啦！

辦公文具獎(jiǎng)

TEAM-DEMI 文具套裝

這套文具包裝沿襲了極簡(jiǎn)風(fēng)，純色的小盒子中，包括剪刀、膠帶、訂書(shū)機(jī)、美工刀、膠水、直尺、卷尺以及SIM卡取卡針。

配合磁吸設(shè)計(jì)，包裝盒可以作為收納盒，收納文具時(shí)做到完美嵌入，這種設(shè)計(jì)真讓人難以拒絕，自用和送人都很有檔次。

橡皮獎(jiǎng)

多邊形橡皮

本次大賞中，造型最“古怪”的產(chǎn)品莫過(guò)于這款多邊形橡皮了。它以折紙藝術(shù)為靈感，配合3D技術(shù)，造就了多邊形橡皮。

橡皮共有45個(gè)尖角，使用完一個(gè)角之后，會(huì)產(chǎn)生新的一角。一塊橡皮都花了這么新奇的技術(shù)，不愧能獲得這一單項(xiàng)獎(jiǎng)。

在官方發(fā)布的視頻中，這塊橡皮可以擦除單詞中的字母。因此，從功能上來(lái)說(shuō)，這款橡皮更適合那些鉛筆繪畫(huà)等精細(xì)作業(yè)的人使用。

文章來(lái)源：UI設(shè)計(jì)  作者：數(shù)藝設(shè)

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

國(guó)內(nèi)互聯(lián)網(wǎng)近幾年發(fā)展迅速，在很多方面都超過(guò)了一些其他國(guó)家互聯(lián)網(wǎng)的發(fā)展階段。隨著國(guó)內(nèi)互聯(lián)網(wǎng)產(chǎn)品競(jìng)爭(zhēng)日趨激烈，很多企業(yè)都把目光投向了用戶(hù)量龐大的海外市場(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ǔ)言。但若想打造一款能夠適應(yīng)海外市場(chǎng)的產(chǎn)品，只完成不同語(yǔ)種的翻譯是遠(yuǎn)遠(yuǎn)不夠的。在產(chǎn)品設(shè)計(jì)的過(guò)程中，我們需要考慮兩個(gè)方面：國(guó)際化與本土化。

國(guó)際化+本地化的策略，也就是“glocal—global+local”，指的是結(jié)合國(guó)際統(tǒng)一和地區(qū)差異。這種策略在統(tǒng)一的前提下，通過(guò)靈活配置保障地區(qū)的個(gè)性化體驗(yàn)，既能滿足統(tǒng)一維護(hù)提升產(chǎn)品效率，也能保障當(dāng)?shù)赜脩?hù)的特殊訴求，是一種性?xún)r(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ū)首頁(yè)功能與樣式基本一致

一套通用的設(shè)計(jì)系統(tǒng)和設(shè)計(jì)規(guī)范，既可以幫助我們?cè)诋a(chǎn)品的國(guó)際化設(shè)計(jì)中 樹(shù)立產(chǎn)品調(diào)性，又可以保證操作的 一致性，同時(shí)提升設(shè)計(jì)的 高效性。阿里旗下面向東南亞市場(chǎng)的購(gòu)物平臺(tái)Lazada在開(kāi)發(fā)之初，通過(guò)使用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ū)的首頁(yè)布局

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

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

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

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

需求（價(jià)值）

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

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

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

日本-新聞資訊類(lèi)App

北美-新聞資訊類(lèi)App

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

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

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

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

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

10年前，高端大屏幕手機(jī)在東南亞和非洲市場(chǎng)普及率并不高，因此產(chǎn)品出海時(shí)需要考慮當(dāng)?shù)爻Ｒ?jiàn)的設(shè)備是什么，并作出相應(yīng)的適配。近幾年，隨著市場(chǎng)經(jīng)濟(jì)的發(fā)展以及中國(guó)手機(jī)的成功出海，即使是東南亞和非州的發(fā)展中國(guó)家，高端移動(dòng)設(shè)備的普及率也已經(jīng)很高，這為設(shè)計(jì)師在考慮通用性的過(guò)程中減輕了不少負(fù)擔(dān)。不過(guò)，在為每個(gè)地區(qū)的用戶(hù)做產(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等公司，卻無(wú)法成功打入歐洲一些國(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)研和用戶(hù)調(diào)研之后，針對(duì)本土化，他們所邁出的第一步就是根據(jù)中國(guó)的業(yè)態(tài)環(huán)境對(duì)產(chǎn)品的前10%和后10%做了改造。其中，產(chǎn)品的前10%指的是登錄這一類(lèi)用戶(hù)開(kāi)始使用產(chǎn)品所需要進(jìn)行的步驟，而后10%指的則是支付等用戶(hù)完成一個(gè)完整流程所需要進(jìn)行的操作。因?yàn)楫?dāng)用戶(hù)進(jìn)入到產(chǎn)品主要鏈路中時(shí)，其功能流程基本相通（搜索地點(diǎn)、挑選房間、瀏覽信息等），不需要做過(guò)多的改變；但產(chǎn)品的前10%和后10%則決定了用戶(hù)能不能把產(chǎn)品用起來(lái)并不遇到障礙。因此，針對(duì)登錄的部分，愛(ài)彼迎將原先的Facebook等第三方登錄替換成了微信與微博賬號(hào)的登錄；而在支付的部分，愛(ài)彼迎引入了支付寶與微信支付的方式，打破了中國(guó)本土用戶(hù)進(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行賬戶(hù)的人口僅占了總?cè)丝诘?4%，同期中國(guó)擁有銀行賬戶(hù)的人口則占了總?cè)丝诘?5%。而這34%的人基本上都是當(dāng)?shù)氐母蝗思爸挟a(chǎn)階層。在貧富分化嚴(yán)重的菲律賓，大部分普通民眾是沒(méi)有銀行賬戶(hù)的。這一人口學(xué)特征很大程度影響了螞蟻金服電子錢(qián)包業(yè)務(wù)對(duì)菲律賓目標(biāo)用戶(hù)的描繪，繼而影響了產(chǎn)品各個(gè)層面的設(shè)計(jì)。

文化/宗教

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

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

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

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

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

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

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

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

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

這類(lèi)源于文化差異的設(shè)計(jì)差異并不少見(jiàn)。在淘寶等國(guó)內(nèi)的電商平臺(tái)上，“按照銷(xiāo)量排序”是一個(gè)被高頻使用的功能，消費(fèi)者們認(rèn)為什么產(chǎn)品買(mǎi)的人多，什么產(chǎn)品就更好。這樣的觀念也催生了一大批店家刷單的行為。但當(dāng)在北美的電商平臺(tái)亞馬遜上，我們會(huì)發(fā)現(xiàn)并沒(méi)有按銷(xiāo)量排序這個(gè)選項(xiàng)。因?yàn)槊绹?guó)的用戶(hù)相對(duì)來(lái)說(shuō)個(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，視覺(jué)色彩更加豐富；整體的產(chǎn)品定位也更加活潑歡樂(lè)，常常會(huì)有“不嚴(yán)肅”的表達(dá)，比如在界面多處都使用了emoji。這樣的產(chǎn)品形態(tài)差異，其背后是兩種文化在放縱（享樂(lè)）/克制（嚴(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ó)家的用戶(hù)。但當(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è)歌單—— “快樂(lè)時(shí)光（ Happy Hits)" 的封面在不同國(guó)家的呈現(xiàn)形式。可以看到，面對(duì)文化差異更大的群體時(shí)，Spotify在保持了統(tǒng)一的樣式風(fēng)格的基礎(chǔ)上，針對(duì)每一個(gè)國(guó)家和地區(qū)都展示了當(dāng)?shù)厝嗽谒麄兊纳钪小翱鞓?lè)”的樣子。這種本地化內(nèi)容更加貼近當(dāng)?shù)赜脩?hù)，也能夠讓用戶(hù)產(chǎn)生更強(qiáng)的連結(jié)感與共感。

Spotify "Happy Hits" 歌單

結(jié)語(yǔ)

回到那句話 —— ”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)下另一群用戶(hù)的特征、需求、使用情景、操作習(xí)慣等關(guān)鍵信息。無(wú)論是不是在為產(chǎn)品的出海而設(shè)計(jì)，我們始終應(yīng)該保持對(duì)用戶(hù)的好奇，讓最終的設(shè)計(jì)實(shí)現(xiàn)我們期望達(dá)成的目標(biāo)。

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

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

為什么要寫(xiě)這片文章？

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

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

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

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

微信是一款什么軟件？

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

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

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

在2014年的時(shí)候，微信1.0版本的時(shí)候，微信只有400萬(wàn)用戶(hù)，而雷軍米聊有2000萬(wàn)用戶(hù)，兩者的差距從微信3.0推出陌生人社交拉開(kāi)，從推出微信支付功能開(kāi)始徹底打敗了米聊。是因?yàn)槊琢氖侵皇窃谏缃?，而微信卻是在做連接；微信把社交看成一種信息流，從而把更多的信息流整合連接自己的體系內(nèi)；因?yàn)橐迅嗟男畔⒘髡系狡脚_(tái)上，于是微信變得越來(lái)越大，占用的內(nèi)存越來(lái)越多。看似有意為之，實(shí)則情非得已。另外說(shuō)一句，雷軍貌似是在這次大戰(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)為世界是由人流、物流、資金流、信息流組成。比如文字，語(yǔ)音，視頻，支付、都是信息流的一個(gè)分類(lèi)。你可以把互聯(lián)網(wǎng)想象成一條大江大河，無(wú)數(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)不平衡，你不知道你能在這里遇到誰(shuí)；第二條，用戶(hù)彼此之間要產(chǎn)生網(wǎng)絡(luò)效應(yīng)；第3條，用戶(hù)之間永遠(yuǎn)有彼此的需求，無(wú)法握手，需要平臺(tái)從中撮合。

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

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

微信帶給了用戶(hù)什么樣的確定性？

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

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

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

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

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

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

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

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

為什么短視頻如此重要？因?yàn)樗芸赡苁俏磥?lái)信息流主流的載體。

不知道你有沒(méi)有感受到，微信公眾號(hào)沒(méi)以前那么火了，其實(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)用開(kāi)始自建搜索引擎，自營(yíng)內(nèi)容對(duì)百度進(jìn)行了封鎖；微信公眾號(hào)從中崛起成為了新的流量入口，無(wú)數(shù)的自媒體創(chuàng)業(yè)者通過(guò)微信公眾號(hào)上創(chuàng)作內(nèi)容，成為了移動(dòng)互聯(lián)網(wǎng)時(shí)代的信息流入口。但是，隨著4G技術(shù)帶來(lái)了更高的網(wǎng)絡(luò)帶寬與傳輸速率，視頻內(nèi)容開(kāi)始發(fā)展，短視頻應(yīng)運(yùn)而生。

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

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

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

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

微信能不能贏？

我覺(jué)得微信這次能贏，因?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)題名字來(lái)吸引更多用戶(hù)點(diǎn)擊，從而獲得更多流量，并通過(guò)廣告商的投資，帶來(lái)商業(yè)的變現(xiàn)。去年甚至還爆發(fā)了直播帶貨的新藍(lán)海，其實(shí)本質(zhì)上都是幫助視頻創(chuàng)作者帶來(lái)商業(yè)利益。色欲作為人類(lèi)的本能，自然是最能吸引用戶(hù)的手段，所以你能看到與性相關(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ì)去買(mǎi)內(nèi)容，并不會(huì)關(guān)注具體的內(nèi)容到底是什么，而是真正做到讓用戶(hù)自發(fā)地去生產(chǎn)和分享內(nèi)容，讓產(chǎn)品自然生長(zhǎng)。張小龍說(shuō)視頻號(hào)的目標(biāo)是，希望人人都能夠很容易地通過(guò)視頻化的方式去公開(kāi)表達(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)在打開(kāi)視頻號(hào)，里面同樣充斥各種基于人性的弱點(diǎn)所創(chuàng)作的內(nèi)容，微商、網(wǎng)課、低俗，誘惑等內(nèi)容遍地，但現(xiàn)在你看到的它的樣子，絕不是它本該有的樣子。我相信隨著微信對(duì)視頻號(hào)的迭代，視頻號(hào)終會(huì)成為微信所目標(biāo)的那個(gè)人人都能表達(dá)自己的樣子。

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

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

什么是場(chǎng)景？場(chǎng)就是時(shí)間+空間。景呢？是能夠觸發(fā)情緒的交互。直播比起視頻，更能夠激發(fā)用戶(hù)內(nèi)心的情感，能夠讓主播和聽(tīng)眾之間產(chǎn)生更深刻的連接。這種感受其實(shí)是視頻無(wú)法比擬的。就像你在現(xiàn)場(chǎng)看演唱會(huì)和看錄播體驗(yàn)是完全不一樣的，周邊的環(huán)境會(huì)影響用戶(hù)的情緒。令我很深刻的體驗(yàn)是，今年王者榮耀冬季賽決賽第四局DYG對(duì)戰(zhàn)南京Hero戰(zhàn)隊(duì)，當(dāng)時(shí)的局面是0:3，如果第四局DYG沒(méi)有贏就意味著比賽的結(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ā)用戶(hù)的情緒。

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

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

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

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

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

總結(jié)

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

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

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

文章來(lái)源：站酷   作者：努力的橙子

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

前言 

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

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

案例解析 

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

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

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

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

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

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

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

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

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

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

了解商品才能更好的打造舞臺(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ì)感的外框，加上新品商品的屬性較為適合有神秘感的氛圍，所以綜合來(lái)看我們需要一個(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ù)，其最終目的是給觀眾更好的視覺(jué)體驗(yàn)。 

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

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

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

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

C4D渲染舞臺(tái)

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

C4D渲染舞臺(tái) 

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

第一，小米剛剛推出的小米11主打的是靚麗的藍(lán)色調(diào)，輕裝上陣，暗藍(lán)色的舞臺(tái)與明亮的小米11放在一起會(huì)毫無(wú)違和感，同時(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)中央的感覺(jué)，這樣上面放上商品就會(huì)體現(xiàn)一種專(zhuān)屬感，這種效果是在C4D中材質(zhì)球使用漸變色。 

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

新舊對(duì)比 

上圖中有質(zhì)感的舞臺(tái)可以增加手機(jī)的寫(xiě)實(shí)投影，視覺(jué)上融合的非常好，下圖中是白色和黑色商品的展示，在暗藍(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é)日過(guò)后就會(huì)下架。 

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

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

調(diào)整文案排版

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

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

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

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

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

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

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

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

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

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

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

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

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

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

↓↓

↓↓

  
↓↓

做減法的icon 

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

總結(jié)：

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

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

最后 

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

 

文章來(lái)源：站酷  作者：吳星辰

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

Part 1

————————

信息容器的概念

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

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

1. 背景層

2. 信息層

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

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

   
   

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

Part 2

————————

信息容器的常見(jiàn)類(lèi)型

常見(jiàn)的信息容器主要有2大類(lèi)：列表和卡片。

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

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

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

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

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

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

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

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

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

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

2.2 常見(jiàn)的信息容器分類(lèi)：

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

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

Part 3

————————

列表

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

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

舉例幾種常見(jiàn)的列表形式：

1. 用戶(hù)/消息列表

2. 圖文列表

3. 功能列表

4. “卡片型”列表

3.1 用戶(hù)/消息列表

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

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

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

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

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

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

以iOS為例，當(dāng)用戶(hù)向左滑動(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)用戶(hù)操作分心時(shí)，可能會(huì)忘記正在操作的對(duì)象，雖然這種情況極少發(fā)生。

方案B：

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

方案C：

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

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

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

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

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

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

同樣都是模態(tài)視圖，要表達(dá)的信息也相似，都是要求用戶(hù)進(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ì)探討。本篇文章不做過(guò)多延展。

3.2 圖文列表

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

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

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

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

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

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

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

從視覺(jué)上說(shuō)：

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

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

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

從交互上說(shuō)：

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

3.3 功能列表

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

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

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

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

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

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

1. 線條分割

2. 塊面分割

3. 間距分割

3.4 “卡片型”列表

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

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

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

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

Part 4

————————

卡片

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

4.1 大卡片

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

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

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

4.2 泳道

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

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

停止位置隨機(jī)：

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

停止位置固定：

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

4.3 雙列卡片

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

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

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

卡片對(duì)齊：

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

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

瀑布流：

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

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

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

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

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

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

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

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

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

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

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

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

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

4.4 宮格/網(wǎng)格

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

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

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

Part 5

————————

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

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

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

5.1 無(wú)容器

5.2 復(fù)合容器

Part 6

————————

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

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

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

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

文章來(lái)源：站酷  作者：doo_W

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