揭開(kāi)iOS7扁平化的外衣，深入探索蘋(píng)果的新式設(shè)計(jì)語(yǔ)言，一起來(lái)猜想一下新的設(shè)計(jì)風(fēng)格是如何在iWatch iTv iCar上實(shí)現(xiàn)。

當(dāng)談到Jony Ive，我們就不得不談到他在iOS7上的大改造，普遍看法是，這種改變僅僅是外觀上的改變，換湯不換藥。

iOS7的神秘面紗于2013年6月揭開(kāi)，設(shè)計(jì)靈感來(lái)自德國(guó)已故傳奇設(shè)計(jì)師Otl Aicher。
Jony Ive在iOS上決定采用扁平化風(fēng)格，這就意味著以下幾點(diǎn)風(fēng)格的轉(zhuǎn)變：

1、用色愈發(fā)大膽、鮮艷；
2、界面會(huì)擁有更多的留白空間，讓元素更好的呼吸；
3、字體運(yùn)用會(huì)更加優(yōu)雅靈活；
4、即將使用大量的幾何形狀。

這就是Jony Ive摒棄擬物設(shè)計(jì)的原因。iOS7的推出，也可以看成是Jony Ive對(duì)擬物設(shè)計(jì)的宣戰(zhàn)。

iOS7的扁平化設(shè)計(jì)非常”萬(wàn)金油”，不但適應(yīng)了今天的iPhone以及iPad設(shè)備，也能夠應(yīng)用于未來(lái)的iWatch,iTV,iCar等設(shè)備。

D.A：我們都知道不管網(wǎng)頁(yè)還是移動(dòng)應(yīng)用，響應(yīng)速度都是最重要的體驗(yàn)指標(biāo)之一，并且移動(dòng)應(yīng)用的網(wǎng)絡(luò)環(huán)境不穩(wěn)定，速度的體驗(yàn)顯得尤為重要。其實(shí)速度優(yōu)化不僅是程序員的事，設(shè)計(jì)，也能夠讓App變得更快。

1.后臺(tái)執(zhí)行

這是一條很通用，也容易理解的方法。用戶(hù)不會(huì)愿意盯著進(jìn)度條傻傻地等待，除了”取消”沒(méi)有其他選擇。在系統(tǒng)處理一些網(wǎng)絡(luò)任務(wù)的時(shí)候，完全可以允許用戶(hù)做一些其他的事情。

各大平臺(tái)的發(fā)微博，都采用了后臺(tái)執(zhí)行。云閱讀的離線下載也采用后臺(tái)執(zhí)行。

而微博的看長(zhǎng)圖(或視頻)，是個(gè)反例。網(wǎng)絡(luò)不給力時(shí)，要么等待1分鐘讓圖加載完，要不就只好放棄看圖。為什么不能讓圖加載的同時(shí)，用戶(hù)可以看其他微博呢？

2.在載入前顯示內(nèi)容

客戶(hù)端與web的一個(gè)不同點(diǎn)，客戶(hù)端的顯示內(nèi)容包括本地?cái)?shù)據(jù)和網(wǎng)絡(luò)數(shù)據(jù)兩部分。在設(shè)計(jì)界面時(shí)，將更多的信息放在本地，在網(wǎng)絡(luò)數(shù)據(jù)未載入時(shí)即顯示本地?cái)?shù)據(jù)，讓用戶(hù)產(chǎn)生一種”已經(jīng)載入一半了”的錯(cuò)覺(jué)，即使最終的耗時(shí)一樣，心理感受也會(huì)更快。當(dāng)然把數(shù)據(jù)過(guò)多地寫(xiě)在本地，會(huì)犧牲一些靈活性，需要根據(jù)具體情況考慮。

越來(lái)越多的傳統(tǒng)企業(yè)擁抱移動(dòng)互聯(lián)網(wǎng)，以補(bǔ)充完善原有渠道的目標(biāo)推出自有企業(yè)的品牌app，比如傳統(tǒng)雜志社設(shè)計(jì)一款電子雜志app、傳統(tǒng)實(shí)體店商家推出電子商城app。這些傳統(tǒng)的做法已經(jīng)司空見(jiàn)慣，讓我們看看品牌大牛們有哪些不務(wù)正業(yè)的新玩法。

本文不談趨勢(shì)、不談技術(shù)，也不涉及廣告營(yíng)銷(xiāo)思路。通過(guò)分析研究以下八大品牌app案例的設(shè)計(jì)表現(xiàn)手法，總結(jié)出一些品牌app創(chuàng)新設(shè)計(jì)要點(diǎn)，希望與大家進(jìn)行交流探討。

【案例一】UNIQLO——清新型格的數(shù)字化生活工具

