首頁

在UX/UI設(shè)計(jì)中使用網(wǎng)格系統(tǒng)的5個技巧

seo達(dá)人

一、六種網(wǎng)格類型

每種類型的網(wǎng)格都有不同的用途,通過了解不同的網(wǎng)格類型幫助我們在設(shè)計(jì)的時候匹配最合適的網(wǎng)格。

 

1、 基線網(wǎng)格

圖片

基線網(wǎng)格是由等距水平線組成的密集網(wǎng)格,用于確定文本的位置?;€網(wǎng)格通常與分欄網(wǎng)格結(jié)合使用,以確保每列中的文本在界面上均勻?qū)R。

基線網(wǎng)格最簡單的示例是一張劃線紙,準(zhǔn)確清晰地展示設(shè)計(jì)元素的位置。

圖片

 

2、單欄網(wǎng)格

圖片

單欄網(wǎng)格是最基礎(chǔ)的形式,用來確定文本在頁面中的位置,多用于書籍、雜志等以文字為主的版面設(shè)計(jì)中。 

 

3、分欄網(wǎng)格

圖片

圖片

這是日常設(shè)計(jì)中最常使用的網(wǎng)格類型,將一個頁面拆分成多個垂直區(qū)域,然后將對象與之對齊。

報(bào)紙和雜志的排版設(shè)計(jì)、網(wǎng)頁和APP的設(shè)計(jì)都會廣泛使用分欄網(wǎng)格。

圖片

 

4、模塊化網(wǎng)格

圖片

模塊化網(wǎng)格是柱狀網(wǎng)格的擴(kuò)展,采用垂直方向的列并添加水平的行。相交的行和列創(chuàng)建“模塊”,可用于管理內(nèi)容較為復(fù)雜的界面或者海報(bào)設(shè)計(jì)。 

 

5、像素網(wǎng)格

圖片

在用Photoshop作圖時,不斷放大畫布,會看到畫布上有密集的像素網(wǎng)格出現(xiàn)。

數(shù)字屏幕是由數(shù)百萬像素的微觀網(wǎng)格組成的,為了設(shè)計(jì)的準(zhǔn)確性,設(shè)計(jì)師需要逐個像素地編輯圖像,同時也練就了“像素眼”。小到一個icon,大到整個網(wǎng)頁,都可以借助像素網(wǎng)格來完成。

圖片

 

6、層級網(wǎng)格

圖片

層級網(wǎng)格是指按照內(nèi)容的重要性來組織界面元素,讓用戶能夠按照主次的層級順序?yàn)g覽界面。層級網(wǎng)格主要用在網(wǎng)頁設(shè)計(jì)中,形式比較自由形式,大多數(shù)是結(jié)合網(wǎng)頁的內(nèi)容來確定。

將界面中的內(nèi)容進(jìn)行優(yōu)先級排序,按照層級結(jié)構(gòu)清晰展示內(nèi)容的優(yōu)先級,為產(chǎn)品提效。

圖片

 

 

二、在UX/UI中使用網(wǎng)格的5個技巧

在工作中嘗試使用網(wǎng)格系統(tǒng)時,下面的關(guān)鍵要點(diǎn)能幫助我們實(shí)現(xiàn)有效、靈活的設(shè)計(jì):

 

1、規(guī)劃網(wǎng)格與頁面的關(guān)系

圖片

在《平面設(shè)計(jì)網(wǎng)格系統(tǒng)》這本書中,作者強(qiáng)調(diào)網(wǎng)格在頁面中的位置以及頁邊距的設(shè)置對網(wǎng)格的功能和美感有很大影響。合適的頁間距和留白會讓頁面看起來更舒服。 

 

2、不要只使用網(wǎng)格設(shè)計(jì)

圖片

當(dāng)接到一個全新的需求時,很多設(shè)計(jì)師習(xí)慣以常用的網(wǎng)格和欄寬作為標(biāo)準(zhǔn)開始設(shè)計(jì)。

雖然常用的網(wǎng)格系統(tǒng)設(shè)計(jì)起來更熟悉,但花時間弄清楚當(dāng)前的項(xiàng)目實(shí)際需要什么樣的網(wǎng)格,以及是否有其他需要考慮的因素也同樣重要。這樣做能夠避免我們被困在一套網(wǎng)格標(biāo)準(zhǔn)中,限制設(shè)計(jì)的發(fā)揮。 
 
 

3、保持設(shè)計(jì)元素在網(wǎng)格內(nèi)

圖片

網(wǎng)格中每一欄之間都會有間距作為分隔,當(dāng)頁面中的文本和圖形跨越多欄時,需要保持內(nèi)容在網(wǎng)格每一欄的邊緣,避免將元素放到間距的邊緣。

圖片

 

4、不要忘記基線對齊

圖片

確?;诹械脑O(shè)計(jì)中的所有文本遵循一致的基線,這樣可以大大改善頁面的和諧感和組織感。

在數(shù)字設(shè)計(jì)項(xiàng)目中,基線對齊很容易被忽視,但它可以很好地平衡設(shè)計(jì),對齊后頁面會有更舒服的視覺效果。 

 

5、考慮使用8pt網(wǎng)格進(jìn)行設(shè)計(jì)

圖片

我們的設(shè)計(jì)必須能保證在各種設(shè)備和屏幕分辨率下都能工作并且看起來很清晰。使用基數(shù)的倍數(shù)的尺寸和間距有助于使設(shè)計(jì)過渡清晰和系統(tǒng)化。

現(xiàn)在通常使用8pt網(wǎng)格,這樣無論是矢量設(shè)計(jì)還是基于像素的設(shè)計(jì),都可以在視網(wǎng)膜屏幕上完美縮放。 
 
 
 

最后

以上是在UX/UI設(shè)計(jì)中常見的6種網(wǎng)格類型和5個技,希望通過這些內(nèi)容能讓你對網(wǎng)格系統(tǒng)的應(yīng)用有更深的認(rèn)識。


作者:Clippp

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》在UX/UI設(shè)計(jì)中使用網(wǎng)格系統(tǒng)的5個技巧

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


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


藍(lán)藍(lán)設(shè)計(jì)sillybuy.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ì)公司



如何通過設(shè)計(jì)語言手冊來傳遞品牌理念!

seo達(dá)人


圖片

本次以3.0時代加入以人文中心主義的設(shè)計(jì),人文感官品牌情懷社區(qū)為方向發(fā)起升級!58到家作為一款為消費(fèi)者提供家政服務(wù)的產(chǎn)品,致力于為消費(fèi)者帶來品質(zhì)生活!設(shè)計(jì)語言的存在需要將用戶、產(chǎn)品、服務(wù)進(jìn)行結(jié)合,并在不同服務(wù)中保持統(tǒng)一的展現(xiàn),從而對體驗(yàn)和商業(yè)上帶來價(jià)值。

我們將產(chǎn)品劃分為三個階段:

1.0:滿足了以產(chǎn)品為中心的設(shè)計(jì),達(dá)成生產(chǎn)售賣通順閉環(huán);

2.0:滿足了以消費(fèi)者為中心的設(shè)計(jì),考慮更多用戶體驗(yàn);

 3.0:加入以人文中心主義的設(shè)計(jì),人文感官品牌情懷社區(qū)。

圖片

那么明確了我們本次升級的方向后,制定了整個產(chǎn)品的框架,底層加入了人文感官品牌情懷的相關(guān)因素,再應(yīng)用到我們現(xiàn)有的業(yè)務(wù)上,在協(xié)同上進(jìn)行高效的鏈接,產(chǎn)品到設(shè)計(jì),設(shè)計(jì)與設(shè)計(jì),設(shè)計(jì)到開發(fā)。最終形成了我們的前臺展現(xiàn)頁面。

 

 

圖片

最適合用戶的設(shè)計(jì)語言手冊,才是合理的,那么在3.0階段的人文感官品牌情懷,核心即為人,也就是我們的用戶,首先我們要了解用戶的情感訴求。

圖片

根據(jù)我們的用戶畫像以及多輪訪談?wù){(diào)研, 得知用戶的相關(guān)正負(fù)情緒。生活當(dāng)中家務(wù)工作的角色分配問題,一直是經(jīng)常出現(xiàn)的一個場景。用戶希望通過我們的產(chǎn)品服務(wù),來提升生活的幸福指數(shù)!

在以此為前提的背景下,用戶希望我們是專業(yè)標(biāo)準(zhǔn)化的、省心高效的、溫暖溫馨的、舒適的、具有親和力的等等。最終都會期望以更有品質(zhì)的生活而結(jié)尾,那么“品質(zhì)生活”即為我們需要來傳遞給用戶的情感。

 那么品質(zhì)生活是什么呢?

圖片

其實(shí)用戶對我們的要求是一款提升生活品質(zhì)及愉悅感的產(chǎn)品,而非工具。

 

 

圖片

綜上所述,我們確定了以品質(zhì)生活成為我們的本次設(shè)計(jì)語言升級的slogan,再結(jié)合業(yè)務(wù)的自身特性,我們進(jìn)行了詳細(xì)的拆分后提煉出了以下相關(guān)關(guān)鍵詞,來滿足用戶更多的情感訴求。

干凈明亮 

居住環(huán)境的潔凈會帶給人更多舒適愜意的感受。首先對品牌色進(jìn)行了升級,使其更鮮明。也延展與其相匹配的輔助色來打造出完善的色彩體系。

圖片

 

陽光照射在屋子里,用戶愜意地躺在沙發(fā)上,光總是能給人溫馨溫暖的感覺。針對光束進(jìn)行了深度剖析,過濾掉了光源生硬的進(jìn)入以及具象光源的展示方案,最終確定使用相對適中的漸變色。

專業(yè) 

專業(yè)是線上線下綜合訴求的結(jié)合體,那么在線上加強(qiáng)品牌背書、有跡可循的一致性來達(dá)到滿足所的情感訴求。

高效 

用戶攜帶訴求而來,那么減少用戶感到麻煩的情緒,對產(chǎn)品的識別清晰、操作便捷提升是最直接影響的。

親和力 

服務(wù)行業(yè)需必備的能力,微笑服務(wù)也成為了我們的業(yè)務(wù)情感透傳標(biāo)準(zhǔn)。提煉出微笑符號結(jié)合我們的實(shí)際場景進(jìn)行運(yùn)用!

慢生活… 

在對用戶的相關(guān)情感訴求結(jié)合業(yè)務(wù)進(jìn)行了落地后,對效率類設(shè)計(jì)原則也進(jìn)行了相應(yīng)的升級。

 

 整體架構(gòu) 

應(yīng)用整體架構(gòu)也是一個應(yīng)用對外呈現(xiàn)的基礎(chǔ)結(jié)構(gòu),是系統(tǒng)風(fēng)格的體現(xiàn)形式之一,除了特殊設(shè)計(jì)訴求,通常情況下,應(yīng)用需要使用通用的應(yīng)用架構(gòu)來保持系統(tǒng)的一致性和用戶操作的易用性。

圖片

 柵格系統(tǒng) 

布局不是靜態(tài)固定的,柵格系統(tǒng)在一個應(yīng)用內(nèi)的重要程度不言而喻。我們設(shè)定了以4dp / 4pt為基數(shù)的柵格系統(tǒng)。

圖片

 文本原則  

文本作為產(chǎn)品中用戶獲取信息的主要信息載體,字號大小和字重決定了信息的層級和主次關(guān)系。對字號、字重、行高以及組合字體進(jìn)行了設(shè)定,為不同的場景創(chuàng)造了層級分明以及清晰的信息讀取體驗(yàn)。

圖片

 間距參數(shù)  

針對頁面內(nèi)容區(qū)域的通用元素間距進(jìn)行了分類。設(shè)計(jì)師結(jié)合具體場景的情況,來調(diào)用間距參數(shù)的適配邏輯。以此來結(jié)合柵格系統(tǒng)進(jìn)行更好的適應(yīng)相關(guān)視覺元素符號的對應(yīng)變化。

圖片

 圓角參數(shù)  

結(jié)合業(yè)務(wù)屬性保證親和力的透傳,在產(chǎn)品盡量避免出現(xiàn)銳角圖形的設(shè)計(jì)表達(dá)手法。故此針對圓角的大小也進(jìn)行了系統(tǒng)級別的定義,進(jìn)行深度統(tǒng)一管理!

圖片

語意原則及動效等,并依據(jù)相關(guān)設(shè)計(jì)原則產(chǎn)出了組件庫。

 

 

圖片

在多元化的產(chǎn)品時代,時刻關(guān)注并滿足用戶的情緒,是產(chǎn)品能脫穎而出的關(guān)鍵!在建立設(shè)計(jì)語言手冊時從提升用戶體驗(yàn)和滿足商業(yè)價(jià)值整體考慮,挖掘流程當(dāng)中線上線下的觸點(diǎn),多維度思考并總結(jié)落地,深度傳遞品牌理念。

設(shè)計(jì)語言手冊更多時候是一個相對寬泛的閾值,并非組件的固定值,在某些業(yè)務(wù)場景下能為用戶帶來增值體驗(yàn)或較高商業(yè)價(jià)值時,可以被打破。最后,核心就是在搭建語言手冊時應(yīng)思考更多“為什么”這么做!


作者:58UXD

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》如何通過設(shè)計(jì)語言手冊來傳遞品牌理念!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


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


藍(lán)藍(lán)設(shè)計(jì)sillybuy.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)品的產(chǎn)研協(xié)同提效調(diào)研

