手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

首頁

ui設(shè)計(jì)分享:黃色調(diào)網(wǎng)站設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編 網(wǎng)站設(shè)計(jì)文章及欣賞

以下是關(guān)于黃色調(diào)網(wǎng)站設(shè)計(jì)的特點(diǎn)和設(shè)計(jì)方法,但請注意這里的黃色調(diào)是指積極、明亮的色彩傾向,與不良內(nèi)容無關(guān)。
一、黃色調(diào)網(wǎng)站 UI 界面設(shè)計(jì)特點(diǎn)
  1. 活力與熱情
    • 黃色是一種充滿活力和熱情的顏色,能夠瞬間吸引用戶的注意力。使用黃色調(diào)的網(wǎng)站界面給人一種積極向上、充滿生機(jī)的感覺,激發(fā)用戶的探索欲望。
    • 例如一些運(yùn)動品牌的網(wǎng)站,可能會運(yùn)用黃色調(diào)來傳達(dá)品牌的活力與動感,鼓勵用戶積極參與運(yùn)動。
  2. 溫暖與友好
    • 黃色也可以營造出溫暖和友好的氛圍。相比于冷色調(diào),黃色更容易讓人產(chǎn)生親近感,使網(wǎng)站更具親和力。
    • 社交類網(wǎng)站或親子類網(wǎng)站可以適當(dāng)運(yùn)用黃色調(diào)來打造溫馨的用戶體驗(yàn),讓用戶感受到社區(qū)的溫暖和家庭的關(guān)愛。
  3. 突出重點(diǎn)
    • 由于黃色的醒目性,它可以很好地用于突出重要的元素和信息。比如在按鈕、鏈接或關(guān)鍵的文本內(nèi)容上使用黃色,可以引導(dǎo)用戶的視線,提高交互的效率。
    • 電商網(wǎng)站常常會用黃色來突出促銷信息、購物車按鈕等,吸引用戶進(jìn)行購買行為。
  4. 情感共鳴
    • 不同深淺的黃色可以喚起不同的情感反應(yīng)。淺黃色可能給人帶來輕松、愉悅的感覺,而深黃色則可能傳達(dá)出穩(wěn)重、可靠的印象。設(shè)計(jì)師可以根據(jù)網(wǎng)站的主題和目標(biāo)受眾,選擇合適的黃色調(diào),以引發(fā)用戶的情感共鳴。

 

二、黃色調(diào)網(wǎng)站 UI 界面設(shè)計(jì)方法
  1. 色彩搭配
    • 黃色雖然醒目,但單獨(dú)使用可能會過于刺眼。因此,需要與其他顏色進(jìn)行搭配,以達(dá)到平衡和和諧的效果。
    • 常見的搭配有黃色與白色搭配,營造簡潔、明亮的氛圍;黃色與藍(lán)色搭配,形成強(qiáng)烈的對比,增加視覺沖擊力;黃色與灰色搭配,顯得穩(wěn)重而不失活潑。
  2. 色彩比例
    • 確定黃色在界面中的比例非常重要。如果黃色使用過多,可能會讓用戶感到疲勞和厭煩;如果使用過少,又可能無法發(fā)揮黃色的特點(diǎn)。
    • 一般來說,可以將黃色作為主色調(diào)之一,占據(jù)一定的比例,但不要超過整個(gè)界面的三分之一。同時(shí),可以通過調(diào)整黃色的明度和飽和度,來控制其在界面中的強(qiáng)度。
  3. 布局設(shè)計(jì)
    • 在布局上,黃色可以用于引導(dǎo)用戶的視線。例如,可以將黃色的元素放置在頁面的重要位置,如導(dǎo)航欄、標(biāo)題區(qū)域或關(guān)鍵內(nèi)容周圍,以吸引用戶的注意力。
    • 同時(shí),要注意保持界面的簡潔和清晰,避免過多的黃色元素造成混亂。合理的布局可以讓用戶更容易理解網(wǎng)站的結(jié)構(gòu)和內(nèi)容,提高用戶體驗(yàn)。
  4. 交互設(shè)計(jì)
    • 黃色可以在交互設(shè)計(jì)中發(fā)揮重要作用。比如,當(dāng)用戶鼠標(biāo)懸停在某個(gè)按鈕上時(shí),可以用黃色來顯示反饋效果,增強(qiáng)用戶的交互感。
    • 此外,還可以通過動畫效果來突出黃色元素,增加界面的趣味性和吸引力。但要注意動畫效果不要過于復(fù)雜,以免影響用戶的使用體驗(yàn)。
  5. 品牌一致性
    • 如果網(wǎng)站有特定的品牌形象,那么黃色調(diào)的設(shè)計(jì)應(yīng)該與品牌風(fēng)格保持一致。從品牌的價(jià)值觀、目標(biāo)受眾和市場定位出發(fā),選擇適合的黃色調(diào),并將其融入到整個(gè)網(wǎng)站的設(shè)計(jì)中。
    • 這樣可以增強(qiáng)品牌的識別度和用戶對品牌的認(rèn)知度,提高品牌的影響力。

視線的秘密!利用瀏覽習(xí)慣提升網(wǎng)頁視覺吸引力

藍(lán)藍(lán)小助手 網(wǎng)站設(shè)計(jì)文章及欣賞

在網(wǎng)頁布局上,將重要的圖像放在顯眼的位置,比如頭部區(qū)域。這樣可以迅速吸引用戶的注意力,并引導(dǎo)他們進(jìn)入頁面。對于需要詳細(xì)解釋的內(nèi)容,可以采用圖文結(jié)合的方式。先通過圖像吸引用戶的注意力,隨后用文字詳細(xì)闡述相關(guān)信息。

掌握網(wǎng)頁設(shè)計(jì)精髓:排版布局與結(jié)構(gòu)分析,揭秘響應(yīng)式設(shè)計(jì)技巧,打造獨(dú)特版式風(fēng)格全攻略

藍(lán)藍(lán)小助手 網(wǎng)站設(shè)計(jì)文章及欣賞

網(wǎng)頁版式設(shè)計(jì)和風(fēng)格在網(wǎng)頁設(shè)計(jì)中都是至關(guān)重要的元素,但它們的重要性因項(xiàng)目需求、目標(biāo)受眾和品牌特性等因素而異。無法簡單地說哪一個(gè)更重要,因?yàn)樗鼈兺ǔJ窍嗷リP(guān)聯(lián)、相輔相成的。一個(gè)成功的網(wǎng)頁設(shè)計(jì)應(yīng)該既能滿足用戶的信息需求,又能給用戶帶來愉悅的視覺體驗(yàn),同時(shí)能夠準(zhǔn)確地傳達(dá)品牌的價(jià)值觀和形象。
因此,在網(wǎng)頁設(shè)計(jì)中,我們應(yīng)該根據(jù)項(xiàng)目的實(shí)際需求、目標(biāo)受眾和品牌特性等因素綜合考慮網(wǎng)頁版式設(shè)計(jì)和風(fēng)格的重要性,并在設(shè)計(jì)中找到它們之間的平衡點(diǎn)。

