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




  • [ 平面理論教程 ] 淺談有哪些因素容易影響圖標的易用性—- 其他教程




    教學主題: 淺談有哪些因素容易影響圖標的易用性

    大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

    今天的這個教學主題是: 淺談有哪些因素容易影響圖標的易用性

    這教學的重點為這幾點 [ 圖標,影響,容易,哪些,因素,清晰,使用,我們,界面,準確, ]

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

    本文重點

    今天給同學們絮叨下圖標的事兒,在很多時候,圖標其實會對界面的清晰性易用性產生負面影響。作為設計師,務必留意我們所習慣的圖標使用方式,並儘可能的多測試,案例分析在這兒。

    今天給同學們絮叨下圖標的事兒,在很多時候,圖標其實會對界面的清晰性易用性產生負面影響。作為設計師,務必留意我們所習慣的圖標使用方式,並儘可能的多測試,案例分析在這兒。

    圖標是界面的基本組成部分之一,然而在很多時候,圖標本身也在破壞着界面的清晰性。

    象形圖出現在人類早期,我們可以將其視為最初的文字形式。如今,在某些文明群體中,象形圖依然是人們進行溝通的主要媒介。

    淺談有哪些因素容易影響圖標的易用性

    在很多公共城所,圖形時常被用於導航,特別是在譬如機場這樣的多文化環境,僅憑文字傳達信息顯然是不夠的。

    淺談有哪些因素容易影響圖標的易用性

    而在計算設備上,圖標隨着GUI時代的發展而迅速流行。看看最早的桌面計算機GUI(Xerox Star),設計師David Smith在其中使用了圖標以及桌面隱喻的理念:

    淺談有哪些因素容易影響圖標的易用性

    當然,我們都知道為什麼圖標可以迅速流行起來並發展成為UI的重要組成部分,直到如今更是如此 – 圖標能給UI帶來圖形化的愉悅性,當我們設計的正確的時候,它們不僅能清晰的傳達信息,而且能給界面帶來個性與氣質。

    很多時候,一個簡單的圖標可以代替一段很長的描述性文字 – 對於手機甚至是手錶這樣的小屏設備來說,這樣的特性無疑是非常有用的。不過這裡也存在着設計上的陷阱 – 我們同樣知道,如今很多圖標在表意上其實是難以做到清晰準確的,它們需要人們思考,會提升體驗過程中的認知負荷。如果無法快速而準確的傳達信息,特別是對於移動設備而言 – 界面再漂亮,動效再炫酷,又有什麼用呢?

    其實原則很簡單:只有當圖標能夠100%準確清晰的表達含義時,才去使用。別妥協。

    說到表意模糊的圖標,我想起最近在Twitter上看到的一張圖片。看看作者對這些圖標的神吐槽:

    淺談有哪些因素容易影響圖標的易用性

    我們總會聽到(或說出)這樣的話:“人們每天都會用我們的軟件,他們很快就能理解並記住這些圖標的含義”。不能說沒道理,但我有時還是懷疑這種看法的準確性。我自己每天都會多次用到Mac上的郵件應用,但每次我要寫郵件的時候仍然會對那兩個圖標產生片刻的遲疑:

    淺談有哪些因素容易影響圖標的易用性

    另外還有個壞消息:用戶通常會下意識的迴避掉那些他們無法即刻理解的界面元素 – 對未知事物的不信任,這是我們的天性。我猜Google在決定將其他app隱藏到一個表意模糊的圖標後面之後,客服會收到不少類似的詢問:“我的Google日曆跑哪去了?”

    淺談有哪些因素容易影響圖標的易用性

    經過重設計之後的Twitter,很多新用戶無法快速了解他們在界面當中應當做些什麼 – 應該是發推,但是從哪裡開始?是那個藍色的圖標嗎?它是什麼意思,羽毛代表着一根筆嗎?

    淺談有哪些因素容易影響圖標的易用性

    再次改版后的Twitter增加了置頂的編輯框,使事情變得明了了很多:

    淺談有哪些因素容易影響圖標的易用性

    另外,你知道你可以在Instagram里直接向好友發送圖片信息嗎?這個功能就藏在右上角的那個圖標里:

    淺談有哪些因素容易影響圖標的易用性

    作為Instagram的用戶,你曾以這個圖標為入口使用過這個功能沒?這個圖標能讓你預期到這樣的功能嗎?對我來說,不能。

    界面的上下文環境也是我們在設計圖標時必須考慮到的重要因素,很多看上去含義清晰的圖標在某些界面環境下很可能產生歧義。打開網頁端的Gmail,你會看到這樣的例子 – 看到那兩個非常相似的圖標沒?它們出現在同一個界面中,卻有着非常不同的含義:

    淺談有哪些因素容易影響圖標的易用性

    這兩個圖標對於各自所代表的功能其實都算恰當,一個是返回,一個是回復,但這個界面環境卻使它們產生了潛在的衝突;雖然特定的布局方式可以在一定程度上起到引導提示的作用,但問題仍然存在。

    再舉個正面的例子,Tweetbot當中的圖標雖然對有些人來說表意不夠清晰,但在“Twitter應用”這個大的環境下,多數目標用戶 – Twitter的用戶是可以理解的,因為這些圖標的用法與Twitter是保持一致的,這還算OK:

    淺談有哪些因素容易影響圖標的易用性

    iOS上的Tumblr也是類似,你不能說這些圖標在所有情況下都是清晰明確的,但放在Tumblr這個app的環境當中,就可以比較準確的表達含義:

    淺談有哪些因素容易影響圖標的易用性
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    很多圖標只有在音樂app這個特定的產品類型當中才能表達出準確的含義:

    淺談有哪些因素容易影響圖標的易用性
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    不過上圖Mac版的Rdio當中,同一界面里兩個地方使用了相同的擴音器圖標,一個表示音量調節功能,一個表示當前播放的歌曲。

    所以,說到這裡我還是要重複一下:除非確定圖標形式可以在當前界面環境中100%準確的表達含義,否則不要去用它。如果作為設計師,你都會產生片刻的遲疑,那麼就幹掉它好了 – 使用最簡單的文字來替代,這是最清晰的表達方式。

    當然,圖形化的表達方式所具有的優點同樣不可忽視,所以我們不妨在空間允許的情況下將圖標與文字結合起來,同時利用兩者的優點。

    iOS默認的tab欄,以及蘋果的很多其他產品當中都在使用着這樣的模式,例如Mac上的App Store導航欄。這些圖標單獨拿出來的話未必能準確的表達含義,但搭配文字之後就清晰多了:

    淺談有哪些因素容易影響圖標的易用性

    再比如網頁版Twitter的導航:

    淺談有哪些因素容易影響圖標的易用性

    另外一個盡人皆知的例子,就是Facebook在某輪改版中幹掉了“經典”的漢堡包菜單,回歸到最傳統的iOS tab欄模式:

    淺談有哪些因素容易影響圖標的易用性

    小結

    希望本文能讓大家了解到,作為最基本也是最廣泛運用的設計元素,圖標——在很多時候其實會對界面的清晰性易用性產生負面影響。作為設計師,務必留意我們所習慣的圖標使用方式,並儘可能的多測試。最後再絮叨一遍:不要使用那些難以清晰表意的圖標;嘗試使用更準確的文字標籤,或將兩者結合使用。

    看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 淺談有哪些因素容易影響圖標的易用性 這教學會喜歡

    文章標題: 骨子愛創意- 淺談有哪些因素容易影響圖標的易用性–轉載請註明來源處

    本教學分類為平面理論教程中的 其他教程相關教學

    文章相關關鍵字為: 圖標,影響,容易,哪些,因素,清晰,使用,我們,界面,準確,

    本文永久連結 :淺談有哪些因素容易影響圖標的易用性

    本文轉載自 :VIA