seo達(dá)人

一、目前有哪些提升設(shè)計(jì)與前端生產(chǎn)力的方案

1、D2C(Design To Code)

D2C(Design to code)這個模式我們非常熟悉,其本質(zhì)是將設(shè)計(jì)師的設(shè)計(jì)資產(chǎn)轉(zhuǎn)化為代碼,讓前端工程師可以快速的復(fù)用,在這個成熟的領(lǐng)域主要分成兩大類:「設(shè)計(jì)資產(chǎn)類」和「設(shè)計(jì)對接類」

a. 設(shè)計(jì)資產(chǎn)類

設(shè)計(jì)資產(chǎn)類是完整系統(tǒng)的規(guī)范和代碼進(jìn)行沉淀形成設(shè)計(jì)類的資產(chǎn),這一類的產(chǎn)品在市面上目前是屬于主流,產(chǎn)品有網(wǎng)易的Fish Design(網(wǎng)易自研)、Ant Design、Arco Design、Element 等,這些產(chǎn)品都是將組件化的設(shè)計(jì)資產(chǎn)轉(zhuǎn)化為代碼資產(chǎn),方便前端工程師在開發(fā) B 端產(chǎn)品頁面時可以快速引用,提升開發(fā)的效率。

圖片

b. 設(shè)計(jì)對接類

設(shè)計(jì)對接類又分成「設(shè)計(jì)稿查看類」「設(shè)計(jì)稿代碼生成類」兩種類型:

設(shè)計(jì)稿查看類:主要是 D-box(網(wǎng)易自研)、figma、藍(lán)湖等可以讓前端工程師在線查看設(shè)計(jì)師的設(shè)計(jì)稿并提供一定的轉(zhuǎn)化代碼方案,主要是為了保障產(chǎn)品的還原度。

圖片

設(shè)計(jì)稿代碼生成類:最近兩年為了徹底的解決還原度的問題,讓前端工程師專注的解決代碼問題「設(shè)計(jì)稿代碼生成類」也開始在市場嶄露頭角。

比如:Imgcook、Codefun,直接復(fù)制設(shè)計(jì)稿地址進(jìn)入軟件內(nèi)部轉(zhuǎn)為代碼文件,直接導(dǎo)出完整的靜態(tài)頁面代碼,減少開發(fā)過程中的樣式調(diào)整問題。

直接導(dǎo)出整頁代碼模式的小缺陷是無法滿足開發(fā)中:代碼精簡(ai 智能生成的代碼對目前還達(dá)不到開發(fā)人員喜歡的程度,較為冗余)、控件交互、綁定數(shù)據(jù)等幾方面的需求,但是比如在一次性的靜態(tài)頁面的實(shí)現(xiàn)中還是能夠達(dá)到提效的目的。

圖片

結(jié)論:D2C模式的產(chǎn)品相對獨(dú)立,從定義還原度「設(shè)計(jì)資產(chǎn)類」、保障還原度「設(shè)計(jì)稿查看類」、解決還原度「設(shè)計(jì)稿代碼生成類」層層遞進(jìn),可以有效提升設(shè)計(jì)師和前端工程師的生產(chǎn)效率和協(xié)同效率。

但在目前競爭激烈的大環(huán)境中,優(yōu)秀團(tuán)隊(duì)的效率提升已經(jīng)達(dá)到瓶頸,而提效的本質(zhì)是為了比競爭對手更快更好,當(dāng)所有人都有了相同的東西時,提效的目標(biāo)可能就需要從別的地方打開缺口。

 

2、C2D(Code To Design)

C2D(Code To Design)「前端代碼轉(zhuǎn)設(shè)計(jì)稿」這個模式對于設(shè)計(jì)師相對模糊,不過國外的企業(yè)已經(jīng)做出了探索。

比如:2017 年Airbnb 發(fā)布的前端開源模塊 React Sketch.app,其核心理念是用代碼做設(shè)計(jì)。第一次看到的時候感覺真的很酷,通過 React Sketch.app 直接在 Sketch 設(shè)計(jì)軟件中編譯出設(shè)計(jì)界面,代碼也可以直接在項(xiàng)目中使用。

圖片

還有另外一個產(chǎn)品叫 html-sketchapp,通過在輸入框中輸入網(wǎng)頁地址就可以直接在 Sketch 中生成可編輯的設(shè)計(jì)界面「網(wǎng)頁轉(zhuǎn)設(shè)計(jì)文件」,通過任何前端代碼都可以轉(zhuǎn)為設(shè)計(jì)資產(chǎn)的文件,甚至直白一些說就是參考成熟產(chǎn)品做設(shè)計(jì),適度借鑒吧。

圖片

結(jié)論:目前的 C2D 的市場方案對于設(shè)計(jì)師而言不夠友好,無法讓設(shè)計(jì)師可以直接使用,都需要工程師來完成轉(zhuǎn)換,同樣也會遏制設(shè)計(jì)創(chuàng)新,陷入同質(zhì)化的泥潭中。

但這個模式,卻非常適合“有意”借鑒參考成熟或者競爭對手的項(xiàng)目團(tuán)隊(duì),可以快速達(dá)到同類型產(chǎn)品的基準(zhǔn)水平。

 

 

二、針對目前現(xiàn)狀,什么樣的方式可以實(shí)現(xiàn)提效?

從我們當(dāng)前的工作流程來看

圖片

在這個流程中設(shè)計(jì)最在乎的就是設(shè)計(jì)階段的表現(xiàn)需求和前端的設(shè)計(jì)還原,為了保障精準(zhǔn)的表現(xiàn)需求,在設(shè)計(jì)階段需要大量的溝通和風(fēng)格嘗試。

在前端還原階段需要和前端不斷的扣細(xì)節(jié),輸出幾百條信息的走查文檔,那應(yīng)該如何解決這些問題?

圖片

答案就是「 C2D2C」的模式

 

1、C2D2C(Code To Design To Code)

C2D2C(Design to code to design)的模式,將流程中的設(shè)計(jì)表現(xiàn)和前端還原階段的通過設(shè)計(jì)標(biāo)準(zhǔn)化和研發(fā)工業(yè)化的方式進(jìn)行流程優(yōu)化,減少設(shè)計(jì)和前端開發(fā)的參與,實(shí)現(xiàn)中后臺研發(fā)流程的整體提效。

圖片

在十幾年的發(fā)展里互聯(lián)網(wǎng)行業(yè)積累了大量的設(shè)計(jì)資產(chǎn)。

這些設(shè)計(jì)資產(chǎn)的沉淀是設(shè)計(jì)標(biāo)準(zhǔn)化的基礎(chǔ),將設(shè)計(jì)資產(chǎn)轉(zhuǎn)為封裝好的代碼組件也就是 D2C 的過程。將封裝好的組件通過低代碼平臺進(jìn)行屬性配置、搭建頁面、布局調(diào)整實(shí)現(xiàn)頁面的設(shè)計(jì)就是 C2D 的過程。

通過平臺設(shè)定交互行為和綁定后臺數(shù)據(jù),完成整個系統(tǒng),最后在進(jìn)行站點(diǎn)發(fā)布,就實(shí)現(xiàn)了 C2D2C 的完整流程。

圖片

C2D2C 的模式是設(shè)計(jì)資產(chǎn)與線上智能化布局的代碼方案(低代碼平臺)以及后臺數(shù)據(jù)綁定的結(jié)合,將以前的人工分工通過智能化方案綜合一體去解決。

但這個過程不是僵化死板的模式,在C2D環(huán)節(jié)實(shí)現(xiàn)“設(shè)計(jì)->前端”的高還原度下快速落地,在D2C環(huán)節(jié)下實(shí)現(xiàn)“低代碼平臺->自有產(chǎn)品”的靈活調(diào)整下快速復(fù)制。

結(jié)論:隨著社會的發(fā)展,標(biāo)準(zhǔn)化和智能化的產(chǎn)品線都將會被人工智能取代,互聯(lián)網(wǎng)行業(yè)也正在向這個方向發(fā)展,所以設(shè)計(jì)的標(biāo)準(zhǔn)化和開發(fā)的工業(yè)化就像手工業(yè)向工業(yè)化的轉(zhuǎn)型,這是一個大的趨勢,未來可能一天的時間就可以生產(chǎn)數(shù)套后臺產(chǎn)品,這樣的生產(chǎn)效率才能跟上中國的數(shù)字化轉(zhuǎn)型浪潮。

 

2.、C2D2C 的市場化

低代碼平臺 是 C2D2C 模式得以實(shí)現(xiàn)的核心平臺,從2018 年開始海外投資開始關(guān)注低代碼平臺,OutSystem 平臺獲得 KKR 和高盛的 3.6 億美元的融資,成為了低代碼賽道的獨(dú)角獸,另一家低代碼創(chuàng)業(yè)公司 Mendix 被西門子以 7 億美元的價(jià)格收購,資本市場的關(guān)注讓低代碼賽道開始火熱起。

而國內(nèi)的低代碼平臺是從 2020 年疫情肆掠開始,疫情助推了在線辦公的發(fā)展,國家也在大力支持?jǐn)?shù)字化經(jīng)濟(jì),更多的企業(yè)開始數(shù)字化轉(zhuǎn)型,這也讓低代碼在國內(nèi)有了飛速發(fā)展的土壤。

目前海外比較成熟的平臺主要是 OutSystem和 Mendix,而國內(nèi)也有很多已經(jīng)商業(yè)化的低代碼產(chǎn)品,像網(wǎng)易輕舟等,已經(jīng)開始投入商業(yè)化的使用,可以從網(wǎng)易輕舟的低代碼產(chǎn)品架構(gòu),清晰完整的看到C2D2C模式的所需要具備的能力。

圖片

網(wǎng)易輕舟從業(yè)務(wù)角度出發(fā),具備持續(xù)迭代能力、組件具備可擴(kuò)展性,并且可以為企業(yè)進(jìn)行私有化部署,部署完成后可以和存量系統(tǒng)進(jìn)行集成,交付后具備非常好的可運(yùn)維性,是一個成熟的商業(yè)化平臺。