網(wǎng)頁元素設(shè)計(jì)規(guī)則研究

藍(lán)藍(lán)小助手 網(wǎng)站設(shè)計(jì)文章及欣賞

通過以上的實(shí)際應(yīng)用和案例分析,我們可以看到刪格系統(tǒng)和響應(yīng)式設(shè)計(jì)的結(jié)合在B端網(wǎng)頁設(shè)計(jì)中的重要性和實(shí)用性。這種結(jié)合方式能夠兼顧頁面的整體結(jié)構(gòu)和內(nèi)容的自適應(yīng)顯示,為用戶提供更加舒適、便捷的瀏覽體驗(yàn)。因此,設(shè)計(jì)師在實(shí)際項(xiàng)目中可以考慮充分融合這兩種設(shè)計(jì)方法,以創(chuàng)造出更加出色的網(wǎng)頁設(shè)計(jì)作品。

UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)!

藍(lán)藍(lán)小助手 網(wǎng)站設(shè)計(jì)文章及欣賞

菲茨定律在App產(chǎn)品設(shè)計(jì)中強(qiáng)調(diào)了目標(biāo)區(qū)域的大小和距離對用戶操作的影響。通過增大重要按鈕的大小、減少操作間距離、設(shè)計(jì)適合手勢操作的界面以及提供清晰的反饋指引,可以優(yōu)化用戶體驗(yàn),提高用戶操作的準(zhǔn)確性和效率。這個(gè)原理指導(dǎo)著設(shè)計(jì)師如何布局界面元素,使得用戶更輕松、更快速地進(jìn)行交互操作,進(jìn)而提升產(chǎn)品的易用性和吸引力。

PC端應(yīng)用界面UI設(shè)計(jì):如何打造高效與美觀并重的用戶體驗(yàn)

藍(lán)藍(lán)設(shè)計(jì)的小編

在數(shù)字化時(shí)代,PC端應(yīng)用作為人們工作、學(xué)習(xí)、娛樂的重要工具,其界面UI設(shè)計(jì)直接關(guān)乎到用戶的使用體驗(yàn)和滿意度。一個(gè)優(yōu)秀的PC端應(yīng)用界面UI設(shè)計(jì),不僅應(yīng)當(dāng)具備美觀的視覺效果,更要注重功能布局、交互邏輯以及用戶體驗(yàn)的全面提升。那么,如何進(jìn)行PC端應(yīng)用界面UI設(shè)計(jì),以打造高效與美觀并重的用戶體驗(yàn)?zāi)??以下是一些關(guān)鍵要點(diǎn)。

用7個(gè)章節(jié),幫你完整掌握網(wǎng)頁設(shè)計(jì)中的字體設(shè)置|北京藍(lán)藍(lán)UI設(shè)計(jì)公司

周周

不同操作系統(tǒng)、不同瀏覽器下的默認(rèn)字體是不同的,在網(wǎng)頁項(xiàng)目中可以通過 CSS 的 font-family 和 @font-face 來讓頁面渲染出適合當(dāng)前網(wǎng)頁的字體。

 

一篇文章帶你看懂B端后臺基礎(chǔ)邏輯

周周

前言:為什么要看懂B端基礎(chǔ)邏輯


相信很多設(shè)計(jì)師同學(xué)都接觸過B端產(chǎn)品,對于很多設(shè)計(jì)師而言,遇上B端產(chǎn)品是一件令人又愛又恨的事情,愛是因?yàn)槟壳笆袌錾洗蠖鄶?shù)的公司主要經(jīng)營的都是B端系統(tǒng),B端系統(tǒng)相對于C端來說UI界面顯得并沒有那么的重要,所以設(shè)計(jì)師的責(zé)任也相對沒有那么重,而恨是因?yàn)槟壳按蠖鄶?shù)B端系統(tǒng)頁面都是由前端UI框架搭建的,前端同學(xué)很多時(shí)候直接套用組件即可,所以UI設(shè)計(jì)師對于整個(gè)系統(tǒng)來講也顯得可有可無,導(dǎo)致設(shè)計(jì)師話語權(quán)也特別的低,甚至有些做B端系統(tǒng)的公司壓根不用UI設(shè)計(jì)師也能完成項(xiàng)目開發(fā)。


但是作為交互設(shè)計(jì)師(小公司一般是產(chǎn)品經(jīng)理)在B端卻特別吃香,并且擁有主要的話語權(quán),因?yàn)槲覀冎鲗?dǎo)這整個(gè)系統(tǒng)的基礎(chǔ)邏輯與業(yè)務(wù)邏輯設(shè)計(jì),所以無論是前端還是后端同學(xué)都需要根據(jù)我們的設(shè)計(jì)進(jìn)行開發(fā),最終完成整個(gè)系統(tǒng)。


因此,今天這篇文章并不是告訴大家有哪些前端UI框架或后臺組件等..(相信這些大家也看得太多了,工作中都是套框架,能用得上的沒幾個(gè)),而是從交互上如何去看懂B端后臺的基礎(chǔ)邏輯以及以后自己晉升成產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師時(shí),怎樣去設(shè)計(jì)一個(gè)完整閉環(huán)的系統(tǒng)。


一、B端產(chǎn)品有哪些基礎(chǔ)邏輯


B端產(chǎn)品和C端不同,C端產(chǎn)品大多數(shù)都是針對個(gè)人用戶,設(shè)計(jì)的關(guān)系結(jié)構(gòu)相對來說比較簡單,每一個(gè)用戶擁有的權(quán)限都是一樣的,例如微信、淘寶等,我能看到的頁面你都能看得到,很少不存在權(quán)限差異問題。


而B端產(chǎn)品的用戶一般都是企業(yè),企業(yè)用戶一般會管理著多個(gè)角色,也就是角色多元化(例如一些校園系統(tǒng)角色就分為:普通教師、級長、主任等角色),不同的角色對系統(tǒng)的需求和職能也不一樣,我們需要根據(jù)角色的需求去劃分不同的權(quán)限,讓他們互不干擾但又滿足他們的需求問題,因此B端產(chǎn)品的基礎(chǔ)邏輯比C端產(chǎn)品相對復(fù)雜。


看完上面文字的同學(xué)可能蒙了,又角色又權(quán)限的,能不能說點(diǎn)人話?


行!其實(shí)很簡單,B端系統(tǒng)無非三個(gè)邏輯(也是三個(gè)頁面):用戶管理、角色管理以及菜單管理。(有些系統(tǒng)因?yàn)闃I(yè)務(wù)需求可能有部門管理,那么算上部門管理就四個(gè))

二、什么是用戶、角色跟菜單


(1)什么是菜單


為什么我把菜單放到最前面跟大家講?是因?yàn)椴藛喂芾肀惹懊鎯蓚€(gè)相對簡單,而什么是菜單也特別好解釋,大家可以直接認(rèn)為系統(tǒng)左側(cè)的頁面列表就是菜單,系統(tǒng)中擁有多少個(gè)頁面那么就有多少個(gè)菜單,你的菜單越多就以為著你的權(quán)限就越多。


