国产成在线人视频免费视频-国产成综合-国产床上视频-国产大臿蕉香蕉大视频女-国产大尺度pr社18福利在线

首頁

UX設計之概念設計

lanlanwork 設計思維

一、概念設計的關(guān)鍵組成部分:

1. 問題定義

識別并描述設計旨在解決的核心問題或挑戰(zhàn)。這應包括用戶研究的洞察、業(yè)務目標以及明確的設計目標。

例子:如果你在設計一個健康應用,首先要定義用戶面臨的主要問題,比如“用戶如何跟蹤自己的飲食習慣?”這個定義要包括用戶的痛點、業(yè)務目標以及希望達到的設計效果。

2. 用戶角色和場景

開發(fā)代表性的用戶角色,提供人口統(tǒng)計和行為信息,以幫助理解目標用戶的需求、動機和目標。然后創(chuàng)建場景,說明用戶在各種背景下如何與提出的解決方案進行交互。

例子:創(chuàng)建一個典型的用戶角色,比如“忙碌的職場人士張先生”,他需要一個簡單的方法來記錄每日飲水量。然后,設計場景來展示張先生如何在一天中使用應用記錄水量,并根據(jù)不同的使用情況設計交互界面。

3. 信息架構(gòu)

定義產(chǎn)品或服務的高層結(jié)構(gòu),組織內(nèi)容和功能,使用戶易于理解和導航。這有助于確保信息在整個體驗中清晰且一致地呈現(xiàn)

例子:如果你的產(chǎn)品是一個在線購物網(wǎng)站,信息架構(gòu)包括如何組織產(chǎn)品類別、搜索功能、購物車和結(jié)賬流程,確保用戶能夠輕松找到他們想要的商品并完成購買。

4. 草圖和線框圖

創(chuàng)建粗略的草圖或線框圖,以可視化用戶界面的關(guān)鍵方面,并探索各種設計備選方案。這些早期原型有助于識別潛在問題,并指導未來的設計決策。

例子:在設計一個新的社交媒體平臺時,你可以畫出基本的頁面布局草圖,比如首頁、用戶個人資料頁和消息頁面。這些草圖幫助你快速測試不同的布局方案,并發(fā)現(xiàn)可能的問題。

5. 設計原則和指南

建立一套高層次的原則和指南,這些將塑造設計并作為進一步開發(fā)的基礎。這可能包括美學和功能性標準,以及確保可訪問性和可用性。

例子:制定設計原則,如“簡潔優(yōu)先”,確保每個頁面都盡量減少視覺雜亂。也要考慮用戶可訪問性,如確保文本和按鈕對色盲用戶也友好。

6. 迭代

不斷地細化和迭代初步概念,利用用戶測試和利益相關(guān)者反饋來做出有依據(jù)的設計調(diào)整。這種迭代方法允許項目在進展過程中保持靈活性和適應性。

例子:你設計了一個新的界面,但在用戶測試中發(fā)現(xiàn)他們難以找到“設置”按鈕。你可以根據(jù)反饋修改設計,調(diào)整按鈕位置,然后再次測試,直到大多數(shù)用戶都能順利使用。

概念設計的目標是創(chuàng)建一個連貫且引人入勝的愿景,滿足用戶需求并與業(yè)務目標對齊。通過投入時間和精力于這一基礎階段,設計師可以為成功且愉快的用戶體驗奠定基礎。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計、交互設計、UI咨詢高端網(wǎng)站設計平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

UI 設計之色彩三色搭配原則:打造和諧視覺體驗

lanlanwork 設計思維

WechatIMG47.png

三色搭配原則的核心概念?
 
三色搭配原則,即選取三種色彩進行組合搭配,通過合理控制色彩的比例與層次,實現(xiàn)界面的視覺平衡與和諧。這三種顏色通常包括主色、輔助色和強調(diào)色。主色在界面中占據(jù)主導地位,決定整體風格基調(diào),使用面積約占 60%;輔助色用于襯托主色,豐富色彩層次,使用面積約占 30%;強調(diào)色則用于突出關(guān)鍵信息或功能,面積最小,約占 10% 。這種比例分配能確保色彩主次分明,既不過于單調(diào),又不會因色彩繁雜而顯得混亂。?
 
主色:奠定風格基調(diào)?
 
主色是 UI 設計的靈魂,它直接影響用戶對產(chǎn)品的第一印象和整體感受。選擇主色時,需緊密結(jié)合產(chǎn)品的定位與目標受眾。例如,社交類 APP 通常選用溫暖、活潑的色彩,如粉色、橙色,營造輕松、友好的氛圍,促進用戶互動;而金融類 APP 則多采用藍色、灰色等冷色調(diào),傳遞專業(yè)、可靠的感覺,增強用戶信任感。以某知名旅游 APP 為例,其主色選用清新的藍色,如同天空與大海的顏色,傳遞出自由、探索的意象,契合旅游產(chǎn)品的特性,讓用戶在打開 APP 的瞬間,便能感受到旅行的愜意與期待 。?
 
輔助色:豐富色彩層次?
 
輔助色的作用是輔助主色,使界面色彩更加豐富飽滿。它通常選擇與主色相近或互補的顏色。相近色搭配能營造出和諧、柔和的視覺效果,讓界面顯得統(tǒng)一且舒適,比如主色為藍色時,輔助色可選用淺藍色、藍綠色等;互補色搭配則能產(chǎn)生強烈的視覺對比,增加界面的活力與吸引力,如藍色與黃色搭配,能快速抓住用戶眼球 。在一款美食 APP 中,主色為橙色,激發(fā)用戶食欲,輔助色選擇淡黃色,既豐富了色彩層次,又保持了整體溫暖、誘人的氛圍,使用戶在瀏覽美食圖片時,視覺體驗更加愉悅 。?
 
強調(diào)色:突出關(guān)鍵信息?
 
強調(diào)色是 UI 設計中的點睛之筆,用于突出重要按鈕、提示信息、關(guān)鍵圖標等元素,引導用戶操作。強調(diào)色通常選擇與主色、輔助色形成強烈對比的顏色,如在以黑白灰為主色調(diào)的簡約界面中,使用紅色作為強調(diào)色,能瞬間吸引用戶注意力。在電商 APP 的商品詳情頁,“立即購買” 按鈕采用醒目的紅色,與頁面整體的簡潔色調(diào)形成鮮明反差,有效引導用戶完成購買行為;在新聞資訊 APP 中,新消息提示采用亮眼的黃色,讓用戶快速察覺有新內(nèi)容更新 。?
 
遵循三色搭配原則的注意事項?
 
在運用三色搭配原則時,設計師需注意色彩的協(xié)調(diào)性與可讀性。避免選擇過于刺眼、沖突的色彩組合,確保文字信息在背景色上清晰易讀。同時,要根據(jù)不同的設計場景和用戶需求,靈活調(diào)整三種顏色的比例和色調(diào)。例如,在移動端 UI 設計中,考慮到屏幕尺寸較小,色彩不宜過于繁雜,可適當降低輔助色和強調(diào)色的飽和度;而在網(wǎng)頁 UI 設計中,若需要營造強烈的視覺沖擊效果,可適度提高強調(diào)色的鮮艷度 。?
 
三色搭配原則是 UI 設計中打造和諧視覺體驗的有效方法。通過合理選擇主色、輔助色和強調(diào)色,并把握好它們之間的比例關(guān)系,設計師能夠創(chuàng)造出既美觀又實用的 UI 界面,為用戶帶來舒適、愉悅的使用感受,同時提升產(chǎn)品的品牌形象與用戶吸引力。
 

 

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計、交互設計、UI咨詢高端網(wǎng)站設計平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

自適應設計在內(nèi)容上的應用探索

天宇 設計思維

編輯導語:自適應設計指能使界面自適應顯示在不同大小終端設備上的設計方式及技術(shù)。而內(nèi)容自適應則需要對用戶行為進行預判進而改變設計內(nèi)容,本文作者將對自適應設計在內(nèi)容上的應用進行分享,值得閱讀學習。

我們一般說的自適應設計,多半指的是界面自適應,即為不同的終端設計不同的界面布局與操作流程。而內(nèi)容自適應,是一種根據(jù)用戶標簽與操作行為預判用戶目標所需頁面內(nèi)容的方式,他的優(yōu)點是既能預測交互意圖,實現(xiàn)信息量的智能輸出,同時也能滿足不同交互需求,改變界面樣式,達到降低人機交互負荷的目的。

以下,是道樂UED團隊 基于查閱的資料以及行業(yè)的積累,帶來的一篇關(guān)于內(nèi)容自適應的分享。

目錄:

  1. 內(nèi)容自適應的界定
  2. 適用場景及案例分析
  3. 利弊分析
  4. 內(nèi)容自適應設計在金融產(chǎn)品上的應用思考

一、內(nèi)容自適應的界定

目前自適應界面在內(nèi)容上的呈現(xiàn)大致包括兩種類型:

1. 實時自適應

顧名思義,就是根據(jù)用戶當下的操作,實時判斷用戶所需,從而調(diào)整不同的信息展示與布局,他的優(yōu)勢在于能盡量減少頁面上與用戶目標不相關(guān)信息的展示,從而提升用戶操作的效率與準確度

2. 歷史自適應

通過用戶標簽與過往數(shù)據(jù)的分析,調(diào)整頁面內(nèi)容的展示數(shù)量與優(yōu)先級,僅展示用戶感興趣或可能感興趣的內(nèi)容,從而提高用戶在使用產(chǎn)品中的轉(zhuǎn)化率。

總的來說,內(nèi)容自適應更趨向于對用戶行為軌跡的縱向思考,將“用戶尋找信息”的被動服務模式轉(zhuǎn)化為“信息尋找用戶”主動服務模式。滿足差異化的用戶需求,提升企業(yè)系統(tǒng)的用戶體驗和人性化服務水平。

二、適用場景及案例分析

1. 實時自適應

(1)搜索

① Google搜索

自適應設計在搜索上的應用意味著針對每個用戶的每一次搜索,都會產(chǎn)生一個定制的界面,該界面將自身塑造成所顯示的信息。請看以下示例:如何根據(jù)不同的用例更改搜索結(jié)果頁面。

最近,Google搜索的設計重點是在用戶點擊搜索結(jié)果之前傳遞信息。為此,Google采用了一種稱為自適應設計的方法。