網(wǎng)易輕舟目前已經(jīng)服務(wù)了包括工商銀行、吉利汽車、申萬宏源證券、泰康人壽、臺州銀行等包括政府產(chǎn)業(yè)平臺30家,從服務(wù)的客戶我們也可以看的出來,低代碼產(chǎn)品在大型企業(yè)中落地更有優(yōu)勢。

結(jié)論:C2D2C 的模式已經(jīng)得到市場的驗(yàn)證,研發(fā)工業(yè)化可以更加高效的提升中后臺產(chǎn)品的研發(fā)效率,設(shè)計(jì)標(biāo)準(zhǔn)化也可以減少中后臺設(shè)計(jì)師大量的重復(fù)性勞動,對于中后臺的業(yè)務(wù)產(chǎn)品,可以大膽地選擇一個富有實(shí)力低代碼產(chǎn)品。

 

 

最后

低代碼平臺的使用需要同時具備一定的代碼能力和設(shè)計(jì)能力,這不管是對開發(fā)還是設(shè)計(jì)師都具備一定的門檻。目前的低代碼平臺使用角色應(yīng)該是前端工程師,復(fù)雜的后臺交互平臺還是需要設(shè)計(jì)師的深度介入。

低代碼平臺的誕生減少了中后臺設(shè)計(jì)師大量的重復(fù)性工作,可以讓中后臺設(shè)計(jì)師將更多的精力投入到用戶研究和提升用戶體驗(yàn)上。拖拽式的 UI 和智能化的布局以及良好的用戶體驗(yàn)和以前的開發(fā)相比較,在中后臺的開發(fā)上更加的高效也更加的智能。

在最初調(diào)研到低代碼平臺的時候,行業(yè)的快速發(fā)展和成熟,讓我下意識的反應(yīng)是中后臺的設(shè)計(jì)師可能要失業(yè)了,但是在調(diào)研了平臺的使用和深入的思考后,我覺得這是中后臺設(shè)計(jì)師的機(jī)會。C2D2C 模式的最優(yōu)解應(yīng)該是 0 代碼方案,而使用 0 代碼平臺最好的角色就是設(shè)計(jì)師。設(shè)計(jì)師專業(yè)的審美和對于用戶體驗(yàn)理解的深度都是其他職業(yè)所不具備的,未來的中后臺設(shè)計(jì)師更應(yīng)該將自己的精力投入到平臺流程的優(yōu)化和用戶體驗(yàn)的研究中去,這也在未來 0 代碼平臺到來后,我們才能更快更好的投入到新的生產(chǎn)中。


作者:程鑫

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》中后臺產(chǎn)品的產(chǎn)研協(xié)同提效調(diào)研

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


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


藍(lán)藍(lán)設(shè)計(jì)sillybuy.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ì)公司



5000字,作品集中的推理部分該怎么寫!

seo達(dá)人

圖片

現(xiàn)在很多公司面試UI都會面試交互能力,問你設(shè)計(jì)方案的推導(dǎo)、怎么量化、怎么分析、怎么做深度的設(shè)計(jì)思考等等,所以呢大部分設(shè)計(jì)師在本身視覺能力沒那么強(qiáng)的情況下,無奈在作品包裝中加入了推導(dǎo)分析的文字部分,結(jié)果,問題又來了,這些分析過程和推導(dǎo)其實(shí)是經(jīng)不起推敲的,因?yàn)橥趯?shí)際工作中,大部分設(shè)計(jì)師沒有真的運(yùn)用過這些方法、數(shù)據(jù),靠的是參考市面上的作品集從而包裝出來,也就經(jīng)不起面試官的深問。最后作品集也成為了四不像的結(jié)果。

那么如果我們的設(shè)計(jì)基本功沒那么強(qiáng),但又想展示自己的思維能力該怎么做呢?我在這里并不是教大家怎么去編和套設(shè)計(jì)流程的框架和理論,而是希望大家能明白,如果要放你的思維過程,應(yīng)該怎么正確的去放,如果真的沒做過,我建議不要去硬套,很容易漏洞百出。

 

設(shè)計(jì)師的定位和價(jià)值

一個項(xiàng)目的推導(dǎo)過程首先要明確,你在項(xiàng)目中扮演的是什么角色,你在整個項(xiàng)目中的價(jià)值是什么,是獨(dú)立負(fù)責(zé)?還是某一個環(huán)節(jié)的執(zhí)行者?我相信很多同學(xué)都想把自己包裝成一個獨(dú)立負(fù)責(zé)人,恨不得整個產(chǎn)品從立項(xiàng)到調(diào)研到分析到執(zhí)行都一個人包攬,但你越這樣去包裝,作品集內(nèi)容就越零散。

作品集主要展示的是你個人的能力,而不是讓你去描述和介紹你的產(chǎn)品。很多同學(xué)都變成了后者,比如先描述項(xiàng)目背景、產(chǎn)品的用戶群體是什么、每個功能模塊分別是什么功能…..這樣的方式去包裝作品真的味同嚼蠟,沒體現(xiàn)能力不說,還很枯燥。

圖片

 

 

一、講故事

其實(shí)我們可以用講故事的框架,來整理項(xiàng)目流程以及展示你在項(xiàng)目中的價(jià)值。在上學(xué)的時候老師會跟我們說,要講清楚一件事,需要分別理清楚三個階段,分別是:起因、經(jīng)過、結(jié)果。所以我們現(xiàn)在要講一件什么事呢?我們要講的是,你是如何通過設(shè)計(jì)手段幫助產(chǎn)品/用戶解決問題的。

那么我們就可以用起因、經(jīng)過、結(jié)果三個階段來闡述我們是怎么解決問題的,把這個邏輯給梳理出來。

 

1、起因

起因包含了

1.有哪些問題/機(jī)會

2.你是怎么發(fā)現(xiàn)問題的(為什么要做這個項(xiàng)目)

3.導(dǎo)致問題出現(xiàn)的原因是什么

圖片

比如我舉個例子,我發(fā)現(xiàn)我家?guī)鈮﹂_始掉粉脫落,甚至?xí)r不時的浴室柜下方會流出一些水,所以我懷疑是不是哪里漏水了,在這里我用的是觀察法,用觀察法很直觀的看到了問題。接下來我要去找到問題的原因,到底是什么原因?qū)е铝送鈮Φ舴勖撀湟约皾B水的問題。于是我先自己做了一個假設(shè),是不是埋在地下的水管破了?因?yàn)橹坝杏眠^腐蝕性很強(qiáng)的通下水道的藥劑,但是這個原因被我排除了,因?yàn)槿绻苈┧敲淳蜁恢甭皇情g歇性的出水。那還有可能是什么原因呢?浴室柜中下水管堵塞導(dǎo)致水流到了沒做美縫的縫隙中嗎?還是樓上漏水滲下來了?

圖片

最后經(jīng)過多個原因的排除,問題找到了,是由于樓上確實(shí)漏水以及淋浴間下水不暢長期積水導(dǎo)致水從下水管口子邊上的縫隙流了過去,兩個原因。

 

所以我們再回過頭來看,作品包裝中起因應(yīng)該說明哪些事項(xiàng):

1.1和2可以合并在一起寫,比如通過xx方法我們找到了目前產(chǎn)品中存在的問題,也可以寫我們找到了xxx問題,是由于我們用了xxx方法。

 

2、你是怎么發(fā)現(xiàn)你產(chǎn)品中存在的問題的?

是自我經(jīng)驗(yàn)的觀察判斷?還是通過數(shù)據(jù)分析找到的某個現(xiàn)象(比如一個板塊的點(diǎn)擊率在逐月下降)還是通過對用戶訪談或者體驗(yàn)地圖找到了某些體驗(yàn)問題?你得采用一些方法,越客觀越好,比如很多同學(xué)在找問題的時候總會用一些比較寬泛的修辭來描述:首頁結(jié)構(gòu)不合理、層次不清晰、體驗(yàn)較差,所以看到這樣的描述,我就想問,那么具體不合理、不清晰、體驗(yàn)較差的點(diǎn)在哪里呢?為什么你覺得不合理、不清晰、體驗(yàn)較差?是你的主觀感受?還是數(shù)據(jù)表現(xiàn)?還是客戶的體驗(yàn)?你得證明出來。所以問題的來源是很多的,有的是你專業(yè)經(jīng)驗(yàn)的判斷,有的是用戶的反饋,有的是數(shù)據(jù)的表現(xiàn),都不一樣。

圖片

 

3、導(dǎo)致問題出現(xiàn)的原因是什么?比如很多同學(xué)做改版,改版原因他們就寫:結(jié)構(gòu)不合理、層次不清晰、體驗(yàn)較差…..這個是不對的,改版原因應(yīng)該是,由什么具體事件,導(dǎo)致的結(jié)構(gòu)不合理、層次不清晰、體驗(yàn)較差,比如通過對用戶在支付任務(wù)流程中的數(shù)據(jù)表現(xiàn),我發(fā)現(xiàn)經(jīng)常有用戶在支付流程中跳失,導(dǎo)致轉(zhuǎn)化率下降,因此我們調(diào)研訪談了10個在支付流程中跳失的用戶,其中8個用戶在準(zhǔn)備支付的時候找不到編輯收貨地址的功能,于是他們放棄了這次支付,這個問題凸顯的就是核心功能沒有滿足用戶預(yù)期,有效性差。至于樣本量的問題我就不展開了。

很多同學(xué)在第一階段會放很多產(chǎn)品的一些市場研究、定位,這些其實(shí)一點(diǎn)用也沒有,雷聲大雨點(diǎn)小,一開始切入點(diǎn)很大,結(jié)果這些點(diǎn)對描述你的設(shè)計(jì)能力沒有任何幫助,并且在后面的設(shè)計(jì)方案和策略中也完全不能體現(xiàn)出來有什么關(guān)聯(lián)。不如聚焦一點(diǎn),針對問題直接進(jìn)行展開。

 

小結(jié)一下,起因包含了3個問題,這三個問題可以通過幾種方法來解答:

1.你是怎么發(fā)現(xiàn)問題的(經(jīng)驗(yàn)判斷法、渠道反饋法、用戶調(diào)研法、數(shù)據(jù)分析法、可用性測試…..)

2.有哪些問題(卡片分類法、kano模型、價(jià)值分析法……)

3.導(dǎo)致問題出現(xiàn)的原因是什么(經(jīng)驗(yàn)判斷法、用戶訪談、觀察推測……)

 

 

二、經(jīng)過

這個階段就是用來體現(xiàn)你是怎么解決問題的,這里我們就要來講到解決問題的策略和邏輯了。諸葛亮草船借箭大家都聽說過吧,這個事件的問題在于缺箭,為什么會缺箭呢?原因是沒有足夠的時間和材料來制作那么多箭矢,要解決這個問題怎么辦呢?招募更多的士兵?收集更多的材料?采用緩和之計(jì)爭取時間?顯然這些策略是無效的,那怎么辦?內(nèi)部不行,只能靠外部來解決,于是就有了草船借箭。

再舉個例子,這兩天有點(diǎn)頭痛(問題),醫(yī)生說頭痛可能有多種因素造成的,例如睡眠不好、頸椎有問題、受涼、壓力大等等(原因),所以為了解決這個問題,我就可以有幾個不同的策略,如果是睡眠導(dǎo)致的,那么我就通過改善睡眠質(zhì)量來解決,如果是頸椎導(dǎo)致的,那么我可以去找中醫(yī)做一下推拿,這些都是解決問題的策略。

所以在經(jīng)過階段你必須講明白你是怎么選擇一種合適的策略的。舉個例子,比如有一個新的電商產(chǎn)品上線了,并合作了一些大品牌,但是我們發(fā)現(xiàn)這個品牌的銷量還不如一些不知名的品牌來的高(問題),于是我們通過第一步的研究起因,發(fā)現(xiàn)用戶之所以不買單,是因?yàn)樗麄冇X得這些大品牌在你們平臺賣的是不是假貨(原因)。那么為了解決這個問題,我們就要研究一下具體的策略,怎么樣能夠讓用戶對該品牌產(chǎn)生信賴,而我們又如何才能讓用戶知道這個品牌是正品呢?

