首頁

了解這9種交互機制,不怕跟開發(fā)相愛相殺了~

seo達人



1.刪除機制

刪除邏輯是怎樣的?

無法找回:是否需要二次確認設計、以及展示刪除后結果)

可以找回:是否需要展示如何找回的說明?

刪除對象:

是單個、批量還是全部?

刪除方式:

手動刪除:點擊刪除還是滑動刪除?

自動刪除:何時開始?是否展示剩余的時間

刪除狀態(tài):

包刪除成功提示、刪除失敗提示、刪除過久的提示

圖片

 

2.中斷機制

數據的處理是怎樣的?

信息/邏輯是否會發(fā)什么變化、是否自動保存進度/記錄、是否影響后續(xù)鏈路里的邏輯處理

中斷方式:有意、無意中斷的處理都是怎樣的?

中斷程度:后臺繼續(xù)運行還是徹底退出后臺?

軟/硬件變化時的處理:

包括耳機的連接與切斷、電話的來電與掛斷、網絡的中斷與恢復

圖片

 

3.顯示機制

顯示是否有邊界值?

包括最小值、最大值、到達特定閾值

顯示是否有時效性?

內容過期時怎么顯示?到達某個閾值時怎么顯示?內容不存在的顯示?

其他考慮點:

· 顯示格式:如日期時間的數據格式:2022.05.01  2022-05-01

· 顯示分辨率:各種分辨率下如何顯示,最大,最小考慮極致情況

· 顯示樣式:是否對齊組件?需要統一?是否有差異化設計

圖片

 

4.加載機制

加載前中后該如何顯示?

包括默認狀態(tài)的顯示、初始狀態(tài)的顯示、加載中的顯示、加載過長的顯示、加載成功的顯示、加載失敗的顯示、加載為空的顯示等等。

加載方式:

手動加載還是自動加載?優(yōu)先加載哪些內容(文本或圖片)?

加載范圍:

展示數量是多少?一次性全量展示還是分頁加載展示?

圖片

 

5.推送(push)機制

push機制:

推送內容說明、全量用戶還是局部用戶、推送的時間/周期/次數等都是怎樣的?

push交互:

跳轉:原頁面刪除、無法進入、push過期時該如何處理?

返回:返回到哪里?

圖片

 

6.退出機制

· 當期操作進度、記錄是否保存

· 是否需要展示退出說明、原因

· 退出程度

是當前頁面、某段流程、退出后臺運行、殺死后臺、還是手機關機?

圖片

 

7.排序機制

· 默認排序是怎樣的?正序還是倒序?哪個選項優(yōu)先

· 排序維度是怎樣的?按時間/銷量/質量/數量/評分/信用等等排序

圖片

 

8.刷新機制

· 是手動刷新:如下拉刷新、點擊刷新

· 還是自動刷新:何時開始刷新?是否提前告知用戶?是否提前自動保存操作記錄

圖片

 

9.緩存機制

· 緩存機制是怎樣的?包括緩存對象、數量、范圍

· 緩存位置是哪?手機本地、服務端

· 緩存的清理是怎樣的?自動清除還是手動清除

圖片

 

– END

好了,以上就是一些常見的交互機制,希望你在輸出交互方案、產品為文檔時有所幫助,避免漏掉一些內容,減少和開發(fā)的相愛相殺。

圖片

 


 

原文地址:和出此嚴(公眾號)

作者:和出此嚴

轉載請注明:學UI網》了解這9種交互機制,不怕跟開發(fā)相愛相殺了~

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



國風音樂圈 UX 設計總結

seo達人

1. 背景

1.1音樂故事

我大概2011年左右了解到網絡上有一種音樂概念叫“古風”,用到了很多民族、東方古典、戲曲元素,創(chuàng)作人員大部分都是業(yè)余音樂愛好者或者音樂專業(yè)學生,在acg論壇、貼吧、微博、分貝網、yyfc、5sing發(fā)布作品和交流。后來有一定影響力的創(chuàng)作團隊開始舉辦線下演出,古風圈開始吸引更多年輕人 。2018年在北京召開中國國風音樂發(fā)展研討會,包括古風圈的墨明棋妙等。國風音樂有更多的可能性,那么它是如何制作出來呢?

 

1.2音樂制作流程

音樂制作從盈利性上分為商業(yè)音樂制作和非商業(yè)音樂制作,區(qū)別在于商業(yè)音樂的制作目標之一為盈利;非商業(yè)音樂不用做商業(yè)用途,制作目標因人而異。

制作流程如下:

圖片

1)策劃和制作人有區(qū)別,制作人除了完成策劃的內容,音樂素養(yǎng)更高,會在制作上提出更有建設性的修改意見。策劃更多情況下只負責確定制作人員和項目進度跟進。

2)作曲、作詞、編曲的先后順序根據制作人員不同會改變,內部達成共識即可。

3)樂器實錄指在錄音室錄制樂器音軌,非必須環(huán)節(jié)。如果不選擇實錄表現,則用音源代替。4)編曲給出的分軌文件就是由音源表現。

5)和聲的編寫有時是作曲、編曲負責,有時也由歌手發(fā)揮,順序不一定排在主旋律錄制后。

6)混音如果涉及同張專輯的多首歌曲,需要母帶師介入完成整體調整。

 

1.3用戶群體

獨立音樂人:包括在校音樂專業(yè)學生或者已工作的業(yè)余音樂創(chuàng)作者。希望通過音樂表達自我,記錄生活,結識朋友,提高演奏及創(chuàng)作能力,因此帶有弱社交目的。

音樂團體:社團、樂隊、團隊、工作室、制作組。

音樂制作委托方:有制作適合自身音樂的需求,包括策劃、導演、制片、制作人等。

圖片

 

 

2. 痛點及情境

2.1痛點

從制作音樂的契機分為自發(fā)制作和委托制作,其中涉及到幾個角色:自發(fā)制作者、委托方、受托方。

圖片

自發(fā)制作者(音樂人):

1)音樂人之間缺少了解,難以構建信賴關系
2)很難找到相似風格的音樂人互相交流
3)想找能長久合作做音樂的朋友或團隊

 

自發(fā)制作者(樂隊/社團):

1)想找能長久做音樂的拍檔

委托方(企劃負責人/比賽舉辦方):

1)企劃對音樂人的特化需求(對風格、完成度的需求)
2)比賽的題材限制,音樂人工種的篩選

受托方(音樂人/團隊/工作室):

1)受托方對素材的特化需求(對風格、題材的需求)
2)受托方對企劃的信任從何建立(對企劃介紹、企劃進度、作品數量、作品質量的需求)

 

 

2.2使用情境

一名在校大學生Y在為自己導演的短片尋找合適的配樂,因為周圍沒有音樂學院,班上同學也沒有這類技能,她找到了國風音樂圈這個APP,通過搜索風格縮小范圍,隨手點進一個音樂人主頁去翻閱他的作品和參與過的企劃,通過企劃推薦又找到了其他的音樂人及團隊。Y創(chuàng)建了自己的企劃,填寫短片的介紹,上傳樣片。

圖片

 

3.競品分析

3.1競品優(yōu)缺點

分析5sing音樂人&騰訊音樂人&豆瓣音樂人&網易音樂人。

圖片

 

優(yōu)點:

1)經營時間久,積累了很多小眾音樂人;
2)音樂更新頻率高;
3)有比較多的消音伴奏;
4)有beat(一種音樂素材)交易、詞曲交易。

缺點:

1)對某些工種分類缺失,導致相應工種曝光度很低,合作時不能第一時間建立信賴關系;
2)最近web端增加了音樂身份篩選,但依舊有些混亂,聽眾不適合放在音樂人中篩選,編曲和制作人有相似度,但職能完全不同;
3)在申請入駐時,無法選擇多個流派。

圖片

 

 

優(yōu)點:

1)下屬音樂平臺多,可以搜索到很多作品;

2)有詞曲出售。

 

缺點:

1)沒有促成音樂制作工種間合作的功能(不清楚入駐后是否有該功能)。

圖片

 

優(yōu)點:

1)音樂風格分類很廣泛;
2)根據聽眾關注列表來推薦,能幫助相近喜好的聽眾找到感興趣的音樂人。

缺點:

1)部分音樂人自定義的頁面布局板塊混亂;
2)沒有音樂人間交流合作的功能。

圖片

優(yōu)點:

1)網易會推出一些音樂策劃項目,促成創(chuàng)作者間合作;
2)網易云音樂個性化推薦增加音樂人曝光度;
3)有創(chuàng)作者社區(qū);
4)有beat、詞曲交易。

缺點:

1)對身份的分類太少,只有制作人、作詞、作曲、編曲、演唱。

 

 

3.2總結

幾個平臺對音樂人來說,都沒能給出一條流暢的制作鏈,音樂人簽署授權協議后,和平臺的聯系變強,但和合作者的聯系幾乎就和聽眾與之的距離差不多。音樂人有向部分人展示demo或beat的需求,還無法滿足。有平臺促成社區(qū),效果待觀察。

 

 

4.流程及功能

4.1流程

根據第2部分的情境分析出流程如下:

圖片

 

選擇合作者流程

 

 

4.2功能結構

圖片

尋找合作者功能結構

 

 

5.頁面展示

故事的開篇:開始尋找合作者

 

 

5.1招募

圖片

若已有合作者,可在創(chuàng)建企劃/團體時添加成員。發(fā)起人有修改企劃信息的權限,可以轉讓企劃或退出企劃,若發(fā)起人未轉讓直接退出,則企劃結束,所有成員都會看到該結束狀態(tài)。流派風格可以多選,在主頁最多展示5項。

 

招募有時限,可以避免太多廢棄招募占據招募首頁。創(chuàng)建完成后,可以添加已有的合作者為企劃成員。發(fā)起人可以選擇企劃來發(fā)布招募。

圖片

 

動效說明:這里展示的是策劃(制作人)點擊+號進入創(chuàng)建企劃頁面的過程。文字出現時配合圖標的彈性變化,微微下沉再恢復。切換頁面時速度曲線為漸緩。

圖片

動效說明:這里展示的是添加已有成員進企劃名單。選擇工種。選項框展開有彈性變化。選項拉到底時,會有位置偏移再回彈。選好以后的工種滾動入場。

 

 

