文章內(nèi)容由 『簡書』設(shè)計師 ?小庚，在『SmallTalk 2.0』第一期 【如何打造一款有格調(diào)的產(chǎn)品？】中的分享整理而成。

大家好，我是小庚，我本身是視覺設(shè)計出身，現(xiàn)在在簡書做ui設(shè)計師以及產(chǎn)品相關(guān)的工作。我是一個90后，步入職場的年數(shù)也不多，今天能來和大家交流很榮幸，可能很多產(chǎn)品專業(yè)的知識還要向各位學(xué)習(xí)。

1年前我還是個簡書的用戶，簡書那時候有了比較完整的網(wǎng)站產(chǎn)品，是一個很有自己的個性和格調(diào)的寫作閱讀的平臺，已經(jīng)有了很多喜愛它的用戶。

去年中的時候，簡書準(zhǔn)備往移動端加快發(fā)展的腳步，我覺得一方面我很喜歡簡書這個產(chǎn)品，一方面移動端的設(shè)計也是我最感興趣的方向，所以7月份的時候我加入了簡書團隊。

加入簡書之后呢，我開始負責(zé)iOS端從產(chǎn)品到設(shè)計的工作。

在簡書，一般設(shè)計師的工作流程是這樣的，設(shè)計師會先和ceo，cto一起討論每個大版本的功能規(guī)劃，在討論的過程中就會用草圖的形式將大致的流程畫下來。

之后我們會將流程圖細化并分析它的使用上的便利性和技術(shù)實現(xiàn)上的可行性，然后設(shè)計師再將它們完善成視覺稿輸出給開發(fā)的同事。

開發(fā)完成后，設(shè)計師還需要負責(zé)收集和反饋用戶的需求，了解用戶真實的使用體驗，這其中的一部分又會流入到下一階段的功能規(guī)劃。

所以雖然名義上我是ui設(shè)計師的職位，但其實從PM到UE,再到UI的工作我們都會做到，也是一個特別有挑戰(zhàn)的崗位吧。

從簡書iOS2.0到現(xiàn)在的版本都是這樣完成的，期間我也參與了網(wǎng)站的一些改版優(yōu)化工作，比如簡書首頁的列表（以前我們是沒有圖片的），專題和文章詳情頁的一些改版工作，近期我們正在對android版本進行一次全面的改版，這些工作都讓我對這個產(chǎn)品在不同平臺的表現(xiàn)能有一個統(tǒng)一的把握，對跨平臺設(shè)計有了更全面的實踐。

所以今天我想要結(jié)合自身的工作經(jīng)歷，和大家聊聊這個話題.如何保證產(chǎn)品在跨平臺的設(shè)計中保持統(tǒng)一的體驗？

現(xiàn)在是一個移動化時代，大家都非常關(guān)注這一塊，已經(jīng)有了網(wǎng)站的產(chǎn)品，需要往移動端覆蓋，移動端又有各種不同的設(shè)備和系統(tǒng)，所以這個問題很多團隊都會遇到。簡書就是其中特別典型的從網(wǎng)站向app發(fā)展的這么一個例子。

那么已有了網(wǎng)站再做app和獨立做一個app有什么區(qū)別呢？

首先有一些便利的方面，從視覺層面來看，穩(wěn)定的網(wǎng)站產(chǎn)品已經(jīng)具備了特定的個性和氣質(zhì)，有了特定的用戶定位；

從邏輯層面來說，網(wǎng)站已經(jīng)摸索出穩(wěn)定的架構(gòu)和核心的功能并已被用戶所接受。

這都為為APP的前期工作省去了一些實驗性的摸索過程。APP要做的就是將它以另一種形式呈現(xiàn)出來。

這個呈現(xiàn)的設(shè)計過程也是有一些規(guī)律可循的，我今天挑了4點特別實用的規(guī)則來和大家分享。下面我們就一點一點來說。

第一點是提煉產(chǎn)品的品牌氣質(zhì)，也是我認為特別在跨平臺設(shè)計時很重要的第一步。

當(dāng)我們看一個人的時候，往往根據(jù)他的外表＋內(nèi)涵，就會在你第一次與他見面后有一個特有的認識，這就是人的氣質(zhì)。

