2015年5月5日星期二
細節的力量：11個極度專注細節的優秀網頁設計
著名的室內設計大師Charles Eames網路行銷台中曾說過，“細節並不只關乎它們本身，它們還構成了設計。”的確，每一個網頁都是由無數的細節構成，而其中的內容也是同樣由這些細節連接組織到一起。不論是提供信息服務的網站，還是APP的官方宣傳頁，任何一個優秀的網站都能夠經受得起挑剔眼光的洗禮，從圖片到布局，從字體到架構。
網頁設計的細節至關重要，因為正是它們給用戶留下好印像，這些細節支撐起網站的良好體驗，提高易用性。正如同Eames所說，它們成就了設計，不注意細節會讓設計感流失。
接下來，我們一同看看這11款設計驚艷的網站。它們的好設計源於細節，有的界面雅致，有的交互出彩。深入揣摩這些案例，也許你的下一個網頁設計作品會非常強大。
Basecamp 是一個基於網頁的項目管理工具。正如同它的介紹，速度和效率是至關重要的。
這是網站的驗證界面，設計師巧妙的事先隱藏了確認的按鈕，只有當你輸入了正確的驗證碼之後，OK按鈕才會出現。這種措施不僅提高了網站的性能，還通過讓按鈕從無到有，將“驗證碼正確”的概念具現化，觸動用戶，增加成就感。
在歐洲，在書中使用Colophons（題跋）可以追溯到15世紀的時候（中國就早很多了），不過這網路行銷個網站是為了將其運用到網站上去。這次，Neoteric Design分享了他們網站的制作筆記——各個部分的功能，從字體軟件到編程語言和內容管理系統。如果訪客想知道一個網站是如何構建起來的，那麼這個帶題跋的筆記可以幫助用戶方便快捷得了解這個網站的構建過程，滿足好奇心。
2014年5月去世的先鋒設計師Massimo Vignelli曾說過，排版的柵格是“書的內衣”。其實由此推導，柵格系統又何嘗不是“網頁的內衣”呢？也正式它的存在，讓網站整飭而干淨。
在Berger & Föhr 為 Boulder當代藝術博物館的網站進行重新設計的時候，柵格系統的“內衣”作用是如此的鮮明。當你瀏覽網頁的時候，圖片、文字段落、導航的邊緣都隱約看到柵格的痕跡，你會在這裡體會到對齊的力量。更重要的是，即使網站隨著屏幕響應的時候，柵格所施加的影響依然口碑行銷存在。
不論網頁的內容的屬性是啥，使用柵格來嚴格組織內容是首要的工作。
越來越多的歐美網站開始在團隊頁面中標注設計師的家鄉，聲明這個站點的“故鄉”。在足球領域，球隊的球員介紹頁面上，大家都喜歡“自豪地介紹球員來自……”，也正是這種“基於位置”的信息強化了整個隊伍的歸屬感和凝聚力。同理，設計師們的“故鄉”信息也有著同樣的作用。
社交服務是如此之多，動不動倆服務還會在圖標上撞個衫啥的，直接導致用戶在分享的時候點錯地方，而在歐美國家，這種情況更加嚴重。台北網頁設計好在有TWLOHA，用帶字體樣式的文字LOGO替換圖標，識別度提高了，美觀度也有所保證。
通常情況下，網站都會有個“Contact”頁面，國內我們通常稱之為“聯系我們”。但是MINIMAL設計師工作室換了個思路，他們將這個常用的詞改成了“Connect”，仿佛在說“來聊聊吧”。這是截然不同的感覺，傳達出他們期待與用戶溝通的強烈欲望。情懷？人性化。文案很重要。
當我們討論登錄/注冊頁面的時候，可以輕松腦補出頁面的造型——其實絕大多少的頁面都差不多，本質上也就是個表單。但是有人並不打算隨大流。曾經開發出著名應用Draft的Nathan Kontny，他在設計頁面的時候，將用戶的留言添加到表單右邊，將互動與溝通的氛圍呈現出來，吸引更多的潛在用戶來注冊。
從商業角度上來看，這個案例給了我們一個經驗：不要羞於展示用戶對於產品的贊譽。
在這個名為CreativeMornings的網站中，每個章節都用網頁設計台北不同的色彩標示出來，同作者頭像組合到一起。這種視覺元素貫穿於整個網站，這些色塊會有下拉菜單，並且有著各種不同的邊緣、形狀和好玩的樣式。加載內容的時候，還有漂亮的加載動效。大膽的用色，精致的細節，這個網站簡直是高大上的典範啊。
設計這個網站的團隊曾經打造過著名的創意社區Big Cartel，而這個名為Pulley的網站本質上是一個電商APP，所銷售的內容是可下載的數字內容。
要下載內容，只需要密碼就可以了。基於網頁、無需登錄、輸入即可下載，這些設定降低了成本，減少了摩擦和錯誤，也使得體驗更到位。
StudioCrush是一個用來展示各種項目故事的網站。網站將敘述方式簡化了下來，每個項目本質上就是從開始（項目起源）到結束（項目交付）的過程，中間由關鍵的敘事線索（過程）橋接起來。
從諸多案例中挑選了這個例子，相比於“客觀”，作者更願意用“野心”來描述他的起始狀態；作為結論，沒有拖沓的視頻和描述，直接上圖讓大家一同來“欣賞”！就是這麼直觀，就是這麼任性！撇開干癟拖沓的內容，加上標簽，寫點干貨，呈現內容，讓故事可愛起來，這還不夠麼？
博主好站推薦:
揭秘2015年四大網頁設計趨勢
隨著互聯網的發展，網頁設計的口味似乎變化得很網頁設計台北快，稍微不注意就落後。我們很難判斷哪些網頁設計風格是短暫存在或是長期存在的，比如，Flash和平滑按鈕設計都曾經風靡一時，曾是網頁設計中最潮的東西，但如今它們就如設計文物一樣躺在那裡，成為“歷史”。
但是，不要認為看到那些已經過時的設計風格，就認為新的或者流行的東西都只是曇花一現。其實，這些曾經的設計潮流已經滲入到我們的設計理念中，並產生持續的影響。而實際上，它們也確實會在某些方面提升用戶體驗。
目前，網上有一系列的文章告訴你們2015年將會流行的網頁設計元素，而本期國外精品翻譯教程就將告訴你們2015年甚至2016年將會流行的網頁設計元素。這些網頁設計元素都具有很大的動能趨勢，很大可能會重新定義網網路行銷頁設計。
1、更少的頁面
曾經有人說過“少即是多”。這個觀點是在討論現在瀏覽網站的頁面數量。許多網站正在使用單頁面或者簡單的多頁面設計。這裡有兩個原因讓網站設計者喜歡這種設計：第一，用戶喜歡簡單的東西，在網站中越容易找到想要的資源或信息，對用戶來說就是更加好；第二，根據調查研究，有40%以上的互聯網流量來源於移動客戶端，那講究意味著口碑行銷，如果像餐飲網站等專門對移動客戶進行優化設計，那麼它們將更能吸引用戶去消費。有一個很好的例子就是一家在倫敦名為“Jacks Bar” 的酒吧。隨著手機、平板等移動設備的大量使用，滑動操作將會比點擊操作更加便捷舒適。
Triple Ch台北網頁設計erry Coffee是其中一個單頁面網頁設計的成功例子。在這個網站中，所有瀏覽者需要的信息都一覽無遺，同時沒有半點多余的。網站中只有兩個導航鏈接，並且都在頁面的同一區域中。
2、完全響應式
在過去，網站會單獨針對移動用戶和桌面用戶進行設計。但隨著移動設備大量應用和移動設備屏幕的大小不一，針對單個屏幕尺寸進行設計的做法變得比較沒有效率。對於SEO而言，搜索引擎傾向於索引URL與網站一一對應這種設計模式。對於沒有使用響應式設計的網站需要對每條URL進行單獨SEO優化。在一點上，設計者在設計網站時如果不進行響應式設計，就會被看做過時的做法。
Skinny Ties是一個比較完善的完全響應式設計例子，它可以適應任何的屏幕尺寸。從圖案到文字，網站在響應過程中為潛在消費者保留著原有的外觀和風格。
3、個性化用戶體驗
網站Cookies並不是新鮮的東西，但它們已經發展應用很多年了。現在設計者們利用它們更加有效地制作彈窗，根據用戶習慣訂制廣告和個性化設計。而在線零售商可以特別好地利用網站Cookies。
舉個例子，假如你的網站是銷售促銷禮品，核心客戶是正在為客戶或者員工尋找禮品的辦公室經理或者小企業主。他們首次瀏覽你的網站並不是非常重要。重要的是，利用個性化用戶體驗設計，來確保記錄好他們回訪到上次離開網站的地方。
如果你想尋找應用個人用戶體驗的商業網站，你絕對不能錯過Amazon。com 。亞馬遜會展示用戶已經看過的物品和相關聯的物品，根據用戶需求挑選出潛在需求的物品。這些都是根據購買地點、購買行為和其他數據來實現的。網路行銷台中
4、大圖設計
在網頁設計中，敘述故事是很常見的設計方式。利用文字和圖片，引導瀏覽者從A到B地瀏覽網站已經被證明有利於轉換瀏覽者的內容關注點。覆蓋含有文字的高清大圖元素和用戶界面元素都能引起瀏覽者的注意，從而瀏覽內容和實現交互過程。同時，高分辨率顯示器的廣泛應用將這種大圖設計方式變得更加漂亮、高效。
Wide Eye Creative是一個非常好大圖設計例子。網站用利用許多大圖來介紹業務內容，這些圖片既是背景又通過與文字的搭配組合形成特定內容板塊，能很好的吸引瀏覽者的目光和為下面的內容敘述定下基調。
博主好站推薦:
四大設計趨勢帶你玩轉2015年網頁設計
網頁設計趨勢變化的是如此之快，以至於我們甚台北網頁設計至還沒來得及全部體會，有的便已過時。所以，預測某個設計趨勢會流行多久壓根就是個偽命題。在21世紀初的時候，Flash曾被視為最熱門的網頁設計工具；而在幾年前，富有光澤的按鈕也是網頁上必不可少的組件，可是現在，他們都已經被扁平化設計和HTLM5所席卷而過。
不要被炫酷時尚光鮮亮麗的時尚風格洗腦，許多剛剛出現或者才開始的流行的設計風尚都會是曇花一現。那些能對網路行銷設計文化產生持續影響的設計趨勢之所以存在，是因為它們在根本上有助於用戶體驗，或者服務於某些功能或者技術。今天所說的四個設計趨勢是經過仔細推敲的，它們應該會在接下來的2015年裡繼續流行，甚至會強勢地在2016年裡繼續做一個堅挺時尚的設計趨勢。看下去，你會明白，它們不是在炫技或者耍猴，它們的確正在重新定義網頁設計。
1、更少的頁面
是否有人曾戳著你的屏幕說“少即是多？”越來越多的網站開始精簡網站上頁面的數量，使用單頁設計的網站已經不在少數，即是相對傳統的網站也過度到了 簡化後的多頁式頁面架構。促成這一趨勢的原因來自兩個方面：第一，用戶喜歡簡單，越簡單用戶越容易找到它們想要的內容，這自然也對網站越好；第二，據統 計，移動端的流量占據了網站流量來源的4成，對於移動端越友好，自然也越有利於網站和網站的業務。如果你能口碑行銷在餐廳的移動端網頁上訂餐，何必費勁巴拉地找電 腦來下單呢？成交額難道不會妥妥地上升麼？下面這個高大上的單頁網站屬於倫敦的Jacks Bar，這是一家酒吧餐廳二合一的餐飲機構，在移動端瀏覽成為用戶首選的今天，滾動比點擊更加有用。
2、無外乎是響應式設計
響應式網頁自然可以適配各種各樣的設備的屏幕，但是它們同時也是相對比較“龐大”網站，加載速度不會快到哪裡去。在過去，許多品牌會網頁設計台北為用戶單獨設計 桌面端頁面和移動端的頁面，但是隨著市面上設備的屏幕尺寸膨脹分裂，響應式網站設計就成了一個更為有效也高效的解決方案了。在搜索引擎抓取數據的時候，單 個URL會更容易受到它們的青睞。從這個角度上來看，設計師有必要考慮一下手頭項目是否做到了響應式設計。
Skinny Ties 就是一個響應靈敏的響應式網頁，在任何屏幕上都能良好地顯示，從圖片到內容，這個網站都經得起最挑剔的客戶的考驗。
3、個性化的用戶體驗
網頁Cookie並不是啥新鮮的東西，它們已經為網頁和用戶服役多年。現在，設計師們開是借助它們讓網頁的彈出窗口呈現出更加精准的內容了：更加個性化的廣告，更加符合用戶習慣的用戶體驗設計。做電商的朋友可能會非常需要這樣的設計。
舉個例子，假設你擁有一個銷售促銷禮品的電商網站，你的某個用戶是一家的經理，或者是一個小企業主，它正網路行銷台中在為自己的客戶和員工尋找類似的商品。這並不是他第一次訪問你的網站了，那麼你可以借助個性化的體驗設計，為他推薦它可能需要的商品，讓他成為回頭客。
在歐美市場，你恐怕找不到比亞馬遜更好的例子，當然，生活在大陸的我們，可能已經被無所不能的的推薦系統所折服。
4、高清大圖
講故事其實也是設計的基本功。使用可靠的內容和漂亮的圖片將用戶從A點引導到B點，已經被證明有利於網站的轉化率。使用大幅圖片和富有質感的文字能 夠賦予整個頁面以生命力，讓它更加有趣，令用戶願意與之進行互動。隨著高分辨率設備的普及，這些擁有高清大圖的網頁會輕松討好用戶的雙眼。
博主好站推薦:
網頁設計中的響應式布局設計
在談響應式布局前，我們先梳理下網頁設計中整體頁面口碑行銷排版布局，常見的主要有如下幾種類型：
布局實現
采用何種方式實現布局設計，也有不同的方式，這裡基於頁面的實現單位而言，分為四網路行銷種類型：固定布局、可切換的固定布局、彈性布局、混合布局。
固定布局：以像素作為頁面的基本單位，不管設備屏幕及瀏覽器寬度，只設計一套尺寸；
可切換的固定布局：同樣以像素作為頁面單位，參考主流設備尺寸，設計幾套不同寬度的布局。通過設別的屏幕尺寸或瀏覽器寬度，選擇最合適的那套寬度布局；
彈性布局：以百分比作為頁面的基本單位，可以適應一定範圍內所有尺寸的設備屏幕及瀏覽器寬度，並能完美利用有效空間展現最佳效果；
混合布局：同彈性布局類似，可以適應一定範圍內所有尺寸的設備屏幕及瀏覽器寬度，並能完美利用有效空間展現最佳效果；只是混合像素、和百分比兩種單位作為頁面單位。
可切換的固定布局、彈性布局、混合布局都是目前可被采用的響應式布局方式：其中可切換的固定布局的實現成本最低，但拓展性比較差；而彈性布局與混合布局效果具響應性，都是比較理想的響應台北網頁設計式布局實現方式。只是對於不同類型的頁面排版布局實現響應式設計，需要采用不用的實現方式。通欄、等分結構的適合采用彈性布局方式、而對於非等分的多欄結構往往需要采用混合布局的實現方式。
布局響應
對頁面進行響應式的設計實現，需要對相同內容進行不同寬度的布局設計，有兩種方式：桌面優先(從桌面端開始向下設計)；移動優先(從移動端向上設計)；
無論基於那種模式的設計，要兼容所有網頁設計台北設備，布局響應時不可避免地需要對模塊布局做一些變化(發生布局改變的臨界點稱之為斷點)，
我們通過JS獲取設備的屏幕寬度，來改變網頁的布局，這一過程我們可以稱之為布局響應屏幕。常見的主要有如下幾種方式：
布局不變，即頁面中整體模塊布局不發生變化，主要有：
模塊中內容：擠壓-拉伸；
模塊中內容：換行-平鋪網路行銷台中；
模塊中內容：刪減-增加；
博主好站推薦:
超實用！帶你認識網頁設計的構圖法則
平衡意味著和諧。當你看到一些看起來不錯一致性和相似的感覺網路行銷，你看到一個完美的平衡的構圖。它可能是一幅畫，一棟樓，一個攝影，甚至一個網站。
在這篇文章中，我們希望你去注意網頁設計中的視覺平衡。如果你希望學口碑行銷會完美的構圖方法，那麼不妨好好看看這篇文章。
對稱平衡
如果你想在你的網頁看上去美觀和優雅，那麼你應該做一個網站對稱。這種效果很容易通過將類似的對像上的中心軸台北網頁設計線的任一側來實現。這可以通過相同的尺寸，基於網格的文本段落，或具有匹配文本相片的圖像進行說明。這裡有一對遵循這一格式的網站設計實例。
您可以輕松地在網上找到各地的許多中心的布局，實際上，對稱性設計被認為是最賞心悅目的設計。這也是大多數人的典型思維模式。
當然，當你准備采用對稱性設計的時候，更多的時候它並沒有你想像中那麼膚淺簡單。考慮到這點，你不妨以平面配色方案開始。如果你是新手，可以盡量多運用白色，直到你有足夠的能力創造你自己的設計。
畢竟這樣的設計最賞心悅目，所以大多數人都喜歡干淨簡潔並且完美對稱的網頁。但是更多別出心裁的設計師會采用一些更加新穎的一些更復雜的設計布局。
不對稱平衡
不對稱平衡帶來一種自由隨意的感覺。盡管有時候看上去不是那麼自然，但是它還是經常在網頁設計中得到實用。你可以看到不對稱平衡網頁設計台北常常運用在一些大的高清圖片作為頁面背景，主體遠離了中心軸線的情況，目的是為了把更醒目的標題留在中間。
它的設計的主要目的是移位到左邊或右邊（或頂部或底部）。因此，如果您決定要用不對稱功能，你應該准備好多次的網路行銷台中試驗，以避免混淆網站的訪問者。
無論什麼類型的對稱，核心就是你要讓整體平衡。
博主好站推薦:
订阅：
博文 (Atom)