打造精美網站的六點建議
本文為博文《Tips For A Finely Crafted Website》的譯文,編譯內容如下:
優秀的 Web 設計師了解其他人意識不到的事:創建漂亮的網站需要細心、時間和技術。與工匠通過原材料、技術及對美感的專注來構造他們的作品一樣。計劃和實施一個漂亮的設計必須緊緊圍繞網站的目標來進行。
不要把精美打造的網站視之為簡單地把內容布置于漂亮的視覺界面之上的網站,這一點很重要。該文將提供一些建議,Web 設計師可以利用它們來為網站打造定制的視覺體驗。
毫無疑問:這些方法需要花費額外的時間,它們可對網站進行改良,而往往被非專業人士忽略。它們會給整個網站帶來更好的用戶體驗。使用戶帶著滿意的微笑、深刻的印象離開網站,即便他們不能很快說出這是為什么。
每次從草圖開始
所有定制的設計總要從白板開始
盡可能避免在老版的設計上進行快速修補工作。無論網站屬于什么類型(如電子商務、作者網站、博客等),都應視之為獨一無二的。最好的網站可以滿意既定的目標。從頭構建你的設計,使之清晰、專注,并賦予相應的義務。
在設計過程中的每一步,確保布局中的任何一個元素都為既定目的服務;你要能解釋每個元素背后的思考過程。如果某元素沒有理由存于網站上,考慮移除它,因為它可能會分散訪問者對更為重要內容的注意力。
頁面上的每個元素都應該有它存在的原因
從以前設計中簡單地復制其中的元素,會阻礙 Web 設計師探索、學習及成長。這并不是降低在以前設計元素上進行迭代的價值,它也是很有用的練習,可以幫助你挑戰更有創造性的設計。
為定制圖標和圖形投資
Spotify 采用了定制的圖標和圖形,而不是普通的圖片,這為他們的設計帶來了靈魂與風格
定制的圖解、圖像為 Spotify 打造了獨一無二的體驗。雖然圖片庫的圖片和矢量圖可以節省大量時間,但如果訪問者在五個其他網站上同時看到一個帶著耳機微笑著的銷售代表的圖片,他們就會有一種虛假的感覺。
在創作定制的圖標和圖像上投入時間,以保護網站的視覺體驗及信息的真實性。
Spotify在這一點上做得很完美。快樂的、“寫生”的插圖風格將它與其他音樂服務網站區分開來,為用戶留下積極持久的印象。
下面列出了其他采用定制圖片和圖像的優秀網站:
● Axure
消除阻礙滾動的摩擦
消除阻礙,鼓勵向下滑動閱讀
隨著顯示器分辨率的增加,觸摸屏的增多,我們的頁面越來越長,Footprint 越來越小。這是有道理的:與通過點擊網站上的鏈接而等待新頁面加載的用戶相比,通過向下滾動頁面來瀏覽內容的用戶遇到的障礙會更少。移除這一障礙,不僅能 簡化導航,還能體現內容的凝聚力,而不受頁面加載的打擾。
根據 Paddy Donnelly 精彩文章《Life Below 600px》中的解釋,現在,設計師對用戶忽略那些靠下的不明顯內容的恐懼心情已緩解很多。重要的內容到底放在哪,隨著不同分辨率設備的增加,該困惑已不存在。
“Life Below 600px”是一篇精彩的文章,驅散了頁面重要位置的神秘
以創新的方法連接單個頁面中的各個部分,從而編織一個緊密聯系的故事。這可以提升讀者自然流暢的閱讀體驗,鼓勵他們對該頁面進行深入閱讀。你甚 至可以把不同風格的內容放置在同一頁面中,在每種風格的底部加上小小的視覺提示以提示用戶鏈接到更多內容中——與在一個屋子里有不同的房間相似,可以將不 同的功能加以區分,同時還能保持統一的主題風格。如果頁面中的每部分都突然結束,或者看起來都像到了頁面底部,那用戶很少會閱讀到最后。
事實上,滾動在大部分有網絡功能的設備上已成為一種自然的交互方式,Apple 在 OS X Lion 上已普遍使用了滾動條。
The Dangers of Fracking 和 Slavery Footprint 很值得一提。這兩個網站通過極富創造力的視差效應和有趣的故事吸引用戶滾動頁面一直向下閱讀。
更多案例:
●Rdio
通過交互性和功能性,使設計處于無形
經過 20 多年的演化,印刷版的媒體已為我們在線呈現內容提供了樣式參考。想一下我們用于描述網頁的術語:頁面、頭條、列。我們使用這些術語是為了讓公眾更好理解 Web。但媒體的能力不僅于此。靜態的文本及圖片雖然很好,但人類天生渴望各種刺激,Web 有能力通過更多的交互和更豐富的體驗來滿足人類的這種渴望。
Joyride 通過使用“中途停車”的交互方式,引導訪問者瀏覽該網站
突出顯示頁面中用戶可以與設計進行交互的地方,可以幫助用戶減小閱讀長篇幅內容的負擔。訪問者可以體驗到設計的無形部分; Content slider、Tooltip、Lightbox、Modal windows 及其他的交互方式可以推進他們進一步瀏覽網站,正如博物館展覽會采用多種混合方式來傳達信息一樣。當然,如果交互方式使用的過于頻繁,也會分散用戶的注意 力,所以要小心把握交互方式的使用尺度。所有的交互方式應該服務于網頁的整體目標。
Joyride 在這方面做得很好。雖然網頁上承載了大量內容,Joyride 在引導用戶方面做了大量工作,突出有意思的點以吸引用戶。(最后小小的驚喜會給用戶帶來微笑。)
其他經典案例:
●Path
注意細節
無論你走極簡主義風格,還是走復雜說明型路線,都要特別注意頁面中每個元素的細節。即便稍微的不一致,也會被用戶潛意識地揪出來,影響他們的體驗,讓他們感到混亂。
下面是需要提防的一些陷阱:
● 排版混亂
設計中的每種排版方式都應該與它的功能保持一致。頁面中某處的標題應該與其他地方的保持一致,同時也要與網站的其他頁面保持一致。
● 按鈕,到處都是按鈕
要清楚哪里適于采用按鈕風格,并與普通的文本鏈接加以區別。過度使用按鈕會減低他們整體的效力。
● 漸變
如果你的設計中采用了漸變,讓它們協調地搭配起來,比如每個元素采用相同的陰影,采用相同的色彩漸變。
● 小心差異
頁面元素之間保持一致的空白、排列,可以讓布局給用戶更完善、更高品質的感覺。
認真地評析頁面中的每個元素是否是影響設計達到完美的關鍵。證明每個元素都有其存在的原因,不是多余的。在最后階段,不要認為“沒人會注意到”,因為它被用戶注意到的機會是很高的。
Antoine de Saint-Exupéry 曾經說過:
達到完美,不是說沒有添加多余的東西,而是沒有多余的東西被留下。
評析頁面中的元素是否具有合適的細節,以滿足他們的目標。該按鈕是否具有合理的紋理和配色以服務它的角色?它確實需要紋理嗎?簡單是關鍵,和該元素的目的相關。
如果你仔細看,網站上有很多完美的設計
如果你仔細看,互聯網上完美的觸動到時都是。Little Big Details 從互聯網和其他網站上獲取了一些設計細節,這些我們平時都經常見,但卻未注意過。
看一個真正完美的設計,讓我們轉向 PixelResort。用一個詞來描述它:華麗。每個元素都沒有多余的細節。整體給用戶一種質感和可觸感。
其他經典案例:
● Metalab
● Outside
總結
創造一個真正漂亮、令人難忘的網站不是一件容易的事。你需要為此投入大量的時間與努力,專注于下面一些關鍵領域,可以讓你獲得最大回報:
1. 為指定網站設計完整布局。在老式模版上增添新的顏色層,不可能成為引人注目的設計;
2. 創造獨有的圖像,賦予設計獨一無二的個性;
3. 通過為整個網站編織故事,鼓勵訪問者向下閱讀網站,直到最后。
4. 用多樣化來吸引訪問者。增加具有交互性的元素,促使用戶積極思考你所帶給他們的體驗。
5. 最后,思考設計中的所有細節。確保沒有遺漏。
這五方面的技巧可以保證你的網站即漂亮且能給人留下深刻印象。這些技巧可以為你帶來回頭訪問者、較高的參與度與用戶滿意度。