圖片

策略1:透出品牌資質(zhì)和曝光度:告知用戶我們有品牌授權(quán)的資質(zhì)

策略2:給予用戶更多保障:給用戶產(chǎn)品質(zhì)量的售后保障和檢測權(quán)利

策略3:讓用戶提前進(jìn)行體驗(yàn):可以給部分用戶試用

經(jīng)過分析以及成本權(quán)衡,策略2和3實(shí)施起來較為困難,成本高,于是策略1是一個比較好的選擇。那么具體的方案就要到第三階段來呈現(xiàn)了。

 

再舉個例子,抖音大家都有用過吧,在之前的老本版中,有用戶想查看當(dāng)前視頻的上下集,非常不方便(問題),因?yàn)樾枰c(diǎn)擊或者側(cè)滑進(jìn)入作者首頁,然后經(jīng)過滑動才能找到當(dāng)前視頻的位置(原因)。所以為了解決這個問題,如果你是抖音的設(shè)計(jì)師,你會有哪些策略呢?

策略1.提高用戶查看視頻的效率:直接給用戶定位到當(dāng)前視頻

策略2.提高作者制作系列視頻的便捷性:可以讓用戶不用進(jìn)入主頁也能看到上下集

 

所以,小結(jié)一下,“經(jīng)過”這個階段中找策略我們依然也可以用到一些方法:上癮模型、aarrr模型…..但是這些模型我是不建議大家在作品集里寫的,太形式化了,在大廠的設(shè)計(jì)流程中,設(shè)計(jì)策略基本上是通過產(chǎn)品和設(shè)計(jì)的經(jīng)驗(yàn)判斷給出的,不會真的說是靠這個模型工具而產(chǎn)生輸出的策略,比如像我們說“給用戶一種溫暖的感覺”,這是一個設(shè)計(jì)目標(biāo)也可以是一個策略,但它很難說是由哪個方法論或者工具提煉出來的。

 

 

三、結(jié)果

結(jié)果,也就是我們通過設(shè)計(jì)目標(biāo)和策略,選擇具體的設(shè)計(jì)方案。在作品集中,設(shè)計(jì)方案給面試官展示,這其實(shí)沒那么重要。面試官想看的是什么呢?是你雖然最后給出了a方案,但是在設(shè)計(jì)過程中,有沒有b方案和c方案,最后讓你選擇a方案的理由是什么,你是怎么思考的,也就是方案的由來。

這個才是我們展示能力的最好表現(xiàn)。以上面的抖音為例,通過策略1,用戶點(diǎn)擊主頁可以直接定位到當(dāng)前視頻的區(qū)域以便用戶查看上下集,如果直接根據(jù)這個策略設(shè)計(jì)方案是很簡單和直觀的,只要定好位,并給用戶一個當(dāng)前正在播放哪個視頻的狀態(tài),做個標(biāo)簽即可。

但是最終方案并不是這樣的,而是當(dāng)用戶側(cè)滑或者點(diǎn)擊頭像后先定位到的是用戶主頁的頭部區(qū)域,而在右下方給了一個“剛剛看過”的按鈕,點(diǎn)擊按鈕才會定位到剛剛正在看的視頻。

 

圖片

 

這兩個方案顯然是有區(qū)別的,為什么不直接定位,而要多給出一個“按鈕”呢?原因就在于抖音更希望觀看者和作者能夠更多的產(chǎn)生互動和鏈接,提高作者的關(guān)注率,讓觀看者先看到作者的主頁,再去查看剛才的視頻,因?yàn)橹挥心汴P(guān)注了作者,作者才有更多動力去制作視頻,同時關(guān)注作者也會為你個人的偏好附上一個大的權(quán)重,以便于做更精準(zhǔn)的推薦。 

這是對于兩種方案的解讀,所以方案a和方案b,為什么選b不選a,這就是理由。當(dāng)你的方案呈現(xiàn)在作品集中,面試官就會這么問。

通常在做方案的時候,大家也總會用到競品分析,競品分析是一把雙刃劍,它可以讓你的方案至少不會出大錯,也可以讓你的方案沒有特點(diǎn),所以這也很考驗(yàn)設(shè)計(jì)師是怎么將產(chǎn)品業(yè)務(wù)的定位、用戶屬性、業(yè)務(wù)目標(biāo)的差異化結(jié)合到方案中去的。競品分析大家也很喜歡單獨(dú)拿出一個板塊放在作品集里,咱先不論有沒有真實(shí)操作過,放在作品集里的內(nèi)容,一定要有目的性,大家仔細(xì)品一下這句話。你想要通過放這塊內(nèi)容告訴面試官什么?是你拿了一堆競品做了比較和描述,還是說你能夠結(jié)合自己業(yè)務(wù)和用戶的特性,找到和其他競品設(shè)計(jì)差異化的點(diǎn),最后應(yīng)用或指導(dǎo)到你的設(shè)計(jì)方案中去?

 

結(jié)果階段除了方案的探索、權(quán)衡外,還需要進(jìn)行驗(yàn)證和復(fù)盤。雖然咱們花了很大的力氣,從發(fā)現(xiàn)問題到找到原因,再到定義目標(biāo)和策略,最后選擇方案,但并不意味著最后的結(jié)果是好的,因?yàn)槲覀儾恢牢覀兊姆桨傅降子袥]有解決最一開始的問題,你原來頭痛,最后選擇了吃藥,結(jié)果吃了一個月,還是沒好,那就說明:1.問題原因不對 2.策略有問題 3.藥吃錯了。所以如果你要以結(jié)果為導(dǎo)向,那么最后的驗(yàn)證和復(fù)盤不可缺少。那有同學(xué)說,我們公司沒有數(shù)據(jù),沒有用戶,那我要怎么驗(yàn)證呢?那我勸你好好跟產(chǎn)品或者老板去談一談,雖然你想操這個心,但是老板都不在意那也沒有辦法,但是你在面試的時候需要表達(dá)出這樣的思維。

 

  

總結(jié)一下 

再說一下,分析推理部分,不是UI/UX作品集必備,你想做純視覺包裝作品集也可以,但我們要清楚,你應(yīng)聘的崗位要求是什么,而你的作品集和崗位要求是否能對應(yīng)起來?,F(xiàn)在的一些公司要求都很高,UI和UX都成為了標(biāo)配要求,所以我們盡可能要把這兩塊都在作品集里展示出來。有人說,我實(shí)在沒做過這些東西,讓我編也編不出來怎么辦?那就從今天起試著開始主動找找產(chǎn)品存在什么問題,然后去解決它,試著走一遍:起因、經(jīng)過、結(jié)果三個階段,我相信你一定會有收獲。 


作者: 應(yīng)駿

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》5000字,作品集中的推理部分該怎么寫!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


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


藍(lán)藍(lán)設(shè)計(jì)sillybuy.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ì)公司



卡片式設(shè)計(jì) | 掌握這些技法,快速提升界面效果!

seo達(dá)人

一、卡片式設(shè)計(jì)的定義

1、什么是卡片?

早在互聯(lián)網(wǎng)時代之前,卡片就出現(xiàn)在了我們生活中的方方面面,如名片、不干膠標(biāo)簽、便利貼、會員卡…等,不管是何種類型的卡片,它都將代表著我們現(xiàn)實(shí)生活中的某個特定信息。

圖片

卡片指的是含有圖片或文本信息的容器,它將我們需要的信息歸納在一起、并形成獨(dú)立的個體,以至于后續(xù)被引用到線上界面中,同樣具有非常不錯的信息歸納效果。

 

2、互聯(lián)網(wǎng)中的卡片式設(shè)計(jì)

卡片本身就是一個完整的信息區(qū)塊、并同時承載豐富的互動方式。在UI設(shè)計(jì)中,個性化和美感兼?zhèn)涞目ㄆ皆O(shè)計(jì)具有很強(qiáng)的易用性,它是一個UI設(shè)計(jì)組件,將標(biāo)題、文本內(nèi)容、圖形/圖片進(jìn)行整合并模塊化,讓信息的表達(dá)更加直觀、操作也更便捷。

卡片式設(shè)計(jì)之所以能成為當(dāng)今比較流行的趨勢,是因?yàn)樗茏尳缑嫘畔⒏袑哟胃校瑥脑O(shè)計(jì)、交互、視覺以及用戶體驗(yàn)等各方面來看,都有不錯的優(yōu)點(diǎn)。站在用戶角度,即便不太理解卡片的概念(也不需要理解),但能快速知道如何使用它,相對來說,學(xué)習(xí)成本也是極低的。

圖片

 

 

二、卡片式設(shè)計(jì)價(jià)值

1、結(jié)構(gòu)清晰

卡片在占用屏幕空間較少的情況下能夠?qū)⒉煌笮?、不同類型的信息?nèi)容按邏輯進(jìn)行分組呈現(xiàn),使界面結(jié)構(gòu)更加清晰。相比純粹的留白或分割線,卡片不僅對信息作出了分割,其本身還是一個獨(dú)立的容器,讓歸納組合后的信息能快速突出重點(diǎn),將復(fù)雜內(nèi)容簡單化處理。

卡片式布局整齊簡練,清晰的信息結(jié)構(gòu)有助于用戶瀏覽,方便快速找到自己感興趣的內(nèi)容,避免用戶產(chǎn)生一種費(fèi)時或感覺內(nèi)容超長的恐懼感,還能節(jié)省更多的時間成本。最常見的就是信息列表、圖文混排等,不僅做到了視覺上的美觀,也達(dá)到了平衡文字及圖片強(qiáng)弱的效果。

圖片

 

2、場景拓展

卡片式設(shè)計(jì)有利于場景拓展,他能在信息不斷增/減的情況下、頁面依然能組成一個連貫的整體,在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節(jié)假日增加二層樓…等。

圖片

 

3、空間擴(kuò)展

卡片式設(shè)計(jì)一度打破了移動端多為縱向操作、原有傳統(tǒng)的列表式布局,在空間有限的移動端設(shè)備中,還能很好的利用橫向空間。將橫向滑動區(qū)域的最后一個卡片漏出一小部分(若隱若現(xiàn)才是誘惑),不僅能給予用戶更多選擇與期待,其空間利用率也得到了很好的擴(kuò)展,在展示更多內(nèi)容的情況下依然能保持模塊的整體性。

圖片

 

4、突出重點(diǎn)

卡片式設(shè)計(jì)能很好的通過邊界襯托出內(nèi)容的整體性,特別是在電商類產(chǎn)品中的首頁頭部、瓷片區(qū)、營銷引流區(qū)將其應(yīng)用到了極致,即便在卡片數(shù)量較多的情況下,用戶依然能清晰的感知到內(nèi)容的歸屬層級以及重要信息。

圖片

 

5、兼容多端

卡片作為一個容器,它可以自由無限的等比縮放,非常適合響應(yīng)式設(shè)計(jì)。在手機(jī)、iPad、電腦等屏幕尺寸復(fù)雜的情況下,通過放大縮小或增減縱向排列數(shù)量的方式配合響應(yīng)式的斷點(diǎn)設(shè)計(jì),讓同一界面在不同設(shè)備之間輕易的創(chuàng)造出一致性的視覺體驗(yàn)。

圖片

 

6、易于操作

卡片給人最直觀的感覺就是可以操作,它不用箭頭、按鈕或超鏈接等引導(dǎo)性的視覺元素提醒,節(jié)省了一定的頁面空間,還有著更大的操作熱區(qū),無需做到精準(zhǔn)點(diǎn)擊??ㄆ皆O(shè)計(jì)很容易融入各種交出手勢,如單擊、雙擊、長按、拖動、滑動等,為用戶提供更多便捷的操作。

 

7、跳轉(zhuǎn)流暢

