做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

1.1 保持過渡的流暢性：一致性與內(nèi)容感

通過啟動(dòng)頁的吸引，將用戶帶入產(chǎn)品的品牌與情感的世界。基于IOS平臺(tái)應(yīng)用的啟動(dòng)特質(zhì)（放大），Twitter的啟動(dòng)頁與Icon采用了一致的 元素與構(gòu)圖（信鴿為物，湖藍(lán)背景為底），確保Icon至啟動(dòng)頁的平滑過渡、加深了用戶對(duì)Twitter的品牌印象，同時(shí)呈現(xiàn)“信鴿翱翔藍(lán)天”的意向使得產(chǎn) 品的固有等待（產(chǎn)品啟動(dòng)需要一個(gè)過程）不易為用戶所察覺(啟動(dòng)頁呈現(xiàn)的意向還沒遐想完，產(chǎn)品已經(jīng)順利過渡到首頁了)。接著“信鴿”以同樣的效果完成主頁內(nèi) 容的過渡。

一個(gè)組件做任何事情之前是怎樣的？可能這是用戶首次看到它?；蛘咚€沒被激活。根本上說就是這個(gè)組件存在，但還沒有啟動(dòng)。