編者按：什么是內(nèi)容化設(shè)計(jì)？設(shè)計(jì)師為什么要關(guān)注內(nèi)容？如何通過(guò)設(shè)計(jì)的手段提高內(nèi)容體驗(yàn)？阿里設(shè)計(jì)師用一個(gè)手淘的實(shí)戰(zhàn)案例，幫你掌握內(nèi)容化設(shè)計(jì)的精髓！

前言

如果說(shuō)好的產(chǎn)品是運(yùn)營(yíng)出來(lái)的，那么內(nèi)容作為用戶體驗(yàn)中的重要部分不容忽視。然而我們?cè)谠O(shè)計(jì)中經(jīng)常缺乏內(nèi)容體驗(yàn)的意識(shí)。借著第十三屆用戶體驗(yàn)大會(huì)User Friendly 2016的分享，手淘的設(shè)計(jì)師和業(yè)內(nèi)的同學(xué)們一起做workshop，探索如何進(jìn)行行之有效的內(nèi)容策略腦爆，以及思考內(nèi)容產(chǎn)生、組織到流轉(zhuǎn)分發(fā)的設(shè)計(jì)策略和用戶行為數(shù)據(jù)驗(yàn)證。希望能讓大家對(duì)無(wú)線端導(dǎo)購(gòu)的內(nèi)容化設(shè)計(jì)有所啟發(fā)。以下是對(duì)大會(huì)相關(guān)內(nèi)容的整理。

在探討內(nèi)容化設(shè)計(jì)是什么之前，或許有人奇怪：設(shè)計(jì)為什么要關(guān)注內(nèi)容呢？

表單是網(wǎng)頁(yè)設(shè)計(jì)中最常見(jiàn)的元素，幾乎每個(gè)網(wǎng)站都會(huì)包含一種甚至幾種不同類型的表單。從簡(jiǎn)單的電子郵件搜集和訂閱，到注冊(cè)、下單、購(gòu)買，表單一直伴隨著網(wǎng)頁(yè)而存在。所以，設(shè)計(jì)出好看易用的表單是非常有必要的。

也正是因?yàn)楸韱我恢卑殡S這網(wǎng)頁(yè)存在，在過(guò)去的20多年間，表單的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)也一直在逐步發(fā)展。雖然許多網(wǎng)頁(yè)中的表單涵蓋了大量的信息也數(shù)量可觀的欄目，但是絕大多數(shù)的優(yōu)秀設(shè)計(jì)和最佳實(shí)踐都是以簡(jiǎn)單而著稱。好的表單一目了然，用戶不需要輸入太多信息，條目標(biāo)識(shí)明確，格式清晰，讓用戶盡可能一次就能正確填寫。

授人以魚不如授人以漁，我寫文章的目的并不是讓大家完全按照我的方法來(lái)做，而是希望我們都能提高自己的思維方式，因?yàn)楝F(xiàn)在網(wǎng)上的方法與經(jīng)驗(yàn)實(shí)在太多（又不能確定都是正確的），你的大腦永遠(yuǎn)無(wú)法承載整個(gè)互聯(lián)網(wǎng)的信息容量，所以與其看那多內(nèi)容，不如從根源上提高自己拆解、分析、總結(jié)的能力，這樣無(wú)論以后你遇到什么樣的問(wèn)題，都能夠迎刃而解。

時(shí)下一種流行的設(shè)計(jì)方式是在頁(yè)面頂部使用配有簡(jiǎn)潔文字的大幅圖片或者視頻，以此吸引用戶進(jìn)入網(wǎng)站。這種設(shè)計(jì)方式最頭疼的就是如何為這些文字選擇合適的字體。

從樣式繁多的字體庫(kù)中找到一個(gè)合適的字體，往往會(huì)讓設(shè)計(jì)師感到舉步維艱。但是我們可以使用一些小技巧，就能找到我們需要的字體。讓我們通過(guò)下面幾個(gè)精彩的案列來(lái)分享這5條建議。

什么是特排字體（Display Type）

左手素材，右手靈感，今天推薦的這6個(gè)網(wǎng)站都是@阿隨向前沖 多年壓箱底的好收藏，從PSD 到展示樣機(jī)、圖標(biāo)、字體、紋理等等都是最經(jīng)典的，趕緊來(lái)收藏。

1. 綜合素材庫(kù)：Graphberry

先分享幾家綜合素材庫(kù)，包括PSD 源文件模板、Mockup展示稿樣機(jī)、UIKITS、圖標(biāo)包、甚至博客模板等。這個(gè)站點(diǎn)最大的特點(diǎn)是：