Google搜索適應用戶需求的第一種方法是重新安排導航以適應結(jié)果。

  • 在“lizzo”的例子中,搜索框下面的導航是:(按順序依次為)圖片、視頻、新聞、購物、更多;
  • 在“tel aviv”的例子中,導航是:新聞、圖片、地圖、視頻、更多;
  • 搜索“aapl”(蘋果公司的股票代碼),導航顯示:金融、新聞、書籍、購物、更多;

Google有362,880種獨特的方式來排列導航,以適應搜索查詢。然而,自適應設計的最大例子是搜索結(jié)果本身的布局。結(jié)果頁面是完全模塊化的:根據(jù)搜索結(jié)果,不同的元素出現(xiàn)在不同的配置中。

例如,音樂家Lizzo的搜索結(jié)果集中在媒體上:一組模塊以本機格式顯示視頻,圖片和歌曲。還顯示最近的新聞,推文和即將舉行的活動,以及指向Lizzo在YouTube、Twitter、Facebook、Instagram和SoundCloud上的個人資料鏈接。直到頁面底部,我們才能看到看起來像傳統(tǒng)搜索結(jié)果的元素。

另一方面,以色列特拉維夫市的搜索結(jié)果為旅行者提供優(yōu)先信息。圖片、地圖、當?shù)靥鞖庖约芭c旅行有關(guān)的問題(“特拉維夫?qū)τ慰桶踩珕幔?rdquo;、“特拉維夫以什么聞名?”)優(yōu)先于傳統(tǒng)搜索結(jié)果。模塊促進了特拉維夫的活動以及對附近其他城市的推薦。搜索結(jié)果頁上可能會出現(xiàn)數(shù)千個不同的模塊,從簡單的布局驅(qū)動模塊到完全獨立的應用程序。

例如,“aapl”的搜索結(jié)果頁上,股票代碼模塊顯示了當前價格和交互式歷史價格圖。

通過自適應設計,所有有關(guān)內(nèi)容、格式和順序的決策都是由算法決定的。設計人員的作用不再是創(chuàng)建明確的外部布局。

如今,尖端產(chǎn)品的設計者,以及未來日常產(chǎn)品的設計者,正在就生成這些布局的規(guī)則做出決策。

② 淘寶搜索

淘寶搜索結(jié)果頁,當用戶往下滑動查看更多時,系統(tǒng)判斷你根據(jù)當前搜索頁沒有找到想要的內(nèi)容,則根據(jù)不同物品展示物品的更細分的篩選,如啤酒會c展示“德國進口啤、國產(chǎn)精釀、比利時精釀”,方便用戶找到目標物品。

③ OTA平臺PC端(去哪兒、攜程等)

攜程/去哪兒pc端中,Tab前置條件是國內(nèi)/國際,在選擇國內(nèi)機票時,默認單程。在選擇“國際/港澳臺機票”時,則默認機票往返。

這樣的功能設置是基于對用戶需求的深入研究得出的,主要有以下幾個原因:

  • 最優(yōu)方案不同:國內(nèi)單程往返的最優(yōu)方案多半有可能不是一個航空公司,要一個一個查詢,(盡管同一航空公司往返有1+1小于2的規(guī)則),會對客人更有利,因為經(jīng)常會出現(xiàn)1+0.5=1.5的情況。國際票往返的最優(yōu)方案通常還是一家航空公司的便宜,這個基本上是定律,所以這個默認設定是培養(yǎng)消費習慣之舉。
  • 使用場景不同:國際機票的使用場景下,大都有明確時間區(qū)間,簽證限制了用戶在國外停留的時間。用戶不得不提前計劃。且回程可選擇交通工具有限。相對而言,國內(nèi)機票場景較自由,提前計劃必要性相對較弱。
  • 觀測數(shù)據(jù)證明:根據(jù)同程的國際機票訂購數(shù)據(jù)顯示,70%以上的用戶選擇了往返。

基于以上充分的原因,這個自適應功能設計就得以開發(fā)并成功提高用戶的使用效率。

(2)根據(jù)用戶靜態(tài)標簽優(yōu)化結(jié)果

靜態(tài)標簽:用戶主動提供的數(shù)據(jù), 指用戶不變的基礎信息,多為用戶固定數(shù)據(jù),如姓名、性別、年齡、身高、體重、職業(yè)、地區(qū)、設備信息、來源渠道等。

定位地區(qū):大眾點評——切換城市

大眾點評的這個功能經(jīng)常被拿出來說,當你到另一個城市,通過獲取定位申請,判斷你是來這座城市旅游的場景,從而頁面展示中入口就改成了跟旅游相關(guān),這其實也有點內(nèi)容自適應的意思,通過用戶不同的操作展示不同的內(nèi)容。

2. 歷史自適應

歷史自適應主要集中在特定領域的個性化界面定制和推薦等方面。針對不同用戶呈現(xiàn)不同界面,根據(jù)用戶的類型、任務特點、喜好等提供不同的界面樣式。

(1)根據(jù)用戶動態(tài)/預測標簽算法推薦定制內(nèi)容

預測標簽:平臺介入的數(shù)據(jù),指根據(jù)用戶在平臺內(nèi)的行為數(shù)據(jù)對用戶未來行為或喜好進行預測;是設計千人千面和運營策略的關(guān)鍵;比如某電商平臺,根據(jù)用戶A“月均消費5單,且有數(shù)額過萬的運動商品”的購物數(shù)據(jù),平臺會給用戶A打“高頻、品質(zhì)敏感性、運動”的標簽,后期會更多推薦高品質(zhì)運動商品及相關(guān)運動品牌活動的精準推送。

用戶標簽是構(gòu)成用戶畫像的核心因素,是將用戶在平臺內(nèi)所產(chǎn)生的行為數(shù)據(jù),分析提煉后生成具有差異性特征的形容詞。即用戶通過平臺,在什么時間什么場景下做了什么行為,平臺將用戶所有行為數(shù)據(jù)提煉出來形成支撐業(yè)務實現(xiàn)的可視化信息。

① 用戶生產(chǎn)內(nèi)容(UGC)

互聯(lián)網(wǎng)上的許多站點開始廣泛使用用戶生成內(nèi)容的方式提供服務,許多圖片、視頻、博客、播客、論壇、評論、社交、Wiki、問答、新聞、研究類的網(wǎng)站都使用了這種方式。

② 電商平臺

這種平臺一般會隨著用戶的使用,網(wǎng)站會積累及不斷修正及展示最貼近用戶喜好的產(chǎn)品,從而進行推薦。功能上適應了用戶的喜好,會大大增加用戶的粘性。

③ APP Store 應用頁面大變動:不同用戶可看到不同功能與內(nèi)容

自定義產(chǎn)品頁功能讓開發(fā)者可以面向不同用戶展示 App 的不同功能,產(chǎn)品頁優(yōu)化功能則讓開發(fā)者們能夠測試不同的截屏、預覽視頻,甚至 App 圖標。

蘋果指出,得益于 App Store Connect 詳實且注重隱私的分析,開發(fā)者可以了解自己用戶的偏好,從而決定產(chǎn)品頁的展示內(nèi)容。

④ SoulAPP創(chuàng)始人:Sou了APP功能符合不同場景的用戶需求

SoulAPP多種匹配機制,功能符合不同場景的客戶需求。Soul利用AI大數(shù)據(jù),依照性格、興趣等因素,劃分用戶。通過這種精準的方式分類用戶,以便用戶之間能夠更高效地建立連接。第一次注冊SoulAPP,用戶需要通過系統(tǒng)的一些答題測試,以便于生成符合自己的性格報告。接著就是通過上述數(shù)據(jù)采集,劃分專屬圈子,這里就是大家經(jīng)常說的“星球“,這些都是基于SoulAPP的AI功能。

三、利弊分析

1. 優(yōu)點

  • 增強用戶體驗:自適應界面不能讓用戶控制自適應過程。對用戶動機準確的判斷和對應的自適應設計能有效簡短交互路徑,優(yōu)化用戶的交互體驗。
  • 增強用戶粘性:基于精準人群的需求分析和功能設計,更容易得到用戶認可,更容易打造產(chǎn)品亮點,提供精準個性化的服務,比如對于社區(qū)產(chǎn)品,內(nèi)容個性化推薦將有效提升社區(qū)粘度。
  • 利于公司可持續(xù)發(fā)展:一方面使公司更具競爭壁壘,及時洞察市場風向,預測產(chǎn)品所占市場規(guī)模及前景發(fā)展,及時優(yōu)化公司戰(zhàn)略,避免過早陷入發(fā)展瓶頸;另一方面沉淀大批用戶數(shù)據(jù),既利于孵化創(chuàng)新產(chǎn)品,也豐富盈利模式(比如與第三方合作)。
  • 提升產(chǎn)品設計價值:基于精準人群的需求分析和功能設計,更容易得到用戶認可,更容易打造產(chǎn)品亮點,提供精準個性化的服務,比如對于社區(qū)產(chǎn)品,內(nèi)容個性化推薦將有效提升社區(qū)粘度。
  • 提高運營效率:如今的新用戶獲客成本居高不下的情況下,利用現(xiàn)有用戶畫像,做好存量用戶的維護,通過精準營銷策略,提升存量用戶的留存與活躍。

2. 缺點

自適應界面同樣有一些“小缺點”,違背了一些眾所周知的可用性原則:

  • 缺乏控制:自適應界面不能讓用戶控制自適應過程。
  • 不可預測性:由于用戶不能直接控制界面,用戶不能預測界面接下來的某些行為。
  • 透明度:通常,用戶不能理解在界面中,自適應是如何起作用的。在設計自適應界面時的其中一個問題就是讓用戶可以見到多少自適應比例。
  • 私密性:用戶必須接受基于用戶模型的一種系統(tǒng),將會一直維持與系統(tǒng)交互的狀態(tài),持續(xù)收集用戶使用行為。
  • 信任度:用戶在系統(tǒng)中的信任是容易改變的,如果自適應系統(tǒng)給予了錯誤的指令。
  • 開發(fā)成本:提供內(nèi)容的自適應度,通常意味著著更多的開發(fā)成本。要把控好自適應性設計的度,而非一味地增加開發(fā)量。

四、內(nèi)容自適應設計在金融產(chǎn)品上的應用思考

1. 基礎設計原則思考