5.2搜索

圖片

音樂人搜索的需求包括按個人、按團體、按作品、按企劃。根據音樂制作的流程,得到對個人的篩選條件最主要為工種。按作品篩選的下級篩選條件是流派風格。按企劃篩選的下級篩選條件是題材。按團體篩選的下級篩選條件是流派風格、題材。

 

 

5.3標簽和身份

標簽在搜索、主頁展示、作品展示都有著視覺分流的作用。該應用中涉及到的標簽包括:流派風格、工種 、題材。

圖片

 

 

流派風格標簽

圖片

 

用戶身份按結構分為個人和團體,按需求分為委托方和受托方。

按結構分,個人:策劃/制作人/監(jiān)制、作詞、作曲、編曲、歌手、樂器演奏、混音/母帶、畫師、視覺設計、PV師;團體:樂隊、工作室/團隊、比賽舉辦方。個人身份間可以多選組合。團體身份不可和個人身份多選組合。

按需求分,委托方:策劃/制作人/監(jiān)制、比賽舉辦方;受托方:作詞、作曲、編曲、歌手、樂器演奏、混音/母帶、畫師、視覺設計、PV師、樂隊、工作室/團隊。

結合兩個維度,得到4種身份類型:個人委托方、團體委托方、個人受托方、團體受托方。

圖片

以下是關于身份的幾點考慮:

 

畫師/視覺設計/PV師

狹義的音樂制作本身不包括宣傳(如封面設計、海報設計、PV/MV制作),所以畫師、視覺設計、PV師等工種視具體情況會刪減。

 

樂隊

考慮到組建樂隊主要為樂器演奏者和歌手兼任作詞、作曲、編曲,所以在團體中把樂隊單獨列出來的,權限和工作室、團隊一樣。

 

音樂聽眾

一開始整理用戶身份的時候,對音樂聽眾這個身份的取舍思考過。保留的原因是這個應用主要面向音樂制作人員,但音樂制作也是一個交流的過程,不單與音樂專業(yè)人士,與聽眾的交流也是必不可少的。去掉的原因是聽眾這個身份的門檻較低,如果在用戶中占比過多,就失去了做音樂制作交流平臺的意義。

圖片

 

工種標簽

身份與工種的關系:身份有時對應一個工種,有時對應多個工種形成的集合。如身份A->策劃,身份B->作曲/編曲/混音。

圖片

題材標簽

 

 

5.4主頁

圖片

除了用戶主頁,企劃也有主頁。在企劃主頁的簡介中,會展示企劃的父子級關系圖,幫助音樂人了解該企劃的發(fā)展。企劃關系由發(fā)起人編輯。音樂人也可通過查看推薦的相似企劃尋找感興趣的項目。在個人主頁還會推薦相似的音樂人、相關企劃,團體主頁推薦相關音樂人(團體成員)、相似團體團體和相關企劃。

圖片

 

 

動效說明:以選擇的企劃的頭像和名稱作為轉場銜接。招募列表數據項快速退場。企劃主頁作品列表快速入場。加關注按鈕在卡片信息完整出現后再入場,提示用戶可以關注該企劃。

圖片

 

 

6.總結

作為系列的第一篇,介紹了國風音樂圈的項目背景、用戶群體,針對用戶分析其痛點并描述出尋找合作者的使用情境。以音樂人制作交流圈為切入點,分析相關競品。有了參考后給出流程和功能結構圖。從尋找合作者開始講起,展示招募模塊及涉及的設計點。

 

原文地址:黑馬家族(公眾號)

作者:黑馬青年

轉載請注明:學UI網》國風音樂圈 UX 設計總結

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


如何做B端體驗標準化:以數據可視化場景為例

seo達人

圖片

業(yè)務背景

以我們 CCO 體驗設計團隊為例,主要服務阿里體系的消費者、商家、經濟體等業(yè)務領域。隨著業(yè)務不斷擴大、用戶角色多、體驗復雜、設計師人力有限、定制化需求不斷增加,設計面臨嚴峻挑戰(zhàn)。

1、業(yè)務多:30多個產品應用

2、角色多:覆蓋消費者、客服小二、服務管理、業(yè)務運營、中臺管理、客戶  6大類用戶群體。

3、體驗復雜:設計師需兼顧用戶和客戶兩個視角。

圖片

從組織上,85% 設計師縱向支撐業(yè)務,15% 設計師橫向做標準化,反哺業(yè)務設計師。標準化實質解決的問題是保障基礎體驗一致性。

圖片

 

圖片

標準化怎么做

核心通過頁面梳理、抽象、分發(fā)、衡量,保障基礎體驗一致性。

圖片

 

圖片

案例實戰(zhàn)

以數據可視化場景為例,講述如何做標準化。

1、業(yè)務現狀

共有11個應用,涉及89個頁面。

圖片

2、問題

體驗不一致:各個工作臺頁面架構、組件、樣式野蠻生長,缺少規(guī)范導致體驗不統一。

低效:部分場景缺失,組件重復建設,大量定制;溝通協同內耗大,成本高。

圖片

3、策略

體驗統一:框架、組件、樣式。

提效:代碼化、工具、交付機制。

4、體驗統一

包括框架、組件、樣式。

圖片

框架

(1) 現有頁面收集

圖片

(2) 用戶場景分析

圖片

(3) 頁面歸類

結合用戶看數內容(例:概覽、分析、詳情)和交互形態(tài)(例:平鋪、下鉆),對頁面進行歸類。

圖片

(4) 確定典型布局

通過統計高頻復用形態(tài),確定典型布局。

圖片

組件

(1) 頁面結構分析

組件的收斂,需要先對頁面分析,確定模塊層內容。例:模塊包含頁頭、篩選、圖表、表格。

圖片

(2) 模塊層分類

橫向收集全部業(yè)務,將模塊層分類。細分模塊擴展形態(tài),放到對應的簍子里。

圖片

(3) 模塊專項治理

接下來,需要對每一個模塊進行專項治理。比如圖表模塊,再拆再抽象成指標、圖表、單選、多選 4類場景。場景里再對主體和變體(也就是擴展形態(tài))分類。

圖片

圖片

樣式

(1) 確定優(yōu)化內容

圍繞視覺凌亂,要做的便是完善設計語言。設計師需要結合自身技術底層,補充缺失規(guī)范。例如布局、色板、字體、動效。

圖片

(2) 確定組件范圍

通過統計高頻復用組件,確定需要梳理的組件范圍。

圖片

(3) 布局

圖例位置:線上有9種,通過從業(yè)務場景按閱讀順序劃分,最終收斂成2種。

圖片

組件高度:真實線上情況,只能看2個指標,高度規(guī)范缺失。

圖片

需要根據用戶分辨率調研,提煉典型分辨率。比如用戶是win系統,包含菜單欄、任務欄等默認高度,再減去本身頁面頁頭等默認高度,得到 3 檔。確定組件建議默認行高 240px。

圖片

軸標簽旋轉角度:現狀有順/逆時針兩種,通過分析標簽類型,結合閱讀順序、軸與標簽親密度,確定默認角度為順時針。

圖片

(4) 色板

通過場景梳理,確定不同組件使用的色板類型及缺失色板。

圖片

補充語義色板:從業(yè)務里抽象2類場景,指標和柱/餅/環(huán)場景,定義顏色。例如帶正面語義,用綠色,比如升、已到崗、正常。帶負面語義,用紅色,比如降、曠工、失敗。

圖片

(5) 字體

結合自身業(yè)務場景問題,從場景、版權、風格、識別、極值共5個維度選擇字體。

圖片

舉例場景一,縱向數據場景里,將市面上數據競品用到的字體都橫向鋪開嘗試,做排除法。比如din沒版權,蘋方非等寬字體,普惠102識別性弱。

圖片

舉例場景二,在核心數據呈現中,helvetica 品牌風格弱,普惠在1億以上極值過寬。

圖片

最終我們根據自身業(yè)務場景特征,用普惠和普惠102,運用在對應場景里。并同前端提煉規(guī)則。

圖片

(6) 動效

首先,需要確定動效價值,明確動效需要解決的問題。這里圍繞舒適度、活力、層級、反饋來講。

圖片

通過動效場景鏈路分析,確定優(yōu)化范圍。

圖片

加載動效:圍繞讓用戶認知過程更為自然。通過組件橫向梳理、抽象圖形、組合樣式的思路,輸出方案。比如這里共梳理17種組件類型,抽象成9類,包括點、線、面、餅、環(huán)、柱、文本、圖標、詞云,再進行組合產出方案。

圖片

出場動效:通過業(yè)務分析、提煉場景、優(yōu)化效果。比如這里共提煉 3類場景,有通用、監(jiān)控、輿情。圍繞過渡不自然、卡頓、缺少情感化表達來優(yōu)化效果。

圖片

圖片

瀏覽動效:通過提煉場景,來強化元素之間的層級與空間關系。比如單個組件、聯動、下鉆場景下,圍繞點擊感知弱、重點不突出、缺少懸停態(tài)來優(yōu)化效果。

圖片

沉淀速度參數:將優(yōu)化動效場景的速度參數,同前端約定規(guī)則沉淀組件庫。

圖片

5、提效

包含代碼化提效、工具提效、機制提效。

圖片

整體思路

從設計組內到技術產研的提效過程。

提效面向用戶依次是:組件設計師、業(yè)務設計師、前端、產品。

搭建目前還在進行中,這里主要從交付-工具-代碼化來分析。

圖片

交付內容

1、業(yè)務設計師:sketch/figma物料 (樣式、組件、區(qū)塊、模板、規(guī)則 )

2、業(yè)務設計師:kitchen工具(樣式、組件、區(qū)塊、模板)

3、組件工程師:組件規(guī)范/組件官網

圖片

交付機制

新需求:通過評估復用性、抽象、內審、沉淀物料。

現有業(yè)務:通過頁面梳理歸類、抽象、內審、沉淀物料。

圖片

6、衡量

從物理到行為層,包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標準化覆蓋的好壞。

圖片

 

圖片

總結

