@劉津legene ：最近經(jīng)常被問到“設(shè)計(jì)如何賦予產(chǎn)品性格”，“如何通過分析確定哪種視覺風(fēng)格更合適”等問題。遇到這些問題我很高興，因?yàn)檫@說明越來越多的人開始重視更高層次的設(shè)計(jì)問題，而不是局限于設(shè)計(jì)技巧、審美等表層問題。

一年一度的春運(yùn)搶票大戰(zhàn)又開始啦！前段時(shí)間一個(gè)12306手機(jī)號(hào)碼雙向核驗(yàn)的消息刷爆了小伙伴們的朋友圈，12306 APP 憑借此舉不花一分錢就沖上了 App Store 免費(fèi)榜首位。

其實(shí)我已經(jīng)很久沒用12306官方 APP 了，光看圖標(biāo)那騷氣的紅藍(lán)配色我已經(jīng)醉了，打開12306 APP，我的內(nèi)心是奔潰的，感覺整個(gè)人都不好了，依舊是那么的…………… 嗶 ..

不說了，發(fā)幾個(gè)截圖你們感受一下：

做APP的數(shù)據(jù)圖表設(shè)計(jì)之前，你考慮過移動(dòng)端屏幕大小與屬性嗎？考慮過可視化數(shù)據(jù)圖表，提升APP氣質(zhì)嗎？考慮過在APP和WEB端，數(shù)據(jù)圖表的展示有何不同嗎？也許你都考慮過，但作為一篇科普文，還是要從最基礎(chǔ)的說起。

以數(shù)據(jù)圖表為主的APP有哪些？

前期，yoyo通過App Store、MobilePattern、Dribbble瘋狂搜圖，積累了以下豐富的案例。

剛開始接觸移動(dòng)頁面重構(gòu)，是不是很迷惑應(yīng)該按照多大的尺寸制作？320、640還是720？按照640的設(shè)計(jì)稿重構(gòu)完頁面，是不是還需要寫其他尺寸來適配不同的屏幕大小？——這源于對(duì)viewport和px的不了解。

已經(jīng)重構(gòu)了好多移動(dòng)頁面，但是對(duì)為什么要按照640的大小來設(shè)計(jì)頁面，不清楚答案。給元素賦予固定的像素值，但是奇怪的是在不同的手機(jī)里看起來都差不多大小，不需要另外去適配，真是太爽了。為什么？不知道耶。——這源于對(duì)viewport和px的不了解。

具體的我們可以看下這個(gè)APP開發(fā)標(biāo)準(zhǔn)流程信息圖：

不論是在手機(jī)屏幕上，瀏覽器上，還是智能手表的屏幕上，設(shè)計(jì)都是促使產(chǎn)品和用戶互動(dòng)的最重要的驅(qū)動(dòng)力之一。從扁平化設(shè)計(jì)到 Material Design ，從小屏幕到大屏幕，我分析了一下設(shè)計(jì)的趨勢(shì)演變規(guī)律，并同你分享一下我的一些拙見。到底有哪些趨勢(shì)？這些趨勢(shì)的存在，對(duì)于用戶有何裨益？它們將會(huì)創(chuàng)建怎樣的未來？這就是今天的文章所要探討的內(nèi)容。

作為近年設(shè)計(jì)領(lǐng)域中最具有代表性的設(shè)計(jì)風(fēng)格，我們不妨從扁平風(fēng)和 Material Design 入手，聊聊它們是怎樣出現(xiàn)、如何成為現(xiàn)如今的設(shè)計(jì)趨勢(shì)。

 故事也許是人類最早的敘事方法。大多數(shù)人在童年時(shí)，故事用來引導(dǎo)他們的行為，了解歷史文化和培養(yǎng)社會(huì)認(rèn)同感。”－Form Wikipedia

1.什么是故事（WHAT）

在討論如何打造故事感體驗(yàn)之前，我們先聊聊什么是故事。

故事（Storytelling）是通過文字，聲音或圖像來傳播的事件。它在各種文化扮演著娛樂，教育，傳播文化和價(jià)值觀的作用。講故事或許是人類最早的敘事方法。大多數(shù)人在童年時(shí)，成人都會(huì)用故事來引導(dǎo)他們的行為，傳授歷史文化和培養(yǎng)社會(huì)認(rèn)同感。注1

講故事是一種解釋和分享的方法。這在我們生活中非常普遍。它們可以彌合文化，語言和年齡之間的分歧。例如在教育中，可以通過故事讓人更加容易理解。又如遠(yuǎn)古社會(huì)，人類使用紀(jì)錄和傳播故事，這些壁畫即使過了上千年，依舊能理解其中部分含義。

古埃及金字塔中的。圖片來自 forum.china.com.cn

甚至在工作中，通過講故事的形式，也可以讓信息在人與人之間更加的傳輸。比如說在討論用戶需求的會(huì)議上，通過講故事的手法，產(chǎn)品設(shè)計(jì)可以將用戶需求轉(zhuǎn)化為一個(gè)個(gè)場(chǎng)景故事，便可以準(zhǔn)確的讓別人理解。 人類從古至今一直深受故事影響。從圣經(jīng)到現(xiàn)代小說無不是故事。因此當(dāng)人的大腦在聽到故事時(shí)，會(huì)產(chǎn)生特別的反應(yīng)。

在論文《A Theory of Narrative Empathy》中描述到，當(dāng)人類聽到故事時(shí)，大腦中的”鏡像神經(jīng)細(xì)胞“（一種神經(jīng)細(xì)胞，使人們學(xué)會(huì)從簡(jiǎn)單模仿到復(fù)雜模仿 －Wikipedia）會(huì)異常活躍，促進(jìn)人類引發(fā)共鳴并理解別人的行為，所以故事很容易讓人類沉浸其中。注2

到底問題出現(xiàn)在哪呢？這其實(shí)是由于我們設(shè)計(jì)師對(duì)App技術(shù)框架的知識(shí)匱乏所導(dǎo)致的，雖然我們不必做到會(huì)寫代碼，但掌握必要的App技術(shù)框架原理，能更有效地幫助我們預(yù)判哪些方案可行和實(shí)現(xiàn)效果較好，來讓設(shè)計(jì)方案更接地氣，讓我們一起來了解一下App技術(shù)框架都有哪些。

一、App技術(shù)框架的類型

僅靠敲代碼就搞定背景的網(wǎng)站！得益于CSS技術(shù)的進(jìn)步，現(xiàn)在我們可以敲代碼就實(shí)現(xiàn)超贊的漸變背景，效果絲毫不輸Photoshop，且不受屏幕大小限制，絕對(duì)是未來的熱門趨勢(shì)之一，搶先學(xué)起來 >>>

漸變的配色怎么辦？給你一個(gè)在線工具！《新年配色禮包！五款幫你在線搞定配色的WEB APP》

新年剛過，給自己許個(gè)愿吧：《新年專屬教程！手把手教你繪制簡(jiǎn)單好學(xué)的新年簽》

Love Message

Niek Dekker