內(nèi)容自適應的核心在于,基于用戶過往的操作以及行為路徑的分析,提前預判用戶下一步需要的內(nèi)容,從而讓用戶能更便捷的使用產(chǎn)品。但是在金融產(chǎn)品的設計中比較特殊,往往用戶在使用產(chǎn)品的一個核心需求是安全感,產(chǎn)品安全、資產(chǎn)安全、操作安全等都是用戶著重關(guān)注的點,所以如果一味的進行內(nèi)容自適應設計,會讓用戶產(chǎn)生“信息泄露”的擔憂,從而失去對該產(chǎn)品的信任。

基于以上內(nèi)容自適應的分析以及金融產(chǎn)品設計的特殊性,我們來看看有哪些可以運用到金融產(chǎn)品的設計中來。

2. 金融產(chǎn)品設計思考

(1)金融應用的[截圖]功能

截圖功能可以根據(jù)用戶場景與用戶目標兩個維度進行分析。截圖操作的發(fā)生幾乎會發(fā)生在用戶使用金融應用的各個場景,比如瀏覽金融產(chǎn)品、查看產(chǎn)品詳情、查看持倉資產(chǎn)、收益等等,而不同的場景用戶的目標也有所不同,我們可以根據(jù)用戶不同的操作目標,為用戶提供自適應的內(nèi)容來方便用戶的操作。

截圖常見的用戶目標大致分為兩類:報錯與分享。我們可以為這兩個用戶目標做一些內(nèi)容上設計。

報錯一般會關(guān)聯(lián)產(chǎn)品的在線客服功能,那么我們在用戶截圖操作發(fā)生后,提供在線客服的入口,同時分析報錯自身的用戶行為,如可能是針對頁面的哪個點或者哪個區(qū)域報錯,那我們可以針對這一點再提供編輯截圖的功能等等。

如此根據(jù)用戶目標拆解用戶行為,設計對應的功能來滿足用戶操作,從而減少用戶的操作路徑。

分享可根據(jù)用戶場景設計不同的內(nèi)容,如:

  • 當截圖發(fā)生在產(chǎn)品詳情頁,那此時截圖的分享意圖可能是分享此只產(chǎn)品給好友,我們可以為此設計一個關(guān)于產(chǎn)品信息的分享頁來便于用戶分享;
  • 當截圖發(fā)生在資產(chǎn)頁,此時的截圖的分享意圖可能是炫耀自己的收益,那我們可以生成收益海報等內(nèi)容給用戶,從而滿足用戶的心理預期。

(2)金融應用的[內(nèi)容管理]功能

買衣服的時候,絕大多數(shù)人在意的是是否合身,對于數(shù)字產(chǎn)品,同樣是如此。在一個金融應用的內(nèi)容管理功能當中,會推送大量的內(nèi)容給用戶,絕大多數(shù)的用戶幾乎沒有時間來掌控所有的信息,導致部分對用戶有用的信息被忽略,這樣意味著內(nèi)容的可定制化是極其重要的。

內(nèi)容的可定制化體現(xiàn)在不同用戶的分層上,基于分層,我們可以為相同類型用戶推送內(nèi)容。如持有私募基金的用戶,我們可能會更多為其推送關(guān)于此類產(chǎn)品的信息以及高端用戶的優(yōu)惠、活動、資產(chǎn)報告等信息。

(3) 金融應用的[搜索]功能

金融產(chǎn)品的搜索,除了具備一般應用該有的內(nèi)容,如最近搜索、熱門搜索、搜索排行榜等,也需要基于產(chǎn)品特性來思考還有哪些可以展示的內(nèi)容。

根據(jù)用戶行為與數(shù)據(jù)分析,一般搜索的關(guān)鍵詞為基金名稱或者基金代碼,而搜索的目的是查看該產(chǎn)品的信息以及收益情況,那么基于此類目的,我們可以當用戶輸入基金名稱后,展示該基金最近的凈值走勢等內(nèi)容,這樣用戶就可以提前了解部分基金信息,可以提前做一個判斷,需不需要進入搜索結(jié)果頁進一步的了解。

除了提前展示該基金部分產(chǎn)品信息以外,我們也可以展示相類似基金,防止用戶因提前獲知產(chǎn)品部分信息而帶來的流失率,當用戶不滿意該只基金的近期表現(xiàn),我們可以為其提供表現(xiàn)良好的基金供其選擇,從而提高產(chǎn)品的轉(zhuǎn)化率。

五、結(jié)語

通過對自適應設計在內(nèi)容上的應用探究,我們對內(nèi)容自適應的設計手法及應用場景有了初步的理解,也會繼續(xù)的探究并運用到實際的工作中來,希望這些思考能為大家?guī)硪恍椭?/p>

作者:道樂UED全體成員

原文鏈接:https://www.ui.cn/detail/610302.html

本文由 @道樂科技設計中心 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

這些UI大技巧你會了嗎?

天宇 設計思維

編輯導語:產(chǎn)品設計上的許多細節(jié)都有可能影響到用戶的產(chǎn)品使用體驗,進而影響到產(chǎn)品的打開率以及留存率等。這就要求產(chǎn)品設計師在交互體驗層上結(jié)合一定小技巧,以提升用戶體驗。本篇文章里,作者結(jié)合案例,總結(jié)了一些UI技巧,一起來看看吧。

對于很多設計師來講在設計界面過程中往往會忽略掉很多的細節(jié),比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等,特別是剛?cè)胄械脑O計師在做頁面時往往是直接拿到競品的頁面搬運到自己產(chǎn)品上,這種做法理論上不會讓自己的頁面出錯。

但是很多人往往忽略了一點,就是別人這么設計的目標是什么,是否會匹配自己的設計目標,如果不了解這些貿(mào)然地去搬運設計,那么時間久了會養(yǎng)成一個不好的習慣,需要設計師去進行設計時可能就會遇到很多難點,作為初級設計師或者剛?cè)胄械脑O計師,前期可以去進行搬運設計,但是一定要了解別人為什么這么做。

接下來將分享12個設計上的小技巧,大部分在日常設計中都會遇到,了解到這些設計細節(jié),可以讓我們的界面更加高效、易用、美觀提升用戶體驗。

一、快捷交互

我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率,避免繁雜小操作步驟。

1. 左側(cè)為什么錯??

左圖中針對單條消息的操作匯聚到了icon內(nèi),對于用戶理解成本比較高,當用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作,大大的提升了用戶操作成本。

2. 建議正確做法~~

我們可以在類似的消息場景或者其他列表形式的場景中,添加一些交互手勢,隨著手機系統(tǒng)的更新,用戶的操作習慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟,并不用擔心用戶無法操作的情況,增加手勢有弊端也有優(yōu)勢,右圖中手勢增加了用戶首次使用的學習成本,但是降低了高頻功能的操作成本,這個理論上是可以接受的。

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的運用

這些UI大技巧你會了嗎?

二、提升交互路徑

利用拇指定律把關(guān)鍵的操作入口元素等,放置右側(cè)提升用戶操作效率。

1. 左側(cè)為什么錯??

左圖中把按鈕放置了模塊左下側(cè),這樣是不利于用戶進行操作,當然如果整個模塊的熱區(qū)都是同一個,這樣并沒有什么問題,用戶點擊卡片區(qū)域任何位置都能夠完成下一步操作,如果出現(xiàn)一個模塊內(nèi)存在多個熱區(qū)入口,而用戶想要到達目標必須通過按鈕點擊才能進入,那么左圖中的排版位置就會提升用戶的操作時間。

2. 建議正確做法~~

當一個頁面內(nèi)出現(xiàn)多個相同模塊或者一個模塊出現(xiàn)多個熱區(qū)入口時,按鈕點擊區(qū)域有限,我們設計時就可以利用拇指定律進行排版,如右圖中布局,將按鈕放置右側(cè)可以便于用戶在右手操作時快速到達目標,因為國內(nèi)使用右手的人數(shù)遠遠大于左手用戶,所以我們需要滿足大部分的體驗,合理利用拇指定律。

相關(guān)定律:費茲定律、拇指定律。

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的運用

這些UI大技巧你會了嗎?

三、問題前置

對于我們來講很多東西是簡單的,但是不乏會有一些用戶是陌生的,對于他們來講可能會有填寫成本。

1. 左側(cè)為什么錯??

左圖中理論上并不是錯,我們經(jīng)常設計表單時都會用的提示話術(shù),但是我們需要考慮更多維度的東西,對于我們來講填寫這種表單非常簡單,例如個別用戶,可能會臨時忘了郵箱格式,又或者輸入手機號時多填了一位數(shù)等等情況,用戶錯誤一次操作步驟就會多一步,反之就是降低使用產(chǎn)品時的體驗。

2. 建議正確做法~~

如右圖中,我們設計時可以更改提示的話術(shù),幫助用戶把問題前置,當用戶看到提示郵箱時就會按照格式去填寫,通過把手機號的位數(shù)拆分,讓用戶更好的記憶數(shù)字,這樣無論對產(chǎn)品還是用戶都沒有任何損失,反而能降低錯誤頻率。

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的運用

這些UI大技巧你會了嗎?

四、提升可讀性

無論是頁面還是模塊,用戶在閱讀時是已掃讀的方式進行瀏覽,我們需要保證頁面的文字元素具備一定的規(guī)律,以此來提升閱讀效率。

1. 左側(cè)為什么錯??

左圖中可以看到,文字與輸入框放在同一列進行展示,這樣一方面不利于后續(xù)的文字擴展,通常這種表單填寫的頁面,在頁面中都是具有很大的空間位置,這樣排布會造成視覺上的不規(guī)律和擁擠,降低了篩選效率,當然如果是模塊區(qū)域很小的情況下,可以適當?shù)倪M行使用。

2. 建議正確做法~~

右圖中我們把文字與輸入?yún)^(qū)域上下排布,雖然文字長短不一,但依據(jù)對齊原則在豎列情況看是具備對齊規(guī)律的,有效地提升信息篩選效率。

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的運用

這些UI大技巧你會了嗎?

五、點擊引導

我們在做系統(tǒng)功能模塊時需要注意添加功能點擊引導,用戶對此類消息模塊認知上會默認不可點擊,因此需要我們加以引導。

1. 左側(cè)為什么錯??

我們常見的消息模塊內(nèi)容為兩種,一種是互動類消息即用戶與用戶,另一種時是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容。