UNIQLO是一個(gè)擁有出色創(chuàng)新基因的日本服裝品牌，UNIQLO品牌所倡導(dǎo)的Life Wear（服適人生）哲學(xué)——“Clothes for a better life, for everyone, every day”不是單純將“衣食住行”的“衣”作為一種時(shí)尚，而是創(chuàng)造豐富人們?nèi)粘Ｉ畹囊路谶@個(gè)概念發(fā)表的各種數(shù)字化生活工具被歸類(lèi)為“UNIQLO LIFE TOOLS”，下面就來(lái)介紹一下這些apps——UNIQLO WAKE UP、UNIQLO CALENDAR和UNIQLO RECIPE。

UNIQLO WAKE UP

作為一個(gè)工具型應(yīng)用，UNIQLO WAKE UP的歡迎語(yǔ) “在隨著天氣而變化的音樂(lè)聲中開(kāi)始新的一天，分享您的起床信息” 道出了它與其他鬧鐘app的不同。它集天氣、音樂(lè)、社交功能為一體，把起床和天氣聯(lián)系起來(lái)，配以的美妙女聲播報(bào)，原創(chuàng)背景音樂(lè)則是由世界知名音樂(lè)人Cornelius和菅野洋子合作完成。

小伙伴們可去官網(wǎng)感受下：http://www.uniqlo.com/wakeup/cn/pc/index.html?high=true

打開(kāi)app默認(rèn)的是天氣/時(shí)鐘界面，清新明亮的大色塊平鋪十分迷人，不同天氣會(huì)自動(dòng)切換不同背景色和音樂(lè)。

在設(shè)計(jì)網(wǎng)頁(yè)和程序界面的時(shí)候，為了確保每一個(gè)像素的顏色、紋理和位置都準(zhǔn)確地呈現(xiàn)，大多數(shù)設(shè)計(jì)師都會(huì)被搞得疲憊不堪。一不小心，一些很常用的操作像移動(dòng)、旋轉(zhuǎn)和粘貼就會(huì)讓你的辛勤勞動(dòng)付之東流。但是，如果能對(duì)你的工作流程做些小小的改動(dòng)，就能在項(xiàng)目中始終保持作品的高質(zhì)量。

像素完美之旋轉(zhuǎn)

如果你不夠小心，那么在Photoshop中旋轉(zhuǎn)圖層就會(huì)使像素遭到明顯的破壞，出現(xiàn)模糊。

使用自由變換工具（或其他工具）把圖層旋轉(zhuǎn)90度或270度后，像素最終的顯示效果將取決于圖層的尺寸。如果圖層的寬和高都是偶數(shù)，你就可以幸免于難。如果圖層的寬和高都是奇數(shù)，也不會(huì)有問(wèn)題。但是如果圖層的寬是奇數(shù)，高是偶數(shù)或者寬是偶數(shù)，高是奇數(shù)，那么你將會(huì)看到如下情景：

本例中原始圖層的尺寸為20×9像素：偶數(shù)×奇數(shù)。盡管位圖和矢量圖層在旋轉(zhuǎn)后的效果不一樣，但兩者都變得不可用了。這是由于圖層旋轉(zhuǎn)的中心點(diǎn)沒(méi)有落在某個(gè)像素邊界上導(dǎo)致的。

一種解決方法

當(dāng)圖層的寬高為奇數(shù)×偶數(shù)或偶數(shù)×奇數(shù)時(shí)，旋轉(zhuǎn)后就會(huì)出現(xiàn)問(wèn)題。因此，我們需要某種方法來(lái)保證圖層的寬高是偶數(shù)×偶數(shù)或奇數(shù)×奇數(shù)。也許你所想到的解決方法就是給要旋轉(zhuǎn)的圖層增加一個(gè)正方形的位圖蒙版或者添加更多的像素。除此之外，你還可以通過(guò)在另外一個(gè)圖層上繪制一個(gè)正方形后跟原始圖層同時(shí)旋轉(zhuǎn)來(lái)解決這個(gè)問(wèn)題。

總而言之，只要圖層的寬高是偶數(shù)×偶數(shù)或者奇數(shù)×奇數(shù)就可以了。

一種更簡(jiǎn)單的方法

在使用自由變換工具時(shí)，把旋轉(zhuǎn)的中心點(diǎn)挪到左上角（或其他任意一個(gè)頂角）就能確保它會(huì)落在某個(gè)像素的邊界上，這樣便能保證每次旋轉(zhuǎn)后的結(jié)果都是完美的。為此，你需要在選擇自由變換工具后在參考點(diǎn)設(shè)置按鈕上單擊下任意頂角再進(jìn)行旋轉(zhuǎn)。這是目前為止最簡(jiǎn)單有效的方法。