回歸課程,在B類業(yè)務里,服務多個產品、多用戶角色、體驗復雜的場景下,在定制化+標準化團隊陣型里,標準化實質解決的問題是保障60分基礎體驗一致性。

圖片

總結:B端體驗標準化包括物料的產出、交付以及衡量標準。

產出:包括框架、組件、樣式的收斂來梳理、抽象頁面。

交付:面向2類用戶群體,業(yè)務設計,需交付物料和工具。組件工程師,代碼化需提供組件規(guī)范,組件線上化需助力組件官網的建設。

衡量:一致性評分包括樣式、組件、框架及組件交互。

圖片

 

原文地址:AlibabaDesign(公眾號)

作者:CCO 設計

轉載請注明:學UI網》如何做B端體驗標準化:以數據可視化場景為例

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



國外大佬總結的這20條B端圖表設計原則,太實用了!

ui設計分享達人

最近幾年以來,大家能看到B端設計趨勢已經越來越火熱,在B端設計中關于圖表的設計算是為數不多的視覺發(fā)揮點了。那么怎樣才能做好圖表設計,讓設計出來的圖表高大上,符合業(yè)務需求,讓業(yè)務方和總監(jiān)對你贊不絕口,本文就必須看完和收藏了,因為實在是太實用!


應用設計越來越依賴數據驅動,對高質量的數據可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導的數據圖表,但我們其實可以通過遵循一些簡單的規(guī)則來改變這個情況。



1. 選擇一個正確的圖表可視化類型


選擇錯誤的圖表類型,或默認為最常見的數據可視化類型,可能會讓用戶感到困惑或導致對數據的誤解。根據用戶希望看到的內容,可以用多種方式表示相同的數據集。盡量做到每一次做數據可視化時都能從數據集類型分析和用戶訪談開始。 

undefined



2. 根據正負值使用正確的繪圖方向


當使用水平條時,在基線的左側繪制負值,在右側繪制正值。不要在基線的同一側繪制負值和正值。 

undefined



3. 條形圖總是以0基線開始


刪數據起點會導致曲解。在下面的例子中,看左邊的圖表可以很快的得出結論,值B比D大3倍多,而實際上,兩者的差異要小得多。從0開始可以確保用戶獲得更準確的數據表示。

undefined


4. 折線圖應該要清晰體現y軸上的趨勢變化


對于折線圖,總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標是表示趨勢,因此根據給定時期的數據集調整比例并保持直線占據y軸范圍的三分之二是很重要的。 

undefined


5. 使用折線圖時要考慮時間連貫性


折線圖是由線連接的“標記”組成,通常用于可視化時間間隔內的數據趨勢。這有助于說明數值是如何隨時間變化的,并且對于較短的時間間隔非常有效,但當數據更新不頻繁時,這可能會導致混淆。 

undefined

例如: 使用折線圖來代表年度收入,如果數據是每月更新的,則每個月在圖表中會生成一個個孤立的標記點。用戶可能會假設連接“標記”的線代表實際值,而在特定時間實際的收入數字是未知的,所以可能會產生誤會。在這種情況下,使用垂直條形圖可能是一個更好的選擇。 


6. 不把折線圖強行”平滑“


平滑的折線圖可能在視覺上很好看,但它們錯誤地反映了背后的實際數據,而且過粗的線會模糊真正的“標記”位置。 

undefined


7. 避免使用比例不同的雙軸折線圖


通常,為了節(jié)省可視化空間,當有兩個具有相同度量但大小不同的數據系列時,可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀,而且它們還以完全誤導的方式代表了兩個數據系列之間的比較。大多數用戶不會密切關注比例,只是瀏覽圖表,然后就得出了錯誤的結論。 

undefined


8. 限制餅圖中顯示的切片數量


餅狀圖是最流行的也是經常被誤用的圖表之一。在大多數情況下,條形圖是更好的選擇。但如果你決定做一個餅狀圖,有2個比較好的建議:

1)不要超過5-7片,保持簡單

2)可以將額外的最小段分組到“其他”切片 

undefined


9. 在圖表上直接標注


如果沒有適當的標簽,無論你的圖表有多好,它都不會有意義。直接在圖表上標注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數據和對應的部分。 

undefined


10. 不要在切片上貼數據


將數據放在切片上可能會導致多個問題,在可讀性問題上和窄切片上都會有挑戰(zhàn)。相反,添加黑色標簽能清晰的鏈接到每個部分。 

undefined


11. 保持餅圖切片秩序以提升閱讀效率


在確定餅片秩序時,有幾種常用的方法:

1)將最大的切片放在12點的位置,然后將下一片切片順時針降序排列

2)把最大的切片放在12點的位置,第二大的放在順時針相鄰位置,第三大的放在11點的位置,其余的切片按順時針降序排列 

undefined


12. 避免隨機排列


同樣的建議也適用于其他許多圖表。不要默認采用字母排序,將最大的數值放在頂部(對于水平條形圖)或左側(對于垂直條形圖),以確保最重要的數值占據最突出的空間,減少眼球運動和閱讀圖表所需的時間。 

undefined


13. 窄的餅圖是難閱讀的


餅圖通常不是最容易閱讀的圖,因為比較相似的值非常困難。當我們把中間部分去掉,創(chuàng)建一個圓圈圖表時,我們騰出了空間來顯示額外的信息,但這樣犧牲了清晰度,極端情況下,圖表就會變得毫無用處。 

undefined


14. 視覺效果不要搶了數據風頭


不必要的造型不僅會分散注意力,還可能導致對數據的誤解和用戶的錯誤印象。你應該避免:

1)3D元素,明暗面

2)陰影、漸變和其他扭曲的多彩色

3)斑馬圖案,過多的網格線

4)過度裝飾,斜體,粗體或襯線字體 

undefined


15. 選擇與數據性質相匹配的調色板


顏色是有效的數據可視化的組成部分,在設計時考慮以下3種顏色類型:一個定性調色板最適合顯示分類變量。為確保易用性,所分配的顏色應該是不同的。連續(xù)調色板最適合需要按特定順序放置的數字變量。使用色相或亮度或兩者的組合,可以創(chuàng)建一個連續(xù)的顏色集。

發(fā)散調色板是兩個連續(xù)調色板的組合,中間有一個中心值(通常為0)。通常不同的調色板將傳達積極和消極的價值。確保顏色也與“消極”和“積極”表現的概念相匹配。 

undefined

看看一個方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3,它可以幫助你生成各種調色板。 


16. 設計的可訪問性


根據美國國家眼科研究所(National Eye Institute)的數據,大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。

1)在調色板中使用不同的飽和度和亮度

2)把現有配色去色然后檢查對比度和可讀性。 

undefined


17. 關注易讀性


確保排版能夠準確傳達信息,幫助用戶專注于數據,而不是分散用戶的注意力。

1)選擇易讀的字體,避免襯線和裝飾過度的字體

2)避免使用斜體、粗體和全部大寫

3)確保與背景有高對比度

4)不要旋轉文字

undefined

 

18. 使用水平條形圖代替旋轉標簽


這個簡單的技巧將確保用戶能夠更有效地閱讀圖表,而不會扭傷他們的脖子。 

undefined


19. 事先選擇合適的圖表庫


如果你的任務是在web和移動項目中添加交互式圖表,你應該問的第一個問題是我們將使用什么圖表庫?現代圖表庫包含了許多前面提到的交互和規(guī)則?;谝讯x庫的設計將確保易于實現,并能提供大量交互想法。 

undefined


20. 做成動態(tài)圖表


幫助用戶通過改變參數,可視化數據進行探索。然后得出結論,最大化價值和洞察力。在下面的示例中,你可以看到IOS Health應用使用了各種數據表示的組合。 

undefined

原文地址:站酷
作者:彩云Sky

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

國外專業(yè)機構發(fā)布,2022年你最需要抓住的UI/UX設計趨勢

ui設計分享達人

當設計師被迫待在家里時,終于能有時間去反思現有的設計并重新創(chuàng)造。無聊是藝術家最大的敵人,他們會盡可能地打破困局。


對我們來說,2021年相當困難。世界上最長壽的貓慶祝了它的34歲生日,這可能是發(fā)生的唯一一件好事,順便說一下,你會在文末看到這只可愛的小貓照片。


那么,2022年的UI/UX設計趨勢是什么呢?看看現在的情況,我們已經可以預測未來的設計趨勢,就像我們對2021年所做的預測一樣(回頭看非常準確)。


在本文中,我們將發(fā)現:

  • 3D視覺設計師的內卷將會越來越嚴重

  • 數據可視化的工作將變得越來越重要

  • 服務的移動化還需要做出更多努力

  • scrollytelling 技術會越來越流行



1、滾動已死,滾動敘事興起 


舊的滾動是無聊的。如果你想吸引注意力,你就需要實現滾動敘事(scrollytelling)。(彩云注:這個技術的核心在于邊滾動頁面邊講故事) 

undefined

《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構之一。


它是一種敘事形式,可以在網頁和APP上呈現。想象一下,在一個網站中每個插圖、文本和其他元素都開始變得生動起來。自然地,你會想看到這個故事的結局。它就像一個游戲,帶你穿越迷宮。雖然你不能影響它的進程,但卻讓你感覺自己能參與其中。


2022年,Scrollytelling將會出現在你看到的每一個流行網站上。


