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

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

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

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

1.什么是故事（WHAT）

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

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

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

古埃及金字塔中的。圖片來(lái)自 forum.china.com.cn

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

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

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

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

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

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

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

Love Message

Niek Dekker

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

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

一個(gè)組件做任何事情之前是怎樣的？可能這是用戶(hù)首次看到它。或者它還沒(méi)被激活。根本上說(shuō)就是這個(gè)組件存在，但還沒(méi)有啟動(dòng)。

過(guò)去一段時(shí)間，有無(wú)數(shù)關(guān)于漢堡菜單的文章，大部分設(shè)計(jì)師都在抵制使用他，然而這件事的本質(zhì)并非是圖標(biāo)的錯(cuò)，而是將導(dǎo)航隱藏在圖標(biāo)之下的問(wèn)題。

這種設(shè)計(jì)方案對(duì)于設(shè)計(jì)師來(lái)說(shuō)特別省事，根本不用擔(dān)心有限的屏幕大小，只需要將你所有的菜單項(xiàng)排個(gè)序然后放進(jìn)這個(gè)可滾動(dòng)的浮層中，藏在漢堡菜單里。

然而實(shí)踐證明，使用可視化的菜單項(xiàng)會(huì)提高用戶(hù)的參與度、滿(mǎn)意度甚至是商業(yè)利益。這也是為什么現(xiàn)在主流的應(yīng)用都從漢堡菜單改成底部導(dǎo)航的可見(jiàn)菜單設(shè)計(jì)。

本文譯自蘋(píng)果官方人機(jī)界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由騰訊ISUX設(shè)計(jì)師翻譯整理，非發(fā)文者一人之作。譯文首發(fā)于ISUX博客，如在閱讀過(guò)程中發(fā)現(xiàn)錯(cuò)誤與疏漏之處，歡迎不吝指出。

屏幕尺寸：指屏幕的對(duì)角線(xiàn)的長(zhǎng)度，單位是英寸，1英寸=2.54厘米。常見(jiàn)的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。