菜單管理的作用就是用于管理員對整個(gè)系統(tǒng)頁面的管理(管理最主要就是增刪改查),而有一些公司為了減少開發(fā)工作量會直接不要菜單管理,有多少個(gè)頁面都由代碼直接寫死,管理員不能通過頁面進(jìn)行人工配置,這樣會導(dǎo)致以后擴(kuò)展會非常麻煩,當(dāng)然了,有一些系統(tǒng)的菜單幾乎不改的話,代碼寫死也沒問題。



(2)什么是權(quán)限


在講解用戶之前我需要提前跟大家講一下什么是權(quán)限,準(zhǔn)確來講應(yīng)該是權(quán)限分為哪些?


在目前的后臺系統(tǒng)中,權(quán)限一共分為三種權(quán)限,分別是菜單權(quán)限(也就是上面介紹的)、數(shù)據(jù)權(quán)限以及操作權(quán)限。


菜單權(quán)限決定了用戶有沒有這個(gè)頁面,例如學(xué)校系統(tǒng)中,主任有看到所有教師的教學(xué)數(shù)據(jù)的界面,而教師卻沒有這個(gè)功能,那么在給主任新增賬號的時(shí)候就應(yīng)該把對應(yīng)菜單賦予進(jìn)去。看上去很復(fù)雜,其實(shí)具體操作就是新增的時(shí)候把對應(yīng)的菜單勾選上就可以了。



數(shù)據(jù)權(quán)限則決定用戶能不能看到對應(yīng)的數(shù)據(jù)。還是學(xué)校系統(tǒng)的例子,初中部主任只能看到初中部所有教師的教學(xué)數(shù)據(jù),而高中部主任也只能看到高中部教師的教學(xué)數(shù)據(jù),不同用戶能看到的數(shù)據(jù)也是不同的,所以在新增的時(shí)候需要給用戶配置(一般配置就是勾選)好對應(yīng)的數(shù)據(jù)權(quán)限。


但是這里有一個(gè)問題,配置數(shù)據(jù)權(quán)限時(shí)我們?nèi)绻粋€(gè)一個(gè)人去勾選配置的話會特別的麻煩,假如初中部主任只能看到初中部的老師,那么我在給他配置賬號的時(shí)候需要一個(gè)一個(gè)的初中老師勾選上,張三、李四、王五..等等,如果人多的話可能需要勾選成百上千次,用戶體驗(yàn)就會變得特別差,因此現(xiàn)在的系統(tǒng)在配置數(shù)據(jù)權(quán)限時(shí)都是以部門為單位進(jìn)行配置,也就是說,直接選擇部門就代表著擁有整個(gè)部門的數(shù)據(jù)權(quán)限。


最后操作權(quán)限即決定了用戶有沒有對數(shù)據(jù)進(jìn)行操作(一般是增刪改查)的功能。還是上面的例子,初中部主任擁有查看教師的頁面以及數(shù)據(jù),那么他能不能對教師們的數(shù)據(jù)進(jìn)行增刪改查或者導(dǎo)入導(dǎo)出呢?這就取決于操作權(quán)限的配置了。目前很多的后臺系統(tǒng)在配置菜單權(quán)限的時(shí)候同時(shí)需要把操作權(quán)限進(jìn)行配置(因?yàn)橹荒芟扔许撁娌拍苓M(jìn)行操作),操作權(quán)限一般就是增加、刪除、修改以及查詢,當(dāng)然如果頁面還有導(dǎo)入導(dǎo)出或者其他功能,這些也需要在操作權(quán)限中進(jìn)行配置。


(3)系統(tǒng)中的用戶


用戶其實(shí)也很容易理解,B端系統(tǒng)的用戶其實(shí)就是需要登錄進(jìn)系統(tǒng)的賬號,所以有一些系統(tǒng)的用戶管理也叫賬號管理。


因此用戶管理的作用就是對登錄進(jìn)系統(tǒng)的賬號進(jìn)行增刪改查等,當(dāng)我們需要對別人提供一個(gè)賬號時(shí),我們就新增一個(gè)用戶的賬號密碼給他們,直到他們用完了再把他們的賬號進(jìn)行刪除。


那么問題來了,上面我們說到,不同的用戶可能有不同的需求問題,那么就意味著我們每一個(gè)用戶給要他們分配不同的菜單去做他們的事情。


例如在學(xué)校系統(tǒng)中:普通教師只負(fù)責(zé)自己班級學(xué)生的成績錄入,所以普通教師只有班級成績錄入的菜單,但是學(xué)校主任卻不一樣,他不僅僅能看到各班學(xué)生成績,還能根據(jù)各班成績進(jìn)行對比分析,年級學(xué)生排名等等..


因此在剛開始的傳統(tǒng)權(quán)限系統(tǒng)中,我們會直接把相應(yīng)的菜單權(quán)限、數(shù)據(jù)權(quán)限、操作權(quán)限賦予給用戶,每新增一個(gè)用戶我們就選擇好所有的權(quán)限都勾選上賦予給用戶,最后提供給用戶進(jìn)行操作。


然而這種操作方式有一個(gè)弊端,就是如果每新增一個(gè)用戶,系統(tǒng)管理員就需要重復(fù)進(jìn)行勾選相同的權(quán)限,那么就會耗費(fèi)大量的精力(一個(gè)用戶要配置的權(quán)限特別多,如果用這個(gè)方式操作的話新增一個(gè)用戶可能就需要花費(fèi)很長時(shí)間)。因此,為了解決這個(gè)問題,我們在用戶與權(quán)限之間建立了角色管理。


(4)角色的作用


系統(tǒng)中角色的定義其實(shí)跟生活中是一樣的,我們把固定的權(quán)限集合到一起從而形成了角色。例如,生活中UI角色就負(fù)責(zé)頁面的視覺設(shè)計(jì),而交互設(shè)計(jì)師則負(fù)責(zé)了產(chǎn)品的邏輯或者用戶體驗(yàn)設(shè)計(jì),這些角色擁有的權(quán)限一般很少變化,也幾乎不會進(jìn)行刪除或者修改,就好像UI設(shè)計(jì)師或者交互設(shè)計(jì)師這些角色不會一時(shí)半刻就被完全消滅一樣。

有了角色,我們可以先把對應(yīng)的權(quán)限集合賦予給角色,然后新增用戶時(shí),再選擇用戶對應(yīng)的角色即可。


這樣做的好處是什么呢?好處就是當(dāng)我們新增用戶的時(shí)候,如果是相同角色的用戶,我們不再需要重復(fù)去大量勾選相應(yīng)的權(quán)限了,只需選擇好該用戶是那個(gè)角色就可以間接對用戶賦予權(quán)限,并且后續(xù)要對用戶進(jìn)行權(quán)限的修改也十分便捷。因此,在現(xiàn)在的后臺系統(tǒng)中,大多數(shù)都是采用權(quán)限賦予角色,然后新增用戶時(shí)再選擇用戶對應(yīng)的角色的方式。


三、整體流程