前者基于用戶習慣而言用戶已經(jīng)沒有使用成本默認是可以進行點擊交互,后者因為部分產(chǎn)品會把系統(tǒng)消息作為展示的形式給用戶,但是有些產(chǎn)品的系統(tǒng)消息卻是可以點擊交互,這就導致了用戶認知上出現(xiàn)了混亂,左圖中像系統(tǒng)通知功能通知其實從視覺上看,并不具備點擊欲望,因此可能會對用戶造成錯誤的理解。

2. 建議正確做法~~

當我們在設計時需要注意,若消息列表中存在系統(tǒng)類消息并且可以進行交互,在設計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊,如果該功能有數(shù)據(jù)指標,這種方式也同樣能賦能產(chǎn)品指標。

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的案例

這些UI大技巧你會了嗎?

六、注意飽和度

目前市場上產(chǎn)品幾乎都有深色版本,我們在設計時深色版本的顏色時需要注意飽和度的高低,同樣的飽和度在黑色背景上會比白色背景上更加亮,這跟人的視覺感官有很大的關(guān)系,因此我們在做黑色版本時需要注意是否調(diào)整飽和度。

1. 左側(cè)為什么錯??

在黑色背景中使用過高的飽和度會刺激眼睛,很多深色版本都是從白色模式通過反向顏色直接調(diào)整,而彩色元素會直接運用到深色中,那么就會造成一個問題,因為我們習慣在白色模式下看顏色,忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”,對眼睛的傷害很高。

2. 建議正確做法~~

我們在設計深色版本時可以根據(jù)產(chǎn)品主色降低飽和度,包括圖標等元素,以此來緩沖對用戶視覺感官的刺激,目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理,這樣無需在添加更多的顏色規(guī)范。

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的案例

這些UI大技巧你會了嗎?

七、禁止特殊字體

在設計模塊或者頁面時不建議使用特殊字體來突出文字層級,這樣會導致視覺不統(tǒng)一,以及開發(fā)成本增加。

1. 左側(cè)為什么錯??

左圖中灰色字使用了特殊字體,看起來雖然好看,但在實際開發(fā)中會導致開發(fā)成本增加,我們產(chǎn)品一般使用的是系統(tǒng)字體,若使用特殊字體需要讓開發(fā)同學添加對應字體包,這樣會導致我們的產(chǎn)品包的內(nèi)存過大,除非產(chǎn)品中默認一直使用該特殊字體,這樣才有使用的價值。

2. 建議正確做法~~

一般系統(tǒng)字體就能夠滿足我們的設計需求,在UI設計中我們可以通過不同的字體粗細來調(diào)整文字層級,這樣能夠保證視覺更加統(tǒng)一,減少產(chǎn)品包大小。

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的案例

這些UI大技巧你會了嗎?

八、按鈕也要有層級

在設計時需要注意多個入口在同一位置時,需要把它們進行層級劃分,避免影響用戶決策。

1. 左側(cè)為什么錯??

圖中可以看到,兩個面性按鈕非常明顯的在模塊中,當用戶在瀏覽頁面中很容易出現(xiàn)困惑,到底需要點擊哪個才能購買預定,因為兩個都是面性無法快速進行定位入口,這樣不僅影響用戶決策效率,還會影響產(chǎn)品點擊率。

2. 建議正確做法~~

建議設計類似模塊中時,無論是pc還是移動端都需要對入口進行結(jié)構(gòu)劃分,這樣能夠使用戶在瀏覽頁面時快速定位到入口,提升決策效率,做體驗是解決用戶的思考時間。

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的案例

這些UI大技巧你會了嗎?

九、圖標保持一致

在UI設計中使用圖標時,要保持一致性,確保他們共有相同的視覺風格,相同的重量,填充和描邊。不要混搭。

1. 左側(cè)為什么錯??

可以看到左圖中的圖標并不統(tǒng)一,線性里面摻雜著面性點綴,這在UI設計中嚴重違背了一致性的原則,會導致我們的頁面不夠嚴謹專業(yè)。

2. 建議正確做法~~

在設計圖標時,首先要保證圖標風格一致,其次在這個基礎上保證圖標的描邊粗細、視覺占比重量、顏色等,不要出現(xiàn)混搭風格。

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的案例

這些UI大技巧你會了嗎?

十、利用對比

在設計頁面模塊時,可以多利對比度的方式來體現(xiàn)設計的表現(xiàn)力,鮮明直接的色值能夠直接表達事物的性質(zhì)以及特點,通過對比,也能夠更加清晰的強調(diào)設計中的重點,這樣給用戶的印象會更深刻,同樣會給產(chǎn)品帶來一定的趣味性。

1. 左側(cè)為什么錯??

左圖中單看視覺也沒問題,只是在表現(xiàn)上圖標與背景融入到一塊了,導致視覺表現(xiàn)力較差,在設計中如果符合產(chǎn)品風格的前提下,我們可以避免這種方式,這種方式雖然具有視覺效果但不夠強,對用戶的記憶點不夠深刻。

2. 建議正確做法~~

設計到類似的模塊時我們可以利用對比的關(guān)系,以此突出視覺元素,通過顏色焦點引導用戶關(guān)注,強化用戶印象同時還能增加頁面的視覺表現(xiàn)力和氛圍感。

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的案例

這些UI大技巧你會了嗎?

十一、圖文疊加

在設計圖文疊加的卡片或者頁面時,我們需要注意不同明度的圖片上,文字識別是否有阻礙,一般情況會通過遮罩方式避免這個情況。

1. 左側(cè)為什么錯??

左圖中在深色圖片下字體的可讀性是沒有問題的,但當出現(xiàn)文字底部區(qū)域的圖片相對復雜時便會影響識別,第二種情況當圖片明度過高時文字同樣無法識別,試想一下,一張白色調(diào)性的圖片上放文字,那基本無法看清,嚴重影響閱讀體驗。

2. 建議正確做法~~

在界面設計時如果遇到類似的卡片,建議在文字區(qū)域添加漸變遮罩的方式,以此保證文字的識別度,或者添加純黑色透明遮罩進行處理,這樣可以兼容不同環(huán)境的圖片與文字的重疊,保證基本的閱讀體驗。

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的案例

這些UI大技巧你會了嗎?

十二、注意遮罩透明

UI設計中經(jīng)常會遇到彈窗,彈窗是需要配合頁面遮罩來讓用戶進行專注操作,不同的遮罩透明度所帶來的專注度也不同。

1. 左側(cè)為什么錯??

左圖中我們看到,遮罩的透明度過低,我案例設置的是17%,此時彈窗內(nèi)容與頁面內(nèi)容結(jié)構(gòu)上區(qū)分并不是很明顯,一般彈窗是用來讓用戶跳脫頁面內(nèi)容,從而瀏覽彈窗內(nèi)容,轉(zhuǎn)變用戶目標,當彈窗無法聚焦時便很難達到目標,并且視覺上層級更加混亂。

2. 建議正確做法~~

右圖中案例我把透明度調(diào)整到了37%,我們此時再看彈窗很容易就忽略頁面內(nèi)容,因為灰色越高,遮擋度越高,用戶跳脫感就越強,這樣我們可以讓用戶專注彈窗內(nèi)容,同時視覺結(jié)構(gòu)上也區(qū)分很明顯

這些UI大技巧你會了嗎?

3. 實際產(chǎn)品中的案例

這些UI大技巧你會了嗎?

 

作者:愛吃貓的魚;公眾號:防脫發(fā)藥水

本文由 @愛吃貓的魚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Pexels,基于CC0協(xié)議

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

天宇 設計思維

在日常場景中,畫面平衡是潛在的一個重要影響因素,合理且有吸引力的視覺平衡設計,可以讓用戶更加舒心地接受并停留在使用頁面或者相應場景中。那么,視覺平衡究竟應該如何做好?本篇文章里,作者針對視覺平衡這件事兒進行了分析總結(jié),一起來看一下。

畫面平衡是一個很基本的設計理念,但很多朋友在平時的作品中容易忽視這個點。彩云在星球中幫不少朋友看過作品集,發(fā)現(xiàn)最多的問題之一就是畫面平衡沒做好,我覺得只要把這個基本問題解決了,作品就能提升一個檔次。

用戶本能地會對不平衡的設計感到厭煩,如何在畫面中創(chuàng)造一個有吸引力的平衡?是本篇文章要分享的內(nèi)容。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Illustration: Outcrowd

平衡是一個作品中最重要的元素之一。平衡中的對稱關(guān)系能夠創(chuàng)造平衡與和諧,這種平衡狀態(tài)直觀上能夠讓用戶感到舒適。

人體是垂直對稱的,我們的視覺接收也與之相對應。我們喜歡物體在垂直軸上保持平衡,直覺上總是傾向于平衡一種力量與另一種力量。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Illustration: Outcrowd

在設計環(huán)境中,平衡是基于元素的視覺重量,而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的,用戶會下意識地感到舒適。畫面平衡被認為是其元素在視覺上的比例安排。

如何讓一個頁面看起來平衡?

一、對稱(靜態(tài))平衡

最常見的平衡例子就是使用對稱。

在潛意識層面上,對稱的視覺能讓人愉悅,能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側(cè)均勻放置元素來創(chuàng)造的。也就是說,畫面中間假想線的兩邊實際上是彼此的鏡像。有些人認為對稱的平衡是無聊和可預測的,但它經(jīng)受住了時間的考驗,到現(xiàn)在仍然是在頁面上創(chuàng)造舒適和穩(wěn)健感覺的最好方法之一。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Illustration: Outcrowd

二、不對稱(動態(tài))平衡

兩側(cè)重量不相同的元素構(gòu)成具有不對稱平衡。

動態(tài)平衡通常會比靜態(tài)平衡更有設計感,讓畫面不至于呆板在缺乏平衡的情況下,我們的目光會條件反射性地開始尋找平衡點,這是一個很好的機會,可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點就應該放在這里——抓住用戶的注意力,就像產(chǎn)品的生命線一樣。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Landing page — Asian Cuisine

比如一般這樣去“配重”的元素會是一個按鈕或者標題。

重要信息(或者是行動按鈕)就是我們需要去配重的價值元素。

不對稱的現(xiàn)象越嚴重,用戶就越想找出其中的原因(檢查配重)。人們本能地比平時更仔細地研究這樣的畫面。然而,這里需要注意分寸,過于古怪的構(gòu)圖并不總是能被很好的感知。

三、徑向平衡

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Illustration: Outcrowd

平衡中的另一種類型,特點是視覺元素從一個共同的中心點放射出來。徑向平衡在設計中不常用。它的優(yōu)點是,注意力很容易找到并保持一個焦點——恰好就在它的中心,這通常是構(gòu)圖中最引人注目的部分。

