醫(yī)療保健類產(chǎn)品設(shè)計、界面設(shè)計及交互設(shè)計靈感

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

今天將從醫(yī)療保健類產(chǎn)品開始延展到互動和交互界面。很多醫(yī)療產(chǎn)品的界面有可能是一個小屏幕，也有可能是非常大的屏幕。

產(chǎn)品

醫(yī)療類的產(chǎn)品我們選擇了一些可穿戴設(shè)備的概念設(shè)計。

Kingyo設(shè)計的Sange手表

Crux Product Design 和 Chris Pearce 設(shè)計的

Amazfit

Gra?ina Bo?kut?為盲人設(shè)計的可穿戴配件

交互

我們與不同設(shè)備的交互不斷變化，將語音用戶界面引入醫(yī)療行業(yè)將徹底改變?nèi)藗儗ψo(hù)理的看法。精細(xì)設(shè)計的語音助理能夠像人一樣，更貼心。

Michal Sambora設(shè)計的Alexa助理的界面

Gleb Kuznetsov?設(shè)計的ai智能語音助理

SELECTO設(shè)計的語音助理

界面

干凈，簡潔，充滿未來感，避免錯誤的發(fā)生。

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

在今天的 UI設(shè)計中，投影使用的范圍和頻次越來越高。打開手機APP，或是看追波上的練習(xí)稿，都可以看見無數(shù)投影使用的案例。

掌握好投影的使用，是必備的 UI 視覺設(shè)計基礎(chǔ)。投影遠(yuǎn)沒有大家想象的那么簡單，即使軟件中可以設(shè)置的參數(shù)并不多，在我的教學(xué)過程中，很多學(xué)員始終沒辦法很好的應(yīng)用投影來提升自己的設(shè)計質(zhì)感。

所以，這篇文章就會詳細(xì)講解投影的正確設(shè)計方法。

一、投影的基本介紹

在了解投影和設(shè)計的關(guān)系前，我們要先知道投影是什么。用專業(yè)點的方式解釋，即：

投影指的是用一組光線將物體的形狀投射到一個平面上去，稱為「投影」。

有了光源，才有投影。光影是美術(shù)和攝影最核心的基礎(chǔ)。那么投影有什么特征呢，先看看下面的這張靜物攝影。

圖中有很清晰的向右延伸的投影。距離主體越遠(yuǎn)的投影，也就越模糊，越淡。通過這樣的投影我們還可以很輕易的分析出，光源在左側(cè)，且物體是放置在地面上的。

投影可以帶給我們非常多隱藏的信息，而這些往往被我們所忽略。再看看下方的案例，當(dāng)背景無法直觀的提供物體所處高度時，投影就能起到關(guān)鍵的作用。

在平面畫布中，投影的做法直接影響我們對元素的認(rèn)識。 例如下圖中，投影可以讓我們了解按鈕本身是有厚度（遮擋了光線）或是離開了水平面處于懸浮狀態(tài)。

當(dāng)然，投影除了對物理信息的暗示，還涉及到對視覺效果的表現(xiàn)。上面的白鞋投影很重，且輪廓清晰，這樣能塑造更強烈的沖突，增加鞋子的立體感。但是不是所有攝影都需要有這樣雕刻版的投影效果呢？答案是否定的，例如下面這張圖片。

主體物和背景色彩能很好的結(jié)合，創(chuàng)造出有趣歡快的視覺氛圍，所以只需要柔和的投影即可。在 UI 的設(shè)計中，對于陰投影參數(shù)的定義，也會直接影響我們畫面的視覺效果。

成熟的攝影作品，會根據(jù)對投影的需要再去調(diào)節(jié)打光的方式，這是個非常復(fù)雜而且繁瑣的過程，需要經(jīng)年累月的學(xué)習(xí)。而在設(shè)計的過程中，創(chuàng)造投影卻非常容易，所以我們更該重視的是，如何正確的設(shè)計投影。

即先構(gòu)思出元素的物理特性，再給予它正確美觀投影樣式。

二、UI設(shè)計中的投影

在進(jìn)入了扁平化的設(shè)計環(huán)境后，投影有很長一段時間被抹除，因為大家認(rèn)為那是擬物的遺毒，就怕設(shè)計里用到擬物元素顯得不夠時髦。

到了 Material Design 發(fā)布以后，谷歌在規(guī)范中增加了 Z 軸的概念，也就是為平面預(yù)設(shè)了立體的空間，設(shè)計元素可以定義與空間中水平面的距離。

下圖中，Z 軸數(shù)字越大，代表和水平面的距離越遠(yuǎn)，上升得越多。而帶給我們這種感受的原因，就是投影的暗示，元素本身的坐標(biāo)并沒有任何改變。

既然增加了投影，那么谷歌的專業(yè)設(shè)計團隊，肯定不會很隨意的制定其參數(shù)。當(dāng)我們打開谷歌的官方 UI KITS 源文件進(jìn)行查看時，就能發(fā)現(xiàn)其中的不同。

可以看見，元素疊加了多層的投影，這是違反新手對于投影定義的直覺的。原因在與，一般軟件中定義的投影，其深淺與元素的距離是線性等比的，而現(xiàn)實世界中，深淺與距離是非線性的函數(shù)關(guān)系。

在 UI設(shè)計師接觸的平面類軟件中，只有 PS 具備完美復(fù)現(xiàn)這種投影的能力，即控制投影的等高線。

而 Sketch、XD 這些軟件都不具備這樣的功能，且手機系統(tǒng)的投影渲染機制也是線性的，所以谷歌就通過使用 TopShadow、BottomShadow 疊加的方式，去模擬真實的投影效果，讓它們看起來更和諧自然，這就是多層投影的奧秘。

上面出現(xiàn)的投影都是黑白灰，但在現(xiàn)在流行的設(shè)計作品中，最常見的是應(yīng)用了彩色的投影，攝影中也經(jīng)常會應(yīng)用彩色的投影渲染氛圍。

但是，投影中的這些彩色區(qū)域，并不完全都是投影，還包含了折射和漫反射的原理等。為了簡化，我們可以認(rèn)為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽傘，傘下的人頭頂也會彌漫著草原的芬芳……

三、投影設(shè)計演示

在開始展示具體的設(shè)計案例前，我們要先明確一個原則，即：

優(yōu)雅的投影是讓你感受到它的存在，但不會吸引你去關(guān)注它！

一般的設(shè)計軟件中，元素的陰影即是在元素的背后添加了一個相同輪廓的純色矢量圖形，我們可以通過 XY 軸移動它的位置，并使用模糊的參數(shù)來設(shè)置它的模糊度。

當(dāng)元素的距離水平面越近，陰影距離元素也就越近，即 XY 軸越小，模糊也越小，如果離得遠(yuǎn)則相反。

