隨著便攜設備用戶的指數(shù)級增長，網(wǎng)頁設計師采用響應式設計作為多平臺布局解決方案，不但節(jié)省了設計師的時間，而且從長遠角度來講，響應式設計能夠為用戶提供更舒適的操作環(huán)境。
如果你毫無經(jīng)驗，不知從何開始，那么這份工具列表將大大的幫助你，能夠讓你的布局更有“彈性”。

Simple Grid

Simple Grid是難以置信的CSS框架，無所限制的柵格布局，支持不同大小的屏幕。

Susy

Susy “語義變焦”的柵格系統(tǒng)，無需額外標記和特殊的類，很方便使用Sass的人。

Tiny Fluid Grid

Tiny Fluid Grid 很棒的網(wǎng)頁應用，能幫你選擇柵格系統(tǒng)。一旦完成后，提供CSS文件下載。

Variable Grid System

Variable Grid System依據(jù)960柵格系統(tǒng)，能夠自動產(chǎn)生布局，在調(diào)整后，提供CSS文件下載。

Responsive Web Design Sketch Sheets

Responsive Web Design Sketch Sheet 標記很方便，可以方便的選擇不同方案中元素的放置位置。

Style Tiles

可以通過該網(wǎng)站制定完美的響應式設計流程。

響應式設計是當前網(wǎng)頁設計的趨勢，針對不同的設備，提供布局解決方案。
而且很多技術狂人正在不斷的進行各種實驗，爭取讓響應式設計越來越好。

響應式設計的難點是導航菜單。可不能像縮放頁面那樣縮放導航菜單。在設計之前，要謀劃好導航菜單在手機、平板、桌面上的布局。

更多超炫的網(wǎng)站：
《想讓網(wǎng)站動感十足？試試網(wǎng)頁設計中的韻律線條》
《想設計自己的網(wǎng)站？先來看這15個優(yōu)秀設計師的酷站》

本文收集了25例出眾的響應式設計，大家可以使用響應式在線測試工具Responsinator來看看，他們的導航菜單，是怎樣設計的。

Ableton 

導航菜單可能是網(wǎng)頁設計中最重要的部分了。每個用戶瀏覽網(wǎng)站時一定有所需，因此導航菜單能夠幫助用戶尋找信息。好的導航菜單像是導游，告訴用戶網(wǎng)站是干什么的，內(nèi)容分類有哪些，在哪里可以找到什么信息。

而且導航欄也是整體布局的重要組成。

總結一下，導航欄的重要性。

1. 瀏覽完Logo后，導航欄是用戶第一個看到的組件。
2. 導航欄的作用是引導用戶。
3. 導航欄的作用也類似于索引，快速幫助用戶找到所需信息。

想讓導航欄更加優(yōu)雅、美麗、響應式么？看看導航欄設計的三大要點吧！

1) 別再讓導航胖下去了，給導航減個肥

導航菜單重要性不言而喻。一些設計師往往使用一些繁雜的裝飾來做突出。其實大可不必，通過字體、懸停效果、留白可以設計出簡約、優(yōu)雅的極簡主義風格導航欄，看看下面的案例。

Design Instruct

Sugar Rush

評論(0) 瀏覽(4731)

從Google、可口可樂到聯(lián)邦快遞、肯德基，讓我們一起來看這些最經(jīng)典的LOGO設計如何返璞歸真，相信我，你會返回來重新看一遍的！

迪士尼

BURGER KING

可口可樂

對于大部分網(wǎng)站，導航并不算是個挑戰(zhàn)。一條主導航加條二級導航支撐，通常就足夠了。典型的做法是，二級導航顯示出父、兄及當前子菜單。常顯的主導航條顯示最頂層的菜單，允許用戶在菜單間切換。

然而，有一類網(wǎng)站讓這種傳統(tǒng)的導航樣式承擔有些吃力。這就是我要提的大型網(wǎng)站。

定義大型網(wǎng)站

一個大型網(wǎng)站由結合了綜合服務和產(chǎn)品的典型大型組織所有。這個組織通常也服務各色用戶。擁有大型網(wǎng)站的組織，包括BBC這類機構型的，類似微軟這種項目多樣化的公司型的，政府部門，高等教育類的以及運作多種活動的慈善組織類的，比如世界自然基金會。