產(chǎn)品也是一樣，外表就是產(chǎn)品的視覺呈現(xiàn)，也就是這個產(chǎn)品直觀地看起來怎么樣；內(nèi)涵就是產(chǎn)品的內(nèi)容呈現(xiàn)，這和產(chǎn)品吸引來的用戶，以及他們在上面發(fā)一些什么樣的內(nèi)容有關(guān)。在單身朋友的勵志雞湯里一定有這么一句，說，你成為多好的人，就會遇到多么好的人。產(chǎn)品也是一樣，呈現(xiàn)出什么樣的氣質(zhì)，就會吸引來什么樣的用戶。

以知乎和豆瓣為例子，他們都是我認為在產(chǎn)品氣質(zhì)上做得很好的。拋開運營來說，這兩個產(chǎn)品的視覺呈現(xiàn)都和自己的氣質(zhì)非常貼切，對強化用戶對產(chǎn)品個性的認知有很好的作用。

知乎：藍白配色是很有科技感，也會顯得比較專業(yè)，文字都排布得很密，實際上并不是閱讀最舒適的狀態(tài)，但能呈現(xiàn)一種干貨，快節(jié)奏的感覺，這一點在新聞類的app上會更加的明顯。

豆瓣：一直都用綠色來營造一種文藝，清新的氛圍，它的排版就不會像知乎這么密集了，有很多的間距留白，也是會有更小資愜意的感覺。

他們這種強烈的產(chǎn)品個性就會吸引到相應(yīng)風(fēng)格的用戶，從而共同營造出不同風(fēng)格的內(nèi)容氛圍。

再來看簡書，雖然簡書上線的時間并不久，在去年這時候網(wǎng)站也剛上線一年多，但已經(jīng)有了很強的個性和氣質(zhì)，大家對它的印象是優(yōu)雅／簡潔／沉浸式的閱讀寫作氛圍，也因此吸引到很多優(yōu)質(zhì)的作者和文字愛好者。

所以我們要做的就是在app上也體現(xiàn)出同樣的氣質(zhì)，去吸引和簡書氣味相投的手機用戶們。這時候我們需要將提煉出的產(chǎn)品氣質(zhì)轉(zhuǎn)化為具象化的視覺語言。

配色是貫穿app始終的元素，是給人的第一印象：

1. 簡書一種純凈的白可以塑造出和網(wǎng)站一樣簡潔純凈的氛圍，點綴一些品牌色加強辨識度；

2. 優(yōu)秀的字體能夠為一款文字類應(yīng)用增色不少，我們選擇了思源黑體，它很簡潔但仔細研究卻很精致，非常符合簡書的調(diào)性，也和適合長時間地閱讀；

3. 沉浸式的閱讀需要舒適的閱讀狀態(tài)，將行高基本控制在1.5-1.7倍之間，我們并不希望新聞那種緊湊的，高效閱讀的感覺，更多是慢下來沉進去地讀；

4. 留白的優(yōu)雅，排版上也盡量拉開內(nèi)容之間的距離，稀松一些，留一些白，會顯得比較優(yōu)雅。

在向app的設(shè)計過程中，我們也會對產(chǎn)品的調(diào)性進行一些優(yōu)化，就以icon為例子，這是過去的icon和現(xiàn)在的icon，我們用了純白底色降低品牌色的面積，我們重新設(shè)計了品牌字體，用了改良版的更優(yōu)雅的黑體替代之前的宋體，這都能使的簡書在原有的調(diào)性之上顯得更年輕和現(xiàn)代一點。

接下來的3點都跟“用戶習(xí)慣”有很大的關(guān)聯(lián)性，在分別分析他們之前我像先聊聊“用戶習(xí)慣”這個話題。

在我剛畢業(yè)的時候，是2013年，那年夏天iOS7正式發(fā)布了，雖然在此之前微軟的metro design已經(jīng)掀起了一陣扁平化的趨勢，android4.0也走起了扁平化的風(fēng)格，但我感覺還是從iOS7開始，這種設(shè)計風(fēng)格開始被大眾普遍接受和推崇起來。所以在我畢業(yè)那陣子，基本上每一次面試都會被問到這樣的問題：

你認為扁平化流行的原因是什么？

被問多了我也開始對這個問題進行了一些思考，我將這個問題拆解成以下兩個：

