您現在的位置是:電腦技術吧?>? 基礎知識 ??>??設計師的基本要求,平面設計的基本原則??>??正文詳情

設計師的基本要求,平面設計的基本原則

和谷蕊2019-11-18 05:00:36 人圍觀
簡介可持續發展原則對設計師的要求基于Joshua Porter總結的優秀UI設計原則,tiah重新編排并添加了圖形解釋,以便于理解kuyou清晰的界面是UI設計的第一步。要讓用戶喜歡你的用戶界室內設計的

tiah在Joshua Porter總結出來的優秀的UI設計原則基礎上,進行了重新整理并增加圖文解說,以便于酷友理解。

  界面清晰最重要

  界面清晰是UI設計的第一步,要想讓用戶喜歡你設計的UI,首先必須讓用戶認可它、知道怎么樣使用它。

讓用戶在使用時預期會發生什么,并方便地與它交互。

  ▲ 正確示范|界面沒有任何的操作提示,用戶就明白通過左右滑動屏幕來查看更多卡片,還知道卡片是以扇形為運動軌跡。

  全力維護用戶的注意力

  在閱讀的時候,總是會有事物分散我們的注意力。

因此,在設計界面的時候,能夠吸引用戶的注意力很關鍵,千萬不要將界面的周圍設計得亂七八糟。

  ▲ 正確示范|干凈簡潔的界面可以讓用戶更加沉浸在閱讀的世界里。

  讓界面處于用戶的掌控之中

  人類往往對能夠掌控自己和周圍的環境感到舒服,不考慮用戶感受的設計往往會讓這種舒適感消失。

保證界面處于用戶的掌控之中,讓用戶自己感受主動權。

  ▲ 錯誤示范|用戶不知道如何查看很多的卡片,除了查看第一張卡片的詳情,其他的卡片脫離了用戶的掌控。

  直接操作的感覺最棒

  當能夠直接操作物體時,用戶的感覺是最棒的。

在設計界面時,我們增加的圖標往往并不是必需的,比如我們過多的使用按鈕、選項等等其他繁瑣的東西僅僅是為了填滿界面,這些都是畫蛇添足。

  ▲ 正確示范|圖標的作用是以圖形化的視覺形象給用戶快速引導,如果只是裝飾,就不如不要。

  每個屏幕只提供一個操作主題

  我們設計的每一個畫面都應該有單一的主題,這樣不僅能夠讓用戶使用到它真正的價值,也使得上手容易,使用起來也更方便。

如果一個屏幕支持兩個或兩個以上的主題,立馬會讓整個界面看起來混亂不堪。

  ▲ 錯誤示范|這個界面是讓用戶輸入登錄,卻將注冊放在與登錄同等重要的位置,干擾用戶操作,會導致操作錯誤。

比較好的做法是,將注冊放在右下或登錄按鈕下方。

  界面過渡自然

  界面的交互都是關聯的,所以要認真地考慮到下一步的交互是怎樣的,并且通過設計將其實現。

當用戶已經完成該做的步驟,不要讓他們不知所措,給他們自然而然繼續下去的方法,以達成目的。

  ▲ 正確示范|界面的交互非常清晰,點擊向下展開,再次點擊向上收起。

  表里如一

  如果它看上去像個按鈕,那么它就應該具備按鈕的功能。

設計師不應該在基本的交互問題上耍小聰明,要在更高層次的問題上發揮創造力。

  ▲ 錯誤示范|界面非常漂亮,但登錄被弱化,并且表現形式雷同輸入的提示文字,用戶不易察覺。

  區別對待一致性

  如果屏幕元素各自的功能不同,那么它們的外觀也理應不同。

反之,如果功能相同或相近,那么它們看起來就應該是一樣的。

  ▲ 正確示范|元素排版整齊且統一,功能清晰明了。

  強烈的視覺層次感

  強烈的視覺層次感是通過界面上視覺元素提供的清晰瀏覽順序來實現的,也就是說,用戶每次都能按照同一個順序瀏覽同一些元素。

弱化的視覺層次沒有給用戶提供如何瀏覽的線索,用戶會感到困惑和混亂。

當一切都是粗體時,就沒有主次之分了。

  ▲ 正確示范|界面以用戶的閱讀習慣將層次拉開,從左到右,從上到下,元素之間互不干擾。

  恰當的組織UI能夠降低認知難度

  正如John Maeda在他的書中所說,對屏幕元素的恰當組織能夠使頁面顯得簡潔,這能夠幫助用戶更容易并且更快地理解你的界面。

  ▲ 正確示范|將零散的元素進行組合,并以生活中常見的物品展示,用戶更易理解。

  顏色不是決定性因素

  物體的顏色會隨著光線的變化而變化,顏色是一個變化的性質,不應該在界面上起決定性作用。

