• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 網頁設計教程 ] 網頁教學:網站輕設計的6個技巧—- 其他教程




    教學主題: 網頁教程:網站輕設計的6個技巧

    大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

    今天的這個教學主題是: 網頁教程:網站輕設計的6個技巧

    這教學的重點為這幾點 [ 技巧,設計,網站,教程,網頁,操作,用戶,提示,元素,任務, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    網站輕設計指用盡量高效與少量的元素來體現網站的功能,最能代表輕設計的網站就是當前那些SNS社交網站,我們可以看出那些大型的SNS網站基本都是採用輕設計的方法。

    網站輕設計指用盡量高效與少量的元素來體現網站的功能,最能代表輕設計的網站就是當前那些SNS社交網站,我們可以看出那些大型的SNS網站基本都是採用輕設計的方法。

    在網站或軟件的策劃和設計過程中,我們經常聽到這樣的討論:“這個功能設計得太重了”又或“我們希望能夠處理得輕一些”。似乎輕設計是時下炙手可熱的話題,也是方興未艾的Web2.0大浪下設計師們的最愛(看看那些在全世界遍地開花的SNS網站,無論是視覺元素還是交互流程均能輕則輕)。本文主要從實踐和總結的角度出發,提出了讓設計變得更輕的6個技巧。

    何為輕設計:

    在開始之前先需要明確下何為輕設計。這裡並不想給輕設計下一個專業的定義,只是歸納了大家對輕設計所應具有的特性的理解。

    具有靈敏的可交互元素:頁面上的鏈接、文本框、按鈕等可交互元素能靈敏地響應操作並即時反饋。

    輕便的流程和提示,不打斷用戶的當前任務:一項任務盡量用少而清晰的步驟去完成,提示和臨時任務盡量不中斷用戶主任務,不要讓用戶做不必要的確認和操作。

    不干擾用戶的注意力:用戶是來使用產品和服務的,而不是來欣賞精美的設計,如果使用過程中會因為設計元素分散注意力那麼可能是設計太重了。試着少用些無用的裝飾和細節。

    網站輕設計的6個技巧:

    1. 靈活的logo響應區

    點擊網站的logo通常能將我們帶回到首頁。從這個角度看,Logo不僅起着品牌標識的作用,還承擔了重要的導航功能。就連普通的鏈接當在鼠標劃過時都有下劃線或者變色提示,那麼logo作為一個更為重要的可交互元素,是否也應該在鼠標劃過時提供適當的反饋呢?

    下面列舉了幾個logo區靈活響應鼠標例子,在使用過程中發現,小小的變化不僅提升了可用性,還讓網站顯得靈敏而有生氣。

    網頁教學:網站輕設計的6個技巧

    2. 靈敏的可交互元素

    導航對於網站的重要性不言而喻,導航元素要即時響應鼠標操作。

    網頁教學:網站輕設計的6個技巧

    重要的操作和引導按鈕應該設計得更加細緻些,包括按鈕的三態(常態,hover,active)甚至四態(增加一個禁用態)。這麼做也是為了使重要的可交互元素對不同的操作及時給出反饋,使其顯得靈敏高效。

    網頁教學:網站輕設計的6個技巧

    文本框的狀態也是一個容易被忽略的細節,主要是獲取焦點后無提示或者提示不夠明顯。

    網頁教學:網站輕設計的6個技巧

    另外對於一些響應時間稍長的操作,應該給出進度反饋。似乎是顯而易見的道理,但是設計中往往也容易忽視。

    3. 清晰且溫和的提示

    提示通常都是提供輔助性信息的,既然是輔助性的,就不宜喧賓奪主過分強化。除非必要,也最好不要給用戶帶來額外的操作(比如需要用戶主動關閉,確認等)。提示的內容也是為了帶來幫助或者提供反饋,因此言簡意賅最重要。

    twitter中更換個性化主題時的提示,從頁面頂部柔和出現,停留片刻后自動消失。

    網頁教學:網站輕設計的6個技巧

    meme中的follow提示,在操作處出現。

    網頁教學:網站輕設計的6個技巧

    4. 隱藏或弱化不常用的操作

    不常用的操作可以弱化,或者隱藏起來,當鼠標經過的時候再出現。這個是基於上文提到的不干擾用戶注意力角度出發的。

    Twitter中將每條微博條目的操作隱藏了起來,減小了對閱讀的干擾。而且在鼠標經過條目響應區和操作時,都有相應的變化以作為反饋。

    網頁教學:網站輕設計的6個技巧

    flickr中針對照片的操作也使用淡灰色,儘可能弱化和減少對照片瀏覽的干擾。

    網頁教學:網站輕設計的6個技巧

    5. 引導和強化推薦操作

    強而明晰的引導是十分必要的,研究表明用戶在瀏覽頁面的時候是跳躍性、非線性的,用戶並不喜歡在諸多的操作中選擇和尋找最佳選項。所以清晰的引導就顯得更加重要了。重要和常用操作還可以特異處理,以便於尋找和點擊。

    大而易用的表單和註冊按鈕

    網頁教學:網站輕設計的6個技巧

    箭頭和紅色的按鈕一起提供了明晰的視覺路徑指引。

    網頁教學:網站輕設計的6個技巧

    常用操作的特異處理。某些瀏覽器的後退操作也有類似處理。

    網頁教學:網站輕設計的6個技巧

    6. 輕便處理臨時任務

    如果在看一部精彩電影的時候想喝水了,是希望走到廚房間倒水呢還是希望手邊就有一個杯子和水壺?顯然人們都不太願意中斷主任務和注意力去處理臨時任務,頁面設計也是如此,能在當前頁面完成就盡量在當前頁面完成。模態窗口、跳轉頁面、付出層等都不是讓用戶覺得舒服的做法。除非確實必要,少使用這樣的做法。

    flickr中對相片名字的即時編輯,當頁完成,非常輕巧。

    網頁教學:網站輕設計的6個技巧
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    Delicious中對收藏條目的刪除確認,同樣在當頁完成,輕巧且很好地降低了騷擾。

    網頁教學:網站輕設計的6個技巧
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    小結:

    本文從可用性角度提出了輕設計的幾個技巧:

    1. 靈活的logo響應區;

    2. 靈敏的可交互元素;

    3. 清晰且溫和的提示;

    4. 隱藏或弱化不常用的操作;

    5. 引導和強化推薦操作;

    6. 輕便處理臨時任務

    以上僅是個人的實踐和經驗總結,歡迎大家指出不足之處並提供更多輕設計方面的建議。

    看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 網頁教程:網站輕設計的6個技巧 這教學會喜歡

    文章標題: 骨子愛創意- 網頁教程:網站輕設計的6個技巧–轉載請註明來源處

    本教學分類為網頁設計教程中的 其他教程相關教學

    文章相關關鍵字為: 技巧,設計,網站,教程,網頁,操作,用戶,提示,元素,任務,

    本文永久連結 :網頁教程:網站輕設計的6個技巧

    本文轉載自 :VIA