如果看完上面的知識點(diǎn)還有點(diǎn)懵的話也沒關(guān)系,這部分給大家展示在后臺系統(tǒng)中菜單管理、角色管理與用戶管理的實(shí)際應(yīng)用是怎樣的。


第一步先查看菜單管理有哪些內(nèi)容,一般情況下,一個(gè)成熟系統(tǒng)的菜單頁面幾乎是已經(jīng)固定不變的,那么也就是說菜單管理列表中所擁有的菜單都不需要怎么操作,列表中有多少數(shù)據(jù)就代表著系統(tǒng)總體有多少菜單。


第二步進(jìn)行角色管理,如果是成熟系統(tǒng)的話,角色管理的角色也早已經(jīng)分配好了,我們并不需要過多的進(jìn)行操作,但如果是剛研發(fā)完成的系統(tǒng),那么我們就需要根據(jù)現(xiàn)實(shí)的用戶需求進(jìn)行角色的設(shè)置,具體添加角色的主要參數(shù)包括角色名稱、菜單權(quán)限、數(shù)據(jù)權(quán)限以及操作權(quán)限(其實(shí)也就是上文介紹的三種權(quán)限),其他的參數(shù)都是根據(jù)自身業(yè)務(wù)進(jìn)行添加。


最后一步就是用戶管理,配置好角色后,我們就可以根據(jù)需求進(jìn)行用戶的新增操作,例如現(xiàn)在我們需要新增一個(gè)賬號進(jìn)行登錄系統(tǒng),那么在用戶管理頁面中點(diǎn)擊新增按鈕,隨后填寫用戶名稱與密碼,最后選擇用戶角色,點(diǎn)擊確定按鈕即可完成(因此,新增用戶的三個(gè)必要參數(shù)是用戶名、密碼以及角色,有部門的需要填寫所屬部門,其他參數(shù)根據(jù)系統(tǒng)業(yè)務(wù)進(jìn)行添加)。添加完成后你們可以試一試使用自己所填寫的用戶名密碼登錄后臺系統(tǒng),隨后體驗(yàn)一下作為其他角色是否能完成自身需要的業(yè)務(wù)。


四、最后總結(jié)(特別重要)


用戶管理、角色管理以及菜單管理是B端系統(tǒng)最基礎(chǔ)的邏輯,也是同學(xué)們將來需要轉(zhuǎn)崗B端交互設(shè)計(jì)師或者產(chǎn)品設(shè)計(jì)師所必須掌握的知識,上面所介紹的僅僅是RBAC模型中最簡單的一種,現(xiàn)實(shí)設(shè)計(jì)中可能出現(xiàn)各種情況,因此關(guān)于這次的B端產(chǎn)品設(shè)計(jì)我想給大家?guī)c(diǎn)Tips:


    1、在現(xiàn)實(shí)開發(fā)中,后臺系統(tǒng)并不一定像我上面所說的那么完善,有些系統(tǒng)并不需要菜單管理,老板要求直接代碼寫死就好了,又或者有些系統(tǒng)就只有一個(gè)角色,那么角色管理也不需要了,這些情況都是有可能發(fā)生的,所有我們做設(shè)計(jì)的時(shí)候除了運(yùn)用自己的知識以外,更多的是工作經(jīng)驗(yàn),知識是死的,人是活的,永遠(yuǎn)別忘了設(shè)計(jì)的本質(zhì)是解決用戶需求問題。

    2、很多時(shí)候后臺的邏輯管理會比我上面說的要復(fù)雜的多,例如一個(gè)用戶可以擁有多個(gè)角色嗎?不同角色能不能有相同的權(quán)限?如果有角色被刪除了,那么該角色關(guān)聯(lián)的所有用戶應(yīng)該怎么處理?可能你認(rèn)為這些并不是自己目前需要考慮的問題,但是除非你以后并不想晉升到更高的位置,不然這些問題以后肯定會遇到的。

    3、上面介紹的管理操作都是基于超級管理員賬號(admin)進(jìn)行操作的,如果你拿一個(gè)普通賬號的話一般是沒有對應(yīng)的菜單權(quán)限,我擔(dān)心有同學(xué)看完文章后馬上登錄自己的后臺系統(tǒng)進(jìn)行操作,接著登錄進(jìn)去找了半天都沒有找到對應(yīng)的菜單在哪里。

好了,最后希望文章能讓大家有所收獲,如果大家有不明白或者其他想法的話,歡迎大家一起探討,共勉。

文章來源:優(yōu)設(shè)網(wǎng)    作者:北沐而川


分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


7個(gè)實(shí)用技巧,教你搞定可視化圖表

資深UI設(shè)計(jì)者

可視化圖表是提升信息傳遞效率的一種有效方法,特別是在B端平臺中經(jīng)常遇到對統(tǒng)計(jì)的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。

可視化圖表是提升信息傳遞效率的一種有效方法,特別是在B端平臺中經(jīng)常遇到對統(tǒng)計(jì)的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。我們設(shè)計(jì)師在設(shè)計(jì)圖表的過程中,如果沒有系統(tǒng)的可視化知識,會出現(xiàn)設(shè)計(jì)的圖表雖然美觀但圖表不能很好的反應(yīng)數(shù)據(jù)的情況。那么,在復(fù)雜的數(shù)據(jù)關(guān)系中如何設(shè)計(jì)和選用圖表,如何在好看的同時(shí)提升信息傳達(dá)效率,看完這篇文章希望對你的設(shè)計(jì)過程有所幫助。


// 為什么要數(shù)據(jù)可視化


數(shù)據(jù)可視化就是用圖表來表示數(shù)據(jù)信息,它所傳達(dá)的信息包括你所拿到的數(shù)據(jù)源和你分析后的結(jié)果,再通過圖形強(qiáng)化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息,是我們可視化的最終目的。



舉個(gè)例子,同樣一組數(shù)據(jù),用表格的形式呈現(xiàn)是很難有所洞察的;如果將各個(gè)地區(qū)維度的數(shù)據(jù)聚合以柱圖形式呈現(xiàn),很容易就能看出各個(gè)地區(qū)間數(shù)據(jù)的差異,并從中洞察規(guī)律


關(guān)于如何設(shè)計(jì)好數(shù)據(jù)可視化圖表,這邊總結(jié)了三個(gè)步驟:選擇適合的圖表,強(qiáng)化視覺層次,圖表響應(yīng)式適配。


一、選擇適合的圖表


數(shù)據(jù)可視化的圖表種類繁多,當(dāng)我們真的開始作圖,往往會遇到一個(gè)困境:有這么多類型,要如何選擇正確的圖表呢?首要依據(jù)是考慮所要傳達(dá)的信息意圖,即所要制作的圖表它的任務(wù)是什么,再通過分析數(shù)據(jù)關(guān)系來選擇表達(dá)方式;第二層意圖是圖表傳達(dá)內(nèi)容,這時(shí)候我們就需要根據(jù)數(shù)據(jù)的特征去突出和強(qiáng)化。


1. 分析數(shù)據(jù)關(guān)系