1. 常規(guī)投影類型

第一種投影的類型，即光源從元素的上方投射下來，可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標(biāo)為0，只添加模糊的參數(shù)，透明度較低。第二層陰影使用相同的模糊參數(shù)，增加 Y 軸坐標(biāo)，透明度較高。

在非 MD 設(shè)計中，它濃郁的投影參數(shù)會讓整個界面變「臟」，變擁擠。我們要做的是要降低投影的透明度，這樣才能讓投影的表現(xiàn)更自然舒適。要牢記的是，當(dāng)使用純黑色做陰影時，透明度無論如何都不應(yīng)該高于 20%，正常區(qū)間在 5%-15%。

既然知道陰影屬性的規(guī)律，我們還可以復(fù)制個矢量圖層做模糊效果也可以得到一樣的效果，這種方法可以支持我們設(shè)計出更真實的投影。即將 BottomShadow 獨立出來，縮小并向下移動。

如果想要得到彩色的投影，那么只要切換投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我們要憑感覺去調(diào)整它們的透明度。

如果感覺不得勁，陰影太少了，那么我們就讓元素的 Z 軸上升。

既然前面提到彩色投影是由于光線穿透了元素，那么當(dāng)使用了漸變色或者是圖片的投影，我們在上一步復(fù)制出的那層投影，就可以不使用填充色，而是直接用漸變或者是原圖進(jìn)行模糊和透明度調(diào)整。

2. 非常規(guī)投影類型

光有垂直于平面的關(guān)系，那么發(fā)揮想象力，我們還可以更改光與面的位置，如下圖所示。

在這個場景中，投影就作用在圖片下方的地面，只有地面處于透視狀態(tài)時，才能可以看見它的投影，所以，我們就可以得到下方的效果。

當(dāng)然，我們還可以結(jié)合光源的類型，比如使用聚光燈等，那么陰影的輪廓就會發(fā)生變化。

我們甚至可以預(yù)設(shè)元素本身產(chǎn)生有一定的變形，如邊緣翹起，那么就會產(chǎn)生獨特的陰影類型。

我們可以從日常生活中的觀察將各種不同的投影形式引用進(jìn)我們的設(shè)計中，讓我們的設(shè)計視覺更豐富有趣。

總結(jié)

學(xué)會正確的投影設(shè)計方式，并不是僅僅讓我們局限在對 UI 元素的設(shè)計上。它還能給我們帶來很多意想不到的幫助，例如做設(shè)計的包裝。

通過前面講解的知識點，上方展示案例中應(yīng)用的陰影方式相信你們已經(jīng)可以看出端倪了，如果使用基礎(chǔ)的陰影設(shè)置去創(chuàng)建展示的陰影，就會發(fā)現(xiàn)效果遠(yuǎn)遠(yuǎn)不如案例的高級，自然也難以帶給別人良好的視覺體驗。

最后，在項目中，想要將設(shè)計出來的陰影交付給開發(fā)，真正落地實現(xiàn)出來，無論安卓或是 iOS ，陰影的渲染和設(shè)計軟件的參數(shù)是不一致的，這就需要大家自己鉆研了。

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

提到Axure，這可是絕大多數(shù)PM童鞋靠著吃飯的家伙事兒。Axure被很多人定義為一個以交互見長的原型設(shè)計工具。很多初入坑甚至入坑甚久的PM為畫出炫酷的原型挖空了心思。我想這對Axure的初衷一定是有誤解。

荔枝微課app體驗報告：與AI結(jié)合，將有更大發(fā)展空間

人人都是產(chǎn)品經(jīng)理 2018-07-21 13:14:44

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

荔枝微課是目前市面上知識付費領(lǐng)域非常優(yōu)秀有競爭力的產(chǎn)品，本文對荔枝微課的產(chǎn)品設(shè)計進(jìn)行了分析與思考。

一、產(chǎn)品概述

1. 體驗環(huán)境

• 體驗版本：4.3.0
• 體驗設(shè)備：華為mate10（128G版）
• 安卓版本：8.0.0
• 體驗時間：2018年7月

2. 產(chǎn)品簡介與定位

荔枝微課的應(yīng)用介紹：

“荔枝微課是連接人與知識的內(nèi)容分享平臺，支持隨時隨地授課聽課。與大咖、草根，一同共赴知識盛宴?！?

可以發(fā)現(xiàn)，荔枝微課主要著力于打造一個全民學(xué)習(xí)知識&全民分享知識的大眾知識分享平臺，其核心內(nèi)容則是平臺沉淀下來的知識內(nèi)容，其運營的關(guān)鍵是源源不斷的能吸引用戶購買的知識輸出。

其核心價值主要有2點：

對于知識學(xué)習(xí)者來說，荔枝微課可以為用戶提供一個內(nèi)容豐富的，可以隨時隨地進(jìn)行學(xué)習(xí)的知識平臺，滿足用戶能夠方便快捷獲取知識的需求。

對于知識分享者來說，荔枝微課可以為用戶提供一個知識變現(xiàn)并實現(xiàn)自我價值的平臺，以及平臺為知識分享著提供的推廣及流量支持。滿足用戶通過分享知識而實現(xiàn)個人價值并獲得現(xiàn)實收益的需求。

3. 用戶需求分析

3.1 用戶畫像

在進(jìn)行需求分析之前，我們先來了解一下荔枝微課的用戶群體，進(jìn)行簡單的用戶畫像，以便我們更加準(zhǔn)確地進(jìn)行需求分析。（PS：用戶畫像主要基于二手?jǐn)?shù)據(jù)資料、競品分析和個人體驗產(chǎn)品后的逆向推理得出，由于個人水平以及時間問題，如有偏差望見諒。）

3.1.1 平臺角色

經(jīng)分析可發(fā)現(xiàn)，平臺中主要存在兩大角色：知識分享者（知識分享者又可以細(xì)分為機構(gòu)和個人，在本文中不做區(qū)分）和知識學(xué)習(xí)者（也可以稱作知識消費者）。

從產(chǎn)品的運營模式來看，很多用戶既是知識消費者，又是知識分享者，用戶在平臺上學(xué)習(xí)自己欠缺的知識，分享自己的一技之長，形成了一個良性循環(huán)。

在體驗中我發(fā)現(xiàn)，知識分享者的知識分享流程主要是通過PC端的“講師管理后臺”完成的，因此在針對app的體驗中我主要針對知識學(xué)習(xí)者用戶進(jìn)行分析。

3.1.2 核心用戶的基本信息

通過荔枝微課本身以及對比幾款競品的相關(guān)數(shù)據(jù)，我們可以大致推斷其核心用戶的基本信息：

年齡：通過百度指數(shù)以及對核心用戶的核心行為-學(xué)習(xí)各種實用技能知識，進(jìn)行分析，我們可以看到，主要集中在30-39歲（占比60%左右），同時20-29歲， 40-49歲兩個階段也有不少分布（占比約為20%左右）。