四、馬賽克平衡

這是一種平衡中的混亂,就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點,所有的元素都有同樣的視覺重量。沒有層次,乍一看,畫面就像視覺噪音,但所有元素又相互匹配,形成一個連貫的整體。

(彩云注:這是一種比較高階的設計平衡處理手法,用的好可以讓畫面非常具有設計感,但把握不好的話,就會非常凌亂。所以,我們平時能看到很多大師的作品看似一些簡單圖形的使用,但就是好看,輪到自己設計的時候就會發(fā)現(xiàn),越簡單的設計似乎越難設計好。)

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

Illustration: Outcrowd

五、視覺平衡的秘密?

當談到構(gòu)圖中的重量平衡時,他們經(jīng)常將其與物理世界中的重量進行比較:重力、杠桿、重量和支點。我們的大腦和眼睛感知平衡的方式非常類似于力學定律。我們很容易把一幅畫想象成一個在某一點上平衡的平面,就像一個天平。如果我們在圖像的邊緣添加一個元素,它就會失去平衡,有必要修復它。元素是否是一組色調(diào)、顏色還是點并不重要,目標是找到圖像的視覺“重心”,即圖像的重心。

不幸的是,沒有精確的方法來確定一個物體的視覺質(zhì)量。一般來說,設計師依賴于他們的直覺。不過,下面這些有用的觀察可能會有所幫助:

1)大小

大的物體總是更重。

2)形狀

不規(guī)則形狀比規(guī)則形狀的元素輕。

3)顏色

暖色比冷色重。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

4)色調(diào)

深色物體比淺色物體重。

5)圖案

帶有圖案的元素顯得更重。

6)3D

帶有紋理貼圖的元素顯得更重。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

7)位置

物體離中心越遠,其視覺重量越大。

8)方向

垂直元素比水平元素更重。

9)密度

許多小元素可以抵消一個大元素。

為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好

10)內(nèi)部復雜性

物體內(nèi)部越復雜,視覺重量更大。

11)填充空間關(guān)系

正形空間比負形空間更重。

12)對重量的感知

照片中的啞鈴看起來會比一只鋼筆更重。

六、總結(jié)

當使用對稱時,作品看起來可以更加的專業(yè)和有科學性。其中,靜態(tài)對稱的作品顯得更加有專業(yè)精神和嚴肅的;而動態(tài)對稱的設計方法則能吸引用戶的興趣,表達出個性和創(chuàng)造力,能讓用戶集中注意力。

原文作者:Erik Messaki(本文翻譯已獲得作者的正式授權(quán))

譯者:彩云Sky,人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級視覺設計師。

本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

UI配圖不夠有設計感?可以試試這10個優(yōu)化辦法

天宇 設計思維

在界面設計中,好看且和諧的配圖會讓用戶潛意識里更容易接受、或者更愿意停留于當前頁面,那么,如何才能把配圖做好,讓界面看起來更加高級和耐看?本篇文章里,作者總結(jié)了10個優(yōu)化UI配圖的小方法,一起來看一下。

“配圖用的好,作品差不了”,UI中配圖的好壞直接影響到界面的品質(zhì)感。它非常重要但卻經(jīng)常容易被忽視,要想把配圖做好其實也是有規(guī)律可循的,今天的文章就將總結(jié)配圖使用的10個優(yōu)秀方法,相信看完一定會有所收獲。之前我也寫過另一篇如何選好配圖的文章《如何選到設計感強的配圖,我總結(jié)了這7個實用方法》,同時也分享了很多超高質(zhì)量的圖片素材資源和網(wǎng)站,千萬別錯過。

在欣賞了Behance上數(shù)百個高質(zhì)量的項目和眾多Dribbble優(yōu)質(zhì)作品后,我總結(jié)出了一套可以將圖片與UI結(jié)合提升設計感的方法,可以讓你的作品立即看起來更加專業(yè)。

本文的靈感來源于我剛開始做UI時所遇到的困難。和許多其他設計師一樣,當我在Dribbble和Behance上瀏覽別人的作品獲得靈感時,面對這些海量作品時常會感到迷失和不知所措。就像透過萬花筒看到各種花哨的圖案一樣,當把萬花筒挪開的時候這些圖案就消失了,幸福的感覺是短暫的。當我自己開始設計作品時,我仍然不知道該怎么做。

隨著時間的推移,我意識到我并沒有從日常的作品欣賞和搜集中思考和學習,就只是漫無目的地欣賞了其他設計師的作品。

漸漸地我發(fā)現(xiàn)了一種欣賞其他設計師作品的好方法,我會有意識地去總結(jié)記錄下他們使用的想法和技巧,然后應用到我的日常工作。在本文中,我很想分享一些其他設計師用來處理配圖的方法,這些方法可以使作品看起來更加專業(yè)。

一、使用圖片作為背景

(彩云說:這里的圖片選擇要突出核心內(nèi)容且一定要高質(zhì)量,不要選擇雜亂無章或與主題無關(guān)的低質(zhì)量圖片。)

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

二、將圖片于背景進行融合

(彩云說:結(jié)合頁面表達需要,選擇合適的配圖并做融合或出界的設計,會讓畫面極具吸引力和強烈的設計感。)

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

三、將高質(zhì)量的圖片緊密的放在一起,不留任何間距

(彩云注:當畫面主要以高質(zhì)量圖片吸引用戶注意時,盡可能的利用更大展示面積,這樣會顯得更加高級和有視覺沖擊力。)

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

四、在圖片下方添加色塊

(彩云注:這里的色塊要注意跟圖片的主色調(diào)保持相近,可以直接吸圖片上的顏色然后找找鄰近色就好了,色環(huán)上30°區(qū)間內(nèi)的顏色就比較和諧。)

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

五、在圖片下方/上方增加圖案或形狀

(彩云注:這里的形狀建議不要太過于復雜,用一些基本圖形就可以,比如圓點、方塊矩形之類的,增強畫面的形式感。)

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

六、在圖片下方或上方增加文字、圖案或不規(guī)則形狀

(彩云注:這里的文字、圖案或不規(guī)則形狀跟上面的技巧類似,都是起到裝飾的作用,但文字的話有時候還要注意識別性,比如文字比較緊湊的時候。圖案或形狀更多的是起到視覺引導的作用。)

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

七、將圖片剪切到文字或形狀中

(彩云注:這個很好理解,就是以文字或形狀作為遮罩,增加畫面的設計感,文字盡量選擇粗體。)

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

八、在圖片周圍增加一個非常窄的邊距

(彩云注:這個技巧可能跟第3條有些沖突,其實這2個方法都是可以的,要根據(jù)頁面具體的排版情況靈活使用。)

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

八、在圖片上增加顏色層

(彩云注:這個技巧也比較容易理解,一般會選擇飽和度較高的顏色應用在充滿活力的頁面上,增加畫面的沖擊力。)

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

九、在彩色疊加到圖片中的一部分上

(彩云注:這個技巧跟上面的有些類似,只不過是以小面積疊加的形式,顏色一般選擇品牌色或主題色,與背景盡量有較大反差會更加容易出彩。)

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

十、將圖片剪切成其他形狀

(彩云注:這個方法有一點需要注意的就是剪切的形狀不要過于復雜,一般用基礎圖形就好。)

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

總監(jiān)說我的UI配圖不夠有設計感,后面教了我10個優(yōu)化辦法,學到了!

以上,就是我總結(jié)的一些可以用來操作UI圖片的實用方法,這些方法可以使得作品變得更加有視覺感也更加專業(yè)。

為我投票

原文作者:Victor Adeyemo(本文翻譯已獲得作者的正式授權(quán))

譯者:彩云Sky,人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級視覺設計師。

本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

美感設計的重要性:探索用戶體驗的關(guān)鍵因素

天宇 設計思維

設計是通過美感和邏輯來提升用戶體驗,提高企業(yè)滿意度。本文探討美感設計在用戶體驗中的作用,從五個維度分別論述美感設計的重要性,一起來看看吧。

設計是通過邏輯和美感來解決人們的問題,滿足他們的愿望。本文將探討美感在用戶體驗設計中的作用,以此提高用戶和企業(yè)的滿意度。

一、為什么美感對設計很重要

數(shù)字產(chǎn)品的成功與否,除了其功能性能以外,美感也扮演了至關(guān)重要的角色。在競爭日益激烈的市場,用戶的選擇不僅僅局限于功能是否滿足需求,審美愉悅和情感需求也成為了影響購買決策的關(guān)鍵因素。因此,設計對于產(chǎn)品的成功至關(guān)重要。

隨著需求層次的提高,人們的選擇越來越多樣化和理性化。教育和收入水平的提高,使他們開始思考超越功能的問題。此外,用戶更加注重產(chǎn)品的美感和和諧性,因此美學在其選擇中扮演著越來越重要的角色。

馬斯洛金字塔,展示需求層次

美感在用戶體驗設計中發(fā)揮以下作用:

  • 使設計變得情感化,更符合人性;
  • 保持數(shù)字事物與現(xiàn)實世界的聯(lián)系;
  • 支持使用感官;
  • 滿足審美需求;
  • 以一種風格將不同的事物結(jié)合在一起;
  • 讓產(chǎn)品在競爭中脫穎而出。

創(chuàng)新農(nóng)業(yè)服務FarmSense的網(wǎng)站設計

美學是將設計的過去、現(xiàn)在和未來連接在一起的重要橋梁。當今的布局和圖形基于世界文化數(shù)百年來積累的豐富遺產(chǎn)。現(xiàn)代設計師和藝術(shù)家通過各種趨勢和創(chuàng)新對其進行改造,創(chuàng)造出一個新的文化歷史圈子,展示了歷代最杰出藝術(shù)家的杰作。這正是藝術(shù)和審美在設計中所發(fā)揮的作用。我們不是要重新發(fā)明輪子,而是要讓它變得更現(xiàn)代化,以解決當下的問題。

二、審美-可用性效應

美學可用性效應是指用戶更傾向于認為外觀吸引人的產(chǎn)品更加實用。即使實際上這些產(chǎn)品并沒有更加有效或高效。這種現(xiàn)象被用戶體驗設計大師 Nielsen Norman Group 視為一種重要原因,因為既有吸引力又實用的界面才能真正提供良好的用戶體驗,而不僅僅是功能性 UI。