卡片可通過縮放的形式充分利用動畫進(jìn)行頁面跳轉(zhuǎn),例如App Store“Today”頻道,點(diǎn)擊卡片后直接等比放大至全屏,給用戶一種還停留在當(dāng)前頁面的錯覺,避免了傳統(tǒng)的跳轉(zhuǎn)頁面而造成的信息割裂感,流暢絲滑的過渡,給用戶更自然的交互體驗(yàn)。

 

 

三、常見的卡片式設(shè)計(jì)樣式

1、四周留白

這種類型的卡片在UI設(shè)計(jì)中最為常見,柔和的圓角、邊緣陰影以及四周很自然的留白,讓內(nèi)容模塊的存在感更加強(qiáng)烈,整個頁面信息的層級也更加清晰。

圖片

 

2、懸浮內(nèi)容之上

懸浮型卡片并非模態(tài)彈窗,與其相比,懸浮卡片不需要主動操作觸發(fā),可作為臨時控件或長期固定顯示,并且比模態(tài)彈窗能承載更多信息內(nèi)容,可通過伸縮來定義卡片中的信息數(shù)量,或多、或少、或展示、或隱藏,在頁面中非常靈活。

例如高德地圖首頁,搜索框及右側(cè)的功能入口長期懸浮在地圖之上,而下方卡片中的內(nèi)容會隨著高度的伸縮自動調(diào)節(jié)可展示的數(shù)量,非常實(shí)用。

圖片

 

3、通欄類型

通欄類型的卡片具有更強(qiáng)的視覺阻斷,對區(qū)分不同的功能模塊有不錯的效果,不過這種類型只通過頁面背景色保留上下邊間、且不會過多,不然頁面會顯得零散、雜亂。

圖片

 

 

四、卡片適用場景介紹

1、瀑布流

瀑布流主要正針對圖片較多、或以圖片為主的內(nèi)容設(shè)計(jì),它最大的優(yōu)點(diǎn)是無需過于在意圖片的高度,最大限度的還原原始圖片效果。

卡片式設(shè)計(jì)的瀑布流對信息的組合、包容性更強(qiáng),不僅能在單屏區(qū)域內(nèi)顯示更多內(nèi)容,同時又將每組信息組合作出了明確的劃分,在不破壞頁面整體性的基礎(chǔ)上也做到了相對獨(dú)立,如花瓣、Pinterest就是最好的例子。

圖片

 

2、信息流

信息流的展現(xiàn)方式主要以文字、圖片或視頻內(nèi)容為主,是一種較長內(nèi)容的媒介,不管哪種展現(xiàn)方式,其都需要用戶耗費(fèi)較長時間的滑動、瀏覽來篩查對自己有用的信息。

卡片式設(shè)計(jì)將信息進(jìn)行分塊處理,通過阻隔的方式快速告知用戶每個卡片的核心內(nèi)容,便于用戶在長時間的滑動過程中也能快速識別重要信息。

圖片

 

3、左/右滑動

卡片式左右滑動組合在音樂、視頻類產(chǎn)品中用最為廣泛,因內(nèi)容本身就圖片居多,也更適合卡片式設(shè)計(jì),相比平鋪具有更強(qiáng)的層次感,對用戶的吸引力較強(qiáng),尤其最右側(cè)漏出的一小部分內(nèi)容營造出神秘的感覺,用戶會不由自主的想去滑動以求獲取更多信息。

圖片

 

4、優(yōu)惠卡/券

卡/券設(shè)計(jì)實(shí)際是把生活中的實(shí)物映射到了UI設(shè)計(jì)中,通過模擬實(shí)物造型設(shè)計(jì)成卡片樣式,有效降低用戶的理解成本,并對其有了更直觀的感知,真實(shí)感尤為強(qiáng)烈。

圖片

 

5、突發(fā)事件/臨時提醒

對于用戶主動觸發(fā)或系統(tǒng)臨時發(fā)起的非固定性內(nèi)容,利用卡片式設(shè)計(jì)會讓信息布局更靈活、視覺更突出,在不影響用戶使用的前提下,可出現(xiàn)在任何位置。

圖片

 

6、部分頁面頭圖

卡片式設(shè)計(jì)可以將個人中心、個人主頁、會員等頁面中的關(guān)鍵信息進(jìn)行概括,并在頭部位置進(jìn)行重點(diǎn)突出,不僅讓原本單個的內(nèi)容形成整體,還能營造出沉浸式的氛圍。

圖片

 

 

五、卡片式設(shè)計(jì)原則及小技巧

1、一致性原則

為了保持界面設(shè)計(jì)的一致性,需要將卡片樣式納入設(shè)計(jì)規(guī)范,例如卡片是否通欄、是否需要設(shè)定圓角半徑、不同場景中卡片大小的劃分界限以及圓角數(shù)值的確定等,大部分情況下都需要遵循設(shè)計(jì)規(guī)范。

圖片

 

2、功能定位決定卡片形式

在同一產(chǎn)品中,雖然要遵循設(shè)計(jì)規(guī)范以確保一致性的視覺效果,但并非所有頁面都適合卡片式設(shè)計(jì)。

那么,到底是否需要采用卡片形式、使用哪種卡片類型?這還得根據(jù)頁面內(nèi)容屬性及目標(biāo)定位來決定。例如社交產(chǎn)品中的臨時會話列表、動態(tài)圈子使用卡片形式,很浪費(fèi)縱向空間、甚至?xí)@得很“雞肋”,用分隔線或間距留白來區(qū)分信息組顯然更合適;但對于電商類型的產(chǎn)品,利用卡片將不同的商品分隔后又進(jìn)行歸納,會更容易識別,信息的可讀性也會更強(qiáng)。

圖片

 

3、避免過多卡片嵌套

卡片式設(shè)計(jì)本身就包含了容器與背景的層級表現(xiàn),為了保持內(nèi)容的正常展示與用戶瀏覽體驗(yàn),避免在卡片中嵌套多層卡片,以免信息層級雜/亂而增加用戶的視覺負(fù)擔(dān)。

如果再同一卡片中需要再次區(qū)分多個信息組,可利用間距留白、分割線或淺色背景等元素屬性來區(qū)分,依然能達(dá)到想要的效果。

圖片

 

4、合理利用橫向空間

因?yàn)榭ㄆ瑑?nèi)、外的雙向間距留白,在空間有限的移動端設(shè)備中,橫向空間利用率較低,因此除了合理的減小左右間距外,還可以適當(dāng)利用左右滑動來擴(kuò)充橫向隱性空間。

例如淘票票首頁,在1.5屏的范圍內(nèi),幾乎每個模塊都能橫向滑動查看更多內(nèi)容,從用戶體驗(yàn)角度出發(fā),這是縱向空間無法比擬的。

圖片

 

5、降低縱向空間的浪費(fèi)

卡片式設(shè)計(jì)不是目的,其主要是用來更好的區(qū)分信息層級、提升用戶瀏覽體驗(yàn),因?yàn)榭ㄆ鳛楠?dú)立空間的存在,必定會增加上下間距而導(dǎo)致頁面拉長,因此,如無必要,不必盲目采用卡片式設(shè)計(jì)。

例如美團(tuán)APP的「首頁、電商、購物車、我的」4大主功能頁面都使用了卡片形式,而「消息」頁則采用分割線進(jìn)行信息分組,試想一下,如果為了統(tǒng)一規(guī)范而使用卡片,不僅造成很強(qiáng)的割裂感、還會極大的浪費(fèi)縱向空間。

圖片

 

6、長文表達(dá)不適合卡片

這點(diǎn)不用多說,新聞資訊類產(chǎn)品的內(nèi)容詳情頁就是最好的證明,不管其他頁面是否采用卡片形式,但詳情頁并不會跟隨形式,一方面可以讓同屏展示更多內(nèi)容、增加空間利用率,另一方面可減少無關(guān)元素對用戶產(chǎn)生的干擾、給予沉浸式的瀏覽體驗(yàn)。

圖片

 

7、突出一個核心內(nèi)容

很多時候,我們總會聽到PM說這個很重要、那個也很重要,都需要突出一點(diǎn),殊不知當(dāng)什么都突出了也說明什么都沒有突出。在單個卡片中,組始終牢記這個準(zhǔn)則:一次只突出一個核心信息,以便于用戶快速、精準(zhǔn)捕捉,切記不可貪多。

 

六、結(jié)語

卡片式設(shè)計(jì)之所有能快速流行起來且經(jīng)久不衰, 其主要得益于自身的靈活性,尤其是在跨設(shè)備、跨屏幕上有著純天然的優(yōu)勢,能忽略設(shè)備的差異給用戶提供更好的服務(wù)??ㄆ⒉皇呛唵蔚臉邮皆O(shè)計(jì),它是一種自由布局的設(shè)計(jì)語言,通過多種方式的信息組合、結(jié)合豐富的交互操作,給用戶創(chuàng)造出極致的使用體驗(yàn)。

信息的呈現(xiàn)方式雖有不同,但最終的目的都是為了服務(wù)于內(nèi)容,卡片式設(shè)計(jì)只是其中的一種形式而已,在設(shè)計(jì)過程中,我們需要根據(jù)內(nèi)容結(jié)合實(shí)際情況作出合理的判斷,切勿拘泥于形式而忽略內(nèi)容本身的重要性。

任何設(shè)計(jì)風(fēng)格及展現(xiàn)形式都有可能成為歷史,卡片式設(shè)計(jì)也不會例外,但絕對不是這么快就結(jié)束,它依然值得我們?nèi)ド罹浚η蟠蛟旄玫男畔⒉季?、更舒適的用戶體驗(yàn)。

 

原文地址:能量眼球

作者:大漠飛鷹CYSJ

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》卡片式設(shè)計(jì) | 掌握這些技法,快速提升界面效果!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


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


藍(lán)藍(lán)設(shè)計(jì)sillybuy.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ì)公司



2023 年全新視覺設(shè)計(jì)趨勢來啦!趨勢7把我萌翻了!

seo達(dá)人


近日,2023年度視覺設(shè)計(jì)趨勢報(bào)告發(fā)出出來了,總共有11個大的趨勢,那么23年又流行哪些趨勢呢?下面跟著菲爾剛哥的一起逛這場視覺盛宴吧!記得收藏噢!

2023年平面設(shè)計(jì)趨勢概覽:

1、粘土風(fēng)格

2、3D孟菲斯風(fēng)格

3、簡潔風(fēng)格

4、迷幻設(shè)計(jì)

5、霓虹燈和抽象卡通貼紙

6、70年代復(fù)古平面設(shè)計(jì)

7、簡化3D風(fēng)格

8、抽象線條藝術(shù)人物

9、藝術(shù)襯線字體

10、彩虹色調(diào)色板

11、受自然啟發(fā)的設(shè)計(jì)

1、粘土風(fēng)格(The Clay Look)

Example by Ramy Wafaa

2023年橡皮泥設(shè)計(jì)趨勢的關(guān)鍵要素

  • 介紹由數(shù)字技術(shù)或真正的橡皮泥制成的不完美的凹凸表面。
  • 提醒您在不完美中尋找完美。
  • 鼓勵不斷蛻變,塑造自己的未來。

2、3D孟菲斯風(fēng)格(The 3D Memphis Style)

2023 年 3D 孟菲斯設(shè)計(jì)的關(guān)鍵要素

  • 通過 3D 現(xiàn)實(shí)的棱鏡重生的著名 80 年代風(fēng)格。
  • 基于 3D 幾何圖形和鮮艷色彩的大膽組合。
  • 鼓勵在平凡中尋找不平凡。

3、簡潔風(fēng)格(The Clean Style)

2023 年清潔風(fēng)格設(shè)計(jì)的關(guān)鍵要素

  • 一個整潔的設(shè)計(jì),將所有圖案、裝飾品和裝飾都排除在外。
  • 可以通過 3D 設(shè)計(jì)技術(shù)或平面簡約主義來呈現(xiàn)。
  • 調(diào)色板由流行的白色或白色色調(diào)組成。