1.扁平化為什么能取代擬物化？

2.為什么metro design的扁平化叫好不叫座，而iOS7的扁平化卻能被普遍接受？

第一個問題很簡單，其實扁平化并不比擬物化更高明我覺得，擬物化的出現(xiàn)讓用戶很自然地從現(xiàn)實世界過渡到了屏幕上，當(dāng)時的用戶從來沒用過智能手機，沒有對屏幕產(chǎn)品的認識，他們用紙筆做記錄，用cd聽音樂，用鐘表看時間，而擬物化讓他們在情感上會感到熟悉和親切，在功能上能在現(xiàn)實中找到對應(yīng)，讓用戶將現(xiàn)實中的用戶習(xí)慣能夠在屏幕上延續(xù)。

現(xiàn)在扁平化之所以能夠取代擬物化的原因也很簡單，我們已經(jīng)習(xí)慣了屏幕產(chǎn)品了，我們對它的熟悉程度已經(jīng)等同于現(xiàn)實中的事物，擬物化所承擔(dān)的一些功能已經(jīng)不在必要，而扁平化的設(shè)計更現(xiàn)代，更能突出屏幕上比ui更有用的內(nèi)容，更符合現(xiàn)代人的需求。

為什么最早實踐扁平化ui的metro design并沒有流行起來呢？實際上設(shè)計界對于Metrodesign在界面視覺和交互設(shè)計的創(chuàng)新性上是有很多贊譽的。

但是我們想一想對普通用戶來說，在一臺新的winphone上，如果用戶沒有對metro

design進行學(xué)習(xí)過，他能用過去對手機的用戶習(xí)慣來順利使用這部手機嗎？不能，這是一個完全需要重新學(xué)習(xí)的系統(tǒng)，這對于大多數(shù)用戶來說是難以接受的。

所以Metrodesign對于普通用戶來說有點超前了，沒有一個過渡的過程，這可能也是我們在做一些大的改版時要注意的地方。

這樣我們也就能理解為什么iOS7能夠被用戶很快的接受了。我們可以對比以下它改變前后的樣子。可以看到iOS7雖然風(fēng)格上來了一次大變身，但是不管是布局，配色，使用方法，都保留了iOS6上的用戶習(xí)慣，iOS用戶們過去的習(xí)慣能夠在新設(shè)計上得以延續(xù)，它幾乎不需要什么學(xué)習(xí)成本。

通過這兩個問題我們可以發(fā)現(xiàn)，不管是從現(xiàn)實世界到屏幕產(chǎn)品，還是從扁平化到擬物化，巧妙地運用用戶過去的使用習(xí)慣，對新產(chǎn)品的普及都有著事半功倍的效果。

而我們接下來要講的這幾點，都是在不同的平臺間為了延續(xù)用戶習(xí)慣一些具體的做法。

首先是對齊產(chǎn)品的核心功能。我之前看到這樣一個例子，一個設(shè)計團隊找到他們的一些用戶做調(diào)查，發(fā)現(xiàn)他們會在iPad上安裝一個iPhone版的應(yīng)用，而不是iPad版本，你去問他為什么，明明就有一個更適合在iPad上體驗的版本啊。有的說“在APP store下載的時候其實看到iPad版的應(yīng)用，但覺得已經(jīng)習(xí)慣手機版，就直接下載了手機版在iPad上用”，有的說：“實在不習(xí)慣iPad版的操作，于是刪了裝了個手機版?！?/p>

所以你發(fā)現(xiàn)即便你保持了一種視覺風(fēng)格的統(tǒng)一，如果功能沒有對齊，用戶拿到這個應(yīng)用，找不到他們曾經(jīng)在另一個平臺所熟悉的模塊和功能，就會產(chǎn)生一種抗拒心理，保持核心功能的統(tǒng)一能讓他們很快的上手，很自然地接受和學(xué)習(xí)這個產(chǎn)品。

在做功能對齊的時候，我們往往會先對產(chǎn)品的功能模塊進行一個解構(gòu)，整理出哪些是產(chǎn)品的核心功能（必要的功能）。

