網(wǎng)站能承載多種多樣的內(nèi)容，但無論是哪種內(nèi)容，通常都會遵循一定的信息架構(gòu)。在這其中，故事是很特別的一種類型。講故事，往往能以更敘事、更情感化的方式，將內(nèi)容傳遞給用戶。

一個好的故事，往往始于筆端，但是最終呈現(xiàn)，還是要依靠精巧的設(shè)計。那么設(shè)計是如何講好故事的呢？今天的文章，為你分享一下創(chuàng)造故事的7個維度。

1、圖片

首先，想要講好故事，要通過設(shè)計在視覺上吸引用戶。這一切要從干凈清晰的視覺設(shè)計開始。壯美的圖片，有趣的插畫，驚艷的視頻，都會抓住用戶的注意力，并給予用戶第一印象。

在視覺上足夠突出的圖片，搭配以文案，一切開始擁有了畫面感，而故事因此而誕生。從照片到色彩，從文字到細(xì)節(jié)，故事所傳達(dá)出來的信息和氣質(zhì)，和整個視覺設(shè)計應(yīng)該是保持一致的，而好的故事，能夠帶著用戶一路走過來。

編者按：說起usTwo 你可能沒聽過，但《紀(jì)念碑谷》你肯定玩過。這個全球頂尖的設(shè)計工作室還做過哪些酷酷的產(chǎn)品？他們是如何幫助設(shè)計師和客戶合作的？想加入它們有哪些要求？這期直接讓usTwo 的設(shè)計師為大家揭秘。

我們請到了設(shè)計工作室 usTwo 的設(shè)計師 Avalon Hu。她曾先后就讀于臺灣大學(xué)生物產(chǎn)業(yè)機電工程系和密歇根大學(xué)人機交互專業(yè)，曾在 R/GA 和湯森路透任職。本期我們聊了聊她如何從迪士尼秀場后臺開始，轉(zhuǎn)專業(yè)成為用戶體驗設(shè)計師；設(shè)計 Agency 的工作流程；usTwo 獨特的企業(yè)文化和公司結(jié)構(gòu)；最后她也與想加入設(shè)計 agency 的同學(xué)分享了自己的建議。

設(shè)計風(fēng)格是一種很虛的東西，對于大部分的 UI 設(shè)計師來說，都是如此。

相信很多人都是在一家小型的互聯(lián)網(wǎng)公司做設(shè)計，估計還是公司唯一的設(shè)計師，同時對設(shè)計風(fēng)格又拿捏不定，總感覺是跟著產(chǎn)品經(jīng)理或老板的思路去做設(shè)計。比如老板的要求是“大氣”，誰 TM 知道這“大氣”指的什么鬼？

即使花了不少時間去研究其他公司的產(chǎn)品，依然做不出領(lǐng)導(dǎo)滿意的視覺稿，最后還被各個崗位的同事指點著去修改你一把屎一把尿喂大的稿子。

我上面也說了，其實這種事情（講述設(shè)計風(fēng)格）對于視覺設(shè)計師而言是一種很常見的現(xiàn)象。我身邊也同樣有很多設(shè)計師出現(xiàn)這個問題，不知道如何向領(lǐng)導(dǎo)或客戶講述自己的設(shè)計風(fēng)格。

說個現(xiàn)象，仔細(xì)想想自己是不是這樣的：我們在做視覺評審的時候，設(shè)計師講述的常常是文字對齊、線條、高斯模糊、圖片大小等視覺表現(xiàn)，有時候甚至沉醉于 icon 的角度及尺寸的問題。面對于產(chǎn)品經(jīng)理與程序員的質(zhì)疑只能說：我覺得這樣更好看、這樣比較適合我們產(chǎn)品的風(fēng)格…之類的話。要知道，這些理由在如今這個以顯性數(shù)字指標(biāo)為衡量標(biāo)準(zhǔn)的互聯(lián)網(wǎng)時代已顯得蒼白無力。