另一方面,scrolllytelling讓用戶真正去閱讀內容。你可以用動態(tài)文本讓他們產生興趣,比如谷歌的網站 (https://www.google.com/search/howsearchworks/)。他們的團隊知道如何讓信息看起來更好:

undefined

Scrollytelling在用戶向下滾動時被激活,因此得名。沒有點擊,沒有選擇的麻煩,沒有彈出窗口。你似乎停留在一個地方,但通過滾動,把屏幕上的故事慢慢展開。這不僅要求設計師創(chuàng)造出酷炫的視覺效果,還需要認真思考一個你想要講述的故事情節(jié)。


所以,最好的網站不可能在2天內建成,需要更多的時間去打磨。

undefined

IAmBinadam令人驚艷的敘述設計


滾動敘事的項目通常需要大量的時間和精力。不過,這樣做的結果是值得的。頁面變成“活的”,每一秒都有新的事情發(fā)生,所以在閱讀時很難感到無聊。


那么移動端APP呢? Pure是一款約會應用(彩云注,這個應用在app store可以搜到,推薦大家安裝一個體驗一下,非廣告),它創(chuàng)造了一種我稱之為“tappytelling”的故事(當你第一次點擊并打開應用時,它就會被激活):


undefined


Scrollytelling是為用戶而創(chuàng)建的,用戶很喜歡它,不需要到其他頁面去閱讀整個故事。相反,網頁設計的整個故事都是事先考慮好的,并盡可能以最有趣的方式設計出來。 


2、用戶喜歡看數據,數據可視化越來越被重視 


如何在2022年做出一個還不錯的企業(yè)網站?你不會想告訴用戶你是“XX領域公認的領導者,該領域最好的之一”。這種標準的廣告表達并不傳達任何有價值的信息。


最好不要用形容詞,而是用事實來說明:你有多少分支機構,在哪些城市,誰是你的客戶,以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數據,你需要讓它不僅簡單,而且有趣。 

undefined

數據可視化有助于以一種吸引人的方式傳達正確的信息。它也可以與滾動敘事(Scrollytelling)緊密結合。以下是IAmBinadam展示數據的方式:


undefined

 通過去除數據集的復雜性,使信息更容易讓讀者感知。

undefined

不同級別的數據具有不同的大小,這樣用戶知道應該先從哪里查看


讀者可以很快注意到作者試圖通過圖片引出的結論??紤]到如今人們消費的數據量巨大,那些干凈整潔的數字帶來的正面影響更大。 


undefined

有些圖表乍一看甚至不像圖表,這使得它們更加能被注意到


還有一種現象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據英國國家統計局的數據,2018年,壓力和焦慮的平均得分約為2.7/10。自新冠疫情發(fā)生以來,得分已升至4.0/10,很少低于這一水平。同樣因為大流行,在過去兩年里工作量增加了4個小時。


人們壓力太大,卷的太辛苦,以至于不愿去看復雜的數據。


設計師做好數據可視化,以保持人們的注意力。記住,復雜的信息通常被忽略,因為讀者試圖節(jié)省他們的時間,更有可能使用滾動按鈕。
undefined

Illustration by Mona Chalabi


以下是我們推薦的一些表示數據的方式

  • 1)圖表和曲線圖

  • 2)插圖

  • 3)靜態(tài)信息圖

  • 4)互動信息圖


undefined

Illustration by Ink Factory


如何讓信息圖表看起來更好?

一個好的圖表,或者任何其他形式的數據可視化,都應該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中,Tufte通過圖表解釋了好圖表的3個原則:


1)展示數據的圖形元素與數值總數的比值應趨向于1。簡單地說,應該刪除一切不必要的元素,保持整潔。 


undefined


2)充分利用好畫面空間。也就是說,需要將數據編排的更緊密


undefined

Graph by Hootsuite


3)客觀地描述數據。不要使用夸張的圖表,可視化數據可以看起來很酷,但真實永遠是更重要的。


3、2022年還有必要做APP嗎?


根據We Are Social的數據,2021年有52.2億人使用手機,約占世界人口的66%。自2020年1月以來,手機用戶數量增長了1.8%(9300萬),而手機聯網總數量增長了7200萬(0.9%),到2021年初達到80.2億。


過去一年,社交媒體用戶的數量增長了13%以上。到2021年初,社交網絡上已有近5億新用戶注冊。根據App Annie的數據,Android用戶每天花在手機上的時間超過4小時。2020年,安卓用戶上網時長超過3.5萬億小時。


令人印象深刻的數字,是嗎?似乎到2022年,為產品做一個APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應用?有以下幾點可供評估:

 

1)用戶主要通過移動設備訪問你的網站這是你應該了解的重要數據。

客戶和你在一起的時間越長,你就有越多的機會去吸引他們,了解他們的習慣,并給他們想要的東西。(彩云注:這就是為什么各大廠之間都在拼命搶占用戶的在線時長。)

2)幫助內部業(yè)務流程更加有效。

如果你想要提高員工的工作效率、改進工作流程或增加利潤,那么就制作一個可以幫助管理業(yè)務流程的移動應用。

如今,像這樣的手機應用使企業(yè)能夠執(zhí)行越來越復雜和多樣化的任務,加快日常重復操作和文檔管理。


3)實現一些網站上沒有的新功能。

如果你認為APP能為用戶打開新的觸點,并讓用戶體驗更加友好,那么它就值得考慮開發(fā)。問問自己的APP能提供什么新的商業(yè)機會?例如,隨著疫情的蔓延,許多人開始用上健身APP在家里鍛煉。


4)競爭對手做的情況。

要了解競爭對手在做什么,他們是否有APP,能做什么,以及他們是否真的對用戶有用。


查看App Store和谷歌Play的統計數據。下載和評論的數量可以告訴你用戶是如何使用競爭對手的應用的。如果他們的服務真的很方便而且很有必要,那么你就容易被甩在后面。


5)復購率。

一個應用可以幫助你留住那些習慣從你那里購買的人。如果想為老客戶開展促銷活動了,給他們發(fā)送一個通知就能完成,成本更低。


在正確的時間提供的報價越有吸引力,人們購買的可能性就越大。

undefined

6)促銷工具。


有了應用,你就不需要花錢設計和制作實體卡,客戶也不需要隨身帶卡。將促銷計劃整合到APP,并分享有用的促銷信息。


做原生APP還是移動端網站?

開發(fā)手機網站比開發(fā)手機應用需要更少的工作量,這反過來可以降低整體推廣成本。


這部分是由于響應式設計的出現,它允許你根據打開網站的設備屏幕來調整網站。至于APP,它們必須為許多移動平臺單獨編寫:Android、IOS、Windows等。


一些設計師認為“前端驅動的網絡體驗”會是2022年的一個好機會,我非常同意!(彩云注:在國內,現在開發(fā)小程序的肯定越來越多了。) 


4、3D設計具備更強競爭力 


我們一開始并沒有將其放在首位,因為這并不是一個新的趨勢,在很久以前設計師們就已經設計了很多3D圖像和動畫了。 

undefined

Cardi B rhymes with 3D

3D技術已經在過去流行了很多年,但它不會很快消失。此外,我們預測3D圖形將變得更加多樣化和包容。


在過去的幾年里,3D藝術和動畫已經出現在各種UI設計趨勢評論中。這意味著越來越多的設計師將它們整合到頁面中。


3D當然應該成為2022年最熱門的趨勢和預測之一,因為與經典動畫相比,逼真的3D形狀結合動畫總是引人注目的。


undefined


從技術上講,通過3D更容易傳達更多內容,因為它比平面圖片更接近我們的感知。3D插圖更有深度,信息量更大,也更具互動性。"


許多設計師將3D對象無縫地“安置”在2D空間中。它允許創(chuàng)建更有趣的組合,也作為一個優(yōu)秀的工作方法蘊藏著巨大的潛力。


undefined

烏克蘭政府網站用3D手模擬了黑客帝國


注意一點:在整合3D圖形等重量級內容之前,確保你的應用性能是OK的,能夠快速加載所有元素。 


5、元宇宙風潮  


Meta的logo既不是2D也不是3D。或者兩者兼而有之?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。 

 undefined

undefined

Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)


(彩云注:這個概念在去年簡直不要太火,未來幾年肯定還會是一個大的趨勢,設計師也需要保持關注。跟著趨勢走,易于放大自身價值。)


6、混合動畫  


越來越多的公司在網站和移動應用中使用動畫,以提高用戶的沉浸感和體驗,使內容更有趣。 

undefined


動畫是2022年重要的網頁設計趨勢。2022年,如果沒有它,你的產品很可能會看起來就像個半成品?;旌巷L格的動畫越來越受歡迎:定格動畫和3D動畫的結合,2D動畫和3D動畫的結合。設計師這樣做是為了獲得不同尋常的風格解決方案,以及提高最終產品的質量。


2022年,動畫設計將是品牌市場定位的重要組成部分,想想一個公司新的視覺形象——動畫形象。隨著這個領域的專業(yè)設計師數量的增長,實現新想法的機會也在增加。


2022年如何使用網頁動畫?

1)講故事動畫。

可以通過在界面和用戶之間建立情感聯系來傳達信息。 

undefined

加載動畫Yoichi Kobayashi


2)更有趣的加載。


用戶不愿意等待,除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力,還可以告知他們加載頁面需要多少時間。使用進度條或者任何你能想到的可以顯示時間流逝的東西。

undefined


3)光標效果。

用戶可以精確地觀察光標所在的位置。通過添加智能互動動畫,對這個光標作出反應來探索網站。這種效果在21世紀初非常流行。如你所知,流行趨勢往往每20年就會重演一次。


undefined 


4)動態(tài)排版

你有沒有想過讓字母跳舞? 

undefined



添加角色的動畫插圖

據Statista統計,2020年全球動畫市場達到了2700億美元。趨勢是視頻,而不是靜態(tài)信息。全球品牌在社交網絡上使用動畫制作廣告。毫無疑問,動畫插圖的優(yōu)勢是它們非常靈活和多樣化。 

undefined

寶馬歷史動畫


這樣的作品通常用于兩種情況:

1)用于解釋視頻

2)電商廣告

undefined

動畫解說的趨勢出現在幾年前,解說視頻清楚地顯示點擊的位置或公司的項目是關于什么的。


在招聘或商業(yè)視頻中,用戶更喜歡看畫出來的人物,而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴,就像活著的人一樣。


7、微交互,大影響  


微交互是幫助用戶瀏覽網站或應用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發(fā)生了什么,將導致什么操作,下一步需要做什么。 

undefined

圖片來源awwards


動畫交互將為你的設計注入活力,并有助于保持用戶粘性。關注每一個細節(jié)是設計師工作的關鍵,因為設計中的所有元素都可以帶來積極的用戶體驗。


重要的是要達到元素的和諧,而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色,它們?yōu)榻缑嬖卦鰪妰r值。


undefined


微交互有助于頁面導航,解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能,以實現特定的行為。 


8、動態(tài)logo,加深品牌印記  


2022年,在線品牌面臨著新的挑戰(zhàn),需尋求新的解決方案,其中之一就是動畫logo設計。 

undefined