4、迷幻設(shè)計(jì)(Trippy Design)

2023 年 Trippy 設(shè)計(jì)趨勢的關(guān)鍵要素

  • 在設(shè)計(jì)美學(xué)方面可能不符合邏輯的風(fēng)格混雜。
  • 創(chuàng)造一種超現(xiàn)實(shí)的體驗(yàn),類似于產(chǎn)生幻覺的效果。
  • 挑戰(zhàn)設(shè)計(jì)師將他們的想象力超越所有既定的設(shè)計(jì)規(guī)則和限制。

5、霓虹燈和抽象卡通貼紙(Neon & Abstract)

2023年霓虹燈和抽象卡通貼紙趨勢的關(guān)鍵要素

  • 霓虹燈和抽象卡通貼紙風(fēng)格流行。
  • 雖然有些類似于平面物理貼紙,但有些則呈現(xiàn)出運(yùn)動和體積。
  • 抽象卡通貼紙風(fēng)格傳達(dá)了藝術(shù)繪畫的感覺。

6、70年代復(fù)古平面設(shè)計(jì)(70s Retro Flat Designs)

2023 年 70 年代復(fù)古平面設(shè)計(jì)的關(guān)鍵要素

  • 大膽、華麗、飽和的顏色,看起來很美。
  • 所有設(shè)計(jì)元素都由黑色細(xì)邊框勾勒出來。
  • 具有 3D 效果或簡單黑色輪廓的大塊圓形字母類型。

7、簡化3D風(fēng)格(Simplified 3D Style)

2023 年簡化 3D 設(shè)計(jì)的關(guān)鍵要素

  • 將細(xì)節(jié)減少到最低限度,同時在簡單中尋求完美。
  • 基于簡單、平滑的幾何形狀,如球體、立方體、圓柱體等。
  • 易于理解、熟悉和吸引人,因?yàn)樗愃朴谟變汉唵蔚耐婢摺?

8、抽象線條藝術(shù)人物(Abstract Line Art )

2023年抽象線條藝術(shù)人物設(shè)計(jì)的關(guān)鍵要素

  • 扁平的線性風(fēng)格,結(jié)合明亮的色彩,傳達(dá)復(fù)古的氛圍。
  • 扭曲的比例和動物、物體和人類特征的奇怪混合。
  • 與您所見過的任何東西都不相似的角色。

9、藝術(shù)襯線字體(Artistic Serif Fonts)

2023年藝術(shù)襯線字體趨勢的關(guān)鍵元素

  • 筆畫創(chuàng)意操控:不同字母的交織、扭曲、液化、延伸等。
  • 超大襯線字體可以是作品中唯一或主要的設(shè)計(jì)元素。
  • 襯線字體仍然傳達(dá)復(fù)雜性,但變得更加有趣和不可預(yù)測。

10、彩虹色調(diào)色板(Rainbow Palette Colors)

2023年彩虹調(diào)色板顏色設(shè)計(jì)的關(guān)鍵元素

  • 靈感來自彩虹的顏色。
  • 與其他流行的設(shè)計(jì)風(fēng)格相結(jié)合。
  • 代表各種形式的多樣性。

11、受自然啟發(fā)的設(shè)計(jì)(Nature-Inspired Designs)

2023 年自然靈感設(shè)計(jì)趨勢的關(guān)鍵要素

  • 柔和的泥土色調(diào)、天然材料、紋理和形狀。
  • 平衡感官,因?yàn)樗鼈鬟_(dá)寧靜、內(nèi)心的平靜和和諧。
  • 一些設(shè)計(jì)呈現(xiàn)出真實(shí)自然和虛構(gòu)現(xiàn)實(shí)之間的混合。

寫在最后的話

2023年度最新的視覺設(shè)計(jì)趨勢預(yù)測報(bào)告將設(shè)計(jì)師的想象力推向了全新的高度。這11個設(shè)計(jì)趨勢也為設(shè)計(jì)師們打造了一個超乎現(xiàn)實(shí)、夢幻般的場景,喚醒觀眾的好奇心,激發(fā)人們探索的自然欲望。

好了,2023年最新視覺設(shè)計(jì)確實(shí)介紹完畢,你有什么看法呢?

本文 由「菲爾.剛哥」編輯整理,僅供分享交流

圖源 Graphicmama網(wǎng)站| 版權(quán)歸原作者所有

-END-

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


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


藍(lán)藍(lán)設(shè)計(jì)sillybuy.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ì)公司



UI 場景中常見的 3 個主題化區(qū)域

seo達(dá)人


圖片

 

 

一、底部標(biāo)簽欄主題化設(shè)計(jì)

1、底部標(biāo)簽欄圖標(biāo)主題

在不改動結(jié)構(gòu)的情況下,替換底部標(biāo)簽欄圖標(biāo)是最方便的形式。通過主題化的圖標(biāo)也非常容易傳遞氛圍,無論是在節(jié)日慶典、購物季、主題活動等場景中,這個形式都是最直觀的表達(dá)之一。

比如優(yōu)酷 APP 在中秋節(jié)的時候,就將底部標(biāo)簽欄圖標(biāo)替換為各式各樣的月餅造型,主題營造也是非常的明顯。將原本的圖標(biāo)造型融入到月餅圖案中,鑲嵌圖案的設(shè)計(jì)非常巧妙,不僅保留原本的識別特征,也強(qiáng)化了主題氛圍感。

圖片

除了在圖標(biāo)造型上面發(fā)揮以外,也可以將主題文案融入到設(shè)計(jì)中,這也是較為直接的表現(xiàn)形式。作為特定主題來說一目了然,需要把控主題文案數(shù)量。

圖片

 

2、底部標(biāo)簽欄背景層

底部標(biāo)簽欄的設(shè)計(jì)中,除了通過圖標(biāo)設(shè)計(jì)附和主題之外,也可以在背景層進(jìn)行主題氛圍營造。由于底部屬于操作頻繁區(qū),背景層的設(shè)計(jì)不能過于搶眼,容易干擾功能的識別與操作。比如前段時間抖音 APP 將底部標(biāo)簽欄背景層進(jìn)行主題營造的時候,在黑色層上面運(yùn)用的色調(diào)比較深一些,與原本黑色的沉浸式體驗(yàn)有差異,在白底上面呈現(xiàn)效果還可以。

圖片

沒過多久抖音設(shè)計(jì)團(tuán)隊(duì)便進(jìn)行了更新,壓暗了背景元素的色調(diào),弱化了視覺感。更符合原本的感官體驗(yàn)習(xí)慣,也能強(qiáng)化主題感。

圖片

除了抖音以外,小紅書 APP 前段時間也在底部標(biāo)簽欄背景層上面進(jìn)行了營造。如果營造面積比較大的話,在無圖標(biāo)形式(純文字版底部標(biāo)簽欄)上面比較適合。如果帶有圖標(biāo)的話,適合做局部強(qiáng)化。

圖片

 

 

二、頂部視覺區(qū)強(qiáng)化主題感

頂部視覺區(qū)包含狀態(tài)欄、導(dǎo)航欄和頂部內(nèi)容區(qū)域,通常是白底、灰底、品牌色底和運(yùn)營主題背景等為主。也是強(qiáng)化視覺感的常見區(qū)域,作為營造主題氛圍來說也是非常好的選擇。

圖片

該區(qū)域不僅可以作為功能性活動入口,也能在特殊時間段作為氛圍營造。很多產(chǎn)品都會在頂部視覺區(qū)域做應(yīng)變處理,滿足多場景的需求發(fā)揮。

圖片

頂部視覺區(qū)的強(qiáng)化也是增強(qiáng)頁面感官體驗(yàn)的方式之一,除了靜態(tài)背景的營造以外,也可以使用動態(tài)或者流體漸變等形式。

圖片

 

 

三、金剛區(qū)圖標(biāo)設(shè)計(jì)主題化

金剛區(qū)也是作為主題化設(shè)計(jì)最常見的區(qū)域,由于該區(qū)域像百變金剛一樣,較強(qiáng)的靈活性方便元素替換和重組。

 

1、圖標(biāo)主題化

在一些特定主題日活動中,可以將金剛區(qū)圖標(biāo)替換為帶有主題元素的設(shè)計(jì),以此增強(qiáng)活動氛圍。通常是階段性時間內(nèi)展示,可以是圖標(biāo)造型層面主題化,也可以是主題文案鑲嵌在圖標(biāo)造型中,靈活性相對比較高。

圖片

 

2、局部動效化表達(dá)

除了整體金剛區(qū)變動以外,也可以在局部圖標(biāo)上進(jìn)行設(shè)計(jì)發(fā)揮,這樣帶來的干擾性比較低。通常是以圖標(biāo)微動效為主,以此來突出個別功能和活動主題等。不適合過度動效,容易互相干擾,適合局部動效化表達(dá),突出局部內(nèi)容的關(guān)注度。

金剛區(qū)作為曝光度較高的區(qū)域,經(jīng)常作為流量分發(fā)的關(guān)鍵場景,主題化發(fā)揮也是非常具備靈活性的。

 

 

小結(jié)

產(chǎn)品設(shè)計(jì)除了常規(guī)性的視覺升級和功能優(yōu)化以外,主題化設(shè)計(jì)也是至關(guān)重要的,可以讓用戶時刻感受產(chǎn)品的變動。一成不變的體驗(yàn)使用時間長了也會麻木,結(jié)合節(jié)日慶典和一些主題活動進(jìn)行視覺呈現(xiàn),可以在感官體驗(yàn)層面得到提升。

本文觀點(diǎn)屬于個人經(jīng)驗(yàn)總結(jié),不足之處歡迎大家補(bǔ)充,我們互相進(jìn)步。


作者:黑馬青年

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》UI 場景中常見的 3 個主題化區(qū)域

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


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


藍(lán)藍(lán)設(shè)計(jì)sillybuy.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ì)公司



3個技巧瞬間提升logo設(shè)計(jì)的價(jià)值感

seo達(dá)人


一、設(shè)計(jì)一個開放的圓

圓是最完美的圖形,所以把很多東西設(shè)計(jì)成圓形都會很好看,logo也一樣,但如果設(shè)計(jì)成一個封閉的圓,可能會給人不夠靈活、缺少變化的感覺,所以,我們可以嘗試把logo設(shè)計(jì)成一個開放的圓,即只要一個半封閉狀態(tài)的圓,或者是設(shè)計(jì)一個不完整的圓,比如下面這些案例:

圖片

▲ 由于這種logo屬于半封閉的圖形,所以也比較容易處理成正負(fù)圖形。

 

把logo設(shè)計(jì)成一個開放的圓有以下幾個好處:

? 視覺平衡。因?yàn)閳A形本身是對稱圖形;

? 視覺聚焦。圓形會讓人的視覺往中心集中;

? 有設(shè)計(jì)感。因?yàn)橥ǔ0岩粋€圖形設(shè)計(jì)成圓形都需要簡化和規(guī)范,這會增加圖形的設(shè)計(jì)感。

 

示例一

幾年前我接觸了一個品牌名稱首字母為“s”的電子公司,也用這種方式做了一個logo方案,字母S加上圓。在下面的兩種組合方式中,很明顯第二個更開放、更有設(shè)計(jì)感一些。

圖片

但僅僅如此肯定還不行,一是這個S太普通,二是圖形沒有經(jīng)過規(guī)范,所以我在草圖上嘗試了幾個方向,最終選擇了下圖來執(zhí)行,簡單、抽象,在感性的柔和中夾雜著一點(diǎn)理性的堅(jiān)硬。

圖片