性別：我們可以看到百度指數(shù)中顯示，其用戶性別比例男：女約為6：4。但是我們知道百度指數(shù)對于性別判定算法，有時候會產(chǎn)生誤差。在荔枝微課這里就發(fā)生了這樣的情況。

對于荔枝微課的性別比例，我們通過對產(chǎn)品進(jìn)行分析，可以發(fā)現(xiàn)這個性別比例并不準(zhǔn)確。

有一下2點理由：

• 第一，在荔枝微課的“發(fā)現(xiàn)”頁中存在很多的課程分類，我們可以看到其中大部分內(nèi)容是針對女性用戶的：比如母嬰、形象、美妝個護(hù)、時尚、婚姻等等分類。而且作為優(yōu)先級最高的第一屏的分類項目是推薦、婚姻、家庭關(guān)系、戀愛、母嬰、育兒，這幾個比較偏女性用戶的分類。
• 第二，在產(chǎn)品所有的課程內(nèi)容中我們可以看到大量的課程都是針對女性用戶的，比如瑜伽課、提升女生的氣質(zhì)等等相關(guān)課程。

因此我們大致可以進(jìn)行推理，荔枝微課的用戶應(yīng)當(dāng)女性偏多，女：男 約為 6：4 到 7：3 之間。

區(qū)域：可以看到荔枝微課的用戶主要集中在一線以及新一線城市。

收入：對于用戶的收入水平我們可以從2個方面進(jìn)行推測， 一是我們上文得出荔枝微課的核心用戶主要分布在一線及新一線城市；二是，我們可以看到在荔枝微課中絕大部分課程的價格都在100元以下。我們可以進(jìn)行推測，荔枝微課的核心用戶應(yīng)該處于中等收入水平。

用戶性格：綜合以上所有的分析，大致可以推斷出用戶的性格有以下幾個特征：自我提升欲望強烈、存在一定的焦慮感、對自己某方面現(xiàn)狀不是很滿意。

二、產(chǎn)品分析

1. 產(chǎn)品結(jié)構(gòu)圖

荔枝微課有發(fā)現(xiàn)、精選、我的微課、個人中心4個以及導(dǎo)航模塊。

• “發(fā)現(xiàn)”是分類別展現(xiàn)課程信息，主要是滿足用戶分門別類查找自己感興趣的知識的需求；
• “精選”則是平臺為用戶精心挑選的課程列表；
• “我的課程”是用戶學(xué)習(xí)課程的記錄，方便用戶方便快捷的進(jìn)行學(xué)習(xí)；
• “個人中心”則是用戶進(jìn)行個人設(shè)置以及記錄個人信息與操作的模塊。

其產(chǎn)品結(jié)構(gòu)圖如下：

2. 用戶使用流程圖

通過分析發(fā)現(xiàn)，產(chǎn)品中存在2個核心流程，一是用戶購買課程流程（購買直播課程流程和購買非直播流程略有不同）；二是用戶學(xué)習(xí)課程流程（學(xué)習(xí)直播課程流程和學(xué)習(xí)非直播流程有不同），其流程圖如下：

2.1 購買課程流程

購買直播課程流程和購買非直播流程略有不同，購買直播課程流程不需要判斷課程是否收費，免費課程仍然進(jìn)入支付流程，并支付0元。

從分析體驗來看，從開始到結(jié)束，整個購買課程流程非常清晰且順暢，中間不存在多余流程，也沒有其他任務(wù)導(dǎo)致流程中斷，用戶體驗很好。

2.2 學(xué)習(xí)課程流程

相對購買流程來說，學(xué)習(xí)課程流程就沒有那么清晰順暢了，我們可以看到直播課程學(xué)習(xí)流程比較清晰。但是非直播課程學(xué)習(xí)課程卻看起來比較復(fù)雜，個人覺得該流程中存在一些多余流程。

（1）首次進(jìn)入課程存在多余流程

我們從流程圖中可以看到首次進(jìn)入時，產(chǎn)品會讓用戶選擇是從第一條開始聽還是直接進(jìn)入課程。選擇從第一條開始聽，用戶將會進(jìn)入課程學(xué)習(xí)頁面，并從第一條語音開始播放。而選擇直接進(jìn)入課程，則進(jìn)入課程學(xué)習(xí)頁面，但課程不會進(jìn)行播放。

我們可以看到2個不同選擇只是有課程是否自動播放的區(qū)別，這個區(qū)別對用戶來說不是必要，但是卻多了一個頁面，讓用戶多進(jìn)行了一步操作。這并不利于用戶完成整個課程學(xué)習(xí)流程。

而且，在體驗過程中，我發(fā)現(xiàn)在這個選擇頁面中用戶是無法后退的，也無法關(guān)閉選擇彈框，只能在“從第一題哦啊開始聽”和“直接進(jìn)入課堂”中進(jìn)行二選一，這可能是為了提升課程播放頁面的打開率，但是這樣的設(shè)置對用戶體驗不是十分友好。

（2）非首次進(jìn)入流程存在多余流程

對于非首次進(jìn)入流程，我們來想象一個用戶場景：

在上班的路上，有一個用戶對荔枝微課上的一門化妝課程非常感興趣，她打開課程進(jìn)行學(xué)習(xí)，半個小時后她到公司了，她關(guān)閉課程開始上班。等到下午下班之后，她想起來自己早上還有一門課程沒有學(xué)完，想要接著學(xué)習(xí)，這之后她很希望荔枝微課幫她記住了自己上午學(xué)習(xí)到哪里了。

我們可以看到，對于用戶來說，被打斷的課程直接進(jìn)行續(xù)播，才是符合用戶預(yù)期的。所以個人覺得在用戶再次打開自己學(xué)習(xí)過的課程時，給用戶“繼續(xù)未聽完的課”和“直接進(jìn)入課堂”的選擇是比較多余的，用戶其實不需要這樣的選擇。這種不記住自己的學(xué)習(xí)進(jìn)度的選擇，反而是用戶想要避免的。

3. 導(dǎo)航結(jié)構(gòu)分析

荔枝微課有發(fā)現(xiàn)、精選、我的微課、個人中心4個一級導(dǎo)航模塊。

• “發(fā)現(xiàn)”主要是分類別展現(xiàn)課程信息，主要是滿足用戶分門別類查找自己甘心去的知識的需求；
• “精選”則是平臺為用戶精心挑選的課程列表；
• “我的課程”則是用戶學(xué)習(xí)課程的記錄，方便用戶方便快捷的進(jìn)行學(xué)習(xí)；
• “個人中心”則是用戶進(jìn)行個人設(shè)置以及記錄個人信息與操作的模塊。

