7-tips-designing-great-websites-1

失敗的網頁設計各不相同,但是優秀的網頁設計則有著共通的特點。你需要思考人們想要的是什么,什么東西能夠觸動他們,讓他們欲罷不能,無法忘懷。

聽起來似乎很簡單,不是嗎?取悅用戶的關鍵在于像用戶一樣思考。并不是每一次創新、每一次重塑、每一種新技術都能讓用戶愉悅,那些真正易于理解、便于使用、降低難度的技術、設計手法和抓人的視覺元素,才是一切的關鍵。下面總結的7項秘訣,會讓你的網頁脫穎而出的。

1、定制化

carrie-amazon

定制化,或者說個性化,是今天網頁設計中最典型的趨勢之一。用戶希望瀏覽網頁的時候獲得更加私人的瀏覽體驗,無論是玩頁游還是購物。

看看世界上最著名的那些網站是怎么做的吧。Amazon 為用戶提供基于購買歷史的產品推薦,Netflix 則會推薦相關的作品、有待觀看的下一部,并且基于用戶 Twitter 上的內容來進行推薦。

每一個微小的自定義設計,都能讓用戶感覺這些用戶體驗設計是為他們而做的。同時,這種設計也會給用戶一種參與感和溝通的體驗,從而加深用戶的忠誠度。如此一來,用戶會更好地融入整個網站的用戶群或者社區。

2、簡練的動效

1chicago

另外一個大熱的流行趨勢,就是動效設計。它不僅能為用戶帶來驚喜,而且具備強大的引導性。

動效設計的精髓在于簡單。令人頭暈或者不知所措的動效,應該不是你要的東西吧?動效應該是有目的性的,和其他所有的設計元素一樣,有針對性,達成目標是它存在的意義。

對動效或者說動畫最熟悉的,無疑是迪士尼。Frank Thomas 的《生命的錯覺:迪士尼動畫》中,就詳細總結了創造今天動畫的12個原則

·擠壓和拉伸
·預期
·登臺
·連續動作和姿態對應
·緩進緩出
·弧形運動
·次要動作
·時序
·夸張
·立體刻畫
·吸引力

3、使用約定俗成的設計模式

mayors

對于常見的問題,設計模式就是可靠且可復用的解決方案。簡而言之,最常見的信息和交互方式被整合到一個界面當中,比如點擊按鈕,滾動頁面,滑動解鎖,它們都是設計師模式。

你需要熟悉這些常見的設計模式,并且在設計界面和交互的時候將它們用進去。這符合用戶在體驗上的訴求,也是易用性的最基本構成。

同時你也要在自己的設計中創造設計模式,在不同的頁面中使用相同、相似或者規則化的設計,讓用戶習慣。比如,不同頁面中的CTA按鈕的色彩保持一致,卡片式的元素使用相同的樣式,等等等等。

4、給設計以性格

chimp

沒人會喜歡單調無聊的設計。你的網站應當同你的品牌保持一致的性格,擁有獨特的氣息。

要做到這一點,通常需要用到微妙走心的文案和親切自然的語調如果你真的不知道怎么做,可以看看MailChimp 是怎么做的。(請注意他們的文本和圖片是如何無縫地連接到一起的)

5、在屏幕內思考

mikyna

用戶同網站交互都是在屏幕內進行的,無論是桌面端還是移動端,整個體驗都是圍繞著屏幕進行的。

這并不是一句廢話。屏幕是一個區域,它界定范疇,賦予概念,創造隱喻。這也解釋了為什么視差滾動和卡片式界面是如此的流行。這兩種概念將一定量的信息合理地放置到屏幕這個容器中,讓用戶隨之同下一個元素進行互動。

如何運用好這個概念其實并不是那么容易。一個屏幕內應當承載多少信息,需要仔細考慮。一個桌面端頁面所能承載的信息量在移動端屏幕上,可能需要劃分到幾個頁面當中去。

從屏幕的角度來考慮問題,可能會讓你的計劃更加龐大復雜,但是這種考量是有價值的,這種基于屏幕或者基于設備的考慮能讓用戶感覺更加便捷貼心。

6、一體化的內容和交互

uncharted

視頻、游戲、測試都爭取讓用戶能與之進行互動,這種互動的目的在于驅動用戶參與到設計中來。用戶與界面交互的越多,用戶所獲得的體驗就越好。

不過,有趣的元素能讓這一切截然不同。

讓交互內容盡量簡單,不要牽扯太多,讓用戶可以一目了然,讓他們輕松獲得反饋的信息,不用在冗雜的體驗中淪陷。這其實和美劇的5分鐘原則有著異曲同工之妙。

7、輕松有序的設計

2dots

最后一個秘訣并非不重要,它甚至可以說是最基礎的原則:讓你的設計保持干凈、整潔和有序。使用柵格可以讓每一個頁面元素都有準確的位置。將響應式設計落實到每一個元素,能讓頁面能從一個設備兼容到另一個設備。

簡約風和極簡風能成為設計趨勢是有道理的。用戶可以更輕松理解這一切。簡約的視覺設計更容易交互。沒有復雜信息并且被精心設計的界面能更好地運作,賦予更好的體驗。

蘋果的官方App Store 和Google Play 都推薦過的游戲 Two Dots 就是個典型案例。誰都可以拿起手機毫無障礙地開始玩兒,它設計簡單干凈,容易互動,視覺元素周圍有足夠的空間,無需擔心誤觸。同時,其他游戲所具備的東西它也有——有趣好玩,可以共享得分,能分享到社交媒體。

結語

界定一個網站的體驗與否有的時候并不是單一的標準,而今天所推薦的7條秘訣本身也更接近于基本的Guideline,了解用戶,熟悉趨勢才能提供優秀的體驗。

【優設酷站22連發!】

  1. 免費圖庫+導航收集站:《酷站兩連發!高品質免費圖庫站+專注WEB/APP導航收集站》
  2. 音樂站+字體搜索:《酷站兩連發!幫你專心工作的音樂站+谷歌字體在線搜索神器》
  3. 漸變色+代碼比較:《酷站兩連發!漸變色方案全聚合網站+在線代碼比較神器》
  4. 配色+占位圖:《酷站兩連發!在線色彩搭配工具+快速生成占位圖片器》
  5. LOGO下載+字體下載:《酷站兩連發!可商用的矢量LOGO下載+平面最愛的27款免費字體》
  6. 壓縮圖片+在線配色:《酷站兩連發!在線圖片壓縮神器+在線配色工具COLOURCO》
  7. CSS Hover動畫+寵物小精靈配色:《酷站兩連發!寵物小精靈專屬配色網站+CSS HOVER動畫收集站》
  8. 美女圖片+游戲配色:《酷站兩連發!游戲配色網站+免費美女素材特供網站》
  9. 在線配色+字體推薦:《酷站兩連發!在線配色神器+英文字體推薦網站》
  10. 追波作品變代碼+16進制顏色:《酷站兩連發!用代碼呈現DRIBBBLE作品+16進制顏色網站》
  11. 無縫紋理+多邊形背景:《酷站兩連發!專注無縫紋理素材站+多邊形背景生成器》

原文地址:designshack
原文作者: CARRIE COUSINS
優設譯文:@陳子木

uisdc-hao

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量104萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