在1995年,日立設計中心進行了一項研究,研究人員Masaaki Kurosu和Kaori Kashimura探究了人機交互實踐中的美學吸引力和易用性。該研究測試了252名研究參與者對26種ATM用戶界面的易用性和美學吸引力進行評分。結(jié)果分析表明,審美情趣評級與感知易用性之間的相關(guān)性高于審美情趣評級與實際易用性之間的相關(guān)性。因此,該研究得出結(jié)論,無論用戶試圖評估系統(tǒng)的功能,任何界面的美感都會對用戶產(chǎn)生強烈的影響。

在 UX 設計中,美感是一個關(guān)鍵因素,它對用戶體驗目標有著深遠的影響。UX 設計通常包括四個核心方面外觀吸引力和視覺和諧、可用性、可訪問性和效用性。這些方面綜合起來,使得產(chǎn)品具有吸引人的外觀、易于操作、適用于不同能力和設備、能夠解決問題以及讓用戶感到愉悅。

Flower Store 應用程序指導用戶完成訂購個性化花束的過程

三、業(yè)務目標

然而,對于那些開始推出新產(chǎn)品或改進知名產(chǎn)品的公司來說,他們也必須從不同的角度考慮。他們需要思考各種財務、轉(zhuǎn)換、銷售和所有其他業(yè)務運營方面的因素。

設計美學是否會對他們的商業(yè)目標產(chǎn)生影響呢?當然會。色彩理論和心理學、屏幕上的和諧、易讀的文本內(nèi)容以及吸引人的圖像不僅對于滿足用戶需求非常重要,而且對于銷售和讓企業(yè)獲得滿意度也至關(guān)重要。

四、用戶體驗美學的元素

不同的元素可以融入用戶界面并構(gòu)建其美感,其中包括:

  • 排版
  • 布局
  • 照片
  • 插圖
  • 3D圖形
  • 動畫
  • 視頻
  • 人物

這些要素一起形成了交互美學,對于積極的用戶體驗有著直接的影響。另外,建議我們將過長的句子分解為短句,以減少重復,并提供改進建議。

加密博客設計使用有限的調(diào)色板使其看起來嚴肅但不沉悶,并呼應大報的傳統(tǒng)布局以設置印刷媒體遷移到數(shù)字世界的強烈美感。

五、一致性

在 UX 和業(yè)務的交叉點上,一致性是實現(xiàn)美學和可用性效果的核心。Jacob Nielsen 曾指出:“一致性是最強大的可用性原則之一,因為當事物表現(xiàn)始終一致時,用戶不必擔心會發(fā)生什么。”因此,為了實現(xiàn)一致性,必須確保整個產(chǎn)品中的界面元素和交互方式始終保持一致,并遵循統(tǒng)一的設計準則。

事實上,它比交互更進一步。它還有助于建立強大的品牌。標志和品牌項目、網(wǎng)站、應用程序、電子郵件和社交網(wǎng)絡——產(chǎn)品與用戶的每一個接觸點都應該遵循一個總體理念和一套價值觀,并以一致和完整的風格包裝。

金融科技服務 Crezco的身份設計采用一致的方法,使品牌能夠通過各種溝通渠道建立有吸引力、值得信賴和穩(wěn)固的形象。

在全球范圍內(nèi),所有設計解決方案都需要回答一個關(guān)鍵問題——為什么?Simon Sinek,一位領袖力專家曾說過:“人們購買的不是你做的事情,而是你為什么這樣做。”你所做的只是證明你的信念,這是產(chǎn)品和服務保持一致和鼓舞人心的原因。從“為什么”開始做出的決策將決定如何與用戶交流,無論通信方式是什么。因此,您需要明確您所溝通的內(nèi)容,無論與品牌的聯(lián)系是什么。這樣可以建立信任,使品牌更加強大,這正是美學在用戶體驗中發(fā)揮作用的地方。此外,您應該簡化長句,減少重復,并提供改進建議以提高文本的清晰度和簡潔性。

六、總結(jié)

設計不僅要解決功能問題,還要考慮美感與情感需求。在數(shù)字產(chǎn)品市場競爭激烈的今天,美感對于產(chǎn)品的成功非常重要。人們的需求也逐漸提高,開始關(guān)注產(chǎn)品的美感和和諧性。美感在用戶體驗設計中的作用包括:使設計情感化,保持數(shù)字產(chǎn)品與現(xiàn)實世界的聯(lián)系,支持使用感官,滿足審美需求,以風格將不同事物結(jié)合在一起,讓產(chǎn)品在競爭中脫穎而出。用戶更傾向于認為外觀吸引人的產(chǎn)品更加實用,這也是良好用戶體驗的重要原因。

原作者:Marina Yalanska

本文由 @唐小白 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

規(guī)范的透明度之美:提升可讀性和美觀性的有效工具

天宇 設計思維

在頁面中,我們時常會被各種絢麗的色彩所吸引。本文介紹了透明度系統(tǒng)的優(yōu)勢,并以實際例子展示其在解決設計問題、提高細節(jié)表現(xiàn)和可讀性方面的應用。讓我們一起看下去吧。

打開絢麗紛繁的頁面,我們時常會被各種各樣的色彩所吸引。但是,除了鮮艷奪目的顏色外,你可曾留意過那些看似平凡無奇的中性顏色?這些中性顏色在UI設計中扮演著不可或缺的角色,而其中的透明度系統(tǒng)更是隱藏著無限的魅力。今天,我們就要一起揭開透明度系統(tǒng)的神秘面紗,探索其在UI規(guī)范中的重要性和作用。

或許你曾聽過“Less is more”這句名言,透明度系統(tǒng)恰好就是這個理念的最佳體現(xiàn)。通過微妙的不透明程度調(diào)整,中性顏色的透明度不僅能提升整體界面的平衡感和視覺品質(zhì),還能增加元素之間的層次感和空間感。想象一下,通過透明度的微妙運用,你的設計將呈現(xiàn)出一種舒適且現(xiàn)代感的風格。是不是感覺很神奇?同時這個方法還是谷歌設計規(guī)范中的推崇之一哦!

在設計規(guī)范中,我們通常會根據(jù)文字的重要性將其分為重要、常規(guī)和輔助三個層級,然后為它們定義不同的顏色。但是,有時候使用定義好的顏色在特定情況下會出現(xiàn)識別不清晰、與背景搭配不美觀的問題。這就是透明度應用的典型場景。下面先說下使用透明度的優(yōu)勢:

  • 提升設計的細節(jié)表現(xiàn):通過給文字和設計元素設置透明度,可以使其與背景更融合,提升細節(jié)的呈現(xiàn)效果,使作品更富有層次感。
  • 提高可讀性:透明度的設置可以在不損害背景色的前提下,增強文字的對比度,使其更易讀,提供更好的用戶體驗。
  • 增加視覺美感:透明度的運用可以使設計更具美感和藝術(shù)性,讓作品更具吸引力。

接下來讓我們首先看看純色文字定義經(jīng)常遇到的問題吧。當設定文字與一些顏色元素搭配時,就可能出現(xiàn)一些尷尬的情況。

比如,下圖中相同顏色的文字在品牌色背景上,識別度低,視覺上也不是很和諧。

規(guī)范的透明度之美:提升可讀性和美觀性的有效工具

接下來,我們對文字顏色進行一些小小的改變,通過降低不透明度來解決這個問題。

效果立竿見影!降低不透明度后,文字識別問題迎刃而解,細節(jié)也變得更加清晰,文字顏色還與背景色融為一體,看起來更為和諧。

規(guī)范的透明度之美:提升可讀性和美觀性的有效工具

其實,不僅僅是文字,我們還可以用這個方法來改善其他元素的設計,比如表格的分割線。讓我們來看一個例子。

通常,我們使用較淺的顏色來填充分割線,在遇到有彩色背景的情況下,分割線可能會“隱身”。在下圖中,同樣顏色的分割線在帶有懸停效果的表格上就“隱身”了。

規(guī)范的透明度之美:提升可讀性和美觀性的有效工具

接下來,讓我們同樣的方法來改善這個問題。

效果如下圖所示。左邊的分割線展示出比表格本身顏色更深的藍色,整體顏值得到了提升。這也展示了設計師在細節(jié)把控上的魅力。

規(guī)范的透明度之美:提升可讀性和美觀性的有效工具

那么這個方法如何應用到實際工作中呢?讓我們來介紹一下具體步驟。

首先,我們需要考慮文字的使用場景,大致分為淺色背景、深色背景和彩色背景。我們需要根據(jù)實際項目情況來確定使用場景。一般我們會在設定色階時也會根據(jù)實際項目設定一個深色和淺色的透明度階梯,例如:設定顏色#000000,依次設置透明度為90%、80%…20%、10%序列。當然這個序列可以分為有序序列和無序序列,85%、56%等等

接下來下面是對深色背景和淺色背景下文字顏色的定義,具體操作如下:對于淺色背景,我們將文字分為三個層級:重要、次要和輔助。針對這三個層級,文字顏色填充為#000000,并設置序列中對應的不同不透明度。具體來說,重要文字的不透明度設為90%,次要文字為60%,輔助文字為40%。在深色背景下,相同的操作也可以應用,只是將文字顏色設置為#FFFFFF(白色)。在彩色背景下,我們會根據(jù)具體情況選擇使用深色背景或淺色背景下的文字顏色,并根據(jù)需要進行透明度的調(diào)整。