接下里我們來分析一下荔枝微課的這個導(dǎo)航結(jié)構(gòu)：

首先是“發(fā)現(xiàn)”頁，發(fā)現(xiàn)頁匯總了各種課程信息，并通過頭部導(dǎo)航分類別進(jìn)行展示，形成了典型的首頁風(fēng)格。從結(jié)構(gòu)設(shè)置上來看并沒有什么問題，但是個人在體驗中發(fā)現(xiàn)其在內(nèi)容展示上還是存在一定的優(yōu)化空間。

3.1 三個功能按鈕內(nèi)容不隨頂部導(dǎo)航切換

如截圖所示，在每個分類導(dǎo)航的輪播圖下方，都有“我的課程”、“精選專題”、“免費專區(qū)”三個按鈕。點擊按鈕我們可以發(fā)現(xiàn)都是相關(guān)的課程列表，顯然，這是產(chǎn)品為了吸引用戶點擊而專門設(shè)置的。

但是比較令人不解的是，這幾個按鈕的內(nèi)容并不隨著用戶選擇分類的切換而切換。無論是用戶選擇婚姻分類還是理財分類，精選專題為用戶展現(xiàn)的列表都有可能是一些中醫(yī)課程或者是英語學(xué)習(xí)，不會隨著用戶選擇的不同而量身推薦內(nèi)容。

另外，這種設(shè)置不但沒有根據(jù)用戶的興趣進(jìn)行針對性的推薦，而且，會對用戶造成一定程度的誤導(dǎo)，從用戶的角度來說，導(dǎo)航切換了該導(dǎo)航下的內(nèi)容進(jìn)行相應(yīng)的切換是一個順理成章的邏輯，但這三個模塊內(nèi)容卻不進(jìn)行切換，這并不符合用戶的操作認(rèn)知。

3.2 如果能更智能的進(jìn)行個性化課程推薦可能會更好

我們從結(jié)構(gòu)圖中可以看到，發(fā)現(xiàn)頁中共有26個分類導(dǎo)航，涵蓋各種年齡階段，不同性別不同層次的用戶群體可能感興趣的所有課程，可以說是課程內(nèi)容非常豐富了。但是，如果用戶對排名比較靠后的某一個類別感興趣的話，那么他想要找到這個類別就會相對比較困難，而且在進(jìn)行左滑的時候很容易錯過中間某個分類。

同時，在體驗的過程中，我用了男女兩個性別不同的帳號進(jìn)行體驗，發(fā)現(xiàn)所展示的內(nèi)容完全一致，連導(dǎo)航的排序也一致，這說明產(chǎn)品沒有針對細(xì)分用戶做一些相對個性化的區(qū)分。

我們知道，對于非基礎(chǔ)知識的獲取需求，不同的用戶群體的需求可能差異很大，所以如果產(chǎn)品能夠應(yīng)用人工智能或者是大數(shù)據(jù)等技術(shù)對用戶進(jìn)行相對個性化的信息展示，那么在轉(zhuǎn)換率以及用戶體驗方面都應(yīng)該都會有所提升。

然后是“精選”頁，個人覺得精選頁存在2個問題：

第一，是與首頁一樣沒有針對細(xì)分用戶進(jìn)行個性化的區(qū)分，我用了男女兩個性別不同的帳號進(jìn)行體驗，所展示的內(nèi)容完全一致。當(dāng)然，精選課程列表可能選取的是一些相對比較熱門的課程（熱門也是一種吸引力的保障），或者是一些產(chǎn)品出于商業(yè)盈利或者其他考慮而特意選出的部分課程，所以倒是不一定非要有用戶針對性。

第二，個人覺得其實精選課程并不需要作為一個一級導(dǎo)航頁存在，其實精選課程的內(nèi)容，完全可以由發(fā)現(xiàn)頁中的“推薦”分類進(jìn)行承載，只要在推薦類的課程列表中進(jìn)行一些模塊劃分便能實現(xiàn)，并不需要顯示一個專門的一級導(dǎo)航頁。

接下來是“我的微課”頁，分為全部課程、最近學(xué)習(xí)、即將開始三個模塊。這里記錄了用戶購買和學(xué)習(xí)過的課程記錄，滿足用戶方便快捷進(jìn)行回溯或繼續(xù)學(xué)習(xí)的需求，是一個非常好的頁面。

但是，也存在一點點小問題，那就是被添加進(jìn)來的課程不能進(jìn)行管理，如果用戶無意間點開一個自己不感興趣的課程，后面想要刪除，無法實現(xiàn)。在用戶打開過的課程越來越多時，可能會造成不好的用戶體驗。

“個人中心”頁，個人中心頁是一個典型的個人中心頁面，這里就不進(jìn)行進(jìn)一步分析了。

4. 核心頁面分析

接下來我們對產(chǎn)品的幾個核心頁面進(jìn)行一下分析。

4.1 課程詳情頁

首先是“課程詳情”頁，我們先想象一個場景：

一個用戶在推薦頁看到了一個瑜伽課程感覺挺有興趣，于是她點開了這個課程，想進(jìn)一步看看課程更詳細(xì)的信息，好決定自己是不是要購買這個課程。課程詳情頁信息影響著用戶是否購買的決策，是一個非常重要的頁面。

我們來看看課程詳情頁的構(gòu)成。

• 功能：購買專欄按鈕、課程試聽、分享課程、關(guān)注課程分享者帳號。
• 信息：封面圖、專欄標(biāo)題、價格、課程更新進(jìn)度、在學(xué)人數(shù)、課程詳情、課程目錄、人氣榜、課程分享者帳號信息。
• 需求：用戶想進(jìn)一步獲取更詳細(xì)的課程信息，好決定自己是不是要購買課程。
• 思考：從信息內(nèi)容來看，荔枝微課的課程詳情頁做得非常好，尤其是頁面主體“詳情”內(nèi)容總能把課程非常具有吸引力的內(nèi)容提煉出來，可以說從內(nèi)容運營方面來說領(lǐng)先于市面上很多產(chǎn)品。

不過從功能的角度來看，荔枝微課還是可以進(jìn)行小小的優(yōu)化，首先便是缺少直接的咨詢按鈕，我們知道用戶在進(jìn)行購買決策時，如果能為用戶提供一個咨詢客服的入口，會一定程度提高轉(zhuǎn)換率。

當(dāng)然，因為平臺上存在大量的個人講師，因此，如果增加咨詢按鈕的話，這大量的客服工作可能需要平臺來承擔(dān)，這樣會大量增加平臺的成本。所以，目前荔枝微課的課程沒有直接的咨詢?nèi)肟冢灿锌赡苁浅鲇趯Τ杀镜目紤]。

然后，就是已消費用戶的評論也是影響用戶購買決策的重要因素，如果能在課程詳情頁中增加用戶的評論，可能會錦上添花，對用戶的決策產(chǎn)生正向影響。