根據(jù)數(shù)據(jù)分析的方式來看,每一種圖表都對應(yīng)了一種數(shù)據(jù)關(guān)系。從數(shù)據(jù)的維度出發(fā)弄清呈現(xiàn)結(jié)構(gòu),再結(jié)合數(shù)據(jù)關(guān)系作出選擇。了解圖表的可能知道,一般圖表的數(shù)據(jù)關(guān)系有構(gòu)成、比較、分布,以商業(yè)數(shù)據(jù)為例,常見的還有流轉(zhuǎn)關(guān)系。



構(gòu)成關(guān)系

構(gòu)成關(guān)系的圖表表達(dá)的是部分和整體的關(guān)系,用于分析總體和各部分的占比比例,構(gòu)成關(guān)系一般局部元素加起來為總數(shù)。如果只是想對比個(gè)別組成部分的大小,也可以使用比較關(guān)系的圖表。

常用圖表:餅/環(huán)圖、堆疊圖、面積圖等,如涉及到層級結(jié)構(gòu),還會用矩形樹圖或旭日圖等特殊結(jié)構(gòu)圖表。

關(guān)鍵詞:“占比、比例、百分比”



比較關(guān)系

比較關(guān)系是基礎(chǔ)分析中常用的一種圖表類型。在一定的取值范圍內(nèi),通過對兩個(gè)或兩個(gè)以上的指標(biāo)分析,可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式,趨勢對比用于表示一段時(shí)間內(nèi)數(shù)據(jù)的變化,分類對比用于比較數(shù)據(jù)規(guī)模。

常用圖表:趨勢對比常用圖表有折線圖、散點(diǎn)圖等;分類對比常用條形圖、柱狀圖、氣泡圖等。

關(guān)鍵詞:“增減、升降、漲跌、波動”



分布關(guān)系

利用空間分區(qū)來展示數(shù)據(jù)之間的分布關(guān)系,常用于體現(xiàn)兩個(gè)或以上數(shù)據(jù)的相關(guān)性。

常用圖表:散點(diǎn)圖、熱力圖、雷達(dá)圖等

關(guān)鍵詞:“隨著……而變化、A/B之間的相關(guān)性、交/并集”等



關(guān)聯(lián)與流轉(zhuǎn)

流轉(zhuǎn)關(guān)系是B端數(shù)據(jù)常用的一種關(guān)系,它可以動態(tài)的體現(xiàn)相關(guān)路徑下對象之間的關(guān)系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等,以面積或顏色深淺展示了多個(gè)狀態(tài)或?qū)ο笾g的流動量或流動強(qiáng)度。

常用圖表:關(guān)系圖、?;鶊D、漏斗圖、進(jìn)度圖等

關(guān)鍵詞:“流程步驟、留存、轉(zhuǎn)化、關(guān)系”



2. 分析數(shù)據(jù)特征

按數(shù)據(jù)關(guān)系和分析目的選擇好圖表類型后,第二步是根據(jù)數(shù)據(jù)特征選擇更加適合的展示方式。從數(shù)據(jù)分析的角度常見數(shù)據(jù)特征有:變量特征、維度特征、層級特征、流程特征。


變量特征

分辨一個(gè)指標(biāo)通常有兩類特征,按變量值是否連續(xù)可分為連續(xù)數(shù)據(jù)與離散數(shù)據(jù)兩種。連續(xù)數(shù)據(jù)通常會統(tǒng)計(jì)一組數(shù)據(jù)的變化趨勢,離散數(shù)據(jù)通常統(tǒng)計(jì)各分類下數(shù)量的變化。

  • 連續(xù)型數(shù)據(jù):指在一定區(qū)間內(nèi)可以任意取值的數(shù)據(jù)叫連續(xù)數(shù)據(jù),其數(shù)值是連續(xù)不斷的。如身高、體重等帶有時(shí)間因素變量的數(shù)據(jù)等,通常用折線圖體現(xiàn)變化趨勢。
  • 離散型數(shù)據(jù):指其數(shù)值只能用自然數(shù)或整數(shù)單位計(jì)算的數(shù)據(jù)。如當(dāng)天銷量、進(jìn)店人數(shù)等表示分類類型的數(shù)據(jù),用柱圖表現(xiàn)更加體現(xiàn)變量的特征。


維度特征

多維度分析需要將多個(gè)變量在同一平面上直觀的表示,可以選擇使用極坐標(biāo)系去展示多個(gè)維度變量。如果希望對比多組數(shù)據(jù),可使用不同顏色進(jìn)行分類

  • 根據(jù)分析視角選擇圖表:對于多維度變量的數(shù)據(jù)我們需要明確分析的視角,去找準(zhǔn)對應(yīng)的數(shù)據(jù)映射。如案例中多個(gè)班級的科目成績的這組數(shù)據(jù),如需要全局視角查看個(gè)班的綜合素質(zhì),推薦使用雷達(dá)圖;對比單科成績的變化分布,則推薦使用堆積圖。


層級特征

多層級數(shù)據(jù)由多個(gè)部分構(gòu)成一個(gè)整體,又稱樹形結(jié)構(gòu)數(shù)據(jù)。除了用結(jié)構(gòu)樹圖表表現(xiàn)以外,還可以考慮以下兩種圖表類型:

  • 矩形樹圖:突出子層級占比大小。最初是用來顯示計(jì)算機(jī)硬盤驅(qū)動器上文件的結(jié)構(gòu)和大小,它以面積的形式突出展現(xiàn)各個(gè)子層級節(jié)點(diǎn)的占比,可幫助用戶看到數(shù)據(jù)的層次結(jié)構(gòu)以及各層級之間的關(guān)系。


例如:上圖顯示了市場銷售額的來源結(jié)構(gòu)。長方形的大小取決于各國家的平均銷售額,通過色調(diào)來區(qū)分不同類型,顏色的深淺代表分類下的子集,面積體現(xiàn)銷售占比。對比一般結(jié)構(gòu)樹圖表,它的優(yōu)勢在于可以有效利用空間。

  • 旭日圖:突出細(xì)分層級關(guān)系。由多個(gè)圓環(huán)圖嵌套而成,也稱為徑向樹圖,它既能像餅圖一樣表現(xiàn)局部和整體的占比,又能像矩形樹圖一樣表現(xiàn)層級關(guān)系。常用于細(xì)分分析方法,將事物從大到小進(jìn)行拆解。每個(gè)級別的數(shù)據(jù)通過1個(gè)圓環(huán)表示,離原點(diǎn)越近代表圓環(huán)級別越高。 旭日圖在顯示一個(gè)環(huán)如何被劃分為多個(gè)層級時(shí)最有效,而矩形樹圖適合比較相對大小。


流程特征

流轉(zhuǎn)關(guān)系是表達(dá)數(shù)據(jù)轉(zhuǎn)化流程的重要類型,不僅包含統(tǒng)計(jì)意義上的數(shù)據(jù)總和,同時(shí)還表達(dá)了信息流轉(zhuǎn)的路徑;其中桑基圖和漏斗圖都可以表達(dá)路徑中流量的變化,不同的是?;鶊D重點(diǎn)強(qiáng)調(diào)流量的強(qiáng)度和走向,漏斗圖更加注重突出轉(zhuǎn)化率和效果,根據(jù)不同的表達(dá)目的選用。