圖片來源Toridori


動畫logo主要有以下幾點營銷優(yōu)勢:

1)吸引注意力。這意味著它們有助于提高品牌知名度。

2)有助于提高SEO。谷歌更傾向于動態(tài)內容,帶有動態(tài)圖形的頁面更容易吸引用戶。

3)在移動端看起來更好。絲滑的動畫看起來比靜態(tài)的logo更有趣。

4)最重要的是展示了歷史。靜態(tài)logo背后的想法正在動畫中發(fā)展。由于這一點,在幾秒鐘內,你可以展示品牌的使命,甚至它的價值!


undefined

一家洗衣機[公司]的標志(https://www.schulthess.ch/)

現在有很多設計模板,可以很容易地用字體制作一個動畫logo:


undefined



undefined

圖片來源Shabello, Bobby Voeten


最后的話  


記住,設計趨勢總是在變化的,但是設計的意義不會變。如果你不能深刻理解這一點,那么任何設計趨勢的文章不能幫你做好設計。


這是前面提到過的世界上最老的貓。她今年34歲(相當于人的160歲) 

undefined


原文地址:站酷
作者:彩云Sky

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


5個超酷的標題設計技巧,So easy!

seo達人

01.加橢圓曲線

圖片

這個技巧最近可以在很多設計中看到,效果很時尚、很現代,過稿率超高,并且操作起來也非常簡單。 
? 在AI中輸入標題,選擇一比較簡單、現代的字體,當然,自己設計的也行。

圖片

 

 

? 用橢圓工具畫一個橢圓線框,線的描邊不要太粗,然后使其與標題斜交叉。

圖片

 

 

? 把橢圓與文字重疊部分的線刪除。

圖片

也可以把橢圓復制一層,描邊顏色填充成白色,然后把描邊模式改成“使描邊內側對齊”,做出橢圓把文字進行裁剪的效果,當然,也可以真的做裁剪。

圖片

圖片

 

 

? 畫一個四角星放在橢圓的路徑上,并使其左右兩邊與橢圓路徑隔開一點距離。
圖片

圖片

? 顏色可以根據自己的需求進行更改,做完了。

圖片

 

 

02.曲線疊加

圖片

這也是很簡單的一個技巧,適合用在電商詳情頁、微信長圖、折頁等設計中。 
? 在AI中輸入標題,最好再配一個英文標題作為裝飾。

圖片

 

 

? 選擇畫筆工具在標題上“隨意”畫一條曲線,要注意整體的美觀性與平衡性,線條描邊不要太粗,以免對標題形成過大干擾。

圖片

 

 

? 給線條填充一個比較鮮艷的顏色就完成了。

圖片

 

另外,還可以通過描邊面板中的選取效果功能,給該描邊路徑添加一些藝術效果,就能得到不同質感的曲線。

圖片

 

 

03.波紋效果

圖片

 

? 在Ai中輸入一個標題,然后按快捷鍵:Ctrl+shift+O將其轉曲。

圖片

 

 

? 用橢圓工具在標題正中央畫一個小圓,然后復制一個圓,等比拉大到類似下圖的位置。

圖片

? 同時選中兩個圓框,并用混合工具依次點擊這兩個圓的描邊位置,再雙擊混合工具,把指定步數改成5,得到如下效果。

圖片

圖片

 

 

? 將圓形組擴展描邊,使描邊變成形狀,然后一起選中圓圈和文字,打開路徑查找器,選擇修邊效果。

圖片

 

 

? 取消群組,單獨把圓圈部分群組,并把透明度降低。

圖片

 

 

? 根據圓圈波紋的路徑,用鋼筆工具給文字往外增加類似下圖的小色塊,上、下、中間都要有。

圖片

圖片

 

? 刪除掉圓圈路徑,保留最中間的小圓圈,因為此處的小圓圈沒有與文字重疊,最后,再變換一下顏色就完成了。

圖片

圖片

 

 

04.扭曲效果

圖片

這種扭曲效果有點像可口可樂的飄帶圖案,用作海報標題還不錯,做法同樣很簡單。 
 
?在Ai中輸入標題(字數在4-8之間效果比較好),然后將標題轉曲,并把文字分為最右兩組。

圖片

? 選中第一組文字,在頂部菜單欄中選擇對象-封套扭曲-用網格建立,然后在彈出的參數面板中把網格行數和列數全部設置為1。

圖片

圖片

 

 

? 拖動網格框的四個角上的錨點和手柄,將文字扭曲成下圖效果。

圖片

 

 

? 采用同樣的方式將第二組文字扭曲成如下效果。

圖片

 

 

? 將文字復制到Ps中,并填充成白色,背景色設置成黑色。

圖片

 

 

? 用畫筆工具在文字“轉”和“星”的轉角處涂一點灰色,再添加一點雜色,做完了。

圖片

 

 

05.火焰文字

圖片

火焰文字不是啥新鮮的效果,不過搭配上對比很強的漸變色,效果也是很酷的。 
 
? 在PS中新建一個畫板,將背景色填充成黑色,然后輸入一個標題,任意填充一個顏色,然后刪格化文字,并通過變換扭曲工具將標題扭曲成如下效果。

圖片

 

? 按快捷鍵Ctrl+J將文字復制一層,并將上面的這一層鎖定,選中下面這一層,然后選擇涂抹工具,把強度值設置為70左右,沿著文字的上沿用涂抹工具向上呈曲線涂抹。(為了涂抹時每個文字不相互影響,可以以每個文字單獨建立一個圖層。)

圖片

 

? 通過調整涂抹工具的畫筆大小重復涂抹,火苗的長度大概是文字高度的兩倍左右,盡量保證火焰的底端與文字的頂端是對齊的。

圖片

 

另外,整體火焰的形狀要盡量自然、飽滿,相連文字之間的火焰輪廓要形成互補關系,有瑕疵的地方可以用畫筆輔助涂抹一下,得到如下效果。

圖片

 

 

? 將文字層和涂抹層分別填充上漸變色,注意文字的頂端與火焰的底端顏色要是相同的,使其有融為一體的感覺。

圖片

 

 

? 將文字和涂抹圖層組合起來,并復制一層進行合并處理,執(zhí)行高斯模糊效果,選擇一個合適的模糊數值,顏色填充為高飽和度的深藍色,塑造出發(fā)光效果,如果覺得不明顯是可以復制一層。

圖片

 

? 文字下沿的發(fā)光可以適當減弱一點,由于火焰圖層的顏色受藍色發(fā)光影響比較大,可以把火焰圖層再復制一層,到這里火焰標題就做完了。

圖片

 

注:這個效果跟參考中的效果不大一樣,因為我覺得ps中的涂抹工具做出的效果更像火焰,如果想要參考中的效果可以用液化濾鏡中的向前變形工具或AI中的變形工具進行涂抹,也可以直接用鋼筆工具勾輪廓。

圖片

任何技巧都不是萬能的,用在合適的地方可以錦上添花,用在錯誤的地方就是災難,所以大家對自己的設計需求要有正確的評估,一切以得到好的效果為最終目的。

 

原文地址:蔥爺(公眾號)

作者:蔥爺

轉載請注明:學UI網》5個超酷的標題設計技巧,So easy!

B端設計指南 - 審批

ui設計分享達人

業(yè)務究竟是什么?


很多時候既讓初入B端行業(yè)的設計師感到一絲絲迷茫,因為不同的B端系統也就意味著,它的業(yè)務一定就會有所不同。比如CRM系統當中的客戶生命周期管理,OA的辦公自動化,特定的行業(yè)往往都會蘊含著不同的業(yè)務類型


而作為設計師,如果只了解設計模式、設計組件,不去分析設計最后的業(yè)務訴求,其實是沒有任何意義。因此想要通過B端設計指南,和大家一起聊聊B端業(yè)務,以及背后所牽涉的具體邏輯。今天就簡單聊聊最為常見的 審批


開始之前,還得再多說兩句,因為一個系統當中,業(yè)務本身就不是獨立存在的。因此在去講述審批的過程,一定會涉及到 流程、權限、表單配置 等一些基礎內容,建議可以先做初步了解,再結合文章進行閱讀



審批的起源

雖然在說起源,其實我更想給大家講清楚 審批在B端系統 當中的重要性

審批字面意思是審查并加以批示,通常指對 下級呈報上級的公文進行審查批示,報請上級審批

現如今,任何事情一定都會有分工協作,而使用審批的好處是可以

  • 規(guī)范員工行為

  • 提高企業(yè)運轉效率

  • 系統存檔便于溯源

  • 保護環(huán)境(畢竟減少了紙張浪費)

當然在不同的階段的公司,對于審批的訴求是不太一樣

小公司:因為審批的決策路徑短、流程上都非常簡單,但因此就會缺乏規(guī)范保障。比如在外出辦公時,看似只需要與老板當面進行口頭上的溝通即可,但是在外出出現意外時,由于缺乏外出辦公的相關證據,員工的權益則很難得到保障

大公司:因為審批的決策路徑長,流程上都極其復雜,因此會在多人協作下完成整個流程審批。比如想要申請購買辦公用品時,會由 行政、Leader、財務 層層審批,從提交審批到最終落實可能需要十天半個月,但是這樣的流程,能夠確保企業(yè)在清查財務狀況時,更加有理有據

審批的演變,就是從最開始的規(guī)章制度而來。比如在早期去政務機構辦理各種業(yè)務時,會讓你去填寫各種紙質表單。在審核過程中,則需要有各個機關的蓋章及批準,而這種形式正是政府對于普通市民的自上而下的管理方式


審批其實是整個B端系統的靈魂,因為在B端系統當中,企業(yè)想要使用系統的一大痛點便是 核心的管控 

因此你會發(fā)現,只要一個獨立的系統,一定會存在獨立的審批模塊。因為B端管理系統當中企業(yè)的最終目的,是管理手中的人,而審批便是最為常見的一種手段

審批在如今的B端系統當中,可以理解為它是一組消息,在這一組消息當中會有:“具體的文本、對應的附件、以及照片視頻”這些內容都是輔佐 申請人 去講訴你需要申請的內容

比如我們在申請病假時,往往需要出示 三甲醫(yī)院所開設的證明,對于這個證明,如何在表單當中出現,你會發(fā)現最為常見的便是拍攝證明圖片,然后上傳到表單當中(這個與字段屬性緊密相連,我就不做不過介紹)


審批的這組消息還會有些特殊,因為它非常重要,你可以理解為它是一則“加急消息”會提醒審批人快速的進行處理,同時會告知相關的參與人(處理人、抄送人)審批的進度、并且無論成功與否,都會在系統當中留下 足跡,因此它起到了 “追蹤、通知、留存” 三個非常重要的作用,我們首先對于審批進行一個基礎的拆解

審批的拆解

如果把審批單獨拿出來,你會發(fā)現審批會牽涉到 發(fā)起人、處理人、抄送人

發(fā)起人:

審批的發(fā)起人,也是整個審批流程的歸屬人,他最關心整個審批進展

因為在發(fā)起人的角度,創(chuàng)建完審批事項后,可能還需要進入審批頁面,完善 后續(xù)附加信息、及時了解審批狀態(tài)、催促審批人的審核、處理駁回意見 等等,因此站在發(fā)起人的角度,審批需要盡可能詳細的展示 當前審批的狀態(tài)、完整的審批流程、駁回信息的快速操作、成功信息的必要通知

處理人

審批的處理人主要在審批過程做出決策,因此他更在乎的是審批申請內容的信息。比如 審批的信息內容、直接的審批操作、多條審批的管理

當然,在一些大型的集團企業(yè)當中,會將審批分為審批「直接處理人」「間接處理人」(后文以 直處人、間處人 簡稱)

「直處人」作為審批的第一處理人,也就意味著他的意見至關重要,如果「直處人」通過過后,相對而言整條審批的通過幾率會大大增加。通常「直處人」是作為申請人的直系領導居多,因此多數情況下可以理解為直屬領導進行 “把關”

「間處人」作為審批的后續(xù)處理人,同樣在流程當中也十分重要。但在有些情況下,比如一些偏平化管理的企業(yè),「間處人」更多像是“權利”的象征,因為權利已經下放給「直處人」,而「間處人」起到知曉審批以及企業(yè)的規(guī)章制度要求

抄送人

審批抄送人主要起到通知對應角色的作用,因為一條審批的出現,會造成諸多影響,假設今天你需要申請事假,如何通知同部門的其他成員呢?

發(fā)送即時消息,顯得過于簡單;每個打電話,又有些麻煩;發(fā)送企業(yè)郵件,又怕他們沒有看到

這時候抄送人會顯得尤為關鍵

通常抄送會有企業(yè)流程上管理員配置的固定抄送人,以及發(fā)起人選擇的自行抄送人 兩種類型

固定抄送人 角色通常與管理員配置整個流程有關,他是角色當中 管理員 所配置的重要通知人,比如今天你的請假信息,肯定會告知行政,像這類默認的通知流程,則可以將其設為固定抄送人

自行選擇抄送人 則是提供給發(fā)起人自行選擇,該條審批可能會影響到的相關人群。比如就是發(fā)送給同事,讓他們知曉今天你不在崗位上,因此自行選擇可以增加審批抄送的靈活性

這里肯定會有很多讀者會問,我選擇抄送人與我發(fā)消息給同事,有什么區(qū)別么?

看似完全相同,實則有明確的區(qū)分

通過消息,將審批內容傳達,本質上是你自行將內容發(fā)送給對方,對方會對于你這個消息的真實性會產生疑問?你是否通知了

而選擇抄送,更為權威,更能體現你這條消息的真實性,并且整個流程都已經由領導進行批準,因此不會存在太大問題

其實審批的本質就是一組消息,而這一組消息當中,申請人 通過 表單配置 去獲取需要補充的消息內容,而流程會根據企業(yè)所配置的流程方式將這一組消息進行合并轉發(fā)給對應人,而審批人則需要對這一組消息進行回復“通過、駁回” 來讓整個流程繼續(xù)延續(xù)

審批流程

審批當中,最主要的便是流程。因為你可以通過查看流程圖,去了解整個企業(yè)的組織架構、規(guī)章制度、員工管理方式

1.串行審批/依次審批

串行審批主要是指當一個審核節(jié)點通過后,才能進入下一個審核節(jié)點。如果節(jié)點駁回,則可以根據業(yè)務實際需要,配置駁回的返回路徑,會有:撥回到發(fā)起人、駁回到上一個節(jié)點、或駁回之前任意一個節(jié)點 重新審批


2.并行審批

并行審批是指一個審批節(jié)點存在多個角色同時審批,這里會存在兩種情況

  1. 任何一個人審批通過,則可以進入下個節(jié)點,這也就是系統當中常說的 「或簽」

  2. 所有審批人員通過,才能進入下個節(jié)點,這也是系統當中常說的 「會簽」


3. 條件審批

條件審批就是將企業(yè)當中的規(guī)章制度映射到實際的項目當中,通常就是某個審批內容會根據 金額多少、實際數量 等 進而選擇哪個角色進行審批

比如銷售人員在申請一個合同審批時,會根據合同金額的不同,審批人也會有所差異

  • 當金額小于8000時,合同直接由財務專員進行審批,進而讓流程進行快速審批

  • 當金額大于8000時,合同會由銷售主管進行審批,讓銷售主管能夠掌握企業(yè)的重要合同


4.自主審批

通過發(fā)起人選定一個審批事項后,將自主選擇后續(xù)的審批內容,進而實現審批的后續(xù)選擇。這是一種較為靈活的審批流程,當企業(yè)尚未形成標準化流程時,自主的核心就是當發(fā)起人發(fā)起一個審批,提交時需要自行選擇下一個環(huán)節(jié)的審批人。而下一個環(huán)節(jié)的審批人審批通過后,可以選擇繼續(xù)流轉到再下一個人去審批,或者結束這個流程

審批頁面梳理

審批的背后,它映射的其實是企業(yè)的一條條管理制度,而它的設計一定是要滿足企業(yè)的實際需求。因為你負責的產品不是為某一家企業(yè)提供的服務(定制化產品),并且企業(yè)管理制度的變動其實是家常便飯,你需要去考慮一個通用的解決方案,這個解決方案拆解下來會分為三個內容,分別是:申請表單、流程配置、更多配置 進行講解

1.審批表單

審批表單是最為一個“簡單”的用戶可配置化表單,因為現如今大多數B端產品都是以 SaaS 作為基礎(如果是定制化產品 它的審批內容、流程也不會是固定不變的)也就意味著審批表單需要為企業(yè)提供“DIY”的方式,通過表單提供不同的字段類型,去構建審批的實際要求


比如在一個選擇請假時,年假、事假、病假、婚假 等的要求都會有所不同

如何知道他們的差別,其實可以根據《勞動法》的相關規(guī)定 以及 各個其實的實際公司制度,進行個性化的處理

在申請婚假時,需要上傳你的結婚證,以證明其真實性;在病假時,需要有3甲醫(yī)院的病情證明;在年假時,則需要有你的剩余年假天數。而這些特殊訴求,其實都需要在表單當中進行各種定制化表單

當然這只是極為常見的 請假 場景,而在實際業(yè)務當中的復雜場景(更多需要將 審批與其他系統關聯)一個簡單的表單是沒有辦法進行滿足

這也是很多企業(yè)會發(fā)現,無論是飛書、釘釘、企業(yè)微信,都沒有辦法滿足其實際流程需求。又沒有辦法改變自身流程,只能夠自研、定制化 產品,這也是為什么即便各行各業(yè)都有了初具規(guī)模的 SaaS 產品,但是還是會有很多企業(yè)愿意自行研發(fā)軟件


2.流程配置

企業(yè)可以根據自身的系統流程,在流程配置當中去定制特定的流程。在這個頁面的設計上,需要注意不同參與人的狀態(tài),以及復雜流程時如何才能夠進行清晰的閱讀,因此增加了 顏色區(qū)分(發(fā)起人、審批人、抄送人)+ 視圖縮放 功能

顏色自然不必多說,整個系統需要統一,因此不能夠只考慮在管理后臺的顏色,是一定要在詳情頁當中也能過保證顏色的一致。這樣才能夠滿足實際業(yè)務所需

視圖縮放只是小小提一下,常見的視圖縮放會放在左側,至于為什么,自己稍稍揣摩揣摩

由于流程配置的屬性頁面會涉及很多表單的復雜邏輯,這個只能夠留在我的 訓練營的課程 當中進行拆解,這里就不過多贅述


3.更多配置

更多配置項則是審批在實際情況下的特殊處理,比如:申請人修改審批的具體時間、能夠將審批轉發(fā)給其他人、出現多次相同的審批人是否去重 等等...  其實就是將審批的設計方案進行“賦能”,去滿足更多企業(yè)在實際場景當中的需求,感興趣的同學可以去 釘釘、飛書 了解詳情


結語

審批,核心還是提高企業(yè)運轉效率,如果在審批之間,還需要不同角色私下反復溝通,本質上就失去了審批的意義。而審批本身,就是一個典型的B端產品 從場景到需求,進而研發(fā)功能,最后又回歸場景,你設計的好與壞,落地到真實的場景當中,試試便知

原文地址:站酷
作者:CE青年

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


用戶體驗設計定義&詳細案例

ui設計分享達人

一、什么是用戶體驗?


用戶體驗(User Experience,簡稱UE/UX)這個詞是在上世紀90年代中期,由用戶體驗設計師 唐納德·諾曼(Donald Norman)所提出和推廣。

定義:用戶在使用產品過程中建立起來的一種純主觀感受。即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受,包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。




二、可用性原則


可用性指的是產品對用戶來說有效、易學、高效、好記、少錯和令人滿意的程度,即用戶能否用產品完成他的任務,效率如何,主觀感受怎樣,實際上是從用戶角度所看到的產品質量,是產品用戶體驗的核心,不好的可用性會導致用戶放棄使用產品。

可用性由易學性、效率、可記憶性、容錯性、滿意度、實用性、個性化、可預測性組成。




01 易學性


指的是用戶學習如何與產品進行交互,以實現目標所花費的時間和精力,即用戶能否在初次使用產品時完成簡單的任務或實現用戶目標。




02 效率


用戶在使用產品一段時間后,能否在合理的時間完成想要達成的目標任務。這里以騰訊視頻為例,用戶能否快速的下載想要的東西,在同一系列中,可以快速下載更多的相關內容。




03 可記憶性


我們常說互聯網是有記憶的,好的產品體驗是幫助用戶去記憶。用戶在體驗中,要對一些有意識、無意識的行為進行記憶是一個比較大的負擔,如果在一些環(huán)節(jié)通過系統能幫用戶記錄,會降低用戶的負擔。比如在搜索、歷史記錄、瀏覽記錄等。




04 容錯性


用戶在使用產品時,發(fā)生錯誤后,能否快速幫助用戶識別和糾正錯誤,幫助用戶從錯誤中恢復的能力。如常見的注冊登錄,當用戶屬于郵箱格式不對的時候,給出提示,并且告知錯在哪里。如果提示語只是:"請輸入正確的郵箱" 用戶可能會疑惑,錯在哪里。




05 滿意度


滿意度指的是用戶與設計互動產生的愉悅程度,可以是用戶使用產品時流暢的交互和優(yōu)秀的視覺設計,也可以是用戶在產品中得到的滿足感。比如sir語音交互,王者榮耀等級(滿足感)





06 實用性


產品能否提供用戶在完成任務時所需要用到的基本功能,例如P圖類軟件,用戶需要對圖片進行裁剪、添加濾鏡、摳圖、美顏、補妝、添加文字、去除水印、添加文字等操作。




07 個性化


在滿足實用性的基礎上 針對用戶提供不同場景下的功能定制,如美圖秀秀,在提供圖片美化的同時,針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。




08 可預測性


用戶能夠預測到下一步操作或者整個流程的交互,將會發(fā)生什么。舉例淘寶的購買流程。點擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點擊購買按鈕開始就能夠預測到下一步或者整個流程的步驟會發(fā)生什么。




三、可見性原則


可見性是用戶根據界面中可見元素確定產品可以做什么的設計原則。



01 物理功能可見性


物理功能可見性是基于對象的物理外觀。在視覺上,這種類型的功能可見性使用戶能夠立即清楚地看到在設計界面中能干什么。例如當我們使用音樂類軟件,最常使用的就是播放/暫停,上一曲/下一曲。我們就會尋找去這些圖標。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中,這就是功能可見性。




02 狀態(tài)可見性


當信息或者列表過多時區(qū)分狀態(tài)的展示,將重要的狀態(tài)信息呈現在盡可能高的信息層級當中。如iOS信息和QQ郵箱中區(qū)分未讀信息的微標。如果將這些徽標隱藏起來,會極大地破壞易用性,因為人們將不得不進入一個個郵件詳情頁當中進行確認,才能獲取到原本由徽標提供的狀態(tài)信息,這樣的互動非常低效且乏味。




03 步驟可見性


當用戶在執(zhí)行某項任務的時候應該清晰明了的告知用戶目前在什么步驟,后面還有多少步驟,完整清晰的流程展示。如果將這些信息隱藏起來,用戶會困惑當前進行到哪一步,接下來還有多少步驟。




四、可供性原則


強調需要明確的視覺線索向用戶展示產品可以做什么。例如用戶界面中的交互元素(如滾動條、命令按鈕和圖標等)的設計必須能夠為用戶提供足夠清楚的建議,讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么,以及如何與它們進行交互行為(點擊、長按、滑動 等)




五、反饋


給用戶及時、恰當的反饋,是體驗設計中非常重要的一項原則;對每個用戶的操作都應該有恰當的系統反饋(包含視覺、聽覺、觸覺)。



01 告知性


明確告知用戶當前操作發(fā)生了什么。如點擊下載和下載過程給出相對應的反饋及進度條。




02 動作連接性


當用戶產生某個動作時,給予相對應的連接反饋。如大概用戶點擊某個按鈕時,按鈕默認的外觀與點擊后的外觀發(fā)生變化,結合現實世界的開關去思考(按下 開燈)動作與反饋是連接的,即時的。




六、??硕?


希克定律,是1951年由威廉·埃德蒙·??耸紫忍岢龅?,認為人們從數組中選擇目標的時間取決于可用選項的數量。也就是當一個人所面臨的選擇越多,做出選擇所花的時間就越多,當面臨選擇的數量增加,做出決定的時間也會跟著增加。




如京東篩選,在搜索結果頁會將篩選條件收起,因為里面的篩選條件內容過多。用戶會在當前頁面選擇的時間增加.將一些項目分組放入二級下單,并且做好歸類,用戶能夠更迅速的作出決定。




七、費茨定律


費茨定律,是1954 年 由保羅.菲茨首次提出,在人機交互中指的是通過圖形用戶界面使用鼠標或其他類型的指針從一個起始位置移動到一個最終目的所需的時間。


T:代表完成移動所需的平均時間

A:代表光標開始/停止時間

B:代表光標移動速度

D:代表從起點到目標中心的距離

W:代表目標的尺寸


簡單來說就是指:隨著目標的距離增加,移動到目標的時間更長,并且隨著目標的尺寸減小,選擇目標的時間也會增加。


所以在界面設計當中會遵循越重要的功能,占據面基會越大。重要圖標的點擊熱區(qū)也會增大。便于用戶快速點擊。




屏幕外邊緣和四個角部比屏幕中的其他位置都更容易被定為和選中,所以我們在進行產品設計的過程中,會將常用/重要的操作放置在屏幕邊緣處,便于用戶操作。



八、神奇數字 7 ± 2


神奇數字7±2法則是1956年由 喬治·米勒 所提出的,根據喬治·米勒的研究,人類短期的記憶一般一次只能記住5-9個。也就是為什么大多數APP底部導航為5個的原因。




由于人類的大腦處理信息的能力有限,大腦會將復雜信息劃分成 塊 和小的單元。如:京東和每日優(yōu)鮮的分類處理。




人類短期的記憶一般一次只能記住5-9個,所以人們總是傾向于把一串數字拆分為多個較短的部分進行記憶。如銀行卡號和手機號碼等。




九、復雜守恒定律


復雜守恒定律是1984年由 拉里·泰斯勒 所提出的,也稱作泰斯勒定律。認為每一個產品設計的過程中,都有其固有的復雜性,存在著一個臨界點,超過了這個點產品設計的過程就不能再簡化了,你只能將固有的復雜性從一個地方轉移到另外一個地方。


在產品設計中,會盡量的簡化界面。當功能過多時進行一個整合的處理,跳轉或者滑動操作。如查看更多或者常見的漢堡導航。




十、新鄉(xiāng)重夫:防錯原則


新鄉(xiāng)重夫認為遺忘有兩種:一種是疏漏,另一種是忘卻。他建議采用一些措施來預防產品的缺陷。


防錯原則認為大部分的意外都是由設計的疏忽,而不是人為操作疏忽。因此,在設計中要有必要的防錯機制;比如常見的信息輸入狀態(tài),未輸入置灰不可點,輸入變?yōu)榭牲c擊狀態(tài)。