它可以用于提醒,但是不應該是唯一的區分元素。

  ▲ 正確示范|通過鮮艷的色彩來提醒需要用戶關注的內容,但是tiah不太認同顏色不能作為唯一的區分的觀點,現在有很多天氣、記事、時鐘類APP極簡的設計,常常采用色彩進行區分也非常贊。

  漸進展示

  在每個屏幕上只顯示必要的內容,如果用戶在做選擇,那么給他們顯示足夠的信息,然后在各自的頁面上展示詳情,避免在某個界面過度展示所有細節。

  ▲ 正確示范|用戶只單純地想播放音樂,所以列表頁只需要當前播放狀態、演唱者、專輯名和歌曲名,無需太多的信息。

  零狀態的界面

  第一次訪問界面是最重要的,但經常被設計者忽視。

為了幫助用戶適應,應該提供啟動的方向和引導。

  ▲ 正確示范|零狀態結果本身對用戶體驗極其不好,更需要情感化或引導性的設計來降低用戶焦躁的情緒。

  優秀的設計是無形的

  優秀的設計是沒有痕跡的,如果設計是成功的,那么用戶可以只關注自己的目的,而不是界面,不依賴于界面。

  ▲ 正確示范|要想做到這點非常不易,tiah認為Yo做到了。

  界面是被人使用的

  只有用戶使用你設計的界面時,才是成功的。

如果一件衣服很漂亮,但是穿起來不舒服,那么設計是失敗的。

  ▲ 錯誤示范|視覺效果非常好,但是用戶體驗上非常糟糕,當前狀態與主界面關聯太弱,弧形軌跡閱讀太累。

版權聲明:本文由 和谷蕊 整理編輯。

原標題:平面設計4大原則,設計師的原則

轉載注明出處:http://www.dn9ww09s.icu/basics/13396.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • win7update需要更新嗎,window7配置update失敗

    win7update需要更新嗎,window7配置update失敗 相關圖片win7還原更改怎么跳過當我們使用win7時,電腦右下角經常會有關于windows更新的提示,強迫癥很煩人。windows更新意味著什么?我能把它關掉嗎?在Windows 7中win7配置更新100%不動...

  • word進去安全模式,word進入安全模式怎么辦

    word進去安全模式,word進入安全模式怎么辦 相關圖片word2003安全模式近日,不少word用戶和朋友反映,打開word后,系統出現word問題,需要關閉。對于給您帶來的不便,我們深表歉意。暗示。那么,文字安全模式有什么影響呢?文字安word文...

  • c證有什么用,怎么用c

    c證有什么用,怎么用c 相關圖片2cUse. Netversion 1 | 2 | 3 | 3.5 to create console applications in any version ofc ...

  • runtime error怎么修復,游戲 runtime error

    runtime error怎么修復,游戲 runtime error 相關圖片軟件出現runtime error我相信我的許多朋友在使用計算機時都遇到了運行時錯誤對話框的提示。你知道如何解決運行時錯誤嗎?什么是運行時錯誤?下一個,超級電腦出現runtimeerror...

  • vs代碼提示功能設置,editplus代碼提示功能

    vs代碼提示功能設置,editplus代碼提示功能 相關圖片pycharm代碼提示功能使用像Dreamweaver這樣的可視化ide工具編程的最大好處之一是它的代碼提示功能。只要輸入幾個字符,IDE工具就會智能地為您提供一系列可選的函數或變量,輸vba代碼提...

  • 電腦拍大師使用教程,手機版拍大師怎么用

    電腦拍大師使用教程,手機版拍大師怎么用 相關圖片拍大師使用教程視頻《攝影大師》是艾派旗下一款簡單而強大的視頻創作軟件。用戶可以使用master photograph創建動態相冊、創意視頻、GIF聊天表情等。那么,如何使用mas拍大師轉場怎么用...

  • cad如何繪制虛線,word畫虛線

    cad如何繪制虛線,word畫虛線 相關圖片畫虛線煙花中有虛線:三虛線、粗虛線、雙虛線、基本虛線、實虛線和虛線在網頁設計中,我通常使用真正的邊虛線。因為它類似于CSS中的停靠和虛線兩個參數。制作網頁時,不需要虛...

  • cue文件怎么用,cue文件

    cue文件怎么用,cue文件 相關圖片cue文件怎么播放提示文件是計算機中不常見的文件格式。因此,有許多小朋友不知道如何編輯提示文件和如何打開提示文件。現在,超人軟件將為您帶來提示文件的相關內容。希望你喜...

  • 手機瀏覽器兼容模式,瀏覽器模式

    手機瀏覽器兼容模式,瀏覽器模式 相關圖片百度瀏覽器怎么設置兼容模式有時由于瀏覽器的問題,我們在IE7中開發的東西需要在IE9中顯示,但是會有兼容性問題。然后,我們可以使用相同的技術強制客戶端瀏覽器以IE7文檔模式顯...

  • 完美解碼怎么用,完美解碼有什么用

    完美解碼怎么用,完美解碼有什么用 相關圖片專用播放器完美解碼是一個功能強大的回放工具。它支持主流視頻格式的回放。可以說是專門為播放高清而設計的。完美的解碼,你幾乎不需要其他玩家。那么,如何使用完美的解碼呢...