二、強(qiáng)化視覺層次


選擇合適的圖表后,在信息傳達(dá)上也需要正確的表達(dá),展示形式美觀的同時(shí)能夠清晰的體現(xiàn)數(shù)據(jù)特點(diǎn)。


1. 強(qiáng)化數(shù)據(jù)特性

使用圖表正確的表達(dá)信息,需要設(shè)計(jì)師在強(qiáng)化數(shù)據(jù)特性的同時(shí)避免偏差

  • 趨勢易感知:折線圖數(shù)值如過于平均導(dǎo)致趨勢平緩,有時(shí)候無法體現(xiàn)偏差;在強(qiáng)調(diào)數(shù)據(jù)趨勢的場景下,推薦用動態(tài)取值范圍讓波動保持在一定范圍內(nèi),放大波動占比更突出趨勢。


  • 展示更準(zhǔn)確:柱狀圖依靠柱體面積體現(xiàn)最終數(shù)值,使用動態(tài)范圍截?cái)鄬?dǎo)致數(shù)據(jù)解讀不完整;始終將 y 軸從 0 開始,才能更準(zhǔn)確的反映柱圖中的值。


2. 色彩視覺傳達(dá)

除了在設(shè)計(jì)構(gòu)圖上優(yōu)化以外,顏色的選擇也是圖表重要的的信息表達(dá)元素。顏色會影響我們對數(shù)據(jù)的感知,錯(cuò)誤的取色會讓信息讀取產(chǎn)生誤解。我們可以通過不同的分析目的設(shè)置意圖色板,精確傳達(dá)信息同時(shí)后續(xù)的項(xiàng)目在選用時(shí)也可以達(dá)到用色的統(tǒng)一。



我們在之前的文章里有介紹過圖表的取色模型,通過調(diào)整顏色HSL值的區(qū)間,可以得到以下三種意圖色板:

  • 定性型-分類色板:用于區(qū)分不同的類型,又稱為無序色板。適合區(qū)分沒有內(nèi)在順序的類別
  • 定量分歧型-發(fā)散色板:通過兩邊互補(bǔ)色來體現(xiàn),具有明亮的中間值,然后以不同的色調(diào)在刻度的兩端變暗。通常用于可視化負(fù)值和正值
  • 定量順序型-順序色板:從亮到暗或相反的漸變。適合可視化從低到高的數(shù)字。

那么我們要怎么樣去使用這些色板呢?下面幾個(gè)案例將帶你了解其中的差異。


定性型:使用色調(diào)來進(jìn)行分類

數(shù)據(jù)內(nèi)在沒有順序差別時(shí),建議使用色調(diào)值(H)進(jìn)行區(qū)分;如定義國家、行業(yè)等類型。如果希望圖表看起來更加專業(yè),以下有幾項(xiàng)分類色板的小建議:

  • 選取盡量少的色調(diào):取色時(shí)無需使用整個(gè)色環(huán),使用鄰近色或互補(bǔ)色的取色方式顯得更加專業(yè)。


  • 色板適度明暗交替:一些視障人士無法區(qū)分色相,主要靠顏色的明暗差異來識別,通過飽和度和暗度的調(diào)整,創(chuàng)造明暗交替的色板。


定量型:使用深淺色板強(qiáng)調(diào)內(nèi)在順序

如果在同一個(gè)分類下包含子類別,或者數(shù)據(jù)本身具有排名屬性,那么建議使用連續(xù)色板來突出他們內(nèi)在的順序,使圖表更加易讀。

  • 順序色板-選擇合適的插值:根據(jù)數(shù)據(jù)的分布情況選擇不同的的插值斷點(diǎn),突出數(shù)據(jù)的差異。如以下案例中,根據(jù)統(tǒng)計(jì)學(xué)概念設(shè)定不同的取值區(qū)間,左側(cè)示例使用的是平均線性差值,反映的是數(shù)據(jù)的集中趨勢;右側(cè)示例使用的是中位數(shù)插值,能更好的體現(xiàn)數(shù)據(jù)分布的形態(tài)。


  • 發(fā)散色板-關(guān)注對比色的識別性:盡量避免紅綠配色,如需使用綠色,偏黃或偏藍(lán)的綠色更易分辨,對視障人士也更加友好。


三、圖表中的響應(yīng)式設(shè)計(jì)


B端圖表可視化的數(shù)據(jù)一般是在網(wǎng)頁或移動端上動態(tài)顯示。不同于平面展示或匯報(bào),在基礎(chǔ)設(shè)計(jì)完成后還需要考慮到圖表展示的環(huán)境,根據(jù)不同端去適配顯示效果,以適應(yīng)各種復(fù)雜情況。而動態(tài)顯示帶來的交互特性也讓數(shù)據(jù)展示有了更多的可能性。


1. 布局框架適配

在網(wǎng)頁端顯示時(shí),有時(shí)候同一個(gè)圖表需要考慮不同容器下的適配方式。根據(jù)數(shù)據(jù)相關(guān)性變化元素的適應(yīng)形態(tài),將非必要的的元素轉(zhuǎn)化或隱藏,保留重要的圖形元素去適應(yīng)當(dāng)前空間;元素隱藏后使用懸浮交互來保證信息的展示,保持圖表的可讀性同時(shí)也避免產(chǎn)生元素的重疊。



如案例中的圖表,在不同尺寸下通過改變和隱藏圖表元素,以達(dá)到適配當(dāng)前空間的效果。

2. 圖表元素適配

要適配移動端,網(wǎng)頁端橫向延展的顯示方式需要適應(yīng)移動端縱向空間的顯示。除了呈現(xiàn)角度的改變外,還需要考慮手機(jī)屏幕的尺寸和圖表元素的適配性,去兼容相關(guān)的交互操作。

  • 信息浮層:在圖表中,信息卡元素是傳達(dá)信息內(nèi)容的重要組件,在網(wǎng)頁端中懸浮展示,通常會占據(jù)很大空間;圖表適配移動端后,信息浮層改動到圖表上方常駐顯示,并跟隨手指的滑動變化響應(yīng)數(shù)值,完整展示信息的同時(shí)也避免了頁面抖動。


  • 坐標(biāo)軸標(biāo)簽:過長的坐標(biāo)標(biāo)簽在適配過程中會產(chǎn)生重疊,而省略也會造成信息展示的不完整。我們需要針對不同的坐標(biāo)軸類型給出響應(yīng)的規(guī)范。如文本類軸標(biāo)簽我們可以采用省略、換行、旋轉(zhuǎn)等方式適配,避免信息的缺失。針對有連續(xù)型的數(shù)據(jù)類坐標(biāo)軸我們可以使用抽樣、轉(zhuǎn)化單位等方式適配,精簡空間避免堆疊。


3. 極值適配