以簡書為例，簡書的幾個大的模塊有發(fā)現(xiàn)文章／發(fā)現(xiàn)專題／我的關(guān)注／寫作／簡友動態(tài)／消息提醒／個人中心，網(wǎng)頁有很大的空間足以放下很多很多的功能，但是在app上，空間是有限的，同時還要把更多的區(qū)域留給內(nèi)容的呈現(xiàn)，這就需要對這些模塊進行一些重組。

于是我們把發(fā)現(xiàn)文章和發(fā)現(xiàn)專題放在一起，都是用戶在不知道看什么的時候可以隨便逛逛的模塊，很適合手機用戶在零碎時間進行一些目的性不強的瀏覽；

我的關(guān)注單獨成為一塊，是一種目的性較強的瀏覽；

消息提醒和簡友動態(tài)我們整合在了一起，都是有關(guān)于我和朋友的一些信息，可以在一起查看處理；

個人中心則可以和設(shè)置等等零碎的功能組合起來，是對個人賬號的一個管理。

在最初的時候我們并不認為“寫作”是移動端的核心功能，我們覺得這個用戶場景是極少數(shù)的，但app上線后，優(yōu)質(zhì)的作品引起了很多用戶的創(chuàng)作欲望，我們收到了很多很多的反饋希望我們能將寫作功能做到app上來，這是出乎意料的。所以在現(xiàn)在的版本中可以看到，我們已經(jīng)加上了寫作模塊，我們也發(fā)現(xiàn)有越來越多的文章是由app發(fā)出的，甚至一些文章還很長。

傾聽用戶的聲音，你也會對自己的產(chǎn)品有更好的認識。

當(dāng)然并不是對齊了核心功能就完工了，現(xiàn)在的用戶已經(jīng)遠遠不滿足于可以使用一款app。

相機應(yīng)用的核心功能是拍照，但現(xiàn)在如果相機有各種個樣的濾鏡／美顏功能，甚至有些app還能給人化妝；聊天應(yīng)用的核心功能是與聯(lián)系人及時交流，但現(xiàn)在聊天應(yīng)用有各種貼紙，表情，甚至語音變聲功能。

簡書的核心功能是閱讀，寫作，社交，而結(jié)合移動端的特性，我們發(fā)現(xiàn)比如“白天／黑夜”模式的切換，“離線功能”等，雖然并不必要，但對用戶的活躍度和留存都有很大影響。

所以除了對齊核心功能，關(guān)注用戶的一些高級需求也至關(guān)重要。

在完成了產(chǎn)品的整體風(fēng)格和功能構(gòu)架完成后，我們可以著眼于一些細節(jié)的層面。比如統(tǒng)一你的產(chǎn)品中，色彩和圖形的意義。

就像前面講的iOS6到iOS7的轉(zhuǎn)換，iOS在色彩和圖形上有著高度一致性，所以用戶升級了系統(tǒng)，使用起來是毫無障礙的。這是一個很好的范例。在界面設(shè)計中這樣的細節(jié)對我們是有很大啟發(fā)的。

在簡書的網(wǎng)站上，我們有一套標(biāo)準(zhǔn)的配色：我們用綠色及品牌色代表可點擊的按鈕，用橙色代表與金錢有關(guān)的操作，用藍色代表鏈接，用戶對這些顏色的含義就進行了學(xué)習(xí)和習(xí)慣，在app上看到相應(yīng)的顏色時就會把這種已養(yǎng)成的習(xí)慣帶進來。

在app上保持色彩含義的一致性，能夠讓用戶學(xué)習(xí)使用app的時候事倍功半。我們想像一下，如果交換一下這些顏色，比如把橙色放在關(guān)注這里，把紅色放在打賞這里，從獨立的一個app的設(shè)計角度看沒什么問題，但對于那些已經(jīng)使用過簡書網(wǎng)站產(chǎn)品的用戶來說，就非常容易產(chǎn)生困惑的感覺。

同樣保持圖形的統(tǒng)一也有相同的意義，尤其是一些沒有通用含義的圖形（有些圖形已經(jīng)有了通用的含義比如放大鏡代表搜索，齒輪代表設(shè)置，但有些圖形并沒有）。