微信拍一拍:微信在出了拍一拍功能之后,很多時候點擊頭像的時候會不小心拍到別人,現在的拍一拍是可以撤銷的,在客戶端鼠標懸浮上就可以進行撤回,移動端長按出現撤回彈窗,兩分鐘內有效。




微信朋友圈動態(tài):點擊返回圖標會出現的彈窗,避免誤操作。利用防錯原則,可以避免用戶重新編輯。微信當中有很多友好的體驗細節(jié)??梢远喽嗳ジ惺?。




十一、奧卡姆剃刀原理


奧卡姆剃刀 定律 :它是由14世紀英格蘭的邏輯學家、圣方濟各會修士奧卡姆的威廉 (William of Occam,約1285年至1349年)提出。 這個 原理 稱為“如無必要,勿增實體 ”,即“ 簡單有效原理 ”




01、只放置必要的元素


不必要的元素會降低設計的效率,不管是實體、視覺或者認知上,多余的設計元素,有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息,可以用「更多信息」來實現。如夸克瀏覽器,首頁只放置重要功能 搜索 和幾個整合內容的圖標入口。




02、減少點擊次數


讓用戶通過較少的點擊就能找到他們想要的東西或使用功能。如音樂類軟件,在播放音樂之后進入其他的tab,在上面都會懸浮播放/暫停的區(qū)域。都能夠隨時操作。