因B端平臺的特性,我們無法預(yù)知客戶傳入的數(shù)據(jù)量,可能會遇到因數(shù)據(jù)量過多,造成圖表顯示不佳,數(shù)據(jù)讀取困難等問題。這種情況下,提前考慮數(shù)據(jù)極限場景,通過交互的形式變化的方式讓用戶獲取完整信息,提升理解同時(shí)信息展示更靈活。

  • 縮放和平移:在數(shù)據(jù)范圍過多時(shí)增加取值范圍的縮略軸組件,通過限制展示范圍讓數(shù)據(jù)量顯示可控。


  • 互動切換視圖:如果折線的類別過多且無法省略的,建議分組查看。默認(rèn)狀態(tài)僅當(dāng)前組折線高亮,其他數(shù)據(jù)以淺色顯示,通過切換的方式查看其他組別的信息。


  • 懸浮鼠標(biāo)高亮:在分類過多不好分辨時(shí),可使用懸浮高亮的交互方式突出相關(guān)聯(lián)的數(shù)據(jù)組。


還有懸浮放大、點(diǎn)擊下鉆、聯(lián)動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因,在這篇文章就不做深入講解了,以后可獨(dú)立介紹。


// 結(jié)語


數(shù)據(jù)可視化在B端設(shè)計(jì)場景中發(fā)揮著重要作用。設(shè)計(jì)師在表達(dá)數(shù)據(jù)之美的同時(shí)更加準(zhǔn)確,才能更直觀地向用戶傳達(dá)數(shù)據(jù)的價(jià)值。使業(yè)務(wù)人員能夠從復(fù)雜的業(yè)務(wù)數(shù)據(jù)中快速、直接地找到重要數(shù)據(jù),確保用戶能夠更好的接收信息,才是可視化的關(guān)鍵。

* 以上圖表中均為虛擬數(shù)據(jù),僅作為案例參考


感謝閱讀,以上內(nèi)容均由百度MEUX團(tuán)隊(duì)原創(chuàng)設(shè)計(jì),以及百度MEUX版權(quán)所有,轉(zhuǎn)載請注明出處,違者必究,謝謝您的合作。申請轉(zhuǎn)載授權(quán)后臺回復(fù)【轉(zhuǎn)載】。也歡迎加入MEUX,視覺/交互/運(yùn)營設(shè)計(jì)師,可投簡歷至MEUX@BAIDU.COM (注明信息獲取來源如:站酷)


關(guān)于我們:
MEUX,百度移動生態(tài)用戶體驗(yàn)設(shè)計(jì)中心,負(fù)責(zé)百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。服務(wù)的產(chǎn)品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業(yè)產(chǎn)品等。MEUX以「簡單極致」為設(shè)計(jì)理念,創(chuàng)造極致用戶體驗(yàn)的同時(shí)賦能商業(yè),推動設(shè)計(jì)行業(yè)的價(jià)值和影響力,讓生活因設(shè)計(jì)而更美好。


 

作者:百度MEUX   來源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司                      

文化美育產(chǎn)品1.0視覺設(shè)計(jì)探索

資深UI設(shè)計(jì)者

前言

博學(xué)多聞,不同凡響。

博聞美育,是一款致力于提升用戶文化素養(yǎng)的產(chǎn)品。研發(fā)團(tuán)隊(duì)以“長見識,會思考,懂審美”作為核心理念,設(shè)計(jì)出《中國故事》《四方采風(fēng)》《高端文學(xué)》等的系列課程。

面對一個(gè)真正落實(shí)人文素養(yǎng)的全新課程產(chǎn)品,我們作為視覺設(shè)計(jì)師,首先希望的就是為用戶打造出最美的課堂,使用戶在高品質(zhì)的美學(xué)場景中能沉浸式體驗(yàn)到學(xué)習(xí)的樂趣。當(dāng)然,我們同樣希望探尋如何通過設(shè)計(jì)幫助青少年在使用產(chǎn)品時(shí)養(yǎng)成高審美意識,加強(qiáng)文化自信。

在此次對博聞產(chǎn)品的視覺品牌設(shè)計(jì)中,設(shè)計(jì)團(tuán)隊(duì)探尋了如何將視覺設(shè)計(jì)體驗(yàn)與課程教學(xué)更好的結(jié)合,以下為我們的設(shè)計(jì)過程以及設(shè)計(jì)成果。

設(shè)計(jì)目標(biāo):提升學(xué)習(xí)體驗(yàn)

首先,我們通過對產(chǎn)品特性的分析,明確了此次視覺品牌探索的主要設(shè)計(jì)目標(biāo) —— 重新定義什么是提升學(xué)習(xí)體驗(yàn)的人文素養(yǎng)產(chǎn)品,從用戶視角轉(zhuǎn)變?yōu)閰⑴c者,更加沉浸于課堂。

基于對設(shè)計(jì)目標(biāo)的進(jìn)一步探索,我們提煉出了提升學(xué)習(xí)體驗(yàn)的三種核心理念:

核心理念:情 感 | 經(jīng) 典 | 沉 浸

情感 · 價(jià)值認(rèn)同

近年來,國潮文化與傳統(tǒng)藝術(shù)在青少年群體中“走紅”,成為青年對話傳統(tǒng)的方式。體現(xiàn)了青少年對中華優(yōu)秀傳統(tǒng)文化的價(jià)值認(rèn)同和情感認(rèn)同。我們希望在青少年養(yǎng)成審美與內(nèi)在的關(guān)鍵階段,也盡到自己的一份小小的努力。

經(jīng)典 · 傳承創(chuàng)新

在保留傳統(tǒng)藝術(shù)精華的基礎(chǔ)上,我們尋求視覺上的創(chuàng)新,突破設(shè)計(jì)的思維慣性,使用戶可以通過現(xiàn)代的視覺表達(dá)形式與經(jīng)典文化產(chǎn)生共鳴,傳達(dá)國風(fēng)之美,多角度喚起青少年用戶對于傳統(tǒng)經(jīng)典的文化價(jià)值和藝術(shù)價(jià)值的理解。

沉浸 · 專注體驗(yàn)

我們希望將國風(fēng)之美呈現(xiàn)在用戶面前,將有道博聞系列課程全面包裝成能夠讓學(xué)生身臨其境的國風(fēng)互動課堂,豐富用戶的心智,發(fā)揮產(chǎn)品的雙重價(jià)值。

設(shè)計(jì)策略:探索國風(fēng)之美

確立核心理念后,我們將中國傳統(tǒng)藝術(shù)中的精髓進(jìn)一步提煉,最終選擇了以下關(guān)鍵詞作為視覺設(shè)計(jì)的表現(xiàn)點(diǎn):

接下來,我們基于各個(gè)關(guān)鍵詞對具體方案展開探索

01 國風(fēng)之美 · 符號

容納承載,歷史淵源。

為了確保博聞三個(gè)系列的課程(《中國故事》《四方采風(fēng)》《高端文學(xué)》)在品牌視覺設(shè)計(jì)上能夠更好的進(jìn)行拓展應(yīng)用、傳播差異化、與用戶情感共鳴。我們結(jié)合了三個(gè)系列課程的特點(diǎn)與對傳統(tǒng)文化的研究,分別為各個(gè)課程建立了代表性的元素作為超級符號,加強(qiáng)用戶的記憶點(diǎn):