而且，這種評價體系也將為優(yōu)質(zhì)的課程做更好的背書，再輔以一些相應(yīng)的算法對課程進(jìn)行排序，這可以促進(jìn)講師們提升自己的課程質(zhì)量，長久下來將有助于平臺整個課程質(zhì)量的提升。

4.2 課程播放頁

視頻播放頁也是產(chǎn)品非常重要的頁面之一。我們可以看到左圖是荔枝微課的課程播放頁，右圖是進(jìn)入課程學(xué)習(xí)的上一步，選擇是“繼續(xù)未聽完的課”還是“直接進(jìn)入課堂”，如果用戶是第一次進(jìn)入課程則是，選擇“從第一條開始聽”還是“直接進(jìn)入課堂”。

在上文中我們已經(jīng)提到過這個選擇頁面對于整個學(xué)習(xí)課程流程的完成有一定的多余，不過從其課程播放界面我們看到課程并不是一個完整的視頻或音頻而是一個模擬直播現(xiàn)場的分條課程頁面時，我們大概能理解為什么會有這樣的選擇了。

我們知道講師進(jìn)行課程直播，然后將這些直播的內(nèi)容進(jìn)行沉淀，供用戶反復(fù)學(xué)習(xí)，這是荔枝微課的一大核心特色。荔枝微課設(shè)置如上的課程學(xué)習(xí)頁面，可能是為了更好的還原直播課程現(xiàn)場，包括直播的氣氛、講師與學(xué)生之間的互動交流碰撞出的火花等等。

不過，我們來想象一個場景，當(dāng)不在那個直播氛圍中，用戶對于一條一條的去刷整個課程討論的需求有多高呢？更何況很多講師在直播的時候可能還不允許用戶進(jìn)行討論，全程只是講師在進(jìn)行講課。那用戶更希望將這個內(nèi)容一條條拆開還是將講課內(nèi)容整合起來聽呢？我想答案應(yīng)該很明顯吧。

我們可以看到，其實在產(chǎn)品中還有一個不一樣的播放頁面，如下圖所示，我們可以看到這就是直接將課程進(jìn)行了整合，而且用戶如果想要觀看上課模式，可以直接進(jìn)行切換，個人覺得其實所有的播放頁面都可以直接采用這種模式。

這樣不但能給用戶自主選擇的余地，而且我們在課程播放被打斷之后，再次進(jìn)入課程播放頁的時候，也不用再選擇是“繼續(xù)未聽完的課”還是“直接進(jìn)入課堂”，而是可以直接斷點續(xù)播。

當(dāng)然，荔枝微課這樣的頁面設(shè)置可能背后有由于我個人產(chǎn)品能力不足，或者是我對荔枝微課了解不夠深刻所導(dǎo)致的認(rèn)知誤差，如果是這樣，還請海涵。

三、總結(jié)

由于時間問題，這篇體驗報告寫得并不是很深入，有的觀點也不一定準(zhǔn)確，如果有一些不當(dāng)之處，再次致歉。然后對于文中提到的一些問題，主要是秉持著希望荔枝微課發(fā)展越來越好的初衷進(jìn)行體驗的，還希望各位不要覺得這是一篇找茬文才好。

總結(jié)來說，荔枝微課是目前市面上知識付費領(lǐng)域非常優(yōu)秀有競爭力的產(chǎn)品，不過現(xiàn)在產(chǎn)品針對用戶進(jìn)行個性化的定制變得越來越重要，尤其是這種知識付費產(chǎn)品，如何讓用戶迅速找到自己愿意付費的課程成為了產(chǎn)品的重要競爭點之一。

個人覺得如果荔枝微課能夠在抓住在線教育風(fēng)口的同時，再輔助以一定的人工智能、大數(shù)據(jù)等新技術(shù)進(jìn)行提升，應(yīng)該會帶來更大的發(fā)展空間。

本文由 @鐘娟娟 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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

1.我想學(xué)UI，請問看什么書?。?

2.我想學(xué)UI，請問哪個培訓(xùn)機構(gòu)比較好？

3.我想學(xué)UI，請問如何入手？

4.我不是設(shè)計專業(yè)，但是我還是想學(xué)UI，請問如何系統(tǒng)學(xué)習(xí)？

5.我不管，我就是要學(xué)UI，請您給點兒建議。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

Material Design（以下簡稱MD）是谷歌設(shè)計的一套視覺語言設(shè)計規(guī)范，主要應(yīng)用于安卓類應(yīng)用。

iOS Human Interface Guidelines（以下簡稱iOS）是蘋果公司針對 iOS設(shè)計的一套人機交互指南，目的是為了使運行在 iOS 上的應(yīng)用都能遵從一套特定的視覺以及交互特性，從而能夠在風(fēng)格上進(jìn)行統(tǒng)一。

相對來說，我們對于 iOS 的設(shè)計規(guī)范更加熟悉——因為考慮到成本，設(shè)計師進(jìn)行產(chǎn)品設(shè)計的時候只會出一套 iOS 的設(shè)計稿，然后去適配安卓機型。

很少會針對安卓機型再出一套 MD風(fēng)格的方案，這種現(xiàn)象雖然存在但是并不合理。不同的系統(tǒng)/平臺采用了不同的設(shè)計語言，不同的設(shè)計語言會培養(yǎng)出不同的操作習(xí)慣。

例如使用安卓手機的用戶平時見到的都是 MD風(fēng)格的界面，突然下了一個 iOS風(fēng)格的應(yīng)用，那么操作起來就會很不習(xí)慣，增加了學(xué)習(xí)成本。

為了讓產(chǎn)品可以適用不同平臺用戶的操作習(xí)慣，提供 MD 和 iOS 兩套設(shè)計稿是非常有必要的。當(dāng)然 MD 和 iOS 的差異不是一篇文章就能說清楚的，這里我就從陰影、導(dǎo)航和配色這三個方面來簡單分析一下 MD 和 iOS 的差異。

一、陰影

對于不太熟悉 MD 的設(shè)計師來說，MD 意味著大色塊+陰影。

為什么 MD 如此癡迷于陰影？

從它的名字就可以看出來——Material Design，這里的 material 指的是紙張；因為來源于現(xiàn)實生活，所以 MD 非常喜歡使用真實世界元素的物理規(guī)律與空間關(guān)系來表現(xiàn)組件之間的層級關(guān)系，而陰影就是最常見的表現(xiàn)形式：

同樣的賬戶注冊，安卓界面中按鈕帶有陰影而 iOS 界面中按鈕沒有陰影。

FAB（Floating Action Button），帶有陰影的浮動操作按鈕甚至成為了 MD 的一大招牌。相比較而言iOS更加扁平化。

