1. web端交互設計頁面布局對比分析2018-04-07
頁面布局
頁面布局大致可分為網頁（web）、軟體、手機三類，其中web和軟體有較大相似性，不作區分。軟體界面布局依功能而決定，布局復雜。因為定義種類的標准和方式不同，頁面布局類型分類較多，先總結比較常用和普遍的布局方式，以其他方式做補充。
頁面布局的定義
頁面布局是指，在設計頁面的過程將頁面各要素通過合理、有效、統一的規則進行排版，產生很好的傳播信息的視覺效果。一般來說，都會基於下原則進行頁面布局設計：
（1）對比：是防止頁面元素過於單一或沒有差異性。假如空間、大小、形狀、字體、線條、顏色等設計元素都要各不相同，那麼就要製造較大的差別，要讓頁面引人注目。
（2）重復：可W重復顏色、形狀、線寬、字體、大小和圖片等等。既能夠増加條理性，也可増強頁面的統一性。
（3）對齊：在頁面上，不同元素不能孤立存在，而應當構建特殊的視覺關聯效果，從外觀上給予用戶更為清爽、稽巧和情緒化的體驗。
（4）親密性：頁面上的元素不應當孤立的存在，彼此之間存在親密性，形成一個視覺單元。這樣可有助於信息的架構，減少信息組織的混亂。
網頁布局類型
網頁版式的基本類型主要有骨骼型、國字型、拐角型、框架型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、自由型等12種。
1. 「國」字型布局
也可以稱為「同」字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列兩小條內容，中間是主要部分，與左右一起列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。這種結構是我們在網上見到的差不多最多的一種結構類型。
口字型、同字型、回字型都可歸屬於此類，是一些大型網站所喜歡的類型，即最上面是網站的標題、導航以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。這種布局的優點是充分利用版面，信息量大，缺點是頁面擁擠，不夠靈活。這種結構是我們在網上見到的差不多最多的一種結構類型，常用於門戶網站的設計。
2.拐角型 匡型布局或T型布局可歸於此類，在匡型布局中，常見的類型有上面是標題與導航，左側是展示圖片的類型和最上面是標題及廣告，右側是導航鏈接的類型。這種版式在韓國的網站中常見。T布局就是指頁面頂部為橫條網站標志與廣告條，下方左面為主菜單，右面顯示內容的布局，因為菜單背景色彩較深，整體效果類似英文字母T，所以稱之為T形布局。這種布局的優點是頁面結構清晰，主次分明，是初學者最容易上手的布局方法。缺點是規矩呆板，如果在細節色彩上不注意，則很容易讓人感覺枯燥無味。
2.1「匡」字型布局
這種結構與上一種其實只是形式上的區別，它去掉了「國」字形布局的最右邊的部分，給主內容區釋放了更多空間。這種布局上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。
2.2.T型布局
「T」結構布局形式。所謂「T」結構，就是指頁面頂部為橫條網站標志+廣告條，下方左面為主菜單，右面顯示內容的布局，整體效果類似英文字母「T」，所以稱之為「T，形布局。這是網頁設計中用得最廣泛的一種布局方式。這種布局的優點是頁面結構清晰，主次分明，是初學者最容易上手的布局方法。缺點是規矩呆板，如果不注意細節色彩，很容易讓人」看之無味「
3. 「三」字型布局
是一種簡潔明快的網頁布局，在國外用的比較多，國內比較少見。這種布局的特點是在頁面上由橫向兩條色塊將網頁整體分割為三部分，色塊中大多放置廣告條與更新和版權提示。
4. 「川」字型布局
整個頁面在垂直方向分為三列，網站的內容按欄目分布在這三列中，最大限度地突出主頁的索引功能。
5， 封面型布局 （滿版型/海報型/POP型）
POP布局屬於此類。就是指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心，頁面以圖像充滿整版。主要以圖像為訴求點，將少量文字壓置於圖像之上。滿版型給人以舒展、大方的感覺，視覺傳達效果直觀而強烈，缺點就是速度慢。隨著當今網路帶寬不斷變大，這種版式在商業網站設計尤其是網路廣告中比較常見。
這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現在企業網站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。
6. Flash布局
這種布局是指整個網頁就是一個Flash動畫，它本身就是動態的，畫面一般比較絢麗、有趣，是一種比較新潮的布局方式。其實這種布局與封面型結構是類似的，不同的是由於Flash強大的功能，頁面所表達的信息更豐富。其視覺效果及聽覺效果如果處理得當，會是一種非常有魅力的布局
7. 標題文本型布局
標題文本型布局是指頁面內容以文本為主，這種類型頁面最上面往往是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這一類。
8. 框架型布局 ,
採用框架布局結構，常見的有左右框架型、上下框架型和綜合框架型。由於兼容性和美觀等因素，這種布局目前專業設計人員採用的已不多，不過在一些大型論壇上還是比較受青睞的，有些企業網站也有應用。
框架型版式常用於功能型網站，例如郵箱、論壇、博客等。1）左右框架型這是一種左右分別為兩頁的框架結構，一般左面是導航鏈接，有時最上面會有一個小塊標題或標志，右面是正文。我們見到的大部分的大型論壇都是這種結構，一些企業網站也喜歡採用。這種類型結構非常清晰，一目瞭然。
2）上下框架型與左右框架類似，區別僅僅在於這是一種上下分為兩頁的框架。
3）綜合框架型這是上述兩種結構的結合，是一種相對復雜的下型框架結構，較為常見的類似於「拐角型」結構的，只是採用了框架結構。常見的郵箱網站的版式都是綜合框架型。
9. 頂部大圖Banner+簡單的柵格
無論屏幕多大，這種布局都能夠為用戶展示充足的內容，供用戶瀏覽和探索。雖然這種布局隨著屏幕、設備而有所差異，有的設計師會傾向於設計成固定寬或者橫跨整個頁面的布局，但是總體的模式都大同小異。
·導航欄·頂部大圖，圖片上疊有文字標題·2~4個分欄，承載不同類別的信息，有的會有圖標·主要的內容區域·頁腳
這種布局設計干凈清爽，有足夠強的視覺表現力，並且常常採用的響應式設計，斷點也很好控制。頂部大面積的輪播圖或者Banner 也有許多插件或者應用來幫你實現。
原理：這種布局中，每個元素都各司其職，並且整個流程是富有邏輯的，頂部大圖足以營造氛圍，給予用戶特定的體驗，下面的次一級元素能夠做的很好的支撐。
相關趨勢：越來越多這類網頁開始採用色彩豐富的插畫式的圖標，而扁平化的設計和這種布局頁面有著天然的契合。
10. 單頁設計，單欄布局
單頁式設計這幾年非常火，它非常適宜於展現極簡的內容，或者專注呈現一個主題。當網站的主題集中，內容也比較固定的時候，無需復雜的布局來呈現，單頁單列式的布局足以應付一切。
·導航·主要內容區域，文字+圖片為主·頁腳
採用這種布局模式的時候，空間的控制至關重要，相當考驗設計師設計留白和布局平衡的功力。元素和元素之間的疏密關系是需要設計師反復推敲的，如果空間控制不合理會給用戶一種混亂的感覺，如果過於緊密則會產生局促感。
原理：單頁式設計適合於小網站或者小型項目的展示，它可以用來製造一個簡單的介紹頁面，讓簡單的內容顯得不那麼單調，強化內容的形式感和重量感。對於內容簡單的博客網站而言，單頁式設計也是不錯的選擇。
相關趨勢：和單頁設計結合最緊密的應該是動效設計和視差滾動，他們可以讓單頁式設計更加生動有趣，淡化單調的設計，賦予頁面更強的生命力。
11 、自定義柵格
方塊元素被用來組織排列他的作品。這是組織排列任意數量內容的簡單途徑，讓事物保持簡潔。
到處都是方塊，移動滑鼠時還有個有趣的動畫效果。不過除了組織內容之外，你會發現方塊元素也成為了設計風格的一部分。它是這種風格關鍵的決定性元素。
那些被整齊分割出來的網頁布局從來都沒有過時過。無論是分割得細碎的網頁區域還是大塊的頁面區塊，大多都需要藉助一套干凈整齊的柵格來支撐。在此基礎上，內容按部就班地被置於不同的區塊中，被精心地組織展示出來。
在設計師的作品集頁面中，你可以發現各種各樣自定義的柵格布局。自定義柵格展示內容的優勢在於，它可以同時呈現大量的視覺化的內容，看起來足夠豐富又不會落於下乘。下面這個圖庫的效果看起來就相當震撼。
在柵格中填充色彩，還可以用來承載文字內容。不同的區塊之間不一定非要用線條進行分割，可供選擇的方案有很多，不過千萬要控制好柵格尺寸和間距。控制不好的細節，整個設計的平衡感可能會被破壞。
原理：柵格的優勢在於它的組織性，對於用戶而言，它具有規律性和可預期性。一個漂亮的柵格系統能夠讓用戶更快找到需要的內容，在視覺上也更加協調自然。
相關趨勢：柵格很容易被人視為卡片這樣的元素，可以為其加入翻轉等各式各樣的動效，呈現出更多的信息和視覺層次。
12. 經典的F式布局
傳統的布局方式，依賴布置視覺線索，「控制」用戶的視覺路徑，相較之下，F式布局更加自然，更加友好。F式布局符合用戶的瀏覽習慣，更自然。符合「從上到下，從左到右」的閱讀模式。
研究表明，用戶在瀏覽網頁的時候，習慣於沿著F式的閱讀軌跡來瀏覽信息，也就是說，用戶喜歡從左到右閱讀，然後向下移動，再繼續從左到右閱讀。
這種F式的閱讀模式對應的網頁布局就是F式布局，最關鍵的信息靠左顯示，從上到下盡量保持在一條線上。
·頁頭和導航·靠左的一欄相對較寬，展示主要的內容·靠右常為側邊欄，展示相關鏈接等內容·頁腳
原理：人的行為很容易受到習慣的影響，而研究也證實了人思考、行為確實是模式化的。從左到右，自上而下，人們大多習慣了這種行為模式。F式的布局模式擁有良好的適用性，便於用戶理解和交互。
相關趨勢：F式布局中側邊玩法很多，有的設計師會將導航與之結合，或者在頁面頂部加上大圖Banner。
13 、極簡分層
極簡化的設計一直都在流行，它的流行不是沒有原因的。開放式的空間讓用戶感覺更加輕松，也使得其中展現的內容更容易被聚焦。如果極簡化的頁面中加入不多的幾個並列的內容層，可以讓信息更有層次，也使得極簡的頁面擁有了細節。
這種設計並不復雜，但是讓頁面更加有趣了，它可以適配更多不同類型的項目了。這也解釋了為什麼用戶如此的喜愛類似Apple 官網這樣的設計。
原理：極簡化的頁面中加入簡單的幾個分層，讓頁面有了視覺焦點，尤其是當設計者想要引導用戶關注到某個關鍵的內容的時候，這種頁面布局很很容易實現這一點。
相關趨勢：微妙的陰影和漸變常常被用在這樣的頁面當中，強化元素之間的層次感。雖然這些設計手法一度「過時」，但是現在大有卷土重來之勢，而Material Design 這樣的設計風格就是它們的沖鋒號。
14. Z-模式
Z-模式是最簡單、最通用的模式,普遍用於任何基於文本的網頁。讀者首先橫向的瀏覽頂部，接著回到左邊，然後再橫向地瀏覽整個底部。
理解通用的Z-模式很重要，因為它解決了網站的核心需求：層次結構、品牌化和用戶行為號召。它的美在於既簡單又具有「用戶號召」型網站的理想布局。當然，對於更復雜的或包含大量內容的網站，Z-模式可能過於簡單。
考慮一下Z-模式是否適合你的網站？下面有一些最佳實踐可以更好的優化該模式：
背景：保持背景在它應該處於的位置：隱蔽在內容之下。不讓它分散讀者的注意力。
要點1：作為第一個要點，將Logo放置在固定位置。
要點2：雖然主要的用戶號召應該放在後面，這對二級用戶號召來說是一個好位置，可強調或突出導航條（一個漂亮的圖形或圖像滑塊將有助於分割頁面的頂部和底部，鼓勵讀者按照Z模式所期待的方式來瀏覽）。
要點3：選取最佳位置來吸引讀者對其它鏈接的注意，或者吸引讀者的目光到網站的最終目標：要點4。
要點4——作為「終點」，這是一個完美的放置主要用戶號召的地方。
首先你需要做的是把頁面上的元素按照重要性進行排序。然後，從結果中挑選出適當的「熱點」就會變得很簡單。
此外，Z-模式可以重復和擴展到整個頁面。我們來看看Evernote是如何按「之」字型向下放置他們的「用戶號召」和賣點的。
DropBox沒有使用任何背景圖片，很簡單地實現了這種「曲折」的模式。相反的，更多功能型的設計內置在了布局中，比如用戶號召「瀏覽更多」，當用戶瀏覽整個網頁時，它幫助用戶鏈接進入每一板塊的細節部分。這也有助於通知讀者點擊到下一個相關頁面，而不需要先去通讀頁面所有內容。
15.分割屏幕
在這類中，我們精選的網站都用了垂直分隔線來分割屏幕。可能這么做有很多原因，通過研究大量此類案例，我發現主要有兩點。
原因之一，有時候在一套設計中，的確存在兩個同等重要的主體元素。網頁設計的通常方法，是按照重要性給內容排序。然後重要性會體現在設計的層次和結構上。但是假如你就是要推廣兩樣東西呢？這種方式，可以讓你突出兩者，並讓用戶迅速在其中做出選擇。
原因之二，有時你要表現出一種重要的兩重性。以Eight and Four網站為例。他們在此要表達的是，他們的核心競爭力來自植根數字領域，還有多才多藝的員工。這兩點成就了他們。通過屏幕分割來表現這一點，是種令人愉快的方式。
16. 去界面化
網頁設計中的主要元素之一，就是容器元素：方塊、邊框、形狀和所有類型的容器，用於將內容從頁面中分離開。想像一個古板的頁頭，元素剛好容納其中，與內容分隔開。如今的一項普遍趨勢，就是去除所有這些額外的界面元素。
這是種極簡主義的方式，但它更進一步，帶來一些有趣的轉變。
17. 基於模塊或網格
接下來這些排版方式，建立在模塊化或類似網格的結構上。在這些設計中，每個模塊都力圖根據屏幕尺寸伸縮調整。實際上這並不是什麼新的方式，不過響應式網頁設計讓它變得更加有用。它暗示了一種自適應布局模式，可以像搭積木一樣，由各種模塊組件創建而成。
這個案例更加激進。當然，它也包含了模塊化的方式，讓他們能夠根據需要輕松增減內容。但此處還有一個重要的設計元素在發揮作用，之前的案例是沒有的。模塊通過尺寸變化，來反映其重要程度和在各層級中的地位。這類模塊化的布局方式存在一種風險，它使每樣東西尺寸都相同，這意味著無法強調任何事物。相反，這個案例還是清晰地突出了主要元素。
18. 一屏以內
最後，還有一些網站採用這樣的方式，讓設計完全在一屏內展現。這是響應式設計的一個分支，因為它會適應屏幕尺寸。不過在這個絕佳案例中，整個設計的適應方式完完全全吻合屏幕，沒有產生滾動條。沒有滾動，意味著內容必須極度聚焦，而且要建立清晰的內容層次。我發現這些網站的聚焦能力和清晰程度，令人耳目一新。
2. 什麼是響應式網頁圖片庫設計的注意事項
響應式設計無疑是當前企業網頁設計領域當中，不可忽略的必要組成部侍彎逗分，而響應式網頁中的圖片顯示又是老老賣生常談的問題，許多爭論集中在響應式網站的圖片應當怎麼展示，那麼以下內容為你提供參考：
1、輪播幻燈片：盡量隱藏導鬧野航
2、避免使用大量肖像類圖片
3、在移動端上支持手勢操作
4、在移動端上禁用lightbox效果
5、讓導航元素低調不招搖
6、不要讓圖片和視頻混淆
7、確保圖片顯示尺寸不要超過原始圖片的最大寬度
8、圖片縮放
9、避免使用圖片標題
3. 響應式web設計中為什麼要使用百分比布局
為灶信了靈活伸縮。固定像素布局轉百分比布局，讓頁面元素根據視口大小在一個又一個媒體查詢之間靈活伸縮修鬧辯租正樣式。Web即全球廣域網，也稱為萬維網，它是一種基於超文本液兆和HTTP的、全球性的、動態交互的、跨平台的分布式圖形信息系統。
4. 響應式設計時代，我們該如何設計網站
但隨著各種屏幕尺寸設備的興起，以及交互方式的多樣性，這些默認值已不再適用
現在我們進行網站設計所用到的所有默認值均需要更新
Web近年來所發生的變化人們一直在談論Web發生了改變，讓我們首先看看Web究竟發生了哪些變化
屏幕尺寸90年代，Web頁為640像素寬，21世紀初，其寬增長到800像素
幾年以前，我們將它調整為1024像素
但就在5年前，「奇怪的事」突然發生了
小屏幕設備進入市場
一時間，我們對Web設定的寬就不再適合了
不久，平板電腦進入市場
現在屏幕視窗的高超過了寬
屏幕尺寸已沒有固定的值（圖片來自：AramBartholl）現在我們無法了解用戶所使用窗體的大小
我們只能假設其寬是一個令用戶舒服的隨機數
這些數字是任意的，總會有一些用戶會看到不完整的Web頁面
在這里，我們可以先忽略這些用戶
「每個人都有一個滑鼠」我們總是默認每個用戶都有一個滑鼠
雖然我們知道，這並不總是事實
大部分設計咐昌師會忽略為不使用滑鼠的用戶設計交互方式
不管什麼原因，那些不得不使用鍵盤的用戶往往很難與我們的網站進行交互
但由於大部分用戶確實使用滑鼠，當時很多設計者認為設計只要滿足大部分人就可以了，所以我們設計出的網站還是有很多人是無法使用的
事實證明，這個數據一直在增加
很多依靠滑鼠進行的交互，在觸摸設備上是完全不起作用的
因為用戶喜歡這些設備，甚至管理者和設計師都在用它們，所以它們是很難被忽略掉
「每個人都有寬頻互聯網」我們另一個默認情況就是每個人都有速度超快的互聯網，至少和我們的一樣快
如果他們現在沒有它，不久也會有的
這似乎又是實事
網速確實越來越快
但是，今天越來越多的人在使用差勁的、不可靠的3G網路
如果你曾在火車上使用3G網路，你就會明白我所說的
如果你曾在酒店使用其提供的免費Wi-Fi，你就會明白我們假設互聯網越來越快是不成立的
這是我們思維中的一大變化，我們確實應該為這些用戶考慮
這將對我們的設計外觀產生較大影響
「大家的電腦一年比一年快」電腦越來越快，過去是這樣的
如果在買電腦之前再等半年，同樣的價格你就可以買一台快兩倍的電腦
這主要針對新式台式機，但對於移動設備，其有比處理器速度更重要的事
例如，對於手機，最重要的是電拿簡臘池待機時間：你不想每次打完電話後都必須充電吧
還有另一個趨勢：現在的製造商開始銷售價格更低廉的設備，而非速度更快的設備
相比處理器速度，很多用戶更關注價格和電池待機時間
你的老式電腦怎麼樣了？你可能賣了，也可能扔了
但用戶仍保留並使用著
並不是每個人都擁有與我們設計師同樣的硬體設備
「所有的顯示器均校準過」我們很清楚這一條是不對的
只有那些可視化專業人士的顯示器才進行過校準
其他人的顯示器大部分都無法正確顯示色彩，很多顯示器還是十分差勁的
我所測試過的大部分移動手機有著相當棒的顯示屏
可當在陽光下使用時，如果你幸運，或許還可以看得見內容，但卻無法看到低對比度設計下的微妙漸變
人們總會使用那些低劣的顯示器，而且訪問你網站的人往往視力不好
越來越多的人正在看不合格的調色板
與其購買消滑一款專業的藝術類顯示器，不如購買一款廉價的顯示器和幾台低端設備來測試你的作品，這是更好的投資
Web在最近5年裡發生了變化，創建網站的老方式已不再適用
我們需要新的方法論
ThisIsResponsive，該網站為響應式設計提供了很好的資源
過去幾年裡，我們一直在積極地研究新方法，以解決Web在不同尺寸屏幕上的顯示問題
除了響應式設計，在日益增長的設備上存在越來越多的挑戰
我們必須尋找新的交互模式：我們需要可以工作於任何設備上的界面
設計過程中，一些新的約定俗成正在產生，即新的默認
下文將列出我所收集到的新的默認情況
新的默認：激活方式本想用「觸控」一詞，但考慮到大家對該詞的理解不同，所以改為了「激活」
對於所有設備，無論他們需要怎樣的輸入方式，都需要用戶以某種方法來激活某件事
對於滑鼠，就是點擊；對於觸控設備，就是滑動；對於鍵盤，就是敲擊
還有聲音、在空中揮動手臂等激活方法
很多設備往往提供多種交互方式
對於各種設備，其共同點就是必須通過激活動作來完成某件事
最近，我們開始思考用戶輸入的其他方法
我們曾經假設人們都使用滑鼠
當滑鼠移至上面時顯示內容，移開後則隱藏內容
在觸控設備進入市場之前，該方法一直為大部分人所採用
當內容只有通過滑鼠操作才能顯示的話，那對於沒有滑鼠的觸控設備該怎麼辦呢？不同設備要有不同的解決方案
下面看看這個下拉菜單
當滑鼠停在主菜單項上，子菜單便出現
此外，你還可以點擊它打開該鏈接
現在，你在觸摸設備上敲擊該菜單項，會發生什麼？子菜單出現了嗎？鏈接激活了嗎？兩者都發生了？還是發生了其他事情呢？在iOS上，其他事情發生了
你第一次敲擊該鏈接時，子菜單出現了，即引發了滑鼠停在主菜單項上的事件
但你需要再敲擊一下這個鏈接，才能打開它
我們可以針對不同的輸入設備定義不同的交互方式
但我認為更好的辦法是確保默認的交互方式適用於所有用戶
如果你確實要這么做，你可以針對特定的用戶來增強這種默認體驗
例如，你確定有人正在使用滑鼠，那你要保證靠滑鼠進行的交互方式可用；如果你確定某人的手指較粗，那你要把小按鈕做得再大些
只要大家對此無疑問，只要這種改善有利於交互，就可以這樣做，但默認的交互方式除外
在這些假設中，有一些，比如滑鼠的使用，是很難去除的——尤其在可以提供多種交互方式的設備上，如可安裝滑鼠、帶有觸摸鍵盤、相機、麥克風、鍵盤和觸摸屏的筆記本
對此要認真思考一下
你確實需要針對滑鼠進行優化嗎？新的默認：小屏幕正如把一輛小汽車進行壓縮，雖說更美觀了，但卻沒有以前實用了
在網站上也同樣，桌面上的網站進行壓縮後用到小屏幕設備上，並不一定能帶來同樣的用戶體驗
構建適用於所有屏幕上的響應式網站，首先針對小屏幕進行設計是最容易的
它會迫使你專注於真正重要的事情上：不適於小屏幕的，很可能就是不重要
它會迫使你更好地思考布局，思考頁面中內容的展現順序
上文提到的交互設計方法同樣適用於圖形設計——首先設計激活事件，之後再改善它
我們首先設計每個人都能看見的東西，即內容
無論屏幕大小，無論瀏覽器功能多少，其均能顯示字元
這是我們唯一確定的事情，所以從文本開始設計是原則（大部分Kindles不支持色彩，老版本的瀏覽器無法支持新版CSS中的很多特性，布局在小屏幕設備上處於次要位置
）我們可以從設計不同大小字體間的布局著手
無論每個人有怎樣的設備，他們都可以看到該布局
該布局設計好後，你就可以針對更大屏幕設計布局
你可以把它看成針對使用更大屏幕用戶的一次改善
之後，當不同的布局完成之後，你就可以為該網站增加其他「修飾」了，如顏色、漸變、邊框等
不能同時考慮其他方面
我也正嘗試尋找所有不同設備（具有不同的屏幕大小，不同的特性）之間的共同點
首先針對這些共同點進行設計是合理的
而奇觀的是，該一點往往被忽視：Web專業人員傾向於在高配置的設備（運行著最新版本的瀏覽器）上審視他們的作品
他們僅看到了改善部分，卻忽略了提供基本體驗的這些共同點
新的默認：內容直到最近，我們都是這樣設計網站的：在頂部放上帶有Logo的Banner圖和導航，將子導航放在左邊，右邊放一些小部件，頁腳放在底部
當所有這些完成後，我們再把內容塞在中部的小小空間中
這就好像我們對我們的內容很不自信，嘗試提供一些用戶可能會喜歡的其他東西
我們應該專注於中間的部分，保證它正常工作，看起來美觀、具有可讀性
確保所有人理解它，發現它有用
一旦你完成了內容部分，你可以自問一下，該內容確實需要一個Banner？Logo？子導航？它必須要有一個導航嗎？它確實需要所有的這些小部件嗎？顯然最後一個問題的答案是「不」
我不理解這些小部件有什麼用
在我看來，沒有任何小部件比空白區域更美觀
從內容開始著手，可以幫助我們找出很多有趣的解決方案
例如，Logo確實需要放在每頁的頂部嗎？在很多網頁中，放在頁腳部分效果可能更好，如在數字類型的導航中，或在注冊頁面中
子導航中的很多鏈接放在主要內容區域的相關部分效果可能更好
當觀看頁面布局時，主要導航比主要內容更重要嗎？大部分情況下，並不是
我通常認為導航屬於頁腳內容
在頁面頂部放一個「跳轉」鏈接可以把訪問者引導至導航處，也可獲得導航，並將其顯示在頂部
在響應式Web設計時代，我們需要很多新的、聰明的解決方案
過程改進看完上面內容後，你可能明白這只是過程改進
從文本開始，對文本進行設計，根據不同的屏幕大小和設備對它進行優化，之後再針對特殊屬性進一步優化，如滑鼠的使用，針對胖手指的設計
很多Web開發人員基於該原則構建網站
他們把漂亮的Photoshop制圖轉化成上述不同的層
如果開發者有很好的設計感且關注細節，這可以產生很好的效果
但如果他們並非如此（大部分情況是這樣的），便很容易設計出可用性不好、簡陋的產品
我並不是說不讓設計者使用Photoshop
如果那是你的工具，繼續使用它
但要記住，你正在設計Web的不同層，不是Photoshop中的層
人們會以各種方式看我們的設計，我們在為所有這些人進行設計
請記住，我們不僅僅為使用筆記本的CEO設計，還為在火車上或使用免費Wi-Fi的人設計
工具上面也提到了，在設計Web過程中，Photoshop一直被濫用
好設計工具的缺失是造成過程改進難以進行的原因之一
我們所使用的工具大部分是幫助我們為網站增加「修飾」，而不是設計其核心
很幸運，針對特定功能的小型設計工具越來越多
如Gridset幫助我們針對不同的屏幕尺寸設計網格
好的設計工具可以幫助我們定義排版
把這些設計工具融入到我們的設計過程中，我們可以設計出更好的作品
結論現在的網站設計與以前已大不同
固定、單一的交互方式已不再適用
我們的設計過程需要新的起點
除了上文提到的，還有很多
就拿我們常用的表單來說吧，它足夠用一系列文章來講述
5. UI如何設計響應式網頁設計
UI如何設計響應式網頁設計。一款產品要想能夠得到更好的推廣與銷售，設計師在進行ui時應該注意以下4點：1、視覺傳達即在計算機領域，通過美觀的圖標造型、豐富的色彩、准確的文字、順應人機工程學原則，創建具有審美價值的界面，提高應用軟體的易用性、易學性，鍵鋒手使用戶不必思考那些無關緊要的細節。2、交互設計稿嫌主要在於設計軟體的操作流程、樹狀結構、操作規范等。一個軟體產品在編碼之前需要做的就是交互設計，並且基配確立交互模型，交互規范。3、用戶測試/研究此測試，其目標恰在於測試交互設計是否合理，圖形設計是否美觀，方式是用戶自主調研。
6. 什麼是響應式圖標設計
什麼是響應式圖標設計? 響應式設計主要講的是布局，那麼什麼是響應式圖標?響應式圖標設計是一種根據屏幕尺寸來改變圖標類型、從而達到更好可讀性的設計。 圖標為什麼要響應式? 怎樣閱讀內容?時至今日，我們用來閱讀內容的平台越來越多。設備、屏幕解析度、瀏覽器、平台——我可以拿著5S+Safari+iOS7.0瀏覽網頁，也可以拿著1020+Chorome+WP8瀏覽網頁。 各種選擇，各種搭配實在是太多了，這些都或多或少的影響了內容的可讀性。而圖標作為一種視覺語言，可讀性非常重要。 圖標設計，首先要滿足易於理解。其次，圖標的可讀性必須高。在小尺寸的情況下，圖標設計為了追求更高的辨識度/可讀性，可以選擇犧牲一點美感。 那麼能不能美感、可讀性兼得呢?圖標設計的藝術便在於二者的平衡，取與舍。怎樣設計，讓不同尺寸的圖標均能展現美感，同時又具備可讀性? 我認為，需要根據尺寸范圍進行圖標響應式的優化 這個理念不是新的。對於柵格化圖標來說，這種設計方法很常見。 在網頁設計中，很多設計師錯誤的認為，只要簡單的縮放圖標即可達到完美的可讀性。但實際上並非如此。 每款圖標需要三種不同的尺寸，通過使用代碼，來自動進行可讀性優化。 簡單的方法和復雜的方法 有兩種最基本的優瞎棗迅化方式。一種依靠假定，另外一種更精確。一種簡單，一種復雜。 簡單的方法是使用Media Queries根據屏幕寬度來調整圖標，這種方法奏效的原因是因為，內容的大小通常由屏幕的大小決定——也就意味著，桌面版的圖標應該比手機版的圖標大。(或許是這樣吧?) 但是這種方法太被動了，不是嗎?應該化被動為主動，正確的做法是，讓圖標元素具備響應式功能——圖標會依據圖標本身的大小來進行選擇(3選1)，更具伸縮性，更靈活，適應面也更廣。雖然有點復雜。 具體細節 注意： 下面提出的僅僅是概念，這些代碼還沒有完成，測試版也沒有發布。我們正處於研發階段，我們需要Kickstarter的眾籌。 但並不妨礙我為大家上述這種響應式圖標設計的思想。 簡單的media-queries(圖標的外觀根據屏幕尺寸來變) 這是最簡單的方法。圖標設計的核心是SVG，但其實，我們可以把圖標設置成一種字體，這樣就能起岩漏到很好的響應式效果。將圖標的大小看成字重。然後作為字體的圖標會根據屏幕的大小來改變字重。可以看看下面這個Demo，圖標根據屏幕寬度響應式改磨此變。 Web字體和element-query(圖標的外觀根據圖標尺寸來變) 正如前面提到過的那樣，根據屏幕大小來改變圖標顯示種類，這終歸不是一個好辦法。圖標的顯示種類還是要根據自身的尺寸來變。下面這個Demo使用了Element Queries以及Web字體，打造了一種圖標動態調節的效果。 SVG 斷點 SVG斷點法，依賴media queries，以及SVG文件，會根據圖像尺寸，進行一系列的觸發，較上者效果更好，可以看看下面的demo 結論 更靈活、可讀性更高的響應式圖標設計需要某種方法，我們正在努力的思考圖標尺寸、圖標外觀、屏幕尺寸的關系，爭取早日找到一種簡單、高效的解決方法。