中國故事 —— 講述中華經(jīng)典

中國故事系列課程會通過詩、詞、歌、賦、散文、小說全類型文學(xué)作品,講述中華經(jīng)典。玉璽作為皇帝的玉印,是至高權(quán)力的象征,在各朝各代中見證了各色各樣的傳奇故事。因此選用【玉璽】作為中國故事的符號圖形。

四方采風(fēng) —— 探訪文化名城

四方采風(fēng)系列課程首次“走出屏幕”,采用文化直播結(jié)合外景采拍的形式,在歷史文化名城中講述各地的風(fēng)土人情。使用【中國古建筑】作為這一系列課程的超級符號,見證和反映了各地社會的發(fā)展和歷史變遷。

高端文學(xué) —— 精讀文學(xué)作品

高端文學(xué)系列課程將帶領(lǐng)用戶學(xué)習(xí)重磅文學(xué)作品,該系列選用【卷軸】作為代表符號,卷軸不僅承載了國人對中國繪畫、書法的認(rèn)識,更是寫入了古人的思想與信念。

在確認(rèn)好三個(gè)系列的代表符號后,我們將構(gòu)圖一分為二,左邊作為系列的重點(diǎn)信息區(qū)域,右邊作為符號以及視覺表現(xiàn)區(qū)域。

02 國風(fēng)之美 · 色彩

濃墨淡彩,總相宜。

在視覺品牌的色彩方面,我們從古代寫意的濃墨重彩中,提取出了富有中國氣質(zhì)的一抹顏料。

歷史厚重的「紅」,風(fēng)光寫意的「綠」,靜心閱讀的「藍(lán)」代表了三個(gè)系列課程各自獨(dú)有的氣質(zhì)。

03 國風(fēng)之美 · 書法

剛?cè)岵?jì),行云流水。

我們依據(jù)行楷的筆畫特點(diǎn),設(shè)計(jì)了三個(gè)系列的第一識別字體?!感锌菇橛诳瑫c行書之間,比端正的楷書多一分活潑自由,又比隨性的行書多一份端莊。我們在此行楷的靈活中增添一抹穩(wěn)重,剛?cè)岵?jì),恰到好處。

第二識別字體的設(shè)計(jì)靈感來源于印章。「印章」的歷史可以追溯到戰(zhàn)國,至今仍在生活中廣泛應(yīng)用,古人鑿銅刻玉,力艱功深,我們希望這種信念依舊可以傳承在青少年的品格中。受到印章印面形式的啟發(fā),設(shè)計(jì)了第二識別字體。文字采用現(xiàn)代字體為基礎(chǔ),增加辨識性。

04 國風(fēng)之美 · 國畫

清新淡雅,水天一色。

國畫,以其永恒的藝術(shù)魅力穿越時(shí)空。國畫的繪制講求布局、造型、運(yùn)筆、賦彩,不拘泥于自然物象的再現(xiàn),強(qiáng)調(diào)主觀意境的創(chuàng)造,是中華民族傳統(tǒng)文化的瑰寶。我們借鑒了國畫中工筆畫的「留白」構(gòu)圖理念,并添加水墨畫中的「墨韻」作為細(xì)節(jié)補(bǔ)充,創(chuàng)作了既符合現(xiàn)代視覺風(fēng)格,又不失古韻的插畫;

最終,我們將提煉出的「符號」「色彩」「書法」「國畫」這四個(gè)關(guān)鍵詞融合在系列課程之中。

創(chuàng)作作品凝結(jié):深挖沉浸體驗(yàn)

01 除了賦予課堂知識,我們還能為用戶做什么?

除了設(shè)計(jì)課程產(chǎn)品常規(guī)的講義以及線上頁面,為了進(jìn)一步提升用戶的沉浸式學(xué)習(xí)體驗(yàn),有道博聞獨(dú)創(chuàng)了「手賬本」這一教輔材料,并且隨課程附贈可以使用戶進(jìn)一步體驗(yàn)傳統(tǒng)藝術(shù)魅力的「國風(fēng)禮盒」。

02 如何使用戶更加沉浸地參與課堂?

「手賬本」可以幫助用戶將課上的知識融會貫通,并收入「手抄報(bào)」「旅行MAP」「作家名片」「思維導(dǎo)圖」等模塊,讓用戶深度參與到【輸入-加工-輸出】的產(chǎn)品結(jié)構(gòu)中,使用戶充分吸收課堂知識、加入自己的思考理解,并最終輸出觀點(diǎn)和總結(jié)?!韭?想-做】循環(huán),鞏固知識印象。我們最終會收集用戶的優(yōu)秀作品,并集結(jié)成刊,出版成冊,進(jìn)一步提升用戶的參與度,增強(qiáng)他們的學(xué)習(xí)熱情。

在手賬本的視覺設(shè)計(jì)中,我們根據(jù)課程內(nèi)容繪制了精美插圖,考慮到用戶書寫的便捷性,設(shè)計(jì)了古風(fēng)的書寫外框,力求用戶可以時(shí)時(shí)刻刻沉浸在充滿國風(fēng)之美的課堂中,使視覺設(shè)計(jì)與教學(xué)內(nèi)容完美融合。

03 所有心意,只為準(zhǔn)備給喜愛課程的你!

「國風(fēng)禮盒」將“長見識,會思考,懂審美”的概念植入到禮盒的選品和包裝中。封面設(shè)計(jì)我們選用了「時(shí)空穿梭」的概念,通過時(shí)空隧道,串聯(lián)古今,大開眼界。禮品內(nèi)容里,充分尊重用戶的喜好,最終選取了「國畫顏料」「手繪扇子」「國風(fēng)筆記本」「考古盲盒」。每一份禮品,都充滿著我們對它的嚴(yán)格要求和對用戶參與的期待。

寫在最后

“古老的種子,它生命的胚芽蘊(yùn)藏于內(nèi)部,只是需要在新時(shí)代的土壤里播種。”    ——泰戈?duì)?/em>

中華傳統(tǒng)文化正是一顆充滿驚喜和生機(jī)的種子,靜待著我們的細(xì)心發(fā)掘。我們會繼續(xù)探索,用設(shè)計(jì)在新時(shí)代中傳承優(yōu)秀傳統(tǒng)文化。讓傳統(tǒng)藝術(shù)擁抱青少年,讓東方美學(xué)成為青少年心中最引以為豪的文化。


本次有道博聞項(xiàng)目的設(shè)計(jì)過程中,我們牢記以用戶為中心的理念,做與課程產(chǎn)品融合的設(shè)計(jì),最終收獲了一份寶貴的經(jīng)驗(yàn),也獲得了用戶的一致好評和贊許。未來,設(shè)計(jì)團(tuán)隊(duì)也會堅(jiān)持做以用戶為中心的產(chǎn)品,傳達(dá)設(shè)計(jì)的力量。


相信種子,相信力量。

                         



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。 



作者: 有道LCT設(shè)計(jì)團(tuán)隊(duì)  來源:站酷





分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

日歷

鏈接

個(gè)人資料

存檔