二、導(dǎo)航體系

產(chǎn)品導(dǎo)航體系主要由菜單欄構(gòu)成，而根據(jù)位置以及交互方式可以分為頂部欄菜單、底部欄菜單和側(cè)邊欄菜單。iOS 的導(dǎo)航體系主要由底部欄菜單構(gòu)成，而 MD 大量使用了頂部欄菜單和側(cè)邊欄菜單。

下面我們來看幾個例子：

網(wǎng)易云音樂在 iOS 中采用的是底部欄菜單導(dǎo)航，而在安卓機型上導(dǎo)航欄被移到界面頂部，「賬號」被收到側(cè)邊欄中。

b站在 iOS 中有底部欄菜單有5個標(biāo)簽，而在安卓機型中只有4個標(biāo)簽，「我的」同樣被側(cè)邊欄收起來。

推特在 iOS 中使用的底部欄菜單導(dǎo)航，在安卓機型中導(dǎo)航欄被移到了頂部。

而 Apple Music 做的更徹底，在安卓機型上直接舍棄了底部菜單欄，采用了側(cè)邊欄作為主導(dǎo)航模式。

我們發(fā)現(xiàn)前兩款國產(chǎn)應(yīng)用在安卓機型上都保留了底部欄菜單，而后兩款國外應(yīng)用直接砍掉底部欄菜單。不只是 Apple music 和推特，很多國外的安卓類應(yīng)用都沒有使用底部欄菜單。而國內(nèi)的應(yīng)用因為考慮到 iOS，即使 MD 化也是閹割版的，屬于 iOS 和 MD 的混血兒。甚至很多安卓應(yīng)用在設(shè)計風(fēng)格上往 iOS 靠攏，以b站為例，其5.11之前的安卓版本中都是沒有底部欄菜單的。

當(dāng)然這里并不是去評價 MD 和 iOS 哪個導(dǎo)航體系更好用，我說下自己的觀點：

底部欄菜單的使用非常方便用戶在單手握持情況下的操作，但是對于大屏手機來說，單手操作會顯得很吃力。如果用戶改由雙手握持手機，那么從易用性上來說底部欄菜單沒有任何優(yōu)勢。

MD 的方案更加注重對界面空間的利用，側(cè)邊欄菜單就不說了。以底部欄菜單為例，在安卓機型中用戶滑動的時候底部欄菜單會隱藏，方便的用戶可以看下知乎，安卓版的底部欄用戶滑動的時候會隱藏，而 iOS 則是固定不動的。

側(cè)邊欄的優(yōu)勢還體現(xiàn)在可以提供更多的標(biāo)簽，底部欄菜單最多可以放5個。但是側(cè)邊欄菜單需要用戶點擊才能調(diào)出來，比較隱蔽，而底部欄和頂部欄相對來說就會顯得一目了然，總之各有千秋。

至于為什么 MD 會拋棄底部欄菜單，我個人的理解是設(shè)備原因。因為安卓機型底部有三個物理按鍵，如果采用底部欄菜單作為主導(dǎo)航模式，容易造成用戶誤點擊。

類似的還有 web 類應(yīng)用，因為瀏覽器的控件欄也在底部，所以如果采用了底部欄菜單同樣會造成用戶的誤操作。

三、配色

MD 提倡使用高飽和度的對比色來提升產(chǎn)品的視覺表現(xiàn)力，也就是我在上面提到的大色塊。同樣的一個功能，從底部欄背景色、插畫到按鈕，我們可以發(fā)現(xiàn) iOS 在色彩的使用上比較克制。

知乎之前的安卓版本使用了大面積的藍(lán)色，后來改成跟 iOS 一樣的白色。這樣的調(diào)整褒貶不一，有的用戶反饋這完全照搬了 iOS，要改回 MD。

產(chǎn)品界面設(shè)計中對比效果主要由配色、尺寸、間距和陰影來完成。MD 在配色和陰影上做的比較出彩，所以 MD風(fēng)格的產(chǎn)品在視覺表現(xiàn)上更有沖擊力。而 iOS 則顯得比較小清新，追求扁平和簡潔。所以我們無法去評判這兩款設(shè)計規(guī)范的孰好孰壞，因為其各自的出發(fā)點就是不一樣的。

當(dāng)然前面也提到了 MD 和 iOS 的差異不僅僅體現(xiàn)在以上說的這三點，還有一些小細(xì)節(jié)也非常值得我們思考。我們都知道在 iOS系統(tǒng)中，用戶向右滑動的時候會返回上一級頁面。因為蘋果手機沒有物理返回按鍵，所以這種機制非常受歡迎，但是在一些特定場景的時候就會有問題。例如如果我想復(fù)制微博里的「一曲肝腸斷，天涯何處覓知音」，選中光標(biāo)從左向右滑動，這時就會返回上一級頁面，特別不方便。所以我只能從右向左進(jìn)行復(fù)制，我后來試了一下微信和 QQ，發(fā)現(xiàn)默認(rèn)復(fù)制的是整條動態(tài)，這也算是一個折衷的方案。

總結(jié)

這篇文章并不是去評判 iOS 和 MD 兩種設(shè)計風(fēng)格孰好孰壞，也不是讓我們現(xiàn)在就去為自己的產(chǎn)品做出兩套設(shè)計稿，這個目前來說也不太現(xiàn)實。很多國民類應(yīng)用都只采用了一套設(shè)計稿，大家都這么做，整個大環(huán)境就是這樣。

但是還是那句話：存在不一定合理。出兩套設(shè)計稿雖然現(xiàn)在看起來不現(xiàn)實，但是我們也要做好準(zhǔn)備，要有危機感。

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

交互設(shè)計 Interaction Design 也被成為IXD。交互設(shè)計建立起了人與計算機便捷溝通的通道，它的目標(biāo)是創(chuàng)造可用性和用戶體驗俱佳的產(chǎn)品。我們在工作之中經(jīng)常會對接交互設(shè)計師和產(chǎn)品經(jīng)理，他們具有豐富的交互知識和經(jīng)驗。那是不是我們作為UI設(shè)計師，就只需要專心做好視覺層面的工作而不需要了解交互設(shè)計了呢？當(dāng)然不是，在視覺設(shè)計層面更多地考慮布局和交互原則才可以讓我們的界面更友好，視覺設(shè)計師是交互設(shè)計中非常重要的角色。

電商類 App 是日常使用頻次非常高的應(yīng)用，它們的每一次更新改版不僅是業(yè)務(wù)的拓展、用戶需求的滿足，同時也是消費趨勢的引領(lǐng)與跟隨。

近期淘寶 App 的許多頁面都有了較大的改動，在分析淘寶改版的基礎(chǔ)上，通過幾個關(guān)鍵頁面的分析對比淘寶、京東、蘇寧易購三大綜合類電商平臺的產(chǎn)品設(shè)計，希望此篇文章能讓大家對電商類 App 的產(chǎn)品設(shè)計有更深的認(rèn)識。