免費(fèi)，允許個(gè)人和商業(yè)使用！送給站長(zhǎng)一個(gè)大寫的贊！

設(shè)計(jì)傳統(tǒng)的2D界面尚且需要你掌握大量專業(yè)知識(shí)并付出辛勤的汗水，要打造全新的體驗(yàn)獨(dú)特的3D世界又將意味著什么？Mike Alger和Andy Stone正是致力于研究這一問(wèn)題的兩位走在前沿的VR設(shè)計(jì)師。

Mike Alger目前就職于Google，過(guò)去幾年里一直在VR領(lǐng)域進(jìn)行探索，他所制作的幾部VR設(shè)計(jì)理念講解視頻堪稱業(yè)界經(jīng)典。Andy Stone是Emerson Stone設(shè)計(jì)公司的合作伙伴，同時(shí)也是Medium上的VR話題作者之一。

實(shí)體與空間的迷宮

關(guān)于VR，首先需要定義清楚的就是“虛擬現(xiàn)實(shí)”這個(gè)概念本身。這個(gè)名字不錯(cuò)，也存在了有一段時(shí)間了，但如今我們知道這個(gè)概念有著更廣泛和深刻的所指，沉浸式體驗(yàn)的意義更在于對(duì)我們所生活的這個(gè)現(xiàn)實(shí)世界進(jìn)行擴(kuò)展。

VR不僅代表著一種全新的人機(jī)交互范式，它更需要我們對(duì)物理及空間相關(guān)的知識(shí)有著深層的理解，包括音效設(shè)計(jì)、建筑設(shè)計(jì)、光影與物理效應(yīng)等等方面。對(duì)于社交類產(chǎn)品來(lái)說(shuō)，這些要素很可能重塑個(gè)人空間、個(gè)人形象的展現(xiàn)形式，以及人與人之間的互動(dòng)模式。

在為VR進(jìn)行設(shè)計(jì)之前，我們需要充分考慮清楚自己的設(shè)計(jì)傾向及其有可能對(duì)用戶造成的影響。這是一項(xiàng)長(zhǎng)期工作，隨著我們對(duì)全新社交范式的理解的不斷深入，相關(guān)指導(dǎo)原則的制定及道德層面的討論也會(huì)持續(xù)進(jìn)行。

@乘與九設(shè)計(jì) ：我們正處在一場(chǎng)注意力爭(zhēng)奪戰(zhàn)中。如何利用版式設(shè)計(jì)抓住用戶的注意力呢？

商業(yè)環(huán)境中講究一個(gè)「快」字。我們閱讀的時(shí)候長(zhǎng)期接受過(guò)載的信息，很難再集中精神，那么，一個(gè)內(nèi)容清晰的閱讀體驗(yàn)就非常重要。

所以，以下16張版式小Tips，或許能解決排版這個(gè)問(wèn)題。

第一步，思考?。?！別急著打開PS

@黃紅藝Designer ：還沒(méi)有跨入交互設(shè)計(jì)的門檻時(shí)，總是想明確的知道一些客觀、確定的事情。比如，想知道交互設(shè)計(jì)的具體流程是什么，交互稿到底長(zhǎng)什么樣子，Axure 中的Case 用例怎么用以及加載動(dòng)畫怎么做，總希望有人能給一個(gè)交互設(shè)計(jì)的原型案例作為模板。

先說(shuō)下本文的思路，我會(huì)筆記一些服務(wù)設(shè)計(jì)的知識(shí)重點(diǎn)，并做一些分析和思考。

本文并不是區(qū)分服務(wù)設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)，我是想從用戶體驗(yàn)設(shè)計(jì)的角度來(lái)學(xué)習(xí)服務(wù)設(shè)計(jì)的思考方式和閃光點(diǎn)。

本文通過(guò)分析日式網(wǎng)站的色彩、圖片、文字和元素運(yùn)用，幫你充分吸收日式網(wǎng)站的精華，讓中文網(wǎng)站的設(shè)計(jì)也變得高大上！

色彩

當(dāng)我們看到小清新的網(wǎng)站的時(shí)候首先一定會(huì)想到日式網(wǎng)站。

Sarara 是一家純凈水的網(wǎng)站，所以它的網(wǎng)站主題色系為藍(lán)色系，主要由高飽藍(lán)色到低飽藍(lán)色的過(guò)度，加上明暗對(duì)比的強(qiáng)烈，直接了當(dāng)?shù)耐怀鲂麄鞯漠a(chǎn)品。