實話實話，想要把設(shè)計風(fēng)格講清楚，的確不是一件容易的事。但絕對要避免從感性的角度來闡述事實的這種習(xí)慣，畢竟現(xiàn)在的移動產(chǎn)品從視覺表現(xiàn)力方面正在逐步降低要求，這種環(huán)境的變化也是要求視覺設(shè)計師應(yīng)該主動去加強設(shè)計思路的原因。

為什么要用這個顏色，為什么要用線條、模糊、留白、卡片、陰影…說這么多干嘛？別人能懂？即使聽懂了，他也會從他的角度來告訴你：那我覺得這個陰影不要會更好。你怎么回復(fù)？

動效是如今UI設(shè)計中的重要組成部分，也是目前最熱門的設(shè)計趨勢之一。在之前的《在現(xiàn)代網(wǎng)頁設(shè)計中，動效有哪些常見的用法》這篇文章中，我們探討了動效對于交互和用戶的重要意義，動效在不同的環(huán)節(jié)發(fā)揮的作用越越來越大。而今天我們要聊的是光標(biāo)懸停，這也是近年動效設(shè)計的熱點之一。

正是由于Material Design 和蘋果所引領(lǐng)的動效設(shè)計風(fēng)潮，許多曾經(jīng)有過的設(shè)計技巧和元素正在逐步回歸，而懸停就是其中之一。但是相比于曾經(jīng)那些閃爍彈跳的，現(xiàn)如今的光標(biāo)懸停來的更加微妙，更加強調(diào)功能性和體驗。

和其他動效相似，光標(biāo)懸停讓交互的引導(dǎo)性更強，有的還帶有預(yù)覽的作用，它的使用范圍非常廣，大到全屏，小到提示和導(dǎo)航元素，不一而足。

接下來，我們通過實戰(zhàn)案例看看，光標(biāo)懸停目前有哪些創(chuàng)新的玩法。

首頁動效

模塊大家應(yīng)該都不陌生，任何一個完整的界面，都會有多個功能模塊，而每個模塊內(nèi)有相應(yīng)的組件，每個組件中又有相應(yīng)的元素，其中任何一點的變化，都會使用戶對產(chǎn)品的認(rèn)知發(fā)生改變。

編者按：什么是模塊化設(shè)計？它有哪些優(yōu)勢？該如何運用模塊化設(shè)計？本文騰訊CDC 的高手帶你一窺模塊化設(shè)計的奧妙。

在看組件和元素之前，我們先了解在他們之上的一個概念

模塊

模塊大家應(yīng)該都不陌生，任何一個完整的界面，都會有多個功能模塊，而每個模塊內(nèi)有相應(yīng)的組件，每個組件中又有相應(yīng)的元素，其中任何一點的變化，都會使用戶對產(chǎn)品的認(rèn)知發(fā)生改變。

什么是設(shè)計規(guī)范，設(shè)計規(guī)范到底有什么用？如何看懂設(shè)計規(guī)范？今天@Jaret_杰瑞特 結(jié)合實際工作中的體驗，幫你快速上手設(shè)計規(guī)范。

當(dāng)我們聊設(shè)計的時候，可讀性是我們最常提及的話題。良好的設(shè)計應(yīng)該都是可讀的設(shè)計，如果信息都無法正常而清晰的傳達(dá)，那么設(shè)計就失去了意義。

設(shè)計的可讀性和排版設(shè)計息息相關(guān)，與此同時，對比度的控制也是其中的核心。想要提升內(nèi)容的可讀性，讓內(nèi)容以更加順暢、更符合邏輯的形式呈現(xiàn)在用戶面前，你需要借助對比度來表達(dá)，讓用戶真正順暢的理解。

色彩對比

前景的文字需要和背景有著明顯的對比，它需要能夠吸引用戶的眼球。

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

前言

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

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

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

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