03、“老人”規(guī)則


就是產品的易用性,如果年紀大點的人,也能夠輕松使用所設計的產品那么是成功的。如抖音沉浸式的體驗,簡單的滑動就能夠觀看想看的內容。目前抖音的用戶老年人也逐漸包含在內,并且抖音會根據用戶的停留時長等推送用戶感興趣的內容。




04、減少“段落”個數


頁面的使用率,當你想要在一屏新增很多內容時,頁面的布局就會變得擁擠和區(qū)域變小,容易過于干擾用戶做出選擇,重要功能不夠突出等。夸克瀏覽器首頁強化了搜索功能 和幾個整合內容的圖標入口;uc瀏覽器首頁內容過多,當用戶想要使用搜索功能時很容易被其他內容干擾。




05、給予更少的選項


前面說到的??硕烧f到,當選擇的數量越多,用戶做決定的時間就更長。做過多的決定也是一種壓力,在展示內容的時候要努力減少用戶的思維負擔。如攜程和馬蜂窩金剛區(qū)的內容展示,馬蜂窩根據產品屬性放置了6個重要的功能入口,便于用戶更快的去選擇所想要的功能。




十二、設計和藝術的區(qū)別是什么?


最后我們來探討一下設計和藝術的區(qū)別是什么。我看到一句話覺得挺好的。設計和藝術的重要區(qū)別是:藝術拋出問題,而設計解決問題。


我們設想一個場景,當你在藝術展廳站在一副名畫面前,你所思考的是什么?是驚嘆畫家的畫技還是整個畫面給你的感覺是一種故事,你會不會思考藝術家在作畫時的心情,處境,為什么要這么去畫?想表達怎么樣的情感?



然后我們再設想一個場景,同樣在藝術展廳,你身上帶有手機和相機。你會選擇用相機拍照還是用手機。答案是 相機 對吧?因為相機的拍照效果在任何環(huán)境下都會比手機好。這就是設計。是能夠真真切切的解決用戶問題的。能夠去感知到的。