在QQ群與群友交流時(shí)，聊到網(wǎng)站如何做關(guān)鍵詞評(píng)估，交談中說(shuō)到關(guān)鍵詞的搜索量、商業(yè)價(jià)值、競(jìng)爭(zhēng)程度三個(gè)方面的評(píng)估。關(guān)鍵詞評(píng)估是關(guān)鍵字進(jìn)行詳細(xì)的評(píng)估是否具備優(yōu)化的可行性，并從中選擇高搜索量、高相關(guān)性、低競(jìng)爭(zhēng)的關(guān)鍵詞。

搜索量
搜索量是關(guān)鍵詞日搜索的檢索量，搜索量的高低決定著競(jìng)爭(zhēng)度的大小。檢查關(guān)鍵詞的搜索量常用工具是百度指數(shù)、谷歌關(guān)鍵字工具等，如搜索“郵件營(yíng)銷(xiāo)”關(guān)鍵詞是181（29/7）。

商業(yè)價(jià)值
關(guān)鍵詞商業(yè)價(jià)值指關(guān)鍵詞在行業(yè)中的地位，以及能給商家?guī)?lái)的回報(bào)作為衡量標(biāo)準(zhǔn)，通常使用在搜索引擎競(jìng)價(jià)上。進(jìn)入百度推廣賬戶(hù)，使用估算工具查詢(xún)關(guān)鍵詞預(yù)估價(jià)格。如預(yù)估“郵件營(yíng)銷(xiāo)”排名前三名的價(jià)格是7元。

關(guān)鍵詞競(jìng)爭(zhēng)度
關(guān)鍵詞競(jìng)爭(zhēng)是搜索結(jié)果中參與優(yōu)化該關(guān)鍵詞的頁(yè)面有多少，網(wǎng)站有多少。例如搜索“郵件營(yíng)銷(xiāo)”這個(gè)關(guān)鍵詞，返回的結(jié)果有2520000個(gè)頁(yè)面，前三頁(yè)直接使用首頁(yè)優(yōu)化的網(wǎng)站有11個(gè)網(wǎng)站，競(jìng)爭(zhēng)程度是比較大的。

網(wǎng)絡(luò)上有一個(gè)計(jì)算關(guān)鍵詞競(jìng)爭(zhēng)度的公式：關(guān)鍵詞競(jìng)爭(zhēng)度=關(guān)鍵詞搜索量*10000/關(guān)鍵詞相關(guān)頁(yè)面數(shù)量。得到的結(jié)果越大，代表關(guān)鍵詞競(jìng)爭(zhēng)越不激烈，越容易優(yōu)化，反之，結(jié)果越小，相對(duì)競(jìng)爭(zhēng)度越激烈，越不容易優(yōu)化。如以“郵件營(yíng)銷(xiāo)”舉例，搜索量是181，相關(guān)頁(yè)面是2520000，181*10000/2520000=0.72，該關(guān)鍵詞較難優(yōu)化。

近幾年對(duì)HTML5與Flash誰(shuí)才是未來(lái)的發(fā)展的爭(zhēng)論真的實(shí)在太多，也是仁者見(jiàn)仁智者見(jiàn)智，其實(shí)什么東西都不是完美的，各有優(yōu)缺點(diǎn)，并且用戶(hù)才懶得管你用的是HTML5或是Flash，用戶(hù)關(guān)心的是只是應(yīng)用與體驗(yàn)。

>介紹HTML5與Flash

很多人都說(shuō)有了HTML5，F(xiàn)lash就可以退出了，但Flash還是有其自身的優(yōu)勢(shì)，來(lái)制作更好的展示效果與交互體驗(yàn)。

>Flash還能做什么，F(xiàn)lash要怎么做

@寫(xiě)說(shuō)說(shuō) ：作者系大學(xué)學(xué)生，給我們分享他的設(shè)計(jì)文章。大家如果對(duì)原作者的作品感興趣，可到作者的Behance看下。我們直接切入主題~

Dream這個(gè)詞匯是畫(huà)布的主體中心，它將控制整個(gè)畫(huà)布的布局空間，我們的其他元素將從這個(gè)字體的內(nèi)部出現(xiàn)，比如生長(zhǎng)的樹(shù)木，字體背后的山，以及山后高高的月亮。

做夢(mèng)經(jīng)常把我們帶到一個(gè)不一樣的場(chǎng)景里，我們比喻她為”仙境”好了。實(shí)際上這個(gè)”仙境”也是由日常的真實(shí)元素構(gòu)成的，在今天的這片”仙境”里，我們利用現(xiàn)實(shí)世界里的自然元素，結(jié)合AI的3D效果，讓這些元素都?jí)艋冒闫≡诳罩小?/p>

==================開(kāi)始之前注意以下幾點(diǎn)： =================