最后,為了確保文字在不同背景下的清晰度和可讀性,我們需要進行對比度測試。可以使用對比度測試工具,來驗證所定義的透明度是否符合設計規(guī)范。(https://www.siegemedia.com/contrast-ratio)

規(guī)范的透明度之美:提升可讀性和美觀性的有效工具

但是,請記住,設計并不僅止于設計稿。最終需要前端同學來實現(xiàn),而不是所有前端同學都熟悉并愿意使用透明度的系統(tǒng)。這時,我們可以運用我們的魅力和專業(yè)知識來說服他們。我們可以引用谷歌的Material Design官方文檔,證明透明度的可行性和簡便性。我們可以解釋這種設置透明度的方法不僅簡單,而且可以提高工作效率,同時還能增加用戶的視覺體驗。

通過使用透明度解決設計問題,我們可以使文字和設計元素更融合、提升細節(jié)表現(xiàn),并提高用戶體驗。透明度的設置靈活多樣,能夠適應不同項目、不同場景的需求,讓我們的作品在視覺的世界中獨樹一幟。

在UI設計中,中性顏色透明度是一個非常重要的設計工具,它可以提升界面的平衡感、視覺品質(zhì),增加元素之間的層次感和空間感,以及創(chuàng)造舒適且現(xiàn)代感的設計風格。通過合理選擇透明度級別,并在不同元素的應用中靈活運用,我們可以創(chuàng)造出令人愉悅和吸引人的界面。

鼓勵設計師們在UI設計中靈活運用中性顏色透明度,并探索出獨特的設計風格。根據(jù)不同的設計目標和色彩搭配,選擇合適的透明度級別,并結(jié)合其他設計元素,為用戶呈現(xiàn)出現(xiàn)代且優(yōu)雅的界面。當然,這個方法并非一勞永逸,希望在實際工作中留意并找到適合自己和項目的方法。讓我們的設計在色彩的世界中綻放光芒吧!

本文由 @Esc 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

掌握這些基本要素,讓你的界面設計脫穎而出

天宇 設計思維

對于設計同學來說,很多基礎知識可能看起來很簡單,容易被忽視。但隨著設計經(jīng)驗越來越多,更建議大家牢固系統(tǒng)地掌握這些基礎知識。在本篇文章中作者給大家系統(tǒng)性地講解了界面設計進階過程中需要搞懂的基本設計要素。一起來看吧。

當下大多數(shù)界面設計類軟件都是以矢量圖的方式工作。通過調(diào)整參數(shù)來定義圖形的大小,并且在不降低質(zhì)量的情況下對圖形進行拉伸和放大。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

在進行界面設計時,我們需要生成出各種尺寸的矩形、圓形等對象,規(guī)定這些對象的尺寸和樣式,并對這些對象進行移動,將它們放到合適的位置上。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

很多基礎知識可能看起來很簡單,容易被忽視。但隨著設計經(jīng)驗越來越多,更建議大家牢固系統(tǒng)地掌握這些基礎知識,厚積薄發(fā)才能越走越遠!

一、盒子模型

盒子模型是在設計和開發(fā)中定義數(shù)字接口最基本的方法。我們所做的大多數(shù)設計都是根據(jù)盒子模型進行,因此了解盒子模型對界面設計來說非常重要。

盒子模型由四個主要元素組成:

內(nèi)容 (content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

內(nèi)邊距(padding)是內(nèi)容和邊框線之間的空間,如下圖灰色區(qū)域。內(nèi)邊距的范圍越廣,內(nèi)容的安全區(qū)域就越大。

外邊距(margin)是盒子與其他元素之間的空白區(qū)域,如下圖藍色區(qū)域。外邊距保證了盒子與盒子之間有足夠的間距。

二、尺寸

寬度(width)和高度(height)是定義對象大小的參數(shù)。在二維空間上,寬度代表橫軸上的比例,高度代表縱軸上的比例。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

一定比例的寬和高構(gòu)成的矩形是容納對象的最小矩形框。如果對象本身是不規(guī)則的形狀,在設計時我們需要根據(jù)對象的尺寸制定一個規(guī)則的矩形框,方便交付開發(fā)。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

三、角度

角度定義了對象順時針旋轉(zhuǎn)的方向,默認為0°。另外旋轉(zhuǎn)也可以是負數(shù),比如-15°旋轉(zhuǎn)與345°旋轉(zhuǎn)的角度是相同的。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

如果我們想要一個統(tǒng)一的界面,最好不要手動旋轉(zhuǎn)對象,而是通過輸入度數(shù)來旋轉(zhuǎn),這樣會比手動旋轉(zhuǎn)更精確。

旋轉(zhuǎn)對圓形來說是特殊的存在,因為一個圓形無論旋轉(zhuǎn)到哪個角度看都是一樣的。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

四、圓角半徑

邊框半徑數(shù)值越大,這個形狀的圓角度數(shù)就越大。例如一個矩形,既能一次性設置四個點的圓角半徑,也可以單獨設置某個點的圓角半徑。

正常來說,設置圓角的圖形看起來比直角圖形更友好。界面設計中,相同的圖形最好能保持一樣的的圓角度數(shù),這樣界面看起來會更統(tǒng)一。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

另外一個圖形是否需要圓角,要根據(jù)產(chǎn)品風格靈活選擇,確保與當前使用場景相匹配。例如某個產(chǎn)品的logo或主視覺使用了不同半徑的圓角,在界面中我們也可以使用不同半徑的圓角按鈕,保持風格統(tǒng)一。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

一旦我們決定了用某種樣式的圓角按鈕,那么界面中的其他按鈕也應該保持一致。

五、填充

填充是指對對象內(nèi)容的操作,填充的可以是一種顏色,也可以是一張圖片。

針對不同對象,我們需要差異化定義每個對象的填充效果,保證這些對象簡單易懂,清晰可見。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

在設計過程中,可以對同一個對象組合使用多種填充效果。例如一個正方形頭像,首先填充一張照片,在照片的基礎上再添加各種顏色效果,能讓頭像的設計與界面更匹配。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

六、描邊

如果說填充強調(diào)對象內(nèi)部,那么描邊就是對對象外部邊框的操作。

描邊分為內(nèi)部邊框、居中邊框和外部邊框三種樣式,其中只有內(nèi)部邊框不會在視覺上使對象變大。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

例如下圖是一個60px大小的正方形,有2px的描邊。從左起分別是內(nèi)邊框、居中邊框、外邊框的描邊效果。因為內(nèi)邊框是在正方形內(nèi)部描邊,所以視覺上看這個正方形仍是60px大小。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

居中邊框是指正方形的外部和內(nèi)部各占1px,那么采用居中邊框的正方形尺寸變成了62×62。

同理,外部邊框是指正方形的外部多了2px,采用外部邊框的正方形尺寸變成了64×64。

對于不同的對象,我們可以設定不同寬度的描邊,描邊的樣式可以是虛線、實線、純色、漸變色等多種樣式。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

目前大多數(shù)設計軟件支持修改描邊的端點和節(jié)點。端點樣式包括方頭、平頭和圓頭,節(jié)點樣式包括斜接連接、圓角連接、斜角連接。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

七、陰影

陰影是UI設計中最常用的效果,根據(jù)對象的X軸、Y軸的偏移程度、模糊程度、擴展程度、顏色和不透明度等屬性構(gòu)成。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

通過設置模糊能讓陰影的面積擴散擴得更大,顏色由深變淺。一般來說陰影的不透明度低于40%時,呈現(xiàn)的效果比較好。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

當陰影的擴展程度為負數(shù)時,陰影看起來會更自然。對比上下兩個圖例也能看出來,擴展程度為負時陰影看起來更柔和。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

使用陰影有助于劃分界面的層次結(jié)構(gòu)!在設計中,讓陰影看起來自然柔和不生硬是界面美觀與否的關(guān)鍵因素之一。

首先要避免純黑色陰影,純黑對比太強會影響視覺效果,建議使用基礎色調(diào)派生的顏色作為陰影顏色。

例如基礎色是綠色,可以使用飽和度、亮度較低的深綠色作為陰影顏色。陰影顏色確定后,再給陰影足夠大的模糊數(shù)值,最終會得到了一個不錯的陰影效果。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

顏色太深、太生硬的陰影和按鈕顏色對比太大,設計時應盡可能調(diào)整陰影的顏色、透明度等參數(shù),避免生成這種效果;把黑色陰影調(diào)整成同色系的深色陰影,陰影的效果看起來就會更自然、更柔和;再把陰影的擴展程度調(diào)成負數(shù),就能消除陰影的外展,讓陰影看起來更真實。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

內(nèi)陰影

內(nèi)陰影在UI設計中相對少見,內(nèi)陰影和上面所講的陰影有相同的參數(shù)設置,只不過內(nèi)陰影是在圖形內(nèi)部起效果。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

內(nèi)陰影無法像外陰影那樣展現(xiàn)圖層之間的深度和層級關(guān)系,只對圖形內(nèi)部起作用。如果內(nèi)陰影使用太多,可能會混淆圖層間的層級關(guān)系,讓界面關(guān)系看起來不明確。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

八、模糊

1. 高斯模糊

高斯模糊是最常用的設計效果,呈現(xiàn)出從中心向四周均勻擴散的模糊效果。高斯模糊由半徑控制,半徑數(shù)值越大,模糊效果越明顯。

高斯模糊常用在界面之間的過渡或者用來模糊背景突出景深效果。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

高斯模糊還可以作為陰影效果,放在對象下面使用。例如新建一個橢圓做成模糊效果,放在對象下面,就能快速呈現(xiàn)出一個帶有陰影的效果。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

2. 背景模糊

蘋果在操作系統(tǒng)中經(jīng)常使用背景模糊,呈現(xiàn)出背景很模糊的玻璃效果。

背景模糊主要針對圖層覆蓋的內(nèi)容起作用,比如新建一個矩形調(diào)整透明度,做成背景模糊效果,那么該圖層覆蓋的區(qū)域會變模糊,圖層沒有覆蓋的區(qū)域保持不變。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

3. 動感模糊

動感模糊由模糊數(shù)值和角度兩個參數(shù)控制,用來模擬對象在不同角度上的移動效果。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

4. 縮放模糊

當對象由內(nèi)到外變得模糊時,就會發(fā)生縮放模糊。這種模糊效果在界面設計中用得較少。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

縮放模糊由模糊數(shù)值和原點兩個參數(shù)控制。在縮放模糊中可以隨機設置模糊原點,通過移動原點獲得一些有趣的圖形效果。

界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

最后

以上是界面設計進階過程中需要搞懂的基本設計要素,希望通過本次系統(tǒng)性的講解,能更進一步提升設計精細度

專欄作家

作者:Clippp,每周精選設計文章,專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設計思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于CC0協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

完美界面設計秘訣:界面設計的八大黃金法則

天宇 設計思維

如果你想設計出卓越,高效和流暢的用戶界面,就請參考Ben Shneiderman的“界面設計的八大黃金法則” 。蘋果,谷歌和微軟設計的產(chǎn)品都反映了Shneiderman的法則,這些行業(yè)巨頭制定的用戶界面指南都包含Shneiderman黃金法則中的特征,而這些公司的熱門界面設計則是法則的視覺體現(xiàn)。本文將告訴你如何整合8大黃金法則來改進你的工作。

界面設計的八大黃金法則

Ben Shneiderman(生于1947年8月21日)是美國馬里蘭大學人機交互實驗室的計算機科學家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其熱門書“設計用戶界面:有效的人機交互策略(Designing the User Interface: Strategies for Effective Human-Computer Interaction)”中介紹了界面設計的八個黃金法則:

一致性

當你在設計類似的功能和操作時,可以利用熟悉的圖標,顏色,菜單的層次結(jié)構(gòu),行為召喚,用戶流程圖來實現(xiàn)一致性。規(guī)范信息表現(xiàn)的方式可以減少用戶認知負擔,用戶體驗易懂流暢。一致性通過幫助用戶快速熟悉產(chǎn)品的數(shù)字化環(huán)境從而更輕松地實現(xiàn)其目標。

常用用戶使用快捷操作

隨著使用次數(shù)的增加,用戶需要有更快的完成任務的方法。例如,Windows和Mac為用戶提供了用于復制和粘貼的鍵盤快捷方式,隨著用戶更有經(jīng)驗,他們可以更快速,輕松地瀏覽和操作用戶界面。

提供有用信息的反饋

用戶每完成一個操作,需要系統(tǒng)給出反饋,然后用戶才能感知并進入下一步操作。反饋有很多類型,例如聲音提示,觸摸感,語言提示,以及各種類型的組合。對于用戶的每一個動作,應該在合理的時間內(nèi)提供適當?shù)模诵曰姆答仭H缭O計多頁問卷時應該告訴用戶進行到哪個步驟,要保證讓用戶在盡量少受干擾的情況下得到最有價值的信息。

作者/版權(quán)持有人:Google,Inc.    版權(quán)條款和許可:合理使用

Windows Media Player設計師應該牢記Ben Shneiderman的第三個黃金法則:提供有用信息的反饋。體驗不佳的錯誤消息通常會只顯示錯誤代碼,對用戶來說這毫無意義。作為一名好的設計師,你應該始終給用戶以可讀和有意義的反饋。

設計流程需要設計一個完結(jié)

不要讓你的用戶猜來猜去,告訴他們其操作會引導他們到哪個步驟。例如,用戶在完成在線購買后看到“謝謝購買”消息提示和支付憑證后會感到滿足和安心。

提供簡潔的錯誤操作的解決方案

用戶不喜歡被告知其操作錯誤。設計時應該盡量考慮如何減少用戶犯錯誤的機會,但如果用戶操作時發(fā)生不可避免的錯誤,不能只報錯而不提供解決方案,請確保為用戶提供簡單,直觀的分步說明,以引導他們輕松快速地解決問題。例如,用戶在填寫在線表單時忘記填寫某個輸入框時,可以標記這個輸入框以提醒用戶。

允許撤銷操作

設計人員應為用戶提供明顯的方式來讓用戶恢復之前的操作,無論是單次動作,數(shù)據(jù)輸入還是整個動作序列后都應允許進行返回操作,正如Shneiderman在他的書中所說:

“這個功能減輕了焦慮,因為用戶知道即便操作失誤,之前的操作也可以被撤銷,鼓勵用戶去大膽放手探索。”

給用戶掌控感

設計時應考慮如何讓用戶主動去使用,而不是被動接受,要讓用戶感覺他們對數(shù)字空間中一系列操作了如指掌,在設計時按照他們預期的方式來獲得他們的信任。

減少短時記憶負擔 

人的記憶力是有限的,我們的短時記憶每次最多只能記住五個東西。因此,界面設計應當盡可能簡潔,保持適當?shù)男畔哟谓Y(jié)構(gòu),讓用戶去再認信息而不是去回憶。再認信息總是比回憶更容易,因為再認通過感知線索讓相關(guān)信息重現(xiàn)。例如,我們經(jīng)常發(fā)現(xiàn)選擇題比簡答題更容易,因為選擇題只需要我們對正確答案再認,而不是從我們的記憶中提取。被彭博商業(yè)周刊稱為“世界上最具影響力的設計師之一”的Jakob Nielsen發(fā)明了幾種可用性研究方法,包括啟發(fā)式評估。信息再認而非回憶就是Nielsen界面設計10種可用性啟發(fā)式原則之一。