對于這種簡約風(fēng)的幾何圖形,通常都是通過采用圓形裁剪來制作,這樣會更快捷、也更嚴(yán)謹(jǐn),在草圖的基礎(chǔ)上通過多次調(diào)整,最終確定了如下圖的輔助線(如果你的草圖不是很規(guī)范,那么就不必太遵循草圖)。

圖片

通過這些輔助線我們就能得到中間這個比較規(guī)范的“S”圖形。

圖片

運(yùn)用AI中的路徑查找器中的工具,我們很快就能得到如下圖形,填上顏色這個開放的圓形logo就做完了。

圖片

在最終的圖形中,我們除了能看到圓和S以外,我們甚至還能看到握手和循環(huán)圖形,這些對于企業(yè)來說都是非常好的寓意,這也為我們寫標(biāo)志說明提供了一些不錯的思路和依據(jù)。

 

 

二、塑造矛盾空間

矛盾空間是一種在三維世界中并不存在的二維圖像,矛盾空間的形成通常是利用視點(diǎn)的轉(zhuǎn)換和交替,在二維的平面上表現(xiàn)了三維的立體形態(tài),我們熟知的埃舍爾就是這個領(lǐng)域的藝術(shù)大師。

圖片

這種手法也常常被用在logo設(shè)計(jì)中。

圖片

 

使用塑造矛盾空間設(shè)計(jì)的logo具有以下幾個好處:

? 有趣。帶有視覺欺騙效果的logo會讓人忍不住想多看幾眼;

? 富有藝術(shù)效果和創(chuàng)意。設(shè)計(jì)這樣的logo需要一定的空間感和想象力;

? 具有良好的寓意。比如無限、無止盡、可持續(xù)等。

 

示例二

我的一個朋友開了一家裝飾藝術(shù)品工作室,名字叫首工藝場,英文名為:First Technical Field,于是委托我設(shè)計(jì)一個logo,他是這樣說的:我沒什么要求,只要簡單、大氣、好看、現(xiàn)代、獨(dú)特、富有藝術(shù)氣息就好了,真的,我沒什么要求。”

 

這個logo其實(shí)并不好做,老實(shí)說,我當(dāng)時也沒啥思路,于是我用品牌英文名的首字母在畫紙上隨意搗鼓,天知道我畫了多少稿,終于我發(fā)現(xiàn)用兩個字母F左右對稱排列,中間形成的空間剛好可以加入字母T。

圖片

這個圖形讓我想到了曾經(jīng)看過的一件矛盾空間作品。

圖片

純二維的效果過于普通,我覺得可以嘗試在此基礎(chǔ)上加入矛盾空間效果,這樣會更符合設(shè)計(jì)需求,于是得到了下面這個圖形。

圖片

最后,在AI中用矩形工具進(jìn)行規(guī)范制圖,于是就得到了下面這個矛盾空間logo圖形,客戶表示非常滿意,畢竟他給的實(shí)在太少了。

圖片

 

 

三、立體漸變

即通過漸變色使圖形呈現(xiàn)出立體效果,這樣的logo也非常多,并且在前些年很流行。

圖片

雖然現(xiàn)在logo設(shè)計(jì)的大趨勢是扁平風(fēng),但是仍有不少設(shè)計(jì)師和客戶青睞這種立體漸變風(fēng),比如近兩年才面世的北京冬奧會logo、IE瀏覽器新logo等等。圖片

 

因?yàn)檫@種風(fēng)格的logo其優(yōu)勢也是顯而易見的,比如:

? 美觀。這類圖形既有細(xì)膩的顏色變化,又有層次感,很容易得到驚艷的視覺效果;

? 有很強(qiáng)的品質(zhì)感。這種圖形通常都需要倚仗曲線,再加之漸變色和立體效果,所以細(xì)節(jié)會比較豐富;

? 視覺沖擊力強(qiáng)。豐富的顏色變化和對比關(guān)系,可以大大加強(qiáng)圖形的視覺沖擊力。

 

示例三

第三個客戶是一家名叫東瑞的生物科技有限公司,主要是銷售酵素、膠原蛋白之類的產(chǎn)品,logo設(shè)計(jì)要求簡單、時尚、能體現(xiàn)行業(yè)屬性。對于這張logo,比較穩(wěn)妥的做法還是運(yùn)用品牌名的首字母來做,由于沒有英文名,所以我選擇了品牌名拼音的首字母“D”和“R”來做創(chuàng)意組合。

圖片

由于字母D是一個完全封閉的圖形,所以我想到了用正負(fù)形的方式來設(shè)計(jì),即把字母R作為D的負(fù)形,行得通嗎?應(yīng)該是可以的,因?yàn)榇髮懙淖帜窻可以簡化成下圖效果,與字母D一結(jié)合就能得到我們想要的效果。

圖片

組合的方式有兩種,我個人更喜歡開放的圖形,并且我覺得第一種組合方式很普通,造型不是很好看,所以我選擇了第二種方向?,F(xiàn)在我們開始正式制圖。

第一步:在AI中用矩形工具畫一個正方形,然后用直接選取工具把右邊的兩個直角拉成圓角,拉到最大。

圖片

第二步:把描邊加粗到一個比較合適的效果,主要考慮字母D的負(fù)形大小與描邊粗細(xì)的比例,是否符合字母R的特點(diǎn),確定描邊粗細(xì)以后,將路徑擴(kuò)展外觀,使其變成一個輪廓圖形,然后把左邊的直角也拉成小圓角。柔和一點(diǎn)更符合企業(yè)的調(diào)性。

圖片

第三部:畫一個直角梯形對字母D進(jìn)行裁剪,梯形的寬度和傾斜角度是關(guān)鍵,盡量保證R的識別性和圖形的美觀性,裁剪完以后得到如下效果。

圖片

第四步:把圖形的部分轉(zhuǎn)角處也拉成圓角,然后給其填充一個藍(lán)色,到這里基本的造型就做好了。

圖片

但是這樣的效果還是有點(diǎn)過于普通,也體現(xiàn)不出行業(yè)特性,于是我想到了添加立體漸變效果。

第五步:在現(xiàn)有的圖形基礎(chǔ)上畫如下兩個圓,我們的目的是要用下圖中兩條黑色的路徑對圖形進(jìn)行裁剪,而這兩條路徑一定要很自然地融入圖形中,所以,畫圓要很講究,依據(jù)是找到圓與圖形的切點(diǎn)和交叉點(diǎn),如右圖中的四個點(diǎn)。

圖片

第六步:在上圖基礎(chǔ)上用路徑查找器里面的工具對進(jìn)行裁剪、合并等操作得到如下圖形,原來的圖形被弧線切割成了三部分。

圖片

第七步:給圖形的三個部分分別填上由淺到深的漸變色,使其呈現(xiàn)出立體效果,考慮到企業(yè)的行業(yè)屬性,我使用了藍(lán)色到青色、綠色到黃色、黃色到橙色三個漸變色,最終效果還可以。

圖片

logo圖形設(shè)計(jì)方案合集:

圖片

 

 

圖片

logo設(shè)計(jì)得太常規(guī)容易被客戶說沒有品質(zhì)感、體現(xiàn)不出企業(yè)或品牌的價(jià)值感,所以合理地使用一些技巧是有必要的,這會客戶會覺得你的logo設(shè)計(jì)還是花了一些心思的,看起來比較專業(yè),所謂得套路者得人心,希望這篇文章對你有幫助。


作者:蔥爺

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》3個技巧瞬間提升logo設(shè)計(jì)的價(jià)值感

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


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


藍(lán)藍(lán)設(shè)計(jì)sillybuy.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ì)公司



打造詩詞視聽盛宴,傳承古典文化之美 | 百度教育

seo達(dá)人


前言概述

百度教育“好詩連連”是一款輕松有趣又別具中國古典美韻的學(xué)習(xí)平臺,在2022年先后榮獲設(shè)計(jì)界三項(xiàng)國際知名大獎:德國紅點(diǎn)品牌與傳達(dá)設(shè)計(jì)獎、美國Muse Creative Awards 金獎、韓國K-design 設(shè)計(jì)獎。本文分享設(shè)計(jì)團(tuán)隊(duì)是如何通過精湛的多維設(shè)計(jì)打造詩詞視聽盛宴,讓用戶感受到傳承千年的詩詞魅力,喚起用戶對古典文化的熱愛。

圖片

好詩連連—中國古詩詞學(xué)習(xí)平臺古詩詞是古人用最精煉的文字傳達(dá)所思所想的文學(xué)載體。但隨著幾千年時間的演變,注重表達(dá)效率的白話文逐漸替代了古人凝練、富有韻味的文字。傳統(tǒng)詩詞離我們的日常生活越來越遠(yuǎn),閱讀和背誦詩詞常常被認(rèn)為是無聊和困難的。為了激發(fā)用戶對古詩詞的興趣,我們構(gòu)建了趣味化的體驗(yàn)幫助用戶輕松地學(xué)習(xí)。

點(diǎn)擊圖片前往原文觀看視頻

一、設(shè)計(jì)主旨:沉浸式國風(fēng)視聽盛宴,傳承詩詞文化之美一  唯美意境 詩詞悟得到 · 打造沉浸式國風(fēng)視聽盛宴

王勃《滕王閣序》中千古名句 “落霞與孤鶩齊飛,秋水共長天一色” ,勾勒出一幅寧靜致遠(yuǎn)的畫面讓人動容,中華古詩詞之美,含蓄而生動。我們在設(shè)計(jì)上營造唯美意境,體現(xiàn)詩詞的韻味之美。通過提取中國傳統(tǒng)文化中的古典色彩及傳統(tǒng)紋樣、琵琶與古箏的音韻,將傳統(tǒng)元素與現(xiàn)代審美融合,重組詩詞新國風(fēng)設(shè)計(jì)語言,還原詩詞意境,構(gòu)建全新【寓教于樂】的游戲化學(xué)習(xí)體驗(yàn),賦予詩詞新的文化魅力。

1.視覺語言體系

1.1 從東方古典色中提煉色板

我們從壁畫丹青、紫禁紅墻中汲取色彩靈感,采用低飽和度、柔和而優(yōu)雅的配色,使東方色彩美學(xué)的悠然、自然與詩意自洽融合;同時還采用山水碧綠中的翠濤、醽醁,紅墻中的海天霞、十樣錦,壁畫中的青鸞、檀唇,構(gòu)成整個畫面中的古典色彩秩序。

圖片

1.2  提煉中國風(fēng)視覺語言符號,形意結(jié)合,傳情達(dá)意

通過借形法、取意法、形意結(jié)合法提煉國風(fēng)元素與圖騰、傳統(tǒng)文化中寓意吉祥的紋樣,傳達(dá)美好寓意;東方古老的鳳凰展翅高飛,指代源遠(yuǎn)流長的中華文化;烏紗帽與宮殿寓意學(xué)業(yè)精進(jìn)、金榜題名;寄情山水與出淤泥而不染的荷花,更為文人雅士所鐘愛。

圖片

1.3  確立繪畫手法

運(yùn)用類工筆的繪畫手法,白描勾線,結(jié)合筆墨丹青的暈染,來營造詩詞如畫卷般的唯美意境。

圖片

 

2. 聽覺語言

古代詩歌最早是用來吟唱,它注重聲律、音韻、平仄、對仗,講究韻律和諧、抑揚(yáng)頓挫;白居易《琵琶行》中描寫 “轉(zhuǎn)軸撥弦三兩聲,未成曲調(diào)先有情”,沈約《詠箏》“秦箏吐絕調(diào),玉柱揚(yáng)清曲” 中描寫箏曲抑揚(yáng)自如,清妙悠揚(yáng);在音效的選擇上,采用古箏、琵琶的音色來營造古風(fēng)意境,音符配合點(diǎn)擊、滑動、任務(wù)完成等反饋,讓人沉浸于詩詞的氛圍中。

圖片

 

 

二  趣味學(xué)習(xí) 詩詞背得快 · 搭建趣味玩法及激勵機(jī)制