一、淘寶改版

前陣子淘寶進(jìn)行了改版，這次改版循序漸進(jìn)，并做了較多的 A/B 測試。

1. 主要改版頁面

上圖是淘寶幾個主要改版頁面。從視覺上看，很明顯的大圓角卡片、去線條，整體風(fēng)格統(tǒng)一輕質(zhì)化。大圓角卡片追隨了 iOS11 的風(fēng)格（App Store 中尤為突出），卡片使信息更加聚焦，模塊感更強；圓角卡片本身也比原先的卡片式增加了更多細(xì)節(jié)；大圓角卡片親和力高，更加活潑，也符合淘寶人群的定位。

上圖為5個 tab 的頁面，這次統(tǒng)一了頭部的顏色，強調(diào)了品牌，統(tǒng)一性方面也得到了提升。

以下是從單個頁面的角度進(jìn)行改版分析。

2. 個人首頁

△ 舊版圖為除夕的截圖，顏色方面先不討論

新舊版本的對比，可以看出88會員、卡券包優(yōu)先級提高，會員信息更加集中、突出。這也印證了這兩年會員機制的火熱，拉新成本和難度都越來越高的情況下，鞏固老用戶才能帶來更多的價值。

新版的卡片式很突出，去掉了大部分的線條，轉(zhuǎn)而用塊面來代替線條表達(dá)層級關(guān)系。

「我的訂單」部分 icon 樣式發(fā)生了變化（7. 7. 2 版），從填充式轉(zhuǎn)變?yōu)榫€條式，突出了 icon 右上角的數(shù)字，但這一點在測試版本中又改回來了（后面討論）。

88會員和物流這兩塊內(nèi)容滾動呈現(xiàn)，真正是動效解決問題，從時間軸來解決信息量大而空間局限的問題，同時動態(tài)效果增加了用戶吸引度。

在測試版中，這個頁面主要看到兩個點的變化，一個是 icon 改為原來的填充式，一個是動效滾動的節(jié)奏。

icon 的問題個人猜想是因為體量與重要性、位置的問題，線條式的體量弱于填充式。在「我的淘寶」頁面中，最重要的信息是「我的訂單」，因此需要一定的突出。另外在測試版里，「我的訂單」的上面固定的廣告位放置了旅行青蛙的廣告，此位置的突出性導(dǎo)致其弱化了底下的「我的訂單」，占用了原先「我的訂單」的 C 位，因此測試版考慮到更全的場景（有廣告），從而將 icon 的樣式換回了體量大的填充式。

動效滾動是上面說的88會員和物流，7. 7. 2版本里兩個滾動是同時進(jìn)行的，而7. 7. 8的測試版中兩個滾動是錯開的。上下同時滾動會讓人有些混亂，會讓人認(rèn)為這兩塊的信息是相互關(guān)聯(lián)的。

3. 店鋪首頁

這一塊做的 A/B 測試。店鋪頁面的改動較大，導(dǎo)航做了較大調(diào)整。新版將常用操作和重要功能放到了底部固定；二級導(dǎo)航中的內(nèi)容讓商家自定義選擇，從而滿足不同店鋪的需求；新版一級二級導(dǎo)航較舊版層級關(guān)系明確了許多。

再來說說這次的 A/B 測試，這次的測試時間比較長（從7. 7. 2到目前的7. 8. 2都在，目測到8. 0應(yīng)該會給出一個結(jié)果）。店鋪頁在導(dǎo)航上的大改動，會在一定程度上對已經(jīng)形成習(xí)慣的老用戶造成沖擊，對頁面重新適應(yīng)和學(xué)習(xí)，有點類似于前攝抑制（在認(rèn)知心理學(xué)上指之前學(xué)習(xí)過的材料對保持和回憶以后學(xué)習(xí)的材料的干擾作用）。新版設(shè)計的目的一是方便用戶初期快速學(xué)習(xí)，二是中后期快速使用。對于中后期的快速使用就需要一段時間的鋪墊來獲得數(shù)據(jù)。該次測試應(yīng)該是區(qū)分各種不同的用戶，簡單來說測試新用戶、老用戶分別對于新舊版本的學(xué)習(xí)，以及他們對新版本熟悉之后的使用。

4. 物流詳情

這一塊可以說是樣式上的大改。用可視化來表現(xiàn)包裹正處的位置以及即將進(jìn)行的操作，增強用戶感知（降低理解難度），進(jìn)一步提升對商品信息的把控感。比原先僅僅是文字展示而言生動了許多，樣式接近外賣等待中的訂單頁面?？梢暬倘豢梢哉故靖嗟男畔?，但是在用戶非訓(xùn)練的情況下信息傳遞的速度未必比文字要更快，不同的人對圖形的理解也會有所偏差。不過介于外賣 App 的頁面已經(jīng)對很多用戶進(jìn)行了教育，相信這種理解上不會有太大難度。但是依然要在后續(xù)優(yōu)化中逐漸突出信息的重點。

物流詳情頁除了樣式的巨大變化，還有一個特點就是場景化細(xì)分，不同的場景做出了差異化。例如僅僅是物流詳情頁，根據(jù)不同的場景：發(fā)貨未攬件 – 已攬件未配送 – 快遞員配送中 – 到達(dá)菜鳥驛站/其他快遞點 – 已簽收等，頁面突出的信息均有所區(qū)別。已攬件時突出快遞信息，配送時突出配送員信息等。

從場景細(xì)分做差異化，讓用戶獲取當(dāng)前最需要的信息這件事的出發(fā)點無疑是很好的，但是從上圖中，僅是快遞信息這一類信息，就出現(xiàn)了三種樣式（如上圖），并且位置也不統(tǒng)一。如果用戶是購買了幾件不同店家的商品，這時快遞員打電話來說我是XX快遞的，快遞給你放在了某某地方，這時我想知道這是啥商品的時候，于是我就打開了物流詳情，來找快遞信息，發(fā)現(xiàn)快遞信息居然不在原來的地圖底下了，找了好一會才發(fā)現(xiàn)放到了快遞員下方。這個例子也就是說在非常見場景下獲取某個信息時可能需要付出額外的學(xué)習(xí)成本。

不過在7. 7. 8的測試版本中，又將快遞信息的樣式減為兩種，算是一種妥協(xié)。本人認(rèn)為，場景細(xì)分出發(fā)點是好的，但在樣式和位置兩點中，最好至少有一點是固定不變的，這樣才不會過多增加用戶的學(xué)習(xí)成本，也能涵蓋一些小概率場景。

5. 動效