了解蘋果的設計如何整合Shneiderman的8大黃金法則

蘋果整合Shneiderman的八項黃金法設計出成功的產(chǎn)品,他們從Mac到移動設備設計都取得了巨大的成功,他們以產(chǎn)品設計的一致性,直觀而美麗為榮。蘋果的iOS人機界面指南也告訴我們他們的設計團隊如何應用Shneiderman的設計原則。

1. 一致性

“一致性”和“感知的穩(wěn)定性”在Mac OS的設計中體現(xiàn)得淋漓盡致。不管是80年代的版本,還是現(xiàn)在的版本,Mac OS菜單欄設計都包含一致的圖形元素。

作者/版權(quán)持有人:StockSnap.io    版權(quán)條款和許可:CC0

作者/版權(quán)持有人:StockSnap.io    版權(quán)條款和許可證:CC0

隨著時間的推移,Mac OS的外觀有很大變化,Mac OS菜單欄設計都保持一致。

2. 快捷操作

如前所述,Mac允許用戶使用各種鍵盤快捷鍵,使用頻率高的包括復制和粘貼(Command-X和Command-V)以及截圖(Command-Shift-3)。

作者/版權(quán)持有人:StockSnap.io    版權(quán)條款和許可證:CC0

Mac允許用戶鍵盤快捷方式操作實現(xiàn)通常需要鼠標、觸控板或其他輸入設備才能完成的操作。

3. 有用信息反饋

當用戶點擊Mac桌面上的文件時,該文件會“突出顯示”,這是視覺反饋的一個很好的示例。另外,當用戶拖動桌面上的文件夾時,他們可以看到在按住鼠標時,文件夾顯示被移動的狀態(tài)。

作者/版權(quán)持有人:Euphemia Wong    版權(quán)條款和許可:合理使用

作者/版權(quán)持有人:Euphemia Wong    版權(quán)條款和許可:合理使用

4.  操作流程的設計

當用戶將軟件安裝到Mac OS時,提示信息的屏幕顯示用戶當前的安裝步驟。

作者/版權(quán)持有人:Google,Inc.    版權(quán)條款和許可:合理使用

5.  錯誤操作的解決方案

在軟件安裝過程中,如果發(fā)生錯誤,用戶將收到友好的提示信息。提供復雜的解決方案,或用戶難以理解的解決方案,或只報錯不提供解決方案,都是極大影響用戶體驗,使用戶沮喪的關(guān)鍵原因。根據(jù)錯誤操作的嚴重程度,區(qū)分何時使用小的,不會影響用戶操作的提醒,以及何時使用大的,侵入式提醒。但當錯誤操作發(fā)生時,請謹慎選擇正確的語氣和正確的語言提醒用戶操作錯誤。

作者/版權(quán)持有人:Google,Inc.    版權(quán)條款和許可:合理使用

Mac OS通過顯示一個溫和的提示消息向用戶解釋出現(xiàn)了什么錯誤操作及其原因。另外,解釋這是由于自己的安全偏好選擇,進一步向用戶保證,告訴他們一切在掌控范圍內(nèi)。

作者/版權(quán)持有人:Manutencaonet Blogspot     版權(quán)條款和許可:CC BY 3.0

Windows系統(tǒng)中這個非常不友好的提示信息使用“fatal(后果嚴重的)”和“terminated(被終止)”字樣。這樣的負面的,不友好的言語肯定會嚇倒大多數(shù)用戶!

6. 允許撤銷操作

當用戶在安裝過程中提供信息時發(fā)生錯誤,允許他們重新回到上一步,而不必重新開始。

作者/版權(quán)持有人:Euphemia Wong    版權(quán)條款和許可:合理使用

7. 給用戶掌控感

讓用戶有權(quán)選擇是繼續(xù)運行程序還是退出程序,Mac的活動監(jiān)視器允許用戶在程序意外崩潰時“強制退出”。

作者/版權(quán)持有人:Euphemia Wong    版權(quán)條款和許可:合理使用

8. 減少短時記憶負荷

由于人類短時記憶每次只能記住5個東西,所以蘋果iPhone屏幕底部的主菜單區(qū)域中只能放置4個及以下的應用程序圖標,這個設計不僅涉及對記憶負荷的考慮,還考慮了不同版本一致性問題。

作者/版權(quán)持有人:Brian Voo    版權(quán)條款和許可:合理使用

工作表:如何將Shneiderman的8項黃金法則應用于你的界面設計

作為設計師,你的工作是創(chuàng)建直觀,精美和流暢的用戶界面設計,讓用戶感到輕松和滿意。下面這個工作表可以幫你把上述這些規(guī)則應用于你的設計中。

譯者:oftodesign

原文作者:Euphemia Wong(The Interaction Design Foundation用戶體驗研究員,設計師)

本文由 @oftodesign 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

日歷

鏈接

個人資料

藍藍設計的小編 http://www.z1277.cn

存檔

主站蜘蛛池模板: 加勒比一本大道香蕉在线视频 | 青草免费免费观看视频在线 | 三级毛片基地 | 国产一区二区三区精品视频 | 国产成人精品第一区二区 | 久久国产精品国产自线拍免费 | 色综合合久久天天综合绕视看 | 最近手机中文字幕无吗 | 色综合天天综合高清影视 | 成人自拍视频在线 | 国产精品久久影院 | 国产成人久久精品二区三区牛 | 国产精品自在线拍 | 真人一级毛片免费完整视 | 欧美一级做a爰片久毛片潮 欧美一级做a爰片免费 | 日韩一及片| 国产无遮挡裸体免费视频在线观看 | 国产真实伦偷精品 | 激情五月色婷婷色综合 | 久久黄色影片 | 激情五月色婷婷色综合 | 中国护士一级毛片免费版本 | 一级做a爱过程免费视频日本 | 日本高清视频www夜色资源网 | 91久久综合 | 四虎东方va私人影库在线观看 | 亚洲欧洲毛片 | 鲁大师视频在线观看免费播放 | 国产成人精品免费视频大 | 婷婷精品视频 | 亚洲国产欧美国产第一区 | 欧美日韩一区二区三在线 | 国产吧在线视频 | 在线观看免费av网 | 中国特级黄一级真人毛片 | 日本香蕉一区二区在线观看 | 成人99国产精品一级毛片 | 精品综合久久久久久8888 | 欧美人与动物xxxx | 理论亚洲区美一区二区三区 | 亚洲an天堂an在线观看 |