趣味化游戲機(jī)制,基于心流理論設(shè)計(jì),解決了詩詞學(xué)習(xí)體驗(yàn)中用戶常見的枯燥、挫敗的負(fù)面體驗(yàn),構(gòu)成了詩詞知識獲取、學(xué)習(xí)和背誦的完整學(xué)習(xí)機(jī)制。設(shè)計(jì)了詩詞連線、詩詞對戰(zhàn)、成語填空三種多元游戲模式,加強(qiáng)詩詞背誦和相關(guān)知識的扎實(shí)記憶,讓學(xué)習(xí)更快更有趣。

圖片

 

1. 基于碎片化場景,設(shè)置合理游戲任務(wù)模塊1.1  操作容易  降低學(xué)習(xí)成本用戶通過指尖滑動操作,劃線選出正確的句子,拼出完整詩句;而輕量提示卡,幫助用戶快速回想詩詞,減少挫敗感。

圖片

1.2  難度漸增 有序拓寬知識邊界

詩詞對戰(zhàn),在線匹配用戶進(jìn)行回合制的知識點(diǎn)比拼,在設(shè)計(jì)上單局顆粒度小,內(nèi)容難度逐級遞增,讓用戶在循序漸進(jìn)中掌握詩詞知識點(diǎn)。

圖片

 

2. 學(xué)位制激勵:將游戲排行榜與中國科考等級巧妙結(jié)合

游戲排行榜使用中國科舉制度中的狀元、榜眼、探花的等級稱號,結(jié)合官帽的視覺元素,將用戶代入古代科舉放榜時的情景,激發(fā)用戶深入學(xué)習(xí)詩詞知識的持續(xù)挑戰(zhàn)欲,進(jìn)一步增強(qiáng)古典文化的意境體驗(yàn)。

圖片

 

 

三  智能關(guān)卡 海量內(nèi)容 · 詩詞記得全1. 智能感運(yùn)用AI技術(shù)自動識別并生成游戲關(guān)卡,內(nèi)容難度逐級遞增、循序漸進(jìn),根據(jù)用戶作答結(jié)果,即時反饋并匹配對應(yīng)內(nèi)容,構(gòu)建個性化的學(xué)習(xí)體驗(yàn)。

2. 海量數(shù)據(jù)庫資源數(shù)字化收錄28萬首中國古詩,幫助用戶擺脫繁重的紙質(zhì)典籍,隨時隨地掌握詩詞知識。

圖片

傳承古典詩詞文化之美

通過百度教育好詩連連,我們讓沉睡在紙質(zhì)典籍中,以詩詞為代表的文化遺產(chǎn)煥發(fā)時代光彩與蓬勃生機(jī),鼓勵用戶學(xué)習(xí)和感受傳承千年的詩詞魅力,重新喚起當(dāng)代年輕用戶對傳統(tǒng)詩詞文化的熱愛和理解,也使便捷輕松地獲得詩詞知識樂趣成為可能。

 


作者:文教互娛用戶體驗(yàn)

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》打造詩詞視聽盛宴,傳承古典文化之美 | 百度教育

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


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


藍(lán)藍(lán)設(shè)計(jì)sillybuy.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ì)公司




基于智能座艙場景的用戶體驗(yàn)設(shè)計(jì)

seo達(dá)人


一、座艙體驗(yàn)的三要素

用戶體驗(yàn)設(shè)計(jì)首先字面意思是用戶+體驗(yàn)。

圖片

圖片

01 座艙內(nèi)的用戶除了駕駛員還要考慮非駕駛員, 非駕駛員也有多種角色:老人/兒童/青年。

圖片

02 體驗(yàn):用戶發(fā)生使用操作的感受。

但實(shí)際用戶體驗(yàn)一定是脫離不了場景的,場景是用戶發(fā)生行為的一個大環(huán)境。

03 考慮場景的時候除了考慮的當(dāng)下現(xiàn)實(shí)場景還有未來場景。

圖片

場景案例:充電全屏展示充電信息

圖片

場景案例:導(dǎo)航交互體驗(yàn),先展開詳細(xì)信息,然后再收起信息

圖片

場景案例:蔚來的360泊車系統(tǒng)開啟時不能喚醒nomi

圖片

而且產(chǎn)品的研發(fā)和功能創(chuàng)新,用戶的體驗(yàn)都是依據(jù)場景體系建立的。所以HMI設(shè)計(jì)過程當(dāng)中,場景體系化的建立尤為重要。

 

 

二、智能座艙的場景體系化搭建

1、搭建流程

圖片

01 場景發(fā)掘:競品分析、用戶畫像定位、產(chǎn)品定位、用戶旅程圖

場景發(fā)掘首先要把場景和使用的用戶做定位,結(jié)合實(shí)際項(xiàng)目進(jìn)行用戶畫像定位,確定場景主題,尋找到目標(biāo)用戶進(jìn)行實(shí)車訪談和拍攝。

圖片

02 場景數(shù)據(jù)細(xì)化:網(wǎng)絡(luò)數(shù)據(jù)、用戶訪談、實(shí)車測評數(shù)據(jù)、常見高頻數(shù)據(jù)

這一步主要是把用戶訪談收集上來的數(shù)據(jù),進(jìn)行拆分和細(xì)化,然后篩選出有價(jià)值的數(shù)據(jù)進(jìn)行錄入。

用戶訪談數(shù)據(jù)錄入到數(shù)據(jù)庫里,產(chǎn)品經(jīng)理和設(shè)計(jì)師會針對收集上來的用戶反饋,進(jìn)行痛點(diǎn)/和爽點(diǎn)的挖掘。提出需求解決方案。

圖片

03 場景應(yīng)用設(shè)計(jì):原型設(shè)計(jì)、界面設(shè)計(jì)

基于場景的應(yīng)用設(shè)計(jì)會分為兩個步驟、一個是原型設(shè)計(jì)、一個界面設(shè)計(jì)、原型設(shè)計(jì)時我們更多是組內(nèi)評估、找專家來提供指導(dǎo)性意見,到了界面設(shè)計(jì)時候除了專家評審、可以做出demo給用戶進(jìn)行測試來獲得反饋。

圖片

04 場景走查還原場景

在設(shè)計(jì)方案產(chǎn)出完成之后,給用戶還原到我們發(fā)掘的場景去進(jìn)行走查,根據(jù)用戶旅程圖查看有沒有遺漏的用戶場景和不同的用戶反饋。

圖片

 

2、搭建工具

整個智能座艙的場景體系化搭建需要幾個工具,競品分析、用戶畫像定位、產(chǎn)品定位、用戶旅程圖。

用戶調(diào)研方法有很多,我們需要掌握(調(diào)查問卷、用戶畫像、用戶體驗(yàn)地圖、用戶訪談、焦點(diǎn)小組、)

今天核心介紹使用頻率最高的三種用研方法。

2.1 用戶旅程圖

關(guān)注用戶在駕駛階段的行為、方式、心情、痛點(diǎn)、期待。

關(guān)鍵步驟:

① 設(shè)定場景、目標(biāo)、期望(用戶畫像)

② 確定行為路徑

③ 建立核心地圖

④ 包裝地圖

⑤ 繪制故事板

圖片

2.2 可用性測試

可用性測試已經(jīng)成為獲得用戶反饋的流行手段,主要因?yàn)樗麄兩鲜挚欤芸焖俜磻?yīng)出問題。

關(guān)鍵步驟:

① 明確測試目的

② 問卷框架的設(shè)計(jì)

③ 投放調(diào)研問卷

④ 組織測試

⑤ 整理輸出結(jié)論

圖片

2.3 5W+1H法則

5W+1H 是選定的項(xiàng)目、工序或操作,可以從原因(Why)、對象(What)、地點(diǎn)(Where)、人員(Who)、時間(When)、方法(How)等六個面進(jìn)行思考。

① 原因—立項(xiàng)背景?

② 對象—什么功能?

③ 地點(diǎn)— 什么場景下?

④ 人員–駕駛員?/非駕駛員?

⑤ 時間–什么時機(jī)?哪個流程之后?

⑥ 如何–什么方式操作?

圖片

 

 

三、細(xì)化座艙用戶體驗(yàn)的三階段

1、用戶體驗(yàn)的三階段

體驗(yàn)的時間性有三個主要組成成分,及熟悉程度、功能依賴和情感依賴。

圖片

1.1 初識體驗(yàn):

我們在產(chǎn)品使用初期的階段,都會對產(chǎn)品有個使用預(yù)期。例如期望產(chǎn)品能提供一個好的體驗(yàn),或者怕產(chǎn)生不好的體驗(yàn)。

圖片

1.2 使用體驗(yàn):

使用體驗(yàn)分為兩個階段:使用產(chǎn)品初期和使用產(chǎn)品深度期

進(jìn)入到車內(nèi)試駕或者試乘,試駕員和銷售除了會讓用戶體驗(yàn)車機(jī)的基礎(chǔ)功能外,主要介紹的就是和競品車型的競爭功能。

產(chǎn)品深度體驗(yàn)期的時候,長期的可用性變得更加重要,而不是最初的易學(xué)性。從而產(chǎn)品的實(shí)用性成為影響我們整體評估判斷的主要因素。

1.3 獲得體驗(yàn):

最后,當(dāng)我們接受了產(chǎn)品,在我們的日程生活中它參與了我們的社交活動。成為了生活當(dāng)中的固定解決問題的工具,這個階段產(chǎn)品體驗(yàn)就具有可識別性了。

 

2、體驗(yàn)的三條路線

圖片

2.1 體驗(yàn)線路是感官線

我們現(xiàn)在座艙內(nèi)的交互感官有、觸感、聽感、視覺、嗅覺、語音。用戶在人機(jī)交互的時候第一時間獲得直觀感受。

2.2 體驗(yàn)線路是情感線

情感線是諾曼強(qiáng)調(diào)感情在塑造體驗(yàn)中的重要性。比如燈光秀、寵物模式、和擬人化的汽車助手。帶給用戶都是情感上的滿足。這些情感構(gòu)成了與汽車的首次互動體驗(yàn)。

圖片

2.3 體驗(yàn)線路的流暢

就像C端和B端一樣,我們交互體驗(yàn)的線路效率和流暢程度,能給用戶增強(qiáng)駕駛樂趣?;蛘咦畲笙薅葴p少信息元素的干擾,讓駕駛員沉浸在當(dāng)下。

圖片

 

3、把握用戶體驗(yàn)的多樣性

3.1 個人價(jià)值觀的差異

首先個人的因素,因?yàn)槲覀兂砷L的環(huán)境不同,造成了對價(jià)值觀的差異,有的人喜歡刺激新穎的產(chǎn)品,有的人喜歡乏善可陳的產(chǎn)品。

圖片

3.2 產(chǎn)品屬性問題

第二可能是產(chǎn)品屬性的問題,游戲產(chǎn)品帶給用戶就是不斷的快感刺激,工具類型的產(chǎn)品用戶使用流程流暢會更好。

圖片

3.3 跟隨時間線的體重心變化

用戶的使用體驗(yàn)對于時間的變化,通過用戶旅程圖,他們對產(chǎn)品的關(guān)注點(diǎn)會產(chǎn)生變化,例如用戶剛開始對產(chǎn)品互動中更關(guān)注新的功能和刺激的體驗(yàn)。但在使用過一段時間后他們可能不會再關(guān)注他的新穎程度,更關(guān)注產(chǎn)品的實(shí)用性和效率。所以需要我們在不同的使用階段重新幫助用戶提升體驗(yàn)。

圖片

 

原文地址:七醬設(shè)計(jì)筆記

作者:郝小七

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》基于智能座艙場景的用戶體驗(yàn)設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


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


藍(lán)藍(lán)設(shè)計(jì)sillybuy.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ì)公司



日歷

鏈接

個人資料

存檔