1、通常人們?cè)谝归g做夢(mèng)，所以我們把主色調(diào)調(diào)成青色和石灰綠。
2、同時(shí)，排版的時(shí)候來(lái)個(gè)完整的氛圍，給人感覺(jué)像是在講一個(gè)故事。
3、在操作時(shí)關(guān)于字體、樹(shù)木、樹(shù)枝、樹(shù)葉、山峰、月亮、畫(huà)布請(qǐng)逐一添加編組以便修改。

4、本文涉及到的素材和最終的psd源文件，猛戳此處下載Dream Design with 3D Typography.rar。下載完后字體該安裝的請(qǐng)先安裝好。

5、本文中用到的AI和ps都是英文版，創(chuàng)建3D字體部分比較簡(jiǎn)單，說(shuō)說(shuō)也是直接用中文版的AI做的，相信你也可以~如果您的ps是cc且為中文版，或許改成英文版在本文的學(xué)習(xí)中會(huì)更容易操作一點(diǎn)：

打開(kāi)你的ps cc安裝文件夾，定范到Locales\zh_CN\Support Files，比如我的是G:\pscc\Adobe Photoshop CC (64 Bit)\Locales\zh_CN\Support Files,這里你會(huì)看到一個(gè)tw10428.dat的文件，把它重命名（比如直接改成tw10428.dat重命名），不要?jiǎng)h掉。重啟ps就是英文版本的了。要換回中文版就把這貨的后綴改回來(lái)就是了：）

附：神馬？你忘記自己軟件裝在哪里不知道怎么找路徑了？那在開(kāi)始菜單欄總有她的身影吧！或者桌面上有她的快捷方式吧？鼠標(biāo)點(diǎn)擊”開(kāi)始”找到這軟件（或者直接在桌面的ps快捷方式上右擊），在ps cc軟件上右擊選擇”打開(kāi)文件位置”，毫不猶豫的再嗖嗖嗖幾下你就找到了路徑。

=================== 一切就緒，馬上出發(fā)↓ =====================

一、創(chuàng)建3D字體

打開(kāi)AI，創(chuàng)建新畫(huà)布，鍵入一個(gè)大寫(xiě)的”D”字，使用素材里面的字體storybook。字體顏色設(shè)為#4C3F38。

不知不覺(jué)的，很多網(wǎng)頁(yè)設(shè)計(jì)中采用了圖標(biāo)式導(dǎo)航（Navigation）——一般使用三道杠作為圖標(biāo)，用以導(dǎo)航。
這種導(dǎo)航的好處是節(jié)省空間，讓界面更簡(jiǎn)潔。

圖標(biāo)式導(dǎo)航的案例

這是YouTube的圖標(biāo)式導(dǎo)航(移動(dòng)版):

這是Squarespace的圖標(biāo)式導(dǎo)航：

AWARD的圖標(biāo)式導(dǎo)航不拘一格：

問(wèn)題所在

問(wèn)題在于，點(diǎn)擊圖標(biāo)式導(dǎo)航之后，圖標(biāo)本身沒(méi)有任何變化。也就是說(shuō)：操作缺乏反饋。

在網(wǎng)頁(yè)設(shè)計(jì)中，橫向和豎向的直線非常常見(jiàn)，利用整齊的線條可以打造出有序的視覺(jué)路徑以及信息層級(jí)。
當(dāng)然，有些時(shí)候，可以不按理出牌，設(shè)計(jì)一些傾斜的線條，讓你的網(wǎng)站不拘一格，更加與眾不同。

打破傳統(tǒng)布局，創(chuàng)造動(dòng)態(tài)的自由視感，讓構(gòu)成更加復(fù)雜——無(wú)論是利用簡(jiǎn)約的幾何圖形，或是精致的傾斜圖像。
讓你的設(shè)計(jì)更具吸引力，不妨試試斜線。

Paseo Itaigara

形狀感很強(qiáng)，整體設(shè)計(jì)的很成功，顯得并不雜亂。菱形無(wú)處不在，拼嵌式的菱形，裝飾性的菱形，按鈕的菱形，很好的主題一致性。

Impero

交互式網(wǎng)站，積極的氛圍、極簡(jiǎn)的色彩。設(shè)計(jì)師利用兩組對(duì)角線（粗細(xì)交織）打造了視覺(jué)路徑。

Alpina

強(qiáng)烈推薦！利用視覺(jué)滾錯(cuò)，加上美輪美奐的照片。來(lái)感受這趟視覺(jué)盛典吧。流暢優(yōu)美的照片美景。斜線分割的很巧妙（試想用直線風(fēng)格，效果不會(huì)這么到位）

相信每個(gè)Android新手都會(huì)遇到這個(gè)問(wèn)題，希望這篇帖子能讓你不再糾結(jié)。