雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關于 服務 案例
首頁 案例 服務 關于 face+

著名ui設計公司都不能夠錯過的技巧有什么?共同來掌握

Time: 2020-04-23

著名ui設計公司都不能夠錯過的技巧有什么?對于這個問題,想必很多的朋友們都非常的感興趣吧,畢竟掌握了相關的技巧,便可以讓我們的設計更加的成功,下面就一起來看看下面的內容吧。

  1、ui設計中的一致性原則

  設計目標一致

  軟件中往往存在多個組成部分(組件、元素),不同組成部分之間的交互設計目標需要一致。

  例如:如果以電腦操作初級用戶作為目標用戶,以簡化界面邏輯為設計目標,那么該目標需要貫徹軟件(軟件包)整體,而不是局部。

  元素外觀一致

  交互元素的外觀往往影響用戶的交互效果。同一個(類)軟件采用一致風格的外觀,對于保持用戶焦點,改進交互效果有很大幫助。遺憾的是如何確認元素外觀一致沒有特別統(tǒng)一的衡量方法。因此需要對目標用戶進行調查取得反饋。

  交互行為一致

  在交互模型中,不同類型的元素用戶觸發(fā)其對應的行為事件后,其交互行為需要一致。

  例如:所有需要用戶確認操作的對話框都至少包含確認和放棄兩個按鈕。

  對于交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是我們可以看到這個理念雖然在大部分情況下正確,但是的確有相反的例子證明不按照這個理念設計,會更加簡化用戶操作流程。

著名ui設計公司

  著名ui設計公司

  2、著名ui設計公司都不能夠錯過的技巧有什么?

  1. 按鈕色彩凸顯重要性

  在給用戶提供多個選擇的時候,可以通過色彩所傳遞的情緒是積極還是消極的,來簡單快速地進行設計。

  實際上,紅色和綠色按鈕的色彩含義,已經(jīng)橫跨物理世界和數(shù)字設計領域,我們每天在很多實體產品上也能看到類似的設計,包括交通上的紅綠燈,警告標識,以及實體按鈕。

  綠色表示通行,紅色表示禁止。如果用戶需要購買一個漏斗,你希望感興趣的用戶趕緊點擊,而不是取消。

  另外,如果你的網(wǎng)站或者 APP 涉及到重要性不同的若干交互,除了按鈕都要標識出相應的文本標簽內容以外,還可以借助色彩填充與否來進一步區(qū)分層級結構:

  這是一個簡單的示例,有色彩填充的按鈕、幽靈按鈕(無色彩填充、有邊框)以及無邊框無填充按鈕來區(qū)分。

  而在少數(shù)情況下,對于系統(tǒng)有重要影響的、破壞性的或者限制性的按鈕,也應該突出顯示,但是可以使用紅色來進行強調和警告。這個時候,相對的「非負面」的按鈕則被視作為重要性較低的操作:

  簡而言之,實際上用戶用來區(qū)分按鈕的核心靠的是感知而非復雜邏輯判斷,ui設計的基本規(guī)則在上面,但是更重要的是要基于情緒和感知來進行設計。

  2. 用字重和明暗來區(qū)分層級

  尤其是在構建文本內容的視覺層級的時候,可用到的屬性很多,只使用大小差異來構建就顯得過于單一了。

  在很多時候,可以借助色彩、字重、明暗來進行區(qū)分。我們可以讓更重要的文本更大、字體更粗、色彩更加鮮明,或者使用更深的黑色來呈現(xiàn)。

  3. 用留白來隔離元素

  兩個元素互不相關,如果想將它們分隔開來,使用分割線似乎是一件理所當然的事情?當然可以,但是這種方式真的是非常過時且笨拙的一種呈現(xiàn)方式。你需要的是更好、更優(yōu)雅、更貼合當下的一種呈現(xiàn)方式。

  不是簡單地使用分割線,而是使用留白,或者說負空間來間隔就可以了。分割線在很大程度上是丑陋且難以駕馭的視覺噪音,相對而言留白則好了很多。

  多數(shù)情況下,刪除分隔線條是比較快速的方法,當然更多的時候需要你適當?shù)卣{整一下留白的大小。

  使用分割線來分隔內容,不僅會讓掃視頁面花費更長的時間,而且增加的信息噪音會影響整體的層次結構。

  4. 用陰影替代邊框

  想要凸顯一些元素,并不一定需要依靠描邊。使用陰影則可以起到同樣的效果,單獨使用則會顯得更加整潔。描邊+陰影則會顯得過于雜亂。

  使用相對不那么具有侵略性的小陰影無疑讓效果更加輕松,看起來也不會突兀。

  5. 用色條提升視覺調性

  如果覺得內容區(qū)塊過于單調,可以根據(jù)你的目的來強化這一區(qū)塊的視覺屬性。在內容區(qū)的一邊加上色條能夠在提升視覺屬性的同時,賦予這一區(qū)塊內容以情緒。

  色條可以是單色的,也可以是漸變的,這取決于你想傳達什么樣的視覺體驗。這個色條還可以具備良好的功能性。當然,這很大程度是用在相對比較素的頁面上的,如果頁面本身已經(jīng)很花哨了,就不太用得上。

  比如使用紅色和綠色來標識不同的狀態(tài),也可以用色條來標識出被觸發(fā)的 Tab 或者控件。

著名ui設計公司

  著名ui設計公司

  6. 用背景色區(qū)分區(qū)塊

  其實,同樣是為了進行區(qū)分內容區(qū)塊和層級,這個方法同樣優(yōu)雅而快速,幾乎可以算是毫不費力的一種設計技巧。

  為了區(qū)分兩個不同區(qū)塊的元素,簡單地使用不同的背景來進行區(qū)分也可以,本質上,它采用的類似卡片式設計的思路——用不同的卡片來歸類內容。

  相對而言,使用有差異但是不那么顯著的不同色塊來作為背景,在保證整體整潔的同時,起到了區(qū)分的作用。

  7. 「字」盡其用

  誰不喜歡漂亮的字體呢?當然都喜歡,但是字體的功用其實各不相同。從呈現(xiàn)正文的強可讀性文本,到裝飾性極強的視覺化字體,各種不同的字體需要應對不同的功能。

  著名ui設計公司都不能夠錯過的技巧有什么?針對這個問題,我們已經(jīng)在上文為大家進行了全面的解答,是不是非常的清楚呢?希望大家可以參考上面的內容并運用到自己的設計中。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務 | 關于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開