這兩張圖都是店鋪頁面頂部的動效，當(dāng)用戶向下滑動頁面時，頂部的信息會出現(xiàn)變化，也算是細(xì)分場景的一種，通過動效的方式完美過渡，過渡的流暢感會讓用戶對該平臺增加些許好感。

我的淘寶這一頁的動效解決問題在上面有說到，右邊的有好貨頁面，當(dāng)用戶在滑動頁面時，攻略推薦一欄的圖片有依次展現(xiàn)的效果，吸引眼球，小有驚喜。

總結(jié)來看，淘寶改版的設(shè)計角度可以總結(jié)為：設(shè)計追隨目標(biāo)，品牌、會員突出，追隨設(shè)計趨勢，細(xì)分場景，可視化展現(xiàn)和流暢動效。另外淘寶對設(shè)計、測試的態(tài)度上來說，設(shè)計解決實際問題，設(shè)計需要驗證，測試要嚴(yán)謹(jǐn)。

二、淘寶與其他競品

這里只選了京東和蘇寧易購兩個與淘寶進(jìn)行了幾個關(guān)鍵頁面比較，以下主要從視覺的角度談一下有哪些問題，這里幾乎不牽扯業(yè)務(wù)、頁面跳轉(zhuǎn)等問題。

1. 首頁

淘寶：整體看起來沒有什么硬傷，沒有用卡片風(fēng)格。

京東：這邊也是繼淘寶改版后不久改版上線。這邊首屏的 icon 這一塊的卡片式生硬，大有為了卡片而卡片既視感，京東秒殺這塊的整齊度不高，也有些左重右輕?！该咳展洹惯@種裝飾性較強的風(fēng)格也與整體卡片式簡潔風(fēng)格不符?！笘|家小院」樓層次級標(biāo)題的顏色跳躍，大有喧賓奪主之感。

蘇寧易購：目前還沒有改版。掌上搶這樓層整齊度不高，和京東類似，同時缺少層次感，部分有漸變部分沒有，非常不統(tǒng)一?！腹鋵嵒荨箻菍右曈X不平衡，而且信息層級很有問題。

2. 搜索結(jié)果頁

風(fēng)格：淘寶這頁用了無框設(shè)計，省去了中間的分割線，商品圖片尺寸較大；從左到右，圖片尺寸越來越小，分割線從無到細(xì)到粗，整體效果上淘寶和京東效果比易購的好。

標(biāo)簽：在標(biāo)簽的處理上，易購的標(biāo)簽非常強，在頁面上非常突出，喧賓奪主；京東的標(biāo)簽弱化，與淘寶類似，但完全不同類的標(biāo)簽樣式相同（秒殺與自營），會讓人覺得有些混亂。

圖文編排：淘寶和京東都沒有硬傷，比較和諧，但易購的圖片和文字大小間距比例不和諧，圖片與線框無論在視覺效果上還是像素上都沒有對齊；易購底部沒有適配 iPhone X。

3. 分類頁

風(fēng)格：淘寶用了明顯的卡片，去線條；而京東也用了卡片，卡片感微弱，是為了統(tǒng)一性而做；易購仍然是線框區(qū)分，整體區(qū)分效果不佳。

品牌：淘寶和京東在文字的處理上沒有用更多的色彩，而易購的色彩運用得非常多，削弱品牌感，且沒有帶來任何優(yōu)勢。

4. 商品詳情頁

此頁面我僅從節(jié)奏感這一個角度來看，上圖已經(jīng)標(biāo)出了每個頁面的節(jié)奏感給我的感受。淘寶整體的節(jié)奏感比較好，輕重緩和；京東和易購在節(jié)奏感上做的都有些問題，重節(jié)奏之間無輕節(jié)奏的調(diào)和會缺乏呼吸感。

5. 購物車

風(fēng)格效果：淘寶沒有用卡片風(fēng)格；京東用了卡片，導(dǎo)致大量留白，同時沒有帶來任何優(yōu)勢，蘇寧易購整體稍顯擁擠，沒有亮點。

圖文編排：淘寶整體非常和諧；京東圖片均使用了白底，這點很好保持了統(tǒng)一性；京東使用了大量的設(shè)計細(xì)節(jié)，字號、粗細(xì)、字體、顏色等等非常豐富，但整體效果并沒有很理想，稍顯瑣碎與凌亂；蘇寧易購的文字大小與間距處理不和諧而帶來擁擠感。

其他細(xì)節(jié)：京東標(biāo)簽不同于搜索結(jié)果頁的弱化，而是非常強化，導(dǎo)致視覺焦點混亂，個別按鈕非常小，操作不便；易購標(biāo)簽處理上比京東收斂；易購底部 tab 與其他部分沒有區(qū)分，浮框像廣告，效果不佳，數(shù)量修改框的描邊太硬，比例不和諧。

6. 個人首頁

整體風(fēng)格：淘寶和京東都是明顯的卡片式，蘇寧易購是廣義上的卡片式。

這里主要說一說易購的問題：首屏出現(xiàn)「我的專場」的大片不平衡色塊非常不合適，部分 icon 效果不佳，另外有一些內(nèi)容上的 bug。

7. 訂單

淘寶和京東的訂單頁個人認(rèn)為沒有什么硬傷，淘寶有個適配的問題。蘇寧易購的問題比較多，首先是頂部「常購清單」中沒有商品的 bug，然后是圖片與購物車等地方的風(fēng)格不符，商品之間分割線有時有有時無，間距有問題等等。

三、總結(jié)

綜合上面具體頁面的分析可以看出淘寶在 UI 設(shè)計上的優(yōu)勢：追隨設(shè)計趨勢、統(tǒng)一性、排版和諧等。

關(guān)于統(tǒng)一性這一點，可能有人說京東做的更好，因為它幾乎所有頁面都用了卡片風(fēng)，而淘寶沒有。個人認(rèn)為，設(shè)計風(fēng)格是次于設(shè)計目標(biāo)的，如果這種設(shè)計風(fēng)格不能很好滿足該頁面的設(shè)計目標(biāo)，建議還是以設(shè)計目標(biāo)為重；如果仍然強制使用該風(fēng)格的話，會得不償失。淘寶的做法是把卡片這種風(fēng)格歸類為輕質(zhì)化風(fēng)格，除了卡片以外，還有去線條、色塊等等設(shè)計語言，因此并非強調(diào)一定要使用卡片形式。

移動端列表索引效果非常實用，比如：手機通訊錄。你可以根據(jù)字母來查找對應(yīng)的內(nèi)容。下面這個例子我是參考了 MUI 里的列表索引效果，寫出來的代碼，代碼的結(jié)構(gòu)基本一樣，但功能會少一些，去掉了搜索框搜索，只有單純的字母索引，不過這也基本夠用了。這個效果是基于 jQuery 庫的，所以在用的時候就記得引入 jQuery 庫。