這些網(wǎng)站：龐大，層級多而深，由多個小網(wǎng)站和頻道組成，迎合受眾眾多，許多入口，這種規(guī)模級的復雜網(wǎng)站導航頗具挑戰(zhàn)。

大型網(wǎng)站上的導航挑戰(zhàn)

在我們公司，我們花費了大量工作在這類大型網(wǎng)站上，尤其當我們想使用傳統(tǒng)的導航時特費勁兒。

傳統(tǒng)的導航無法負擔深層級

傳統(tǒng)的導航隨著網(wǎng)站層級越深變得越難用。傳統(tǒng)導航很容易應付三層；超過的話，問題就會暴露。即便拓展到頁面眾多的房產(chǎn)類網(wǎng)站導航，他們會更致力于導航多過內(nèi)容（大型網(wǎng)站里頁面太多讓問題變得更糟），或更頂層的頁面不再出現(xiàn)在導航中。在后者中，如果用戶處于網(wǎng)站的深層級頁面，他們將搞不清上上下級關系，因為無法看見當前頁面在整個網(wǎng)站中的所處位置。

雖然傳統(tǒng)的導航處理結合了面包屑，能夠拓展適應綜合型網(wǎng)站，但當在房產(chǎn)網(wǎng)站上如此做時，成本卻不斷升高。

傳統(tǒng)導航無法承載多入口

如果用戶經(jīng)由小網(wǎng)站或網(wǎng)站某菜單頁的進入，傳統(tǒng)方式的導航將讓用戶感到困惑。以一個在考慮參加大學研究課題的學生舉例。這個人可能對院系詳情更感興趣相比整個學校。因而很容易進入網(wǎng)站的院系層頁面，而不是學校的主頁。
另一個例子就是單身媽媽想了解寶寶福利。她們更像是要直達福利的次級頻道而不是政府主頁。在這種情況下，用戶的關注是在當前內(nèi)容。（如：課題頁或兒童福利頁）。他們不是立即對這整一個網(wǎng)站感興趣。
不幸的是，不論用戶是否愿意，傳統(tǒng)的一級、二級導航都試圖讓用戶去了解整個網(wǎng)站環(huán)境。

在這個大學頁面上，這個“研究菜單是指整個大學的研究呢還是僅是這個學院的研究。當兩個同樣的菜單出現(xiàn)，并指向不同的地方會怎么樣？

隨著CSS的廣泛應用，透明元素在網(wǎng)頁設計中大量采用。

通過添加透明效果，可以增添頁面的對照感和可讀性，同時對整體的效果妨礙又不大，可謂一舉兩得。

一般來說，采用透明效果顯示區(qū)塊、展現(xiàn)數(shù)據(jù)，透明效果出現(xiàn)在很多輔佐元素當中，這樣前景元素就顯得非常突出。
讓我們來看看透明效果，這種優(yōu)雅而又華麗的效果。

Wavefront

整體構成比較不拘一格，音樂節(jié)一般的氛圍。霓虹色彩，半透明區(qū)塊，讓色彩更加動感，很好的支持了主題。

Advies

頁面中含有很多透明條紋，中間的大區(qū)塊既不影響背景圖像的效果，也能很好的展現(xiàn)信息。

揭開iOS7扁平化的外衣，深入探索蘋果的新式設計語言，一起來猜想一下新的設計風格是如何在iWatch iTv iCar上實現(xiàn)。

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

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

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

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

iOS7的扁平化設計非常”萬金油”，不但適應了今天的iPhone以及iPad設備，也能夠應用于未來的iWatch,iTV,iCar等設備。

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

1.后臺執(zhí)行

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

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

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

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

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

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

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

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

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

UNIQLO WAKE UP

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

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

打開app默認的是天氣/時鐘界面，清新明亮的大色塊平鋪十分迷人，不同天氣會自動切換不同背景色和音樂。

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

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

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

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

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

一種解決方法

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

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

一種更簡單的方法

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