• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析UI設計中的隱形元素使用技巧




    詳細解析UI設計中的隱形元素使用技巧

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是SDC番茄匠,感謝SDC番茄匠提供設計理論的實作教學。

    教學大綱:

    一個隱形且流暢提供給訪客交互體驗的界面,可以更高效的讓訪客的注意力集中在產品的核心功能上,並且可以引導訪客逐步走向產品的最終目標。


    設計理論教學開始

    一個隱形且流暢提供給訪客交互體驗的界面,可以更高效的讓訪客的注意力集中在產品的核心功能上,並且可以引導訪客逐步走向產品的最終目標。

    很多有經驗的設計師都在提倡這樣一個設計理念:一個真正設計精良的UI應該讓用戶察覺不到它的存在。但事實呢?恰恰相反,很多同學設計的UI經常會強迫用戶們去注意花哨的界面,而不是你要傳達給用戶的有效內容。用戶登陸某個網頁大都有明確的目標,比如說他想買一本新書、想上網學習jQuery技術、想上網去把個妹、追個男神、或者僅僅想和朋友們分享一篇美文等等。

    這個時候,用戶大不會去花時間觀賞你耗盡心思的界面。事實上,用戶根本不在乎你的交互界面設計!呃,很早以前,最初的網頁設計缺少新鮮的交互技術,所以後來設計者們為了讓網頁變的更好,經常想加入一些交互:但是,親愛的同學們,你做個換位思考,或者去觀察一下身邊的小網齡用戶,他們真的在乎這些花哨的東西么?

    近幾年來,網頁設計者們經常花幾百個小時去考慮按鍵的顏色是否好看、是否要加一些陰影使得更加美觀、頁邊距大小是否合適或者是否應用漸變等讓UI變的更加漂亮實用等。但是,真正精良的UI設計不應該是好看,而應該是隱形的!

    詳細解析UI設計中的隱形元素使用技巧

    移動終端在人們的生活中日益重要。多點觸控移動設備的出現讓人們意識到UI是一系列的通過點擊和排序來控制的內容,允許更加人性化、更加自然的人機交互。這些自然用戶界面(Natural User Interfaces, NUI)更加“自然”的原因有很多,最重要的是,NUI可以讓用戶對內容直接操作且它的桌面毫不花俏,用戶會發現設備的使用變的超級簡單,因為UI幾乎不可見了。

    但是我們仍然需要對着我們的台式機或者筆記本工作,我們仍然需要瀏覽網頁和使用網頁APP,而這些東西很少可以做到像手持移動設備那樣應用多點觸控及自然用戶界面。那麼,是否因為這些阻礙我們就要延續老一套的界面組成么?答案是否定的!隱形UI的設計理念,是我們每一個UI設計師或開發者應該想要達到的目標。

    是用戶界面,而不是障礙

    詳細解析UI設計中的隱形元素使用技巧

    用戶界面永遠不應該成為阻擋用戶查看內容或者達成目標的障礙;用戶也不該必須跳過UI陷阱或者亂七八糟的導航之後才能到達自己的目標。過去的幾年裡我們經常使用一些我們認為可以給用戶帶來便捷的UI,但實際上,這些UI卻給用戶帶來了更大負擔,Breadcrumb(用來表明用戶所處位置的UI導航)就是個很好的例子。我們可能覺得Breadcrumb是一個非常好的導航方式,但實際上,它僅僅是累贅的UI組件,在設計合理的用戶體驗中沒有存在的必要。

    雖然Breadcrumb並不直接帶給用戶負擔,但是她佔用了屏幕的空間,而這些空間,原本應該用來顯示一些和用戶目標相關的內容。我們解決UI的問題經常通過增加新的組件,但是過於冗雜的組件勢必造成瀏覽障礙。那麼,怎樣才能做到增加了許多UI組件,然而你的UI看上去卻像是隱形的呢?

    解決問題

    詳細解析UI設計中的隱形元素使用技巧

    建立隱形的UI意味着你要從根本上解決問題,你需要知道到底問題出在什麼地方。我們做網站或者APPs也會經常碰到問題,但是我們往往從表面上給出一些解決方案,而並沒有從本質上考慮問題的發生。就像我們為了止疼吃布洛芬,但這不能改變疼痛的本質一樣。

    一般情況下,“吃止疼葯”變成了我們當下的最佳策略,因為我們已經學會了如何與項目經理、網站擁有者、股東等做鬥爭,而且,也有很多時候可能是因為設計師們時間不夠或者僅僅是因為懶惰而不想去做。我們經常會做一些用戶體驗,然後說:“嗯,我知道這裡面有些小問題,但是我們讓用戶看看是否這些問題真的是問題吧。”很明顯,用上面的態度去做UI是不能做出隱形UI的。做一個完全隱形的UI意味着你必須要解決深層次的設計問題和用戶體驗,只有這樣才能使得UI不會變成對用戶的障礙。

    寬容的設計

    詳細解析UI設計中的隱形元素使用技巧

    隱形的UI要歸功於它設計的非常有包容性,自然用戶界面更加開放,而且不易出錯,或者在用戶出錯的時候,能給用戶以明確的方向指引。

    這幾年不是流行一句交互金句么?操作前可預知、操作中有反饋、操作后可撤銷!

    寬容指的是當用戶受困的時候(fall into a trap),設計者給予用戶的不是告訴用戶出錯了。實際上,當用戶沒有明確的目標時更容易誤操作,而此時UI會顯示給他們大大的警告和出錯提示。而一個隱形的UI設計絕對不會顯示上面的東西。良好設計的UI會預先判斷用戶出錯發生率高的地方,並在這些地方提供給用戶解決出錯的辦法或者引導用戶讓他們避免陷入trap。

    寬容還表示網頁或者APPs允許用戶對它們出錯。因為用戶出錯之後,他們會從自己的錯誤中學到更多的東西,當然,他們出錯的時候,肯定不能給他們一個大大的紅色叉號或者繁雜的讓人摸不着頭腦的文字。(這種壓迫感和腥紅的色彩他們早在現實中就受夠了)

    目標第一

    詳細解析UI設計中的隱形元素使用技巧

    上圖的交互設計(Cooper building block)實際上非常簡便,但是似乎這種設計我們平時並不多見,所以我覺得它——以目標為導向的設計——值得一提。UI設計應該圍繞用戶的目標,設計者應該挖掘用戶的需求,並能通過引導來完成或迎合用戶的需求。用戶對他們想通過什麼方式達到自己的目標很有主見,但是對他們對需要什麼卻沒有任何想法。所以,UI設計師的工作應該是找到用戶的需要而不是提供給他們某種方式。

    找到目標並且允許用戶快速的達成他們的目標將是最好的用戶體驗,因而你也根本沒有必要設計一個非常華麗的界面去吸引用戶的眼球。不要用華麗的UI設計作為對目標不夠明確的彌補。

    真正的一致

    詳細解析UI設計中的隱形元素使用技巧

    在UX的世界中,我們談論一致性顯得理所當然。實際上一致性在UI設計中也非常重要。如果你的UI組件都在同一個地方,具有相同的顏色和功能,那麼你的UI設計將會隨着時間的推移慢慢的從人們的眼球中消失…有點像Marty McFly。但是,僅僅把功能按鈕放在每一頁的相同的地方或者在整個應用中使用特定的動作來對應相同的東西可能並不能解決連續性的問題。

    另外,我們在UX設計經常傾向於應用來源於其它APPs或者網頁的那些和我們的設計相通的東西來裝扮我們自己的APP。我曾經寫過一篇文章來闡釋相類似的環境能夠讓界面顯得更加舒適。但是當我們致力於設計一個隱形的UI時,僅僅一致並不足夠。我們要的是真正的一致!這就意味着不僅僅是組成、價值、鏈接以及數據等在APP中的一致,它們應該在上下文內容中也要一致。

    例如,你可能注意到很多APP中,登陸按鈕一般都會在右上角,因此你會自然而然的認為其他APP的登錄按鈕應該也會出現在那個位置,這想法沒錯。但是,這種布局可能在你的APP中不太合適。那麼,你就不必要這麼做,你要按照自己APP的布局,將組件放在適合於你APP中的地方,並讓它們在你的APP中保持高度的一致性。

    總結:激發用戶

    最後,一個真正設計精良的隱形的UI要能夠做到激發用戶。當UI能夠引導用戶直接進入他們想要的,用戶在使用APP時能將精力集中在他們的目標上面。

    界面應該提供數據和內容的無縫交互,這能夠激發用戶建立與APP更好的關係。用戶固然喜歡擺弄一個聰明的UI,但是隱形的UI設計更容易脫穎而出。

    — —

    文章永久連結為: 詳細解析UI設計中的隱形元素使用技巧