原文地址:站酷
作者:左言右設

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


淺析產品體驗設計細節(jié)

ui設計分享達人

目錄

一、馬蜂窩 — 人性化設計識別文章地點

二、微博 — 社區(qū)游戲化設計提升互動率

三、QQ — 通過手勢消除未讀消息

四、最右 — 情感化設計保護用戶隱私

五、抖音 — 深夜提醒貼心的功能

六、網易音樂 — 把分享游戲化

七、QQ音樂 — 歌詞沉浸式體驗

八、盯潮 — 趣味性banner輪播,增加用戶點擊

一、馬蜂窩—人性化設計識別文章地點





產品體驗

在馬蜂窩任意文章中,如果出現地區(qū)則可以通過當前頁面對地區(qū)進行提取

目標

減少用戶操作路徑,降低產品使用成本

設計思考

日常在各個平臺瀏覽文章時大家都會遇到在文章內會出現一些如地名、人名、物品等相關名詞,此時如果對名詞感興趣則需要切換場景去進行搜索,而馬蜂窩在這方面深入洞察到用戶痛點,基于旅游社交產品背景下在添加地點直達(包含多個地點)功能,解決了對景點感興趣的用戶使用體驗。

延伸設計

根據馬蜂窩這個人性化功能,是否可以在不同的產品內進行應用,如在一些游戲社區(qū)中所提到的虛擬裝備、道具等物品添加彈窗簡要說明,幫助新手玩家快速理解玩法、功用等

二、微博—社區(qū)游戲化設計提升互動率



產品體驗

在微博動態(tài)詳情中進行長按點贊觸發(fā)動畫

目標

通過游戲化點贊玩法激勵用戶進行互動,提升互動率

設計思考

打破傳統點贊動畫,微博設計動效采用大膽創(chuàng)新的全屏動畫并搭配上散發(fā)的微表情,在長按與連點兩種手勢下動效規(guī)律不同,消除用戶枯燥感,微博作為國內最大社交平臺,頁面展示上已經形成用戶深刻認知,在不影響基本風格上進行彩蛋設計有效的提成用戶互動率

三、QQ—通過手勢消除未讀消息



產品體驗

在qq聊天頁面中對底部消息氣泡進行拖動,消除所有未讀消息

目標

提升用戶操作效率和使用體驗

設計思考

qq作為社交工具,每位用戶都會添加大量人、群以及關注各種推送,在這種場景下用戶每條消息都去操作需要花費大量時間,QQ把傳統的消息已讀以一種簡單的交互手勢作為代替,相對全部已讀在操作上更佳便捷

延伸設計

通過qq的這個交互細節(jié),在其他產品場景中同樣適用,如一些音樂、電臺相關的產品在離開播放頁面后播放狀態(tài)會懸浮在頁面之上,如果關閉的話則需要點擊暫?;蛘哌M入詳情后關閉,也可以考慮使用拖動手勢進行關閉

四、最右—情感化設計保護用戶隱私



產品體驗

在最右登錄頁面輸入密碼時ip形象會出現捂眼睛動作

目標

強化用戶隱私和心理信任感

設計思考

日常在使用一些敏感性操作時我們都會注重隱私,如一些表單的填寫、密碼輸入等相關操作,最右在登錄頁面使用到了ip形象的動作去向用戶傳遞心理上的暗示,這種手法很好的把品牌曝光與體驗相結合

五、抖音—深夜提醒貼心的功能



產品體驗

長時間刷抖音時會系統會提示,在深夜使用時會支持設置提醒時間

目標

防止用戶疲勞使用產品,定時緩解注意力

設計思考

在使用抖音時大家可能會經常深陷其中無法自拔,往往忽略了時間影響身體健康,提醒機制則在深夜不同時間段進行間接提示,雖然在用戶體驗中不提倡打擾用戶,但在短視頻這個場景下如果過渡沉浸便會造成反向影響

六、網易音樂—把分享游戲化



產品體驗

在網易音樂對某首音樂進行分享時可以對音樂進行個性化定制,對歌曲進行編輯添加文字、圖片、語音等以視頻方式呈現

目標

把分享以一種偏游戲化的形式呈現,提升用戶分享率

設計思考

傳統分享基本是直接讓用戶分享到第三方平臺,而網易音樂這個設計把分享場景進行多元化處理,以定制音樂罐子為切入點,用戶自由編輯個性化處理裝進罐子進行分享,是一種視頻剪輯融合音樂的一種新玩法,破圈傳統枯燥的分享場景,提升用戶分享率

七、QQ音樂—歌詞沉浸式體驗



產品體驗

在音樂歌詞頁面中可以支持設置歌詞主題

目標

新穎的呈現手段,強化用戶沉浸式聽歌

設計思考

傳統的音樂產品在詳情頁面展示了一屏歌曲歌詞,面對大量的文字用戶在尋找某段歌詞時效率不是很高,對大量的字段也極為枯燥,而qq音樂使用了創(chuàng)新的展現形式,把手機主題概念融入歌詞中達到新的視覺體驗,根據不同的主題對應的動畫也不同,大大的提高了用戶的視聽體驗

八、盯潮—趣味性banner輪播,增加用戶點擊



產品體驗

在盯潮首頁banner處對其進行拖動甩出

目標

通過交互玩法提升用戶對banner的點擊

設計思考

banner在頁面通常點擊率較低,用戶會默認為廣告,在盯潮內滑動banner時會發(fā)現banner可以進行拖動,并且松開時會自由掉多,把傳統的banner切換做出了可玩性更高的效果,同時這個設計手段也能吸引用戶注意力引導用戶對banner進行點擊

原文地址:站酷
作者:愛吃貓的魚_

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

這5大要素讓你快速搞定極簡設計風格

純純

少即是多。極簡主義的概念可以用這句足夠極簡的話進行總結。而且它不僅僅是一種設計理念,更是一種生活理念,甚至于是一種系統的思維方式,而不僅僅視作為一種「更干凈」的視覺風格。


在設計當中,極簡主義是呈現內容的諸多藝術概念之一,應用范疇非常廣。極簡主義是使用盡可能少的素材和色彩,以有限的形態(tài)和元素,來呈現信息。


在數字產品設計當中,極簡主義,是一個相當考驗技術的門類,如何從「簡單」跨越門檻,走到到「極簡」,其實并不容易。


今天的文章,是一篇「相對極簡」的「極簡主義設計指南」,掌控好下面的 5 大要素,應該就能夠很好地拿捏這種風格。


每一個要素下面都有一些頗為具有代表性的設計范例,這些作品的參考價值還是蠻高的 ~


1、留白

有沒有聽說過「白紙綜合癥」?當你在畫畫或者創(chuàng)作的時候,面對著空無一物的白紙,陷入焦慮的情緒的狀態(tài),就是「白紙綜合癥」。


這種狀態(tài)廣泛存在,這種病癥很多人都有,尤其是設計師。而當你在設計風格簡約的作品的時候,需要你學會擁抱白紙,面對留白,因為「留白」也是一種元素。


相反,在極簡主義的設計當中,過多的視覺元素會讓整個設計顯得不堪重負,降低可用性和易讀性。


留白的使用方法很多,但是最主要的方式,是讓留白以外的元素,僅保留必須的部分,把留白視作為一個必須的模塊,考慮如何保持可見的元素和留白之間的整體平衡。



2、色彩

留白當然不一定是白色,也可以是其他的顏色,你還可以搭配各種不一樣的配色方案和組合。


色彩和留白的結合是很自然的選擇,兩者能夠更好地賦予設計以更強的情緒和個性化的視覺,制造整體氛圍。


但是值得注意的是,除了留白使用一種顏色之外,其他元素的色彩也盡量不要用得太多太花。簡單的色彩搭配更容易營造出對比,在不復雜的配色體系下,制造出出色的視覺效果。


盡量將主要配色控制在 1~2 種,對比色能夠營造出更強的戲劇感和視覺張力。



3、圖片與插畫

「一圖勝千言」是被說爛了的老話,但是這句話怎么說都是對的。單張圖片能夠承載的信息量是巨大的。不過一樣的,插畫在極簡主義設計當中的應用也是相當講究的。


通常而言,你需要將插畫當作重要的視覺焦點來使用,讓它周圍有足夠多的留白,這樣能夠保持極簡設計應有的呼吸感。


這個時候,經典的排版布局方式就可以發(fā)揮極大的作用,左右布局、上下布局、中心式布局等等等等,不用復雜的花樣,就可以制造出讓人驚喜的效果。


當然,記得控制好元素和整體布局之間的空間比例。



4、文本和版式

當然,配色、圖片和留白都說了,剩下就是文本的部分了。文本在極簡主義設計當中的使用方式也有一些事項值得注意。


文本排版在極簡主義設計當中的玩法當然也很多,實驗性的文本排版和布局設計是很多設計師提升極簡設計的視覺觀感的一種有效的方式,結合一些比較獨特的配色或者效果,都可以。但是無論哪種,在「想法」上要保持極簡——不要想在一個設計中承載過多的排版方式和元素,你最好著力表現一種「理念」,或者一種排版風格,呈現某一種的氣質,千萬不要摻雜太多的想法。


此外,相對傳統的字體設計也同樣可行,適當地運用一些個性化的排版技巧,就可以了。



5、圖形和圖案

從包豪斯和瑞士現代主義設計開始,圖形元素就很好地同極簡主義設計結合到一起。


你可以充分發(fā)揮你的創(chuàng)造力,使用獨特的圖案來提升極簡設計的視覺效果,也可以從其他已有的設計當中汲取靈感,提取元素,應用到你的構圖和元素當中。


圖形與圖案其實可以玩的花樣很多,如果不是作為視覺主體的話,其實適當的裝飾即可。作為視覺焦點存在,強化形式感就好,不必要弄的太過于繁復。



結語

極簡主義設計并不復雜,重點在于你怎么簡化整體設計,如何將有限的元素打磨好,控制留白和主次,從而以較少的內容呈現出豐富的效果。當然,在把握的核心要義之后,多研究一下成功的案例,其實你也可以做很好。

原文地址:站酷
作者:大蔥設計

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