熱評文章

  • 完美解碼播放器手機版,播放器播放器

    完美解碼播放器手機版,播放器播放器 相關圖片完美解碼播放設置完美解碼播放器的一個特點是其強大的解碼能力和自己定制的解碼模式。那么,如何設置完美解碼播放器的解碼模式呢?一。解碼方案設置步驟:1。退出完美解碼播放...

  • 圖形元件,怎樣創建圖形元件

    圖形元件,怎樣創建圖形元件 相關圖片圖形元件的作用同步或不同步嵌套在圖形組件中的動畫與主時間線。在面板中選擇“同步”選項。應用修補動畫時,同步可見。選擇關鍵幀以在屬性面板中找到同步選項,這意味著嵌套...

  • 下劃線怎么用鍵盤打出來,如何用鍵盤輸入下劃線

    下劃線怎么用鍵盤打出來,如何用鍵盤輸入下劃線 相關圖片下橫線用鍵盤怎么打一定有很多朋友在使用WPS的過程中,遇到過需要下劃線的地方。那么我們如何使用鍵盤來輸入WPS下劃線呢?如果不顯示下劃線,我們該怎么辦?讓我們跟隨超人軟件...

  • win10如何深度清理c盤,win10刪除c盤無用文件

    win10如何深度清理c盤,win10刪除c盤無用文件 相關圖片c盤local可以刪嗎我相信許多使用win7的小伙伴在打開C磁盤后發現了一個名為perflags的額外文件夾。那么perflags是什么樣的文件夾呢?性能可以刪除嗎?接下來,跟隨超人win10搜不到wifi列表...

  • 怎么從事動畫,高級動畫

    怎么從事動畫,高級動畫 相關圖片C4D 復雜模型動畫目前,CSS3已經得到了廣泛的應用,其中一個重要的成員就是CSS3動畫。而且,隨著CSS動畫的逐步深入和普及,越來越復雜和細膩的動畫場景也層出不窮。比如,上個月J...

  • hkcmd是什么進程,wuauclt是什么進程

    hkcmd是什么進程,wuauclt是什么進程 相關圖片電腦結束進程快捷鍵是什么最近,許多小型合作伙伴報告說,他們在打開任務管理器后發現了一個名為hkcmd.exe的進程,但他們不知道hkcmd.exe是什么進程。可以關閉hkcmd.exe電腦強制結束進...

  • 怎樣制作幻燈片的效果,幻燈片制作

    怎樣制作幻燈片的效果,幻燈片制作 相關圖片ppt制作動畫效果作為一個不懂代碼的業余網頁制作人,他經常羨慕一些由專業程序員在瀏覽器中編譯的酷多媒體作品。唉,學習這個程序可不是一天的工作。它需要良好的邏輯思維能力...

  • 怎么切換輸入法,怎么設置輸入法

    怎么切換輸入法,怎么設置輸入法 相關圖片切換輸入法相信不會切換輸入法的用戶不在少數。如果輸入法不能關閉怎么辦?怎么解決?在這種情況下,可以轉到控制面板-區域和語言選項-語言-清除信息-以設置默認輸入語言搜狗輸...

  • displayflex,display flex什么意思

    displayflex,display flex什么意思 相關圖片display在過去的兩天里,我一直在做手機項目,并使用CSS3的新特性。還不是所有瀏覽器都支持它,所以請使用前綴。請參見以下:HTML代碼:div clas s=s-indcssdisplayflex...

  • 2003word字數統計在哪,doc文檔字數統計在哪里

    2003word字數統計在哪,doc文檔字數統計在哪里 相關圖片word技術在哪里當我們用word寫文章時,單詞計數的功能特別實用。當我們遇到需要字數的字操作時,這個小小的字功能可以省去我們很多的心血。但很多人不知道count這個詞在哪里,電腦...

關注微信

变脸官网查询