在簡書中，我們有一個小云朵按鈕，它本身也不具有通用的／一看就懂的含義，簡書賦予了他“投稿”的含義，那么在長期的網(wǎng)站的使用中，用戶看到云朵的直觀反應(yīng)就是“投稿”，當(dāng)他在使用手機版的簡書時，他自然也會把這個含義帶進來。如果你沒有保持圖形的統(tǒng)一，也會讓用戶與已有的知識和習(xí)慣產(chǎn)生矛盾和困惑。

在圖形設(shè)計上，除了含義的統(tǒng)一，還有一個值得注意的問題，就是還要考慮到與系統(tǒng)的統(tǒng)一。

我覺得網(wǎng)頁是具有更大包容性的，因為用戶很少認為網(wǎng)頁是我電腦的一部分，所以網(wǎng)頁各有不同的設(shè)計風(fēng)格，這也不會讓上網(wǎng)的人感到奇怪。

而app不一樣，因為我通過下載安裝這些動作，讓我們的意識里就認為，app成為了我們手機的一部分，所以與系統(tǒng)的統(tǒng)一能夠讓用戶在連續(xù)使用手機，在手機中不停跳轉(zhuǎn)的過程中，雖然是不同的產(chǎn)品，依然能感受到一種更和諧的感覺，如果不維持統(tǒng)一，則容易產(chǎn)生一種跳出的，打斷的感覺。這種感受可能每個在iPhone上裝著錘子便簽的用戶都有過，但你在錘子手機上使用它卻會覺得和諧無比。

最后一點我要說的是內(nèi)容呈現(xiàn)的形式感，形式感指由形狀，色彩，結(jié)構(gòu)關(guān)系組成的形式特征。我覺得這是，基于已有的網(wǎng)站做app時的一個值得利用的優(yōu)勢。

界面的主體部分是由大量的信息構(gòu)成的，尤其像簡書這樣的文字類產(chǎn)品。

我們在做交互稿的時候往往會畫出這樣的圖，實際上這也是我們希望用戶理解的界面，但用戶從實際的界面轉(zhuǎn)化為這樣的圖，有一些信息是可以瞬間理解的，比如頭像，比如時間。

而有一些信息，比如隨機的用戶名，比如一些數(shù)據(jù)，一些不知道是什么的名字，可能需要一些時間對文字進行解讀，甚至是經(jīng)過幾次點擊跳轉(zhuǎn)才能理解。

所以如果我們希望通過設(shè)計讓界面自己會說明，我們可能會加上一些樣式的區(qū)分，比如我把標(biāo)題加粗加大，把輔助信息變淺色變小一些，但這只能區(qū)分主次，很難具體說明每一部分的意義；那我還可以給一些信息加上可識別的圖標(biāo)，或者加上一些沒有實際用途但可以提示接下來的信息的文案，比如微博的這個“來自”，或是其他一些說明性文字。

而對于已有網(wǎng)站產(chǎn)品的APP來說，還有一條不需要增加任何附加的元素，就可以讓老用戶馬上看懂你的產(chǎn)品的捷徑，就是保持不同平臺內(nèi)容的形式感。它并沒有給我們一份兒產(chǎn)品說明書，也沒有給出一些引導(dǎo)性的圖標(biāo)或文案，我們依然可以秒懂他們每一個元素的含義。因為對于使用過網(wǎng)站的用戶來說，它的形式感已經(jīng)成為了一份說明書。

在簡書的幾個元素比較復(fù)雜的列表界面比如文章列表頁面的設(shè)計過程中，內(nèi)容的形式感都被視為很重要的原則。甚至是一些小元素的順序都最好做到統(tǒng)一，讓用戶能夠完全把對網(wǎng)站內(nèi)容結(jié)構(gòu)的理解運用到移動端來，抑或是反過來。

我們再回顧一下今天分享的這幾點，總的來說就是我們要在大大小小的方面，在不同的平臺構(gòu)建能夠延續(xù)的產(chǎn)品氣質(zhì)和用戶習(xí)慣，統(tǒng)一的體驗一定是在產(chǎn)品覆蓋多平臺時非常重要的一環(huán)，希望今天的分享能夠帶給大家一些小小的啟發(fā)，謝謝！

文 | SmallTalk_Areslay

**文章版權(quán)由SmallTalk及演講者共同擁有，如需轉(zhuǎn)載請務(wù)必聯(lián)系我們**