首頁

面對高速快跑的產(chǎn)品,如何優(yōu)雅推進體驗優(yōu)化

seo達人


 

圖片

或許你在推進體驗優(yōu)化時,也遇到過以下困惑:“對于設(shè)計師走查出的體驗問題,為什么PM總是間歇性視而不見?”“PM既然認可了體驗問題的重要性,但是他為什么總說放一放,過一段時間再整改呢?”

“排除萬難,體驗問題終于提交了版本需求,為什么總是因優(yōu)先級不高,無法獲得充足的開發(fā)資源,順利上線呢?”

圖片

我們在進行趕集直招體驗優(yōu)化過程中,也時常遇到這些困惑,究其原因,主要是因為,我們作為設(shè)計師,每天所處的工作范圍和接觸到的信息有限,促使我們忽略了對產(chǎn)品階段的深入思考,誤以為PM對體驗優(yōu)化和體驗問題的理解,和我們高度一致。因此在著手進行體驗優(yōu)化前,我們要提升對產(chǎn)品階段的理解把握,知道所服務(wù)的產(chǎn)品處于哪個階段,產(chǎn)品發(fā)力方向是什么,進而準確找到體驗優(yōu)化的推進策略。

在不同產(chǎn)品階段(探索期、快速成長期、成熟期),體驗優(yōu)化的推進策略也各不相同:

處于探索期的產(chǎn)品,其發(fā)力方向為驗證業(yè)務(wù)模式。在這個從0-1的時期,其實不存在推進體驗優(yōu)化的概念,設(shè)計師應(yīng)盡可能進行完善的基礎(chǔ)體驗?zāi)芰ㄔO(shè),如沿用成熟規(guī)范與組件搭建產(chǎn)品體驗,后續(xù)伴隨產(chǎn)品核心功能、流程驗證,同步迭代打磨;

處于快速成長期的產(chǎn)品,其發(fā)力方向為快速拉新拓量,縱向做好垂類。這個時期的體驗優(yōu)化推進策略是,基于產(chǎn)品功能迭代,進行“小步快推”;

處于成熟期的產(chǎn)品,其發(fā)力方向為提升用戶活躍度,實現(xiàn)商業(yè)變現(xiàn)。這個時期更適合采取體驗優(yōu)化專項,推進體驗優(yōu)化。

圖片

可以看到,趕集直招目前處于“快速成長期”,因此我們選擇了“小步快推”的策略。

 

圖片

找準“小步快推”的推進策略后,具體的執(zhí)行方法是什么呢?

辛向陽先生在《從物理邏輯到行為邏輯》一文中,提出了交互行為5要素的概念,即用戶、場景、目的、媒介與行為,以幫助設(shè)計師對問題進行準確解析和挖掘。

圖片

其實推進體驗優(yōu)化,本身也可以理解成是一次交互行為的設(shè)計,因此在進行趕集直招體驗優(yōu)化初始,我們沿用了交互行為5要素的概念,對趕集直招進行了解析,并挖掘出具體可執(zhí)行的方法

用戶:幫助中國4億藍領(lǐng)找工作的趕集直招;

場景:服務(wù)業(yè)逐漸復(fù)蘇,趕集直招在市場上已經(jīng)被廣泛知曉和接受,市占率不斷上升;

目的:把控ROI前提下,一方面持續(xù)拓展用戶量,另一方面開始向商業(yè)化傾斜資源,謀求商業(yè)營收;

媒介:趕集直招APP,每3周迭代1版;

行為:深耕細分市場,不斷驗證新的業(yè)務(wù)模式,優(yōu)化舊的業(yè)務(wù)模式,高速快跑與競品拉開距離。

圖片

綜上,我們總結(jié)出了處于“快速成長期”的趕集直招,3個顯著特征,和對應(yīng)的體驗優(yōu)化執(zhí)行方法:

特征1:需求多而側(cè)重于垂類深耕→執(zhí)行方法:提前規(guī)劃,全局視野;

特征2:資源傾斜商業(yè)化→執(zhí)行方法:評估需求,整合策略;

特征3:版本迭代快→執(zhí)行方法:流程調(diào)整,需求擴容。

 

圖片

提前規(guī)劃 全局視野

前期使用體驗管理工具,收集了大量體驗問題,我們對其進行聚類整合,匯總成《趕集直招體驗優(yōu)化問題池》,并與PM進行對齊,探討優(yōu)化可能性。

圖片

該階段的keypoint是:對體驗問題項進行判斷,是進行逐個優(yōu)化,還是合并成獨立需求,統(tǒng)一優(yōu)化。

 

評估需求 整合策略

承接需求時,我們需要對需求類型進行評估,趕集直招的需求通常可分為2類:

第1類是重產(chǎn)品側(cè)解決的需求,通常這類需求范圍較明確,PM有較完整的解決方案;

第2類是重設(shè)計側(cè)解決的需求,這類需求范圍較開放,給設(shè)計師發(fā)揮的空間較大,我們在趕集直招體驗優(yōu)化推進中,主要錨定第2類需求。

在和PM了解需求背景和業(yè)務(wù)目標(biāo)后,則進入解決策略梳理階段,通常PM會提出關(guān)于如何達成目標(biāo)的種種產(chǎn)品策略和部分設(shè)計策略,此時我們會站在用戶視角,從目標(biāo)出發(fā),果斷衡量出其策略的更多擴展性,多維度思考,整合PM策略,并提出設(shè)計側(cè)的更全面的解決策略。

圖片

該階段的keypoint是:需與PM對齊一個思路,即體驗的優(yōu)化與打磨也是達成業(yè)務(wù)目標(biāo)的重要策略之一

 

流程調(diào)整 需求擴容 

在推進體驗優(yōu)化的同時,我們對設(shè)計側(cè)與產(chǎn)品側(cè)的合作流程,也在不斷努力做出調(diào)整,以便為體驗優(yōu)化爭取更多打磨的窗口期。

調(diào)整前的合作流程,設(shè)計側(cè)作為產(chǎn)品側(cè)下游,在產(chǎn)品原型分發(fā)后才會接到設(shè)計需求,且排期極度緊張,這樣設(shè)計側(cè)的重點會被牽引到快速支持當(dāng)前需求,不利于體驗優(yōu)化推進,為此我們與PMO、產(chǎn)品側(cè)積極溝通調(diào)整合作流程,設(shè)計側(cè)在產(chǎn)品需求內(nèi)審后就前置介入,與PM一同經(jīng)歷方案構(gòu)思、分發(fā)與評審流程,為體驗優(yōu)化爭取到了足夠的窗期口。

圖片

此外,對于產(chǎn)品側(cè)中遠期重點需求,我們會提前與PM對齊OKR,跳出版本節(jié)奏的限制,聯(lián)合多角色建立主題專項,規(guī)劃整體項目計劃,在過程中,對涉及到的體驗問題項,作為項目計劃的一部分,進行集中解決,這樣在PM撰寫需求文檔時,就可以將體驗問題項最大限度收入到需求范圍內(nèi)。

 

圖片

給大家展示兩個我們推進過程中的小案例:

基于問題池中的首頁瓷片區(qū)體驗問題項,我們借著PM對瓷片區(qū)提出更換瓷片位內(nèi)容的機會,將瓷片區(qū)的體驗問題項一并推進優(yōu)化,對樣式和文案進行降噪處理,使其重要信息更清晰,數(shù)據(jù)也提升明顯。

圖片

推進年久失修的深層級頁面體驗優(yōu)化是難事,但跟業(yè)務(wù)目標(biāo)相關(guān)又對數(shù)據(jù)提升有幫助就會容易很多。PM給出的需求范圍和目標(biāo)是“通過調(diào)整關(guān)鍵字段,提升簡歷預(yù)覽頁的感知度”,我們整合該頁面的問題池后,提出“感知度提升=關(guān)鍵字段調(diào)整+信息布局/按鈕/文案等體驗層面優(yōu)化”,滿足需求的同時,也推進了體驗問題項的解決。

圖片

通過“找準推進策略-挖掘執(zhí)行方法-推進3步走”3個層面的努力,在高強度的版本節(jié)奏下,我們用短短半年的時間,就實現(xiàn)了《趕集直招體驗優(yōu)化問題池》中,大部分問題項的優(yōu)化解決。從最終業(yè)務(wù)效果看,各項數(shù)據(jù)指標(biāo)均符合或超過先前的預(yù)期,用戶滿意度也得到大幅增長,達成了本次體驗優(yōu)化的預(yù)期目標(biāo)。

圖片

 

圖片

總結(jié)一下,當(dāng)我們計劃對產(chǎn)品進行體驗優(yōu)化時,不要急于啟動。

首先,判斷產(chǎn)品當(dāng)前所處的階段,找準推進策略;

其次,通過交互行為5要素解析產(chǎn)品,挖掘體驗優(yōu)化執(zhí)行方法;

最后,如果所服務(wù)的產(chǎn)品處于“高速快跑期”,可借鑒“推進3步走“的方法進行推進:

1.提前規(guī)劃,建立全局視野,與PM對齊,判斷體驗問題項,是進行逐個優(yōu)化,還是合并成獨立需求,統(tǒng)一優(yōu)化;

2.承接需求時,評估需求類型,對有設(shè)計發(fā)揮空間的需求,整合多維度策略,盡可能囊括體驗問題項優(yōu)化;

3.適時對合作流程做出調(diào)整,當(dāng)前版本需求做到前置介入,中遠期需求做到提前規(guī)劃與需求擴容,最大限度完成體驗問題項優(yōu)化。

圖片

最后,愿大家都能在體驗優(yōu)化之路上優(yōu)雅前行。

 


作者:環(huán)鐵藝術(shù)家

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》面對高速快跑的產(chǎn)品,如何優(yōu)雅推進體驗優(yōu)化

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


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


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



超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些(上)

seo達人


圖片

當(dāng)沒有認知緊張時,用戶心流才會發(fā)生。當(dāng)一個設(shè)計有效時,你才能體驗到認知上的輕松。如果沒有,你的“心流狀態(tài)”就會中斷(稍后會詳細討論),讓我們陷入認知緊張,于是“設(shè)計失敗了”。

當(dāng)基本設(shè)計原則被忽略時,這種情況很容易發(fā)生,導(dǎo)致設(shè)計無法“整合”。這些基本原則包括:平衡性、一致性和視覺層次、負空間、接近性、對比、統(tǒng)一、一致性、配色方案和排版層次等方面。(彩云注:很多人看到這些以為自己都懂,但實際設(shè)計時犯錯最多的也是這些問題)

從神經(jīng)科學(xué)的角度來說,當(dāng)一個設(shè)計起作用時,我們會“感受到它”。其影響立竿見影。它發(fā)生在潛意識里,在一瞬間完成,是人的本能反應(yīng)。我們不需要把它放在顯微鏡下分析它。

優(yōu)秀設(shè)計以簡潔和優(yōu)雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設(shè)計思想的擁躉。

人們常說,優(yōu)秀設(shè)計背后的工藝是無形的。然而,這不是隨機發(fā)生的。不管人們是否注意到,設(shè)計的背后是遵循著大量而嚴格的原理去執(zhí)行的。偉大的設(shè)計師不會在畫板上隨意地將各種元素組合在一起,這是有方法的。

圖片

為什么有些設(shè)計具有美的感受,而有些卻沒有

相反地,當(dāng)一項設(shè)計被認為“有些地方不對勁”時,人們就會下意識地覺得這個設(shè)計是有問題的。這樣的結(jié)果會給品牌或產(chǎn)品帶來不好的影響。當(dāng)一個高端或奢侈品品牌受到高度關(guān)注時,這種影響尤其有害。這就是為什么你永遠不會遇到設(shè)計不完美的香奈兒(Chanel)商店的原因。

“你對一件事的第一印象會建立起你隨后的觀念,如果一家公司在你看來不專業(yè),你可能會認為他們做的其他事情都不專業(yè)?!狣aniel Kahneman,普林斯頓大學(xué)心理學(xué)教授

圖片

這不是一個精心制作的設(shè)計,會導(dǎo)致認知緊張。你會在這個網(wǎng)站上預(yù)訂你的行程嗎?

我們都同意上面是糟糕的設(shè)計,就像建在沙子上的房子,一個忽視基本設(shè)計原則的設(shè)計將會崩潰。潛意識里,它會立即被認為是破碎的,無論是視覺上、精神上和情感上。

人類的大腦是懶惰的、有偏見的,喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當(dāng)人們看到某種設(shè)計時,它的“美學(xué)完整性”、視覺感知和神經(jīng)科學(xué)之間存在著相互關(guān)聯(lián)。

當(dāng)一個設(shè)計是合理的,換句話說,它是令人愉快的、有效的,我們會迅速、直觀的判斷它是合理的。我們的心率降低,多巴胺水平增加,會有一種幸福和平靜的感覺。這就像我們聽到舒緩的音樂,會沉浸在一種每時每刻的“心流狀態(tài)” 中?!霸谶@種狀態(tài)下,人們會專注于一項活動,其他一切似乎都不重要”——來自于一個心理學(xué)概念,由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗的心理學(xué)》中寫道。

圖片

你更愿意住進哪個房間?

 

設(shè)計原則在審美完整性中的作用

蘋果的人機界面指南(Apple’s Human Interface Guidelines)幾十年來一直在談?wù)摗懊缹W(xué)完整性”。它也可以被稱為“設(shè)計完整性”或“審美凝聚力”。

蘋果對美學(xué)完整性的定義是“當(dāng)一個設(shè)計的外觀和行為與其功能完美匹配時”(彩云注:我的理解就是所見即所得,符合用戶的心理預(yù)期)。換句話說,設(shè)計的構(gòu)成是產(chǎn)品的一個組成部分。我們將研究決定設(shè)計組合成敗的設(shè)計原則——更多的是關(guān)于 UI,而不是關(guān)于 UX。

美學(xué)完整性不僅僅是關(guān)于設(shè)計有多好看。它指的是具有明顯連貫性的設(shè)計:有效的結(jié)構(gòu)和布局,是什么讓它產(chǎn)生效果。換句話說,它的元素在視覺層次、對齊、間距、平衡、對稱、重復(fù)、比例、強調(diào)、接近、對比、統(tǒng)一、一致性、配色、排版、負空間等方面都有出色的運用,這里僅舉幾個例子。

這與“黃金比例”無關(guān),黃金分割不能解決問題。斐波那契數(shù)列螺旋沒那么玄乎,給設(shè)計師帶不來驚人的設(shè)計。

設(shè)計師們在安吉麗娜·朱莉或蒙娜麗莎的臉上畫出金色螺旋形時驚呼道:”果然是”黃金比例“(彩云注:但事實上有點故弄玄虛了)。當(dāng)然,自然界中確實有神圣幾何學(xué)(黃金比例,又稱斐波那契螺旋,是基于此),依賴“黃金螺旋”作為設(shè)計原則是一種謬論,它已被多次暴露在其赤裸裸的荒謬中。

圖片

這是我的洗衣機,上面疊加了斐波那契螺旋。

“審美的完整性”不是沒道理的。這個概念是基于基本的設(shè)計原則,是有成就的設(shè)計師實踐他們的藝術(shù)作品的經(jīng)驗總結(jié)。

讓我們來看看一些設(shè)計原則,以及它們?yōu)槭裁磿沟媚愕脑O(shè)計更能更加有效。通常情況下,真正優(yōu)秀的設(shè)計會結(jié)合這些設(shè)計原則。

 

我們將探討以下這些最底層的設(shè)計原理:

  • 視覺層次感
  • 間距、對齊和網(wǎng)格
  • 平衡
  • 對比
  • 對稱
  • 重復(fù)
  • 幾率原則和三分原則
  • 引導(dǎo)線
  • 比例
  • 強調(diào)
  • 整體性
  • 親密性
  • 一致性
  • 顏色
  • 排版
  • 負空間

 

一、視覺層次感

視覺感知的基本規(guī)則對任何視覺設(shè)計都是至關(guān)重要的,因為它們指導(dǎo)著如何盡可能快地傳達信息。視覺層次是設(shè)計中信息的結(jié)構(gòu)和優(yōu)先級。它決定了人們接受和處理信息的順序,因為它以一種視覺方式引導(dǎo)他們。

視覺層次感重在打造視覺優(yōu)先級。通過巧妙地使用顏色、形狀、大小、間距、比例和方向,創(chuàng)造性地使用決定層次的視覺元素來傳達構(gòu)圖的意義、概念和情緒。

核心關(guān)注點是什么,你希望用戶首先注意到或開始閱讀的設(shè)計中最重要的元素是什么?我們想讓它成為焦點,然后其他部分的設(shè)計從這里展開。

圖片

一個具有良好視覺層次的網(wǎng)站會引導(dǎo)用戶關(guān)注重要的部分

視覺層次對于每一種視覺設(shè)計都是至關(guān)重要的,無論是需要引導(dǎo)訪客眼球的首頁還是移動端UI的導(dǎo)航入口。用戶對每個元素的理解取決于組合中的其他元素及其上下文。

建立視覺層次的一些技術(shù)是:位置、大小和比例、顏色和對比、間距和親密性、負空間、紋理、引導(dǎo)線和高度。在一個元素周圍使用豐富的負空間可以使它看起來更有意義。使用引導(dǎo)線可以創(chuàng)造移動,就像一個人的眼睛在設(shè)計上移動一樣。排版的層次結(jié)構(gòu)也扮演著重要的角色,通過不同的大小和權(quán)重,我們可以讓更重要的文本元素脫穎而出并建立秩序。

加分技巧

  • 使用一個隱形三角形連接設(shè)計中的三個重點區(qū)域(構(gòu)圖)。
  • 注意古騰堡圖模式(Gutenberg Diagram)、F 模式(F-Pattern)、Z 模式(Z-Pattern)和層蛋糕模式(Layer Cake Pattern)的視覺掃描,并順應(yīng)趨勢而不是反對趨勢。(彩云注:這里的這些模式彩云就不過多介紹了,感興趣的可以自行了解下)

圖片

沒有視覺層次的網(wǎng)站沒有明顯的興趣點。

 

二、留白、對齊和網(wǎng)格

設(shè)計中的對齊和間距通過空間上的連接傳達出一種秩序和組織感,這兩個原則都在設(shè)計背后發(fā)揮重要價值。設(shè)計師早期學(xué)到的基本知識之一是在網(wǎng)格上編排設(shè)計,然后對齊和分隔這些元素。

左對齊、居中對齊、右對齊都沒錯,但你必須對齊,否則當(dāng)元素沒有對齊時,設(shè)計就會給人崩潰的感覺。它給人一種不安的感覺。

圖片

沒對齊的話,眼睛看著很難受

網(wǎng)格有很多不同的類型:列網(wǎng)格、基線網(wǎng)格、模塊網(wǎng)格、層次網(wǎng)格、像素網(wǎng)格等。不同設(shè)計使用不同網(wǎng)格,但最基本的是設(shè)計元素的對齊和間距。

圖片

(Illustration courtesy UX Engineer)

網(wǎng)格可以被打破。一個死板的構(gòu)圖可能會在視覺上無趣,除非一個元素從網(wǎng)格中脫穎而出。錯位或“打破網(wǎng)格”是賦予元素更多視覺權(quán)重的一個機會。當(dāng)在設(shè)計中設(shè)置視覺層次結(jié)構(gòu)時,它可以用來強調(diào)某些東西。

圖片

有時打破網(wǎng)格可以創(chuàng)造強調(diào)和移動

 

三、平衡

設(shè)計上有兩種平衡:對稱和不對稱。所有的構(gòu)成元素:排版、顏色、圖像、形狀、圖案、留白等,都具有一定的視覺重量。有些元素很重,很吸引眼球,而有些元素很輕,感覺不那么重要。

這些元素的放置方式能夠在對稱設(shè)計中創(chuàng)造出一種平等的順序感,或者一種稍微偏離平衡能夠創(chuàng)造出一種不對稱的設(shè)計。無論對稱還是不對稱,我們的大腦都被某種平衡感所吸引,因為它創(chuàng)造了和諧、秩序和美學(xué)上令人愉悅的結(jié)果。

圖片

多重原則:平衡、對齊和對稱在網(wǎng)站上發(fā)揮作用

 

四、對比

“對比”指的是使設(shè)計中不同的元素更容易區(qū)別開。強烈的對比可以在設(shè)計中強調(diào)一個區(qū)域,而微弱的對比可以弱化它,創(chuàng)造一個視覺層次。對比在設(shè)計中也扮演著重要的角色。對比不足會使文字特別難以閱讀,尤其是對視力有障礙的人來說。

圖片

在左邊的設(shè)計中,一些文字和背景之間的對比不夠。

Web內(nèi)容可訪問性指南 (WCAG)呼吁“文本的視覺呈現(xiàn)應(yīng)該有至少4.5:1的對比度”,除了大規(guī)模文本,它應(yīng)該有至少3:1的對比度。因此,設(shè)計師需要確保內(nèi)容保持舒適易讀。

其他UI元素(如各種顯示器和設(shè)備上的卡片、按鈕、文字和圖標(biāo))之間的適當(dāng)對比也是必須的。如果UI元素之間沒有明顯的區(qū)分度,設(shè)計就容易產(chǎn)生混亂。

 

五、對稱

在格式塔原理中,對稱和秩序的法則也被稱為pr?gnanz,德語單詞“好身材”的意思。這個原理說的是,大腦會以盡可能簡單的方式感知模糊的形狀,這都是為了節(jié)省大腦能量。

我們傾向于尋找一切事物的對稱性。幾項研究發(fā)現(xiàn),面部對稱能提高人們對人臉吸引力的評價(盡管完全對稱的臉其實并不一定那么有吸引力)。該理論認為,這種偏好與選擇DNA最好的伴侶的進化優(yōu)勢有關(guān)。

對稱在自然界中也無處不在??纯匆恢缓?,一朵花,或者一只海星。

圖片

對稱

同樣的原理也適用于數(shù)字領(lǐng)域,平衡對稱的設(shè)計更令人愉悅。

圖片

對稱性在應(yīng)用中發(fā)揮作用。Uber Eats、Booking.com和Behance。

 

六、重復(fù)

重復(fù)是一致性的近親,是優(yōu)秀可用性的標(biāo)志。

在設(shè)計中利用重復(fù)是件好事,因為我們的大腦總是在尋找模式、相似性和一致性。為什么?因為重復(fù)相同性質(zhì)的元素需要更少的認知努力。

我們更容易識別重復(fù)的模式,而不是每次看到新模式都要重新校準大腦。正如前面提到的,大腦作為一種生存機制是懶惰的,模式識別和認知捷徑意味著有意識地處理視覺信息所需的能量更少。

例如,重復(fù)元素的形狀和大小、填充、留白、類型和顏色,也有助于更對稱、更好地平衡,做出美觀的設(shè)計。

圖片

The Athletic這個軟件就是用重復(fù)元素做設(shè)計的好例子。

好了,為了照顧大家的閱讀體驗,再寫更多估計有很多人要開始沒耐心了。所以剩下的設(shè)計原則,我們下回再接著聊,敬請關(guān)注哈。

 

原文:https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d

作者:Miklos Philips

譯者:彩云Sky

本文翻譯已獲得作者的正式授權(quán)(授權(quán)截圖如下)

圖片

 

作者:彩云Sky

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》超全面的設(shè)計底層理論,優(yōu)秀設(shè)計背后離不開這些(上)

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


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


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



蘋果設(shè)計為什么顯得高級?

seo達人


 一、什么是極簡主義風(fēng)格 

圖片

在上世紀初期,隨著工業(yè)制造體系的變革,人們也開始尋找更適合工業(yè)化生產(chǎn)的設(shè)計方法與審美體系,極簡的設(shè)計風(fēng)格便應(yīng)運而生。在今天,極簡主義早已演變成了一種潮流、一種文化,甚至是一種生活方式,成為了當(dāng)今的主流設(shè)計風(fēng)格。而它的設(shè)計理念大家應(yīng)該都知道——“少即是多”。說到這里就不得不提一個名字——蘋果。它可以說是數(shù)字設(shè)計中極簡主義的先驅(qū),也是這種設(shè)計理念的貫徹者。

圖片

極簡主義在設(shè)計上使用簡單的元素,突出核心內(nèi)容。不但可以提升層次感,滿足設(shè)計需求,也能幫助用戶快速聚焦核心部分,突出主要功能。極簡主義現(xiàn)在被廣泛應(yīng)用在UI、平面、品牌、工業(yè)設(shè)計等領(lǐng)域中,也在漸漸影響著人們的生活。

 

二、極簡主義的特點 

圖片

那么極簡主義有哪些特點呢?我們可以一起來看看:

1.大量的留白

2.運用柵格來規(guī)整元素

3.簡化配色

4.突出內(nèi)容

5.可讀性較高的字體

接下來就舉例說明這些特點。

 

1、大量的留白

在極簡主義當(dāng)中,留白是必不可少的部分??赡苡械耐瑢W(xué)或認為留白就是白色,其實留白并不一定是白色,它可以是任何與背景相同的色彩。留白在視覺上可以營造平衡感,創(chuàng)造視覺焦點,將核心內(nèi)容突出。通過這種方式讓用戶只關(guān)注必要的信息,只做必要的事情。

圖片

上圖就是運用留白設(shè)計的品牌網(wǎng)站首頁,通過留白直接突出主體,用戶即使不認識這個品牌也知道這是一個關(guān)于手表的網(wǎng)頁。

圖片

上圖就不是運用白色進行留白的網(wǎng)頁設(shè)計,依然可以突出主要信息。留白在使用中,一定要注意構(gòu)圖的關(guān)系,使頁面整體保持平衡感。

 

2、利用柵格來規(guī)整元素

在極簡主義設(shè)計風(fēng)格中,柵格系統(tǒng)可以讓簡單的設(shè)計更有條理。運用在頁面中,使信息和元素的展示更有邏輯性和規(guī)律性,使用戶查閱更順暢,也能使用戶從中更好的識別出主體內(nèi)容。設(shè)計師運用柵格系統(tǒng)可以把有限的元素在整個空間中建立正確的層級性與關(guān)系,使整個設(shè)計更自然。

圖片

上面網(wǎng)頁就是運用了柵格系統(tǒng)進行布局,從圖片到標(biāo)題、文案都保持精準的柵格化的對齊,使整個頁面都保持了協(xié)調(diào)感,使用戶在閱讀上也能遵循一定的規(guī)律與節(jié)奏。

圖片

如上圖即使是再簡單的頁面,通過柵格系統(tǒng)也能使整個設(shè)計保持一定的協(xié)調(diào)性。

 

3、簡化配色

極簡主義在配色的選擇上,像黑白這樣的色調(diào)在表現(xiàn)上更中性,更能體現(xiàn)產(chǎn)品的功能性,而且會給人干凈并且富有秩序感的視覺感受。但是黑白并不是唯一的選擇,通常會選擇一種飽和度較低的單色作為主色調(diào),然后選取一到兩種點綴用來提亮貫穿整個設(shè)計,達到提升視覺層次感的效果。

圖片

圖片

上面的兩張圖在配色上除了經(jīng)典的黑白色之外,還采用紅色作為點綴色,并且貫穿了整個設(shè)計。整體的配色不僅簡潔而且體現(xiàn)出了層次感。

 

4、突出內(nèi)容

設(shè)計的初衷本來就是對內(nèi)容的設(shè)計,所以突出內(nèi)容就是極簡主義設(shè)計最為核心的特點之一。因為其簡約的設(shè)計,可以讓用戶在第一時間就聚焦于內(nèi)容而不是頁面其他元素,而且內(nèi)容本身也可以當(dāng)做元素進行設(shè)計,強化視覺效果,讓畫面擁有視覺沖擊力與張力。

圖片

圖片

上面幾張圖就摒棄了其他元素,直接突出內(nèi)容讓受眾第一時間就關(guān)注內(nèi)容本身。

 

5、可讀性較高的字體

極簡主義設(shè)計希望元素清晰易于辨認,對字體也是同樣的要求。

無論是襯線體還是非襯線體,一定要確保字體的可讀性,方便用戶快速感知文字內(nèi)容。在風(fēng)格上不要裝飾性太強,使用經(jīng)典的字體就很好,在某種情況下適當(dāng)?shù)姆糯笞煮w,確保用戶可以一目了然更能突出設(shè)計的簡潔、直觀。

圖片

圖片

在上面幾張圖中,無論是襯線還是非襯線字體,都會利用文字大小和適當(dāng)間距保證文字的可讀性,也不會對文字添加過多的裝飾性元素。

 

三、極簡主義在設(shè)計中如何使用 

1、移動端中的使用

圖片

圖片

圖片

上面幾張移動端的界面,基本上都是有一個主要的色調(diào)+圖片+大標(biāo)題,以內(nèi)容為主體加上大量的留白,整體都符合極簡主義的核心特點。

 

2、網(wǎng)頁中的使用

圖片

圖片

圖片

上面這組網(wǎng)頁設(shè)計,也是采用了大標(biāo)題+產(chǎn)品精修圖+單一色調(diào)的背景進行設(shè)計,摒棄了裝飾性的元素,以突出內(nèi)容為主,運用柵格進行布局加大面積的留白,使頁面在簡約的同時體現(xiàn)了統(tǒng)一與品質(zhì)。

 

3、品牌中的使用

圖片

上圖就是我們熟知的YouTube,這些年品牌逐步摒棄了一些高光、漸變、投影等裝飾性元素,并且加入了播放按鍵圖標(biāo),向用戶傳達了YouTube的主要業(yè)務(wù)方向,整個設(shè)計更加簡約且一目了然。

圖片

上圖Instagram的logo也是向著極簡的方向發(fā)展。新版logo只保留了老版相機的特征以及彩虹色的背景,突出主要元素特征,既簡約又易于辨認。

 

4、海報中的使用

圖片

圖片

上面幾張海報就是以圖片或者某一獨特圖形作為主體內(nèi)容進行突出設(shè)計,再加上文字與適當(dāng)?shù)牧舭走M行柵格化的設(shè)計,很好的體現(xiàn)了極簡主義的設(shè)計風(fēng)格。

 

5、產(chǎn)品設(shè)計中的使用

圖片

圖片

運用簡約的設(shè)計語言,突出產(chǎn)品特性與功能性。富有美感與品質(zhì)性。

 

四、如何打造極簡主義風(fēng)格 

看了這么多案例,是不是對如何進行極簡主義風(fēng)格設(shè)計還是有點不知所措,那么我將從圖形、配色、構(gòu)成、字體這幾個緯度來給大家闡述如何進行極簡主義風(fēng)格設(shè)計。

圖形:簡單的幾何圖形,扁平化的設(shè)計,去除裝飾性元素

圖片

上面的圖就是運用簡單的幾何圖形+扁平的設(shè)計,突出內(nèi)容引導(dǎo)用戶進行操作。

配色:以黑白灰為主,或者選取一種主色調(diào)加一到兩種點綴色

圖片

圖片

上面兩張圖第一張就是典型的黑白灰的配色,突出內(nèi)容,給人干凈和平靜秩序的感受,而第二張圖就是選用黃色為主色調(diào),然后其他顏色為點綴色,突出功能具有引導(dǎo)性。

構(gòu)成:大量的留白與柵格化的構(gòu)成形式

圖片

上圖就是利用留白與柵格來進行頁面的布局,大留白突出重點內(nèi)容,柵格化的構(gòu)圖讓設(shè)計更具有協(xié)調(diào)性。

字體:非襯線體

圖片

雖然襯線字體也能體現(xiàn)出極簡主義的風(fēng)格,但是非襯線體在視覺上更簡潔,在突出品牌上辨識度更高。

 

五、極簡主義配色 

設(shè)計中較重要的一環(huán)就是配色,下面我給大家分享幾組極簡主義色彩搭配,每組都有色彩風(fēng)格對應(yīng)的形容詞和配色數(shù)值,希望給大家?guī)盱`感。

關(guān)鍵詞:自然,寧靜,沿海和平衡

圖片

關(guān)鍵詞:女性化,誘人,寧靜和熱愛

圖片

關(guān)鍵詞:大膽,自信,好玩和活力

圖片

關(guān)鍵詞:中性,平衡,寧靜和時尚

圖片

關(guān)鍵詞:舒適,寧靜,善良和原始

圖片

 

六、最后 

圖片

圖片

上面介紹了這么多,那么極簡主義最核心的特點就是:以展示內(nèi)容為主,去除了多余的元素、顏色,完全體現(xiàn)了“少即是多”的設(shè)計理念。極簡主義之所以受歡迎并且流行至今的一個原因就在于它突顯內(nèi)容,為用戶呈現(xiàn)最重要的東西,讓用戶關(guān)注最主要的事情,簡化了界面使其更具功能與可行性。

我們做設(shè)計歸根結(jié)底也是在為內(nèi)容、商業(yè)服務(wù),而極簡主義真正做到了內(nèi)容至上,但是要想更好的為商業(yè)服務(wù)其背后一定是經(jīng)過了深思熟慮的,就像小米新Logo一樣,看似簡單必定是由繁到簡的一個過程,而極簡主義也是去除多余元素化繁為簡的。所以與其說極簡主義是一種設(shè)計風(fēng)格,不如說它更像我們想追求的化繁為簡的生活方式。

 作者:三木

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》蘋果設(shè)計為什么顯得高級?


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


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


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




數(shù)字化轉(zhuǎn)型時代下的設(shè)計:醫(yī)療x數(shù)字孿生

seo達人


一、疫情之下我們能做些什么?

2019年底新冠疫情在國內(nèi)出現(xiàn),傳播范圍也隨著大量人口流動加速蔓延。新冠疫情爆發(fā)讓我國疾控部門開始對重大突發(fā)事件的應(yīng)對能力、疾控水平逐漸重視起來。作為阿里云產(chǎn)業(yè)智能的設(shè)計師,也希望通過阿里云的數(shù)據(jù)與技術(shù)能力,在疫情之下找到自己的答案。

 

1、要解決什么問題?

為了熟悉疾控業(yè)務(wù)場景、流程、難點及其中涉及到的產(chǎn)品與技術(shù)訴求,我們走訪了省疾控中心信息中心。通過走訪我們發(fā)現(xiàn),打通業(yè)務(wù)鏈路并為居民和醫(yī)院提供幫助是疾控中心亟待實現(xiàn)的目標(biāo)。在傳染病監(jiān)測預(yù)警中,涉及多維數(shù)據(jù)收集與分析,數(shù)據(jù)來源不僅包括醫(yī)療機構(gòu)、流調(diào)數(shù)據(jù)、各類聚集性場所、交通工具等,環(huán)境數(shù)據(jù)的監(jiān)測對研判傳染病的源頭與傳播途徑也至關(guān)重要。

經(jīng)過調(diào)研和梳理,我們拆解出3個主要痛點及目標(biāo):

圖片

 

2、用戶是誰?

要解決疫情場景下的痛點,就需要明確我們是為”誰“在解決問題。疾控業(yè)務(wù)主要面向疾控中心與衛(wèi)健委主管疾控的部門的工作人員,服務(wù)的對象則是每一個生活在城市里的你我他。管理部門需要對服務(wù)提供方進行監(jiān)管,提供物資調(diào)配與診療輔助,對所有其他對象收集數(shù)據(jù)、發(fā)布預(yù)警、政策,對病例與密切接觸者進行流行病調(diào)查。服務(wù)提供方和服務(wù)對象需要向管理方同步就診數(shù)據(jù)與異常情況。所有對象及其之間的關(guān)聯(lián),則是推演研判的重要依據(jù)。

 

二、為什么通過數(shù)字孿生緩解這些痛點?

人類歷史上,傳染病對人和區(qū)域帶來的影響是難以控制的、深遠的、不可逆的,而防控與治療措施的研究制定是高難度、高風(fēng)險、低容錯的。數(shù)字孿生體可以讓疾控分析工作在一個與物理實體相映射的虛擬實體上開展,基于物理空間當(dāng)前與歷史數(shù)據(jù),在數(shù)字空間中通過全維度的數(shù)據(jù)監(jiān)測和反復(fù)推演研判,找到并驗證疫情傳播發(fā)展的規(guī)律,以仿真、可控、低風(fēng)險、高靈活度的方式進行模擬預(yù)測,提前識別未來可能發(fā)生的風(fēng)險。從虛擬空間回到物理世界,對真實空間可以進行精準有效的「反控」,在最合適的時間,對最合適的對象,采取最合適的疫情防控措施。

從客戶、媒介、技術(shù)角度,為疾控部門提供綜合性的解決方案:

政府- 識別風(fēng)險、提前干預(yù)

疫情動態(tài)監(jiān)測和趨勢推演,找出變化規(guī)律,盡早識別風(fēng)險;給出防控處置措施建議,提前儲備資源,提高常態(tài)化疫情防控效率與能力。

公眾 – 信息平等與信任

預(yù)警傳染病危險因素,將健康教育建議精準推送給公眾,促進信息對等,加強公眾的安全感和對政府的信任。

醫(yī)院 – 改善診療能力

通過風(fēng)險提示和診療推薦,改善醫(yī)生診療能力,優(yōu)化醫(yī)療資源的分配。

技術(shù) – 數(shù)字孿生

通過靈活可控和相對低風(fēng)險的方式,在虛擬空間中開展多點觸發(fā)的疾控模擬分析和風(fēng)險預(yù)測,形成突顯數(shù)據(jù)智能特點、客戶可感知的數(shù)字孿生能力解決方案,提升產(chǎn)品競爭優(yōu)勢。

產(chǎn)品 – 形態(tài)創(chuàng)新

根據(jù)客戶真實訴求,通過數(shù)字技術(shù)打造多端聯(lián)動的產(chǎn)品方案,拓展產(chǎn)品類型與創(chuàng)新機會。

圖片

綜上,我們結(jié)合客戶價值挖掘出設(shè)計機會點:

圖片

 

三、構(gòu)建疾控體系化構(gòu)建數(shù)字孿生設(shè)計方案

對客戶和用戶大量的調(diào)研后,對訴求進行歸納聚類,提煉為環(huán)境監(jiān)測 –> 推演研判 –> 預(yù)警防控這三大主要模塊。

 

1、交互設(shè)計

對上述場景中涉及到的數(shù)據(jù)進行收集分類,可以分為面向政府監(jiān)管 G 端、醫(yī)療機構(gòu) B 端與居民 C 端的數(shù)據(jù),根據(jù)業(yè)務(wù)目標(biāo)與描述對象性質(zhì),選取不同的可視化呈現(xiàn)方式。在與業(yè)務(wù)和算法同學(xué)溝通過程中,根據(jù)傳染病動力學(xué)模型確定設(shè)計方案中影響因子的選取與交互設(shè)計方案。從用戶使用產(chǎn)品的場景出發(fā),我們在推演邏輯上采用「正向推演」和「逆向推演」相結(jié)合的方式。

正向推演

當(dāng)用戶知道影響疫情的關(guān)鍵因素時,用戶可以從影響因子出發(fā),選擇相關(guān)因素并指定作用對象或范圍,調(diào)整參數(shù)進行仿真模擬,對推演結(jié)果進行時間空間維度的對比。

逆向推演

當(dāng)用戶明確了疫情管控目標(biāo),例如需要在3天內(nèi)控制住疫情蔓延。可以采用逆向推演的方式,設(shè)置限定條件,通過知識圖譜展現(xiàn)影響因子和目標(biāo)元素之間的關(guān)聯(lián)要素(即隱性影響因素),計算達到目標(biāo)所需要的條件,即可得出精準高效的措施建議。

圖片

在設(shè)計影響因子相關(guān)交互操作時,我們結(jié)合傳染病相關(guān)專業(yè)知識與涉眾分析中的各類對象及其關(guān)系,盡量充分考慮社會、人文、自然等多維度要素,提供更多維度的調(diào)參可能。

利用數(shù)字孿生核心技術(shù),推導(dǎo)整體解決方案。

 

2、結(jié)合孿生亮點,推導(dǎo)整體方案

在環(huán)境監(jiān)測場景中可以基于數(shù)字孿生對疫情傳播風(fēng)險盡早識別,將監(jiān)控關(guān)口前移。在模擬推演中,我們利用數(shù)字孿生,將來多維因素在區(qū)域地圖上整合起來,力求充分考慮各類因素的動態(tài)變化對疾病傳播的影響。由此,環(huán)境監(jiān)測與仿真模擬作為數(shù)字孿生能力與疾控工作的契合點,成為重點優(yōu)化交互方式、打磨各方面體驗、提升客戶與業(yè)務(wù)價值的突破口。

圖片

 

四、醫(yī)療數(shù)字孿生:沙盤推演 + 微鏡探查

我們在產(chǎn)品/大屏側(cè)從兩個創(chuàng)新出點出發(fā),提煉出沙盤推演+微鏡探查的概念方案。

 

1、沙盤推演

按比例還原并模擬疫情發(fā)生區(qū)域的自然環(huán)境、天氣因素、社會因素、人口因素、與社會因素。通過電腦端調(diào)整疫情影響因素,在沙盤中觀察疫情對地區(qū)生態(tài)/人文/社會等方面的影響。

微鏡探查

將產(chǎn)品類比成洞察疫情發(fā)展的顯微鏡,用戶通過上帝視角在產(chǎn)品中模擬探查不同因素對疫情發(fā)展產(chǎn)生的影響,對未來的疫情起到趨勢研判的效果。

圖片

圖片

圖片

 

五、不斷探索,積極前行

作為數(shù)據(jù)智能與數(shù)字行業(yè)設(shè)計師,我們希望利用專業(yè)做出盡管可能微小但積極的改變,為業(yè)務(wù)、行業(yè)和社會帶來一些價值。在公共衛(wèi)生領(lǐng)域,我們不斷在社會意義、客戶與用戶訴求、業(yè)務(wù)目標(biāo)之間尋找契合點,探索數(shù)字孿生體驗設(shè)計的突破口。疾控工作涉及到的公共衛(wèi)生與醫(yī)療知識、倫理抉擇、社會關(guān)系、經(jīng)濟利益等交織在一起,極度復(fù)雜;但希望通過在行業(yè)轉(zhuǎn)型過程中加入數(shù)字孿生體驗設(shè)計的視角與方法,最終可以在促進疾病預(yù)防、公共衛(wèi)生資源分配平衡,改善全民健康、生活質(zhì)量與社會公平信任的艱巨道路上,增加一點點推動的力量。

 

特別鳴謝:項目成員
數(shù)字醫(yī)療團隊pd:達蓬 、基岡 、蔣夢華

數(shù)字醫(yī)療研發(fā)算法:延妮
阿里云設(shè)計中心設(shè)計師:項婉 、指耘、六衣


作者: 阿里云設(shè)計中心

轉(zhuǎn)載請注明:學(xué)U網(wǎng)》數(shù)字化轉(zhuǎn)型時代下的設(shè)計:醫(yī)療x數(shù)字孿生

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


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


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




如何讓你的設(shè)計看起來更有說服力?試試網(wǎng)格系統(tǒng)!

seo達人


一、網(wǎng)格系統(tǒng)的組成

在深入了解網(wǎng)格的類型和使用準則前,讓我們先來了解一下網(wǎng)格系統(tǒng)中涉及到的一些基本概念,比如列數(shù)、內(nèi)邊距、外邊距等等。

1、列

圖片

列(Column)是網(wǎng)格的基礎(chǔ),用來表示內(nèi)容放置的區(qū)域。每一列的寬度以百分比而不是固定的數(shù)值來衡量,這樣面對不同的屏幕尺寸,可以更靈活地進行設(shè)計。

日常設(shè)計中,最常使用的是12列等寬的網(wǎng)格系統(tǒng),適用于大多數(shù)的頁面和布局設(shè)計中。

2、內(nèi)間距

圖片

內(nèi)間距(Gutter/Padding)是指每列之間的距離,也被叫做水槽。內(nèi)間距能為頁面提供呼吸空間,避免內(nèi)容之間過于擁擠。

3、外邊距

圖片

邊距(Margins)是列與邊框之間的距離,邊距繞過內(nèi)容有上、下、左、右四個方向,在設(shè)計中我們可以針對每一側(cè)設(shè)定和更改邊距。

4、字段或模塊

圖片

字段或模塊是行和列的交集。這些模塊是頁面的基礎(chǔ),所有設(shè)計元素都將適合網(wǎng)格中矩形卡片創(chuàng)建的這些空間單元。

5、界面設(shè)計與網(wǎng)格

如果說網(wǎng)格在過去對于印刷必不可少,那么今天網(wǎng)格在數(shù)字世界中仍是不可或缺的。

圖片

網(wǎng)格成為開發(fā)數(shù)字產(chǎn)品的關(guān)鍵工具,為在所有設(shè)備上提供最佳的用戶體驗。因此,無論屏幕大小如何,設(shè)計師都必須能夠在每個屏幕上通過最佳的方式組織內(nèi)容。

 

二、如何在設(shè)計中使用網(wǎng)格系統(tǒng)?

網(wǎng)格是具有列、內(nèi)間距和外邊距的結(jié)構(gòu)系統(tǒng),其目的是幫助設(shè)計師組織界面的內(nèi)容。

內(nèi)間距的距離越窄,越會向用戶傳達「這些內(nèi)容屬于同一組」的感覺。

圖片

同理,內(nèi)間距越寬,看起來越像是不同類型的內(nèi)容。

圖片

需要注意的是,內(nèi)間距的距離不要太寬,或者比每一列的寬度還寬,容易導(dǎo)致內(nèi)容之間的留白過大,造成視覺瀏覽上的不連貫。

圖片

此外,外邊距的間距遵循與內(nèi)間距相同的規(guī)則。可以靈活調(diào)整外邊距,以便在內(nèi)容和屏幕之間留出合適的間隔。

圖片

圖片

和內(nèi)間距一樣,屏幕中的外邊距也不能太寬,這樣會壓縮頁面中內(nèi)容的展示空間,會讓頁面看起來很局促。

圖片

 

三、使用網(wǎng)格設(shè)計的四條準則

網(wǎng)格的使用看起來很直觀,但在UX或UI項目中使用網(wǎng)格系統(tǒng)仍有一些需要注意的規(guī)則。

1、將元素集中在每一列中

上面說到,在設(shè)計中常用到的是12列網(wǎng)格系統(tǒng)。那么12列網(wǎng)格為什么被廣泛使用呢?主要原因在于12列網(wǎng)格更方便擴展不同的布局形式。

圖片

▲ 12列網(wǎng)格可以一行排列兩個內(nèi)容,各占6列網(wǎng)格;一行排列三個內(nèi)容,各站四個網(wǎng)格;一行排列四個內(nèi)容,各占3列網(wǎng)格;一行排列六個內(nèi)容,各占2列網(wǎng)格。

基本上,常用到的頁面布局形式在12列網(wǎng)格中都可以實現(xiàn)。

圖片

▲ 在每個內(nèi)容之間留出足夠的內(nèi)邊距。這里需要注意的是,內(nèi)容的兩側(cè)要與每一列的邊緣重合,而不是與內(nèi)邊距重合。

圖片

▲ 當(dāng)內(nèi)容居中顯示時,要始終在邊緣留出一點空間,防止頁面被內(nèi)容填充的過于擁擠。

2、不要將列數(shù)作為內(nèi)容填充

在網(wǎng)格系統(tǒng)下,設(shè)計應(yīng)該填充整個內(nèi)容的寬度,這樣會讓界面看起來更規(guī)范。

圖片

不要讓左右兩列沒有填充內(nèi)容,讓列數(shù)作為填充,這樣會導(dǎo)致頁面的外邊距不統(tǒng)一,增加后期的開發(fā)成本。

圖片

3、可以嘗試脫離網(wǎng)格

在設(shè)計中,使用從網(wǎng)格中溢出的圖像或元素也是可以的。

圖片

例如我們想填充一個全尺寸的背景色或者圖像,只需將圖像拉到網(wǎng)格之外就可以。在網(wǎng)格和邊距的示意下,開發(fā)人員也能夠快速理解界面的尺寸信息。

4、注意內(nèi)容之間的間距

在網(wǎng)格上放置不同的元素時,確保元素之間的左右間距、上下間距都是一致的,這樣會讓整個界面看起來更規(guī)范。

圖片

 

最后

除了能夠改善設(shè)計、減輕用戶認知負擔(dān)外,網(wǎng)格系統(tǒng)還能提升設(shè)計效率。有了網(wǎng)格我們可以快速衡量元素的間距、邊距的精度,簡化設(shè)計過程。

另外,在規(guī)范的網(wǎng)格系統(tǒng)中,界面布局或內(nèi)容上的修改也會變得更容易。

慢慢來比較快,希望對你有幫助!


作者:Clippp

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》如何讓你的設(shè)計看起來更有說服力?試試網(wǎng)格系統(tǒng)!

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


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


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



簡直不敢相信,加上這個元素,瞬間高級感爆棚!

seo達人



圖片

這個問題還是比較普遍,曾經(jīng)遇到很多同學(xué)也是這樣的,所以今天拿出來講講。

一些特殊的欄目和模塊我們最好去花心思設(shè)計下,這樣可以大大提高UI界面的設(shè)計感。

 

一、上下分割

在封面設(shè)計中,可以使用簡單的上下分割,輕松做出有層次的封面。普遍同學(xué)存在的問題,都是直接找一張圖貼進去,如下這樣:

圖片

這種方式設(shè)計,完全體現(xiàn)不出你的設(shè)計,而只是找了一張別人的圖,況且這樣貼進去缺少一些特色,不管怎樣,一些關(guān)鍵重點功能還是需要設(shè)計一下的。

比如,我們可以通過畫面分割的形式,對一些特殊的重點推薦歌單做個區(qū)別。

圖片

上面,使用了上下分割的形式,人物和背景上下都有交接,在加上文字版式,整個封面舊有了視覺張力。

當(dāng)然,還有其他的分割形式,但大思路是一致。

圖片

 

二、大字疊加

同樣的在做一些特殊欄目設(shè)計時,除了使用分割形式,還有大字疊加,一樣可以做出視覺張力的封面。

圖片

在這里,我們可以將歌手摳出來,然后背景取色和人物同色系,再加上文字版式,效果就來了。

這種風(fēng)格其實很好學(xué)習(xí),下面簡單來看看其他案例。

圖片

上圖設(shè)計思路,采用文字穿插與文字前后疊加的版式設(shè)計。

圖片

圖片

蘋果音樂的首頁,一些重點歌單推薦,同樣使用了特殊設(shè)計。

 

三、藝術(shù)字

在封面中進行藝術(shù)字設(shè)計,難度略大, 但是效果做出來一樣很精彩,比如下面這種。

圖片

POP三個字放大設(shè)計,加一些藝術(shù)化效果,整個設(shè)計氛圍感就來了。

圖片

圖片

除了上面這張對英文字體進行藝術(shù)化設(shè)計,還有稍微復(fù)雜一些的,比如下面這種。

圖片

 

四、全新設(shè)計

全新設(shè)計一張封面,更加體現(xiàn)這個欄目的特色和亮點,也可以讓整個畫面視覺張力更強,當(dāng)然對設(shè)計師能力要求也就越高,比如下面這種。

圖片

全新設(shè)計的好處,可以大大的吸引用戶的眼球。如果是一些新的欄目,新的模塊出現(xiàn),是完全可以花費時間來設(shè)計。這種設(shè)計放在你的設(shè)計稿中,是完全可以拉開你和同事之間的差距。

圖片

圖片

圖片

好了,到這里差不多完事,今天的關(guān)于音樂界面的設(shè)計,提高UI設(shè)計感,你學(xué)會了嗎。

好了,今天文章就到這里。

原創(chuàng)不易,如果對你有幫助,記得給我點個贊,支持下我們。


作者:劉濤導(dǎo)師

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》簡直不敢相信,加上這個元素,瞬間高級感爆棚!

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


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


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



ISUX「七月」行業(yè)設(shè)計趨勢速遞

seo達人


圖片

 

本期摘要:

(1)Facebook 開始在美測試NFT功能(2)Facebook Groups 引入頻道功能 (3)Niantic 正式推出社交應(yīng)用 Campfire(4)twitter 內(nèi)測多人共同編輯一條tweet的能力(5)Instagram Reels 短視頻功能更新(6)QQ音樂打造音樂版社交元宇宙(7)Meta Horizon Home 讓 VR 更具社交性(8)抖音上線桌面端(9)“中文梗博物館”出現(xiàn)在 VR 世界(10)#Me:現(xiàn)實社交帶進異世界的虛擬游戲(11)上大元宇宙:現(xiàn)實校園搬上虛擬世界(12)Hay:匹配后直接視頻聊天的社交應(yīng)用(13)陌陌旗下 AR 跳舞 APP —— BonBon Jump(14)字節(jié)元宇宙 APP「派對島」全面公測(15)Turn Up:遇見音樂同好(16)vivo 無障礙功能,讓聲音也可以被「看見」

 

一、Facebook開始在美測試NFT功能 

Meta 產(chǎn)品經(jīng)理 Navdeep Singh 近日在 Twitter 分享 NFT 功能的截圖,他表示公司開始允許部分美國創(chuàng)作者在 Facebook 上發(fā)布數(shù)字收藏品。從圖中可見,進入個人頁面后,會在頭像下方的看到〝數(shù)字藏品〞的頁簽,用戶可以在這個專屬頁簽中展示 NFT,這些藝術(shù)品也會有一個〝數(shù)字藏品〞的標(biāo)簽 。

用戶能在發(fā)文時附上想要分享的 NFT,如同一般貼文,可讓好友點贊、留言和分享,點擊后還會顯示有關(guān)該 NFT 的詳細資訊。 

圖片

圖片

 

二、Facebook Groups 引入頻道功能

Facebook 宣布將在 Facebook 群組引入全新的頻道功能,讓成員進行更集中的討論。

管理員可以創(chuàng)建三種類型的頻道:聊天、Feed 和語音。聊天頻道能讓用戶在 Facebook 群組和 Messenger 上更加實時地留言、討論特定話題;Feed 頻道讓管理員圍繞不同形式的主題組織社區(qū),成員們可以基于具體的興趣或話題進行討論;語音頻道則是允許管理員和成員隨時加入和退出語音對話,并且支持開啟攝像頭。

圖片

Facebook 宣稱正在測試新的側(cè)邊欄,有助于用戶快速找到喜愛的群組。側(cè)邊欄將列出個人所屬的群組、最新活動和新的帖子,支持用戶將喜愛的群組固定在側(cè)邊欄頂部。

圖片

 

三、Niantic 正式推出社交應(yīng)用 Campfire 

Niantic 宣布在特定地區(qū)推出社交應(yīng)用 Campfire ,并計劃在今年夏天將 Campfire整合進公司旗下游戲。Campfire 是一個〝真實世界〞的元宇宙平臺,幫助用戶發(fā)現(xiàn)新的游戲與活動。 

打開應(yīng)用時,用戶會看到所在地區(qū)的動態(tài)地圖,包含好友和其他玩家以及附近正在進行的游戲與活動,從右上角的圖標(biāo)能進入社區(qū)或游戲特定地圖。

圖片

除了游戲之外,Campfire 還提供豐富的社交功能,讓用戶與朋友保持聯(lián)系,并從動態(tài)地圖上發(fā)現(xiàn)附近的玩家、社區(qū)活動,從而結(jié)交新朋友。用戶可以組織各種活動,與朋友分享自己的位置,追蹤即將到來的聚會動態(tài),開始小組聊天等。

圖片

在《Pokémon GO》中,小精靈訓(xùn)練家可以通過消息與朋友共享位置,從而輕松快速高效地組建團隊。若是單人游戲,可以點擊地圖上的一個特定位置,添加信號彈(Flare),鼓勵大家一起參與游戲。

Campfire 的特點是基于真實世界 AR 的社交網(wǎng)絡(luò),目的是增強整體游戲用戶的粘性,同時有利于《Pokémon GO》、《Ingress》等Niantic旗下遊戲玩家之間的溝通。

 

四、Twitter 內(nèi)測多人共同編輯一條 Twitter 的能力 

Twitter 已開始測試一項新的 “CoTweets” 功能,該功能允許用戶共同撰寫推文。CoTweets 正處于測試階段 ,美國、加拿大和韓國地區(qū)的部分用戶可體驗到該功能。

圖片

用戶可以向關(guān)注的好友發(fā)送 CoTweet 邀請,待對方接受后將創(chuàng)建一個 CoTweet,顯示雙方都是共同作者。此外,同一條 CoTweet最多只能兩人撰寫,因此每個 CoTweet 只能邀請一位共同作者。

圖片

 

五、Instagram Reels短視頻功能更新 

Reels 是由 Instagram 推出的短視頻社交平臺,對標(biāo) TikTok,Instagram 之前也支持短視頻能力,Reels 重點為豎屏短視頻,努力提供更多全屏沉浸式內(nèi)容。Instagram 宣布15分鐘以內(nèi)的新視頻帖子將以 Reels 形式分享,相比之前的90秒時長大大放寬。

圖片

在拍攝能力方面推出雙向攝像頭的內(nèi)容生成方式,讓用戶拍攝時能分享當(dāng)下的反應(yīng)。并推出模板功能,用戶通過上傳視頻和照片來填充模板生成內(nèi)容。

圖片

另一個同樣雙畫面的功能由 Facebook Gaming 推出,Clips to Reels 功能提供游戲畫面和創(chuàng)作者攝像頭的兩個畫面,將游戲片段和錄播快速轉(zhuǎn)換為 Reels,支持添加背景音樂、自帶濾鏡和特效。

圖片

 

六、QQ音樂打造音樂版社交元宇宙 

Music Zone 是QQ音樂為用戶打造的全新虛擬音樂社區(qū),將其作為元宇宙領(lǐng)域的首次嘗試,希望為用戶帶來沉浸式互動體驗。

用戶登錄QQ音樂 APP 后,可在 Music Zone 中設(shè)定專屬人物形象,并能獲取虛擬形象,其形象靈感致敬經(jīng)典的火柴人 Mfer。

圖片

Music Zone 類似于超級QQ秀的QQ小窩,用戶可以獲得一個獨立的家,用戶可以隨意裝扮自己的家,并在墻壁上掛有虛擬播放界面和歌單墻,用戶點擊虛擬播放器進行歌曲的播放,訪問的人也能進行點播。

圖片

 

圖片

Music Zone 提供了社交功能,用戶能在社區(qū)地圖上任意選擇一個家進行訪問,并對訪問對象的家進行點評,關(guān)注對象以及加好友。QQ 音樂的用戶享受到虛擬社交體驗的同時,還能進一步增強 QQ 音樂內(nèi)的社交關(guān)系鏈,打造一個興趣社區(qū)。

圖片

 

七、Meta Horizon Home 讓 VR 更具社交性 

Meta 公布 Quest 2頭顯將推出 Horizon Home 功能,借助該功能讓用戶和朋友實現(xiàn)虛擬串門。用戶可以從一些預(yù)設(shè)選項中選擇場景作為自己的家,可以是空間站、日本旅館或俯瞰山間的日落的露臺等等,甚至可以自己上傳場景。

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

圖片

創(chuàng)建完畢后,可以邀請朋友到自己的 Horizon Home 環(huán)境里進行和參觀、閑聊,甚至還能直接支持開啟多人游戲(游戲包括 Beat Saber、Demeo 和 Echo VR),滿足線上面對面社交化更強的游戲體驗。

圖片

扎克伯格還和攀巖運動員 Alex Honnold 一起在 Horizon Home 里觀看了 Alex Honnold 在攀登多洛米蒂山( Dolomiti )懸崖的360度紀錄片《 The Soloist VR 》,這一虛擬現(xiàn)實紀錄片中可 Meta Quest 頭顯的 Oculus TV 上觀看。

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

圖片

在 Meta 的設(shè)想里,VR 是一個社交平臺,Horizon Home 就是一個社交空間,玩家可以在其中與朋友一起閑逛、一起觀看視頻…就連 Dropbox、Facebook 和 Instagram 等軟件,之后也將在 VR 中作為 Horizon Home 中的 2D 面板應(yīng)用程序運行,玩家不需要摘下頭顯就能進行訪問。

圖片

 

八、抖音上線桌面端 

抖音推出了 PC 電腦版,讓用戶在電腦大屏上就可以刷短視頻,其實之前也可以通過抖音的網(wǎng)頁版在電腦上刷短視頻,但網(wǎng)頁版的功能相對過于簡單。

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

PC 版客戶端和手機版抖音在風(fēng)格上保持基本一致,默認采用深色效果,不過在右上角設(shè)置區(qū)域也能在深色和淺色兩種模式間互相切換。左側(cè)邊框區(qū)域是視頻分類區(qū),這里分布著“直播”、“熱點”、“娛樂”、“游戲”等不同視頻的進入通道。

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

PC 版抖音客戶端相比手機版而言,基于桌面場景在視頻瀏覽上做了差異化的體驗。一是能夠選擇“自動連播”,無需手動翻頁刷新自動播放下一個視頻,真正地解放了雙手;二是視頻播放能用鼠標(biāo)、鍵盤快捷鍵進行操作,體驗更方便、自然。

圖片

 

九、“中文梗博物館”出現(xiàn)在 VR 世界 

最受歡迎的 VR 聊天室應(yīng)用 VRChat 上線了一個高質(zhì)量中文場景“中文梗博物館”,由B站視頻作者“四跡”帶領(lǐng)網(wǎng)友創(chuàng)造的,收納了2010年前后互聯(lián)網(wǎng)在國內(nèi)普及至今,于視頻網(wǎng)站和社交網(wǎng)絡(luò)流行的大量梗,并迅速成為亞文化圈層話題。

與現(xiàn)實中的大多數(shù)博物館不同,進入中文梗博物館并不需要門票,只需要在 VRChat 中搜索名稱,跳轉(zhuǎn)并能直接進入。雖然是在虛擬世界中構(gòu)建,這個博物館卻有著真實博物館一般的入口、展館分布、陳設(shè)乃至藏品展示,并不因非商業(yè)團隊制作而顯得質(zhì)量低劣。

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

展品來源算得上是包羅萬象。從簡單的聊天對話引出的話題,到圖片和短視頻等當(dāng)今更流行的載體,再到影視劇、動畫漫畫的名場面,以及為中國互聯(lián)網(wǎng)行業(yè)蓬勃發(fā)展提供驅(qū)動力的電子游戲等。

由于中文梗博物館是搭載在VR Chat平臺中的線上虛擬展會,用戶可以根據(jù)VR平臺提供的各類模板自定義自己的形象,觀展者甚至可以配合展廳中的梗,成為梗中角色或物件,和其他觀展者互動,提供社交破冰的切口。在溝通方面,用戶之間可以建立獨立聊天室,讓聊天內(nèi)容不公放,確保私密性,也不會打擾到其他在觀展的玩家。

圖片

 

十、#Me:現(xiàn)實社交帶進異世界的虛擬游戲 

#Me 由韓國游戲公司 Clover Games 研發(fā),于7月7日上線,是一款二次元風(fēng)格的3D元宇宙產(chǎn)品,在上線前全球預(yù)約人數(shù)已經(jīng)超過100萬。

圖片

背景為世界突然間出現(xiàn)可以穿越到異世界的入口,玩家在編輯好自己的 Avatar 后進入世界,最大特色的設(shè)定是手機的網(wǎng)絡(luò)社交能力依然存在。

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

游戲主界面整體氣氛像直播應(yīng)用,有日夜系統(tǒng)。能與NPC視頻通話、互相關(guān)注,可以像現(xiàn)實生活中那樣拍照記錄,分享到社交媒體(風(fēng)格像 Instagram)上。

圖片

玩家在世界中冒險,會有一個陪伴的小伙伴 “Campy” 作為游戲向?qū)?,并為玩家旅途的拍攝記錄高光時刻,讓玩家能合理地產(chǎn)生第三視角的內(nèi)容。收獲粉絲認可,成為玩家重要的成就體系。

圖片

玩家通過完成任務(wù)可以解鎖不同的地點,也可以隨意在世界里逛逛,和路過的玩家輕互動,目前看還是偏重游戲輕社交。

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

 

十一、上大元宇宙:現(xiàn)實校園搬上虛擬世界 

上大元宇宙由上海大學(xué)上海美術(shù)學(xué)院蔣飛教授和學(xué)生們共同創(chuàng)作,名為SHU Metaverse,以上海大學(xué)寶山校區(qū)為原型的一個虛擬校園。

圖片

在疫情背景下,校園生活也受封控影響,一個還原高校的虛擬世界,讓師生們能在里面奔跑、互動、上課、聽講座、舉行畢業(yè)典禮等,也能做一些平常在校園中不可能做到的事情,如空中飛翔、養(yǎng)寵物、尋寶等。

圖片

上大元宇宙給疫情期間不能到校生活的師生們一個緩解壓力的平臺,在虛擬校園的云畢業(yè)典禮,帶給畢業(yè)生一份特殊的禮物。

圖片

 

十二、Hay:匹配后直接視頻聊天的社交應(yīng)用 

本周登上 App Store 中國區(qū)第一位的 Hay,是一款主打?qū)崟r視頻的社交app,可以與全球范圍的人聊天。

圖片

圖片

Hay 的 UI 采用像素風(fēng)格,整個應(yīng)用很輕巧,分聊天、匹配和個人三個 tab。自動匹配用戶不需要收費,系統(tǒng)會根據(jù)用戶的性別、年齡和興趣標(biāo)簽去匹配,雙方同意后開啟視頻通話,但使用篩選條件匹配需要支付金幣。

圖片

為解決不同文化的語言障礙,視頻聊天時也提供文字聊天,對文字進行自動翻譯,保證雙方能持續(xù)交流。為了鼓勵用戶多使用 Hay,應(yīng)用有每日簽到、飛行地圖、勛章三種激勵模式。

圖片

 

十三、陌陌旗下AR跳舞APP:BonBon Jump

出門健身難,擼鐵枯燥無趣,網(wǎng)紅燃脂舞視頻跟不上……近日,陌陌想通過 AR 新產(chǎn)品「BonBon Jump」來解決這個問題。

圖片

這是一款使用了 AR 技術(shù)映射自己喜歡的3D形象,并跟隨跳舞健身 App。運動盒子,可以選擇不同舞種與音樂,選擇自己喜歡的音樂即可開始跳舞。

圖片

只需打開「BonBon Jump」投屏到電視,手機放在能夠掃描全身的位置即可開始。接下來你就可以穿著自己喜歡的虛擬3D形象,跟隨 AR 游戲指引進行舞蹈。通過「BonBon Jump」提供的 AI 識別技術(shù),可以精準識別動作數(shù)據(jù),實時打分,擁有更科學(xué)的運動保護和指導(dǎo)。

圖片

圖片

另外真人動作演示,AI 動作識別結(jié)合 AR 玩法,可以讓燃脂舞跟練像玩游戲一樣簡單。運動計劃,可以根據(jù)身高體重,免費制定燃脂計劃,并進行記錄,讓運動更科學(xué)量化。個人中心,展示運動戰(zhàn)績以及高光時刻,讓運動變得有儀式感。

 

十四、字節(jié)元宇宙 APP「派對島」全面公測 

派對島 APP,早在2022/01/25就上線應(yīng)用市場。目前,派對島已開始開放對外邀請,開始放大測試范圍了。

圖片

圖片

派對島,是一個實時線上活動社區(qū)。派對島的 slogan 是:沒有人是一座孤島。在這個虛擬人社區(qū)里,創(chuàng)建你的個人形象后,可以參與和創(chuàng)建線上活動。讓你與其他同好輕松社交,找到趣味相投的人。同時,你也可以自己創(chuàng)建活動,邀請別人來參與。

圖片

這個小島上,有街心花園,有溫馨小屋。你可和小島上新交的朋友,一起 party。也能體驗新奇有趣的沉浸式聊天。與朋友和同好相遇在島上,和朋友相遇,聊天。

圖片

 

圖片

 

十五、Turn Up:遇見音樂同好 

上次介紹了網(wǎng)易云音樂旗下的音樂社交產(chǎn)品 MUS。其實早在2018年3月 Turn Up 就已經(jīng)上線。截至目前,進入了29個國家和地區(qū)的 App Store 生活類暢銷榜  Top100。Turn Up 在音樂和社交的聯(lián)通上有很多可借鑒之處。

圖片

① 首先,用戶需要對音樂資料卡進行完善。選出至少3位最喜歡的歌手、主頁播放歌曲為必填內(nèi)容;然后通過多場景的音樂選擇,提示用戶填寫資料卡片,資料越詳細匹配到心儀用戶的幾率越高。比如:最無法忍受的歌手、適合約會的歌曲、將在婚禮播放的歌曲、將在葬禮上播放的歌曲等。

② 系統(tǒng)會根據(jù)用戶填寫的歌手和單曲,來判定用戶喜歡的音樂類別,并將具有相同音樂偏好的用戶放在同一匹配池。

  • Swipe,用戶可以如使用 Tinder 一般,對自己感興趣的用戶進行右滑、對不感興趣的用戶進行左滑。
  • 音樂盲盒,直接向自己感興趣的用戶發(fā)送消息或者嘗試猜出對方的音樂盲盒。用戶需要在30秒內(nèi)以“4選1的選擇題模式”根據(jù)歌曲節(jié)選片段猜對歌曲名稱,完成猜歌任務(wù)后系統(tǒng)會自動顯示猜歌結(jié)果,用戶可以根據(jù)自己的答題情況初步判定彼此的音樂品味是否相投。

圖片

  • 線下活動,Turn Up 也會為每一個線下活動設(shè)立一個匹配池,用戶可以在匹配池左右滑動尋找感興趣的用戶。這就相當(dāng)于將“線上”和“線下”進行了串聯(lián),線上好友在不久后就可以在線下碰面。

 

十六、vivo 打造的無障礙功能,讓聲音也可以被「看見」 

我國是全球聽障人士最多的國家,聽障群體總?cè)藬?shù)有將近 3000 萬人,聽障群體日常需要面對很多非?;镜膯栴}。

針對聽障人士最基本的生活場景,vivo 推出了「vivo 聽說」和「無障礙通話」功能。這些功能讓原本生活中只能靠「聽」的話語變成「看」得見,為所有人提供了多一種獲取信息的方式。

兩個功能使用的主要技術(shù)是語音識別技術(shù)和語音合成技術(shù),都是我們平時常常會用到基礎(chǔ)技術(shù)。

圖片

開啟功能后,每次接電話時就會彈出對話框。電話另一頭的語音會被翻譯成文字,而這一頭輸入的文字,也會轉(zhuǎn)錄為語音播給對方聽。同時,用戶還可以設(shè)置常用語。打車、收快遞和外賣等重復(fù)類場景可以更快捷應(yīng)對。

「vivo 聽說」則是為線下對話場景而設(shè)。以前,我們有把語音轉(zhuǎn)換成文字的應(yīng)用,也有把文字變成語音的應(yīng)用,但「vivo 聽說」把兩個功能結(jié)合起來,因為這樣才是一個完整「對話」。

點一下屏幕底部的「耳朵」,開始「聽」,實時將語音轉(zhuǎn)錄為文字。點一下旁邊的「鍵盤」,輸入想說的,讓文字「說」出聲。

而且,「vivo 聽說」還能小框化,用戶可以一邊使用其它應(yīng)用一邊「收聽」其他人說的話。

以上就是2022年7月ISUX行業(yè)設(shè)計趨勢速遞,喜歡記得收藏轉(zhuǎn)發(fā),以備不時之需查看。

 

原文地址:騰訊ISUX

作者:ISUX設(shè)計

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》ISUX「七月」行業(yè)設(shè)計趨勢速遞

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


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


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




一次教你16種宋體字的變化!

seo達人


(點擊圖片前往原文查看視頻)

(點擊圖片前往原文查看視頻)

 

如果不喜歡看視頻也沒關(guān)系,這里還有貼心的圖文版詳細過程,下面一起來看一下都是哪 16 種。(視頻中只有 15 種,最后一種是我臨時加上去的。)

圖片

開始我們今天的正題,逐一來講解一下。

 

 

圖片

宋體當(dāng)中的筆畫美感是比較重要的,而如果對于字體沒有太多了解的話,是比較難刻畫出精致宋體筆畫的,所以我們可以對筆畫進行一定程度的簡化,當(dāng)然主要是對于橫豎筆畫的簡化,全部做成直線的形態(tài)。

圖片

其次則是撇捺點的筆畫,可以簡化成一個帶有曲線的三角形,同時把邊緣處切平處理。看起來會更簡潔現(xiàn)代。

圖片

這樣我們就得到了一組簡化過的筆畫,其實這一步主要的思路就是把筆畫處理的更幾何,自然也就更簡化了。

圖片

下面就可以用這些筆畫來進行拼字了,選擇思源宋作為結(jié)構(gòu)參考。這里我把思源宋拉的瘦高了一點,大家也可以根據(jù)自己想要的感覺去自行調(diào)整。

圖片

最后,適當(dāng)調(diào)整布局,兩行錯排,添加一些小文字進行排版即可。

圖片

這里結(jié)合最終的排版,添加了一點點連筆和筆畫延長的處理,后面會單獨講連筆的形式。

 

 

圖片

斷筆這一方式已經(jīng)老生常談了,在字體設(shè)計中的使用頻率非常高,常規(guī)的斷筆方式大家應(yīng)該都是會的,就是對筆畫與筆畫有接觸的位置進行斷開即可,那其實也可以嘗試斷開的更多一些,把所有接觸的筆畫都進行斷開。

圖片

當(dāng)然這個方法也可以和簡化做同時使用,依然選擇思源宋墊底,搭建字形,這里我是拉寬了一些。

圖片

再來對整體進行斷開,還是相同的方法,但氣質(zhì)完全不一樣了。

圖片

最后添加排版,這一組就完成了。

圖片

接著來看第三種方法。

 

 

圖片

這一方法有點類似于斷筆的加強版,只是略微有點不同,那具體做法就是把整條橫筆全部省略掉,只保留筆畫末端的修飾。

圖片

首先依舊是搭建結(jié)構(gòu),這一部分并沒有任何區(qū)別,大家可以自由的設(shè)定筆畫造型,以及筆畫的粗細,來達到自己想要的感覺。

圖片

下面就很簡單了,把字體中所有最細的橫筆給刪掉,保留末端的小三角特征即可。

圖片

最后也可以根據(jù)字義適當(dāng)增加一點意境,我這里加了一些模糊效果。

圖片

這里稍微多說幾句,有些字并不能把所有橫筆全都省略掉,因為會比較嚴重的影響識別,比如日字,干字,等一些字里面只有橫豎筆畫的字,我們就不能對橫筆全部省略。

圖片

這種情況就要適當(dāng)去保留一些橫筆了,根據(jù)識別情況,進行還原橫筆的多少即可,識別低就多還原一些橫筆,識別夠高則可以多省略一些的。

圖片

這兩個字真不是故意的,腦子里就只想到了這兩個字比較適合…

 

 

圖片

這也是一個非常好用,非常實用的方式,連筆,其實連筆的方法無非就那么幾種,最常用的就是根據(jù)手寫的習(xí)慣和規(guī)律進行連筆,再一個則是順勢而連,當(dāng)然也有一些逆向連接和非常規(guī)的連筆手段,但那需要一定的積累和經(jīng)驗了,今天我們主要談的就是基于手寫習(xí)慣這一方式。

方法略有一些不同,首先我們要先根據(jù)墊底字進行畫草圖來嘗試可以做連筆的位置,以及連筆的造型。這里可以進行大量的嘗試,選擇整體看起來比較舒服的姿勢再往下做。

圖片

我們來稍微分析一下草圖,首先第一組是不太合適的,因為王字旁的變形過于繁瑣,我們再替換進宋體筆畫的時候,很可能會完全糊掉。

圖片

下面再來看第二組,連筆的走勢是沒什么問題的,但略微平淡了些,且少字的連筆形態(tài)不是很好看,所以可以作為備選項。

圖片

再來看一下最后一組,這一組是可行的,連筆的走勢比較飄逸,且王字旁的連筆并不是那么常規(guī),所以可以用這一組來作為參考。

圖片

這里的筆畫設(shè)定的比較細,而且較為鋒利,因為想到玫瑰帶刺,少年也帶要帶點刺,所以做了一個這樣的設(shè)定,大家做不同的主題可以設(shè)定不同的筆畫粗細和細節(jié)處理。

圖片

接下來直接用畫好的草圖墊底拼字就可以了,這一組我也是把字拉的瘦高了一些,也是因為「少年」這個詞,如果是「玫瑰大叔」的話,可能我就會做的短粗胖一些了。

圖片

圖片

 

 

圖片

這一方法實際上就是結(jié)合了簡化和連筆的方式,但氣質(zhì)還是有明顯的區(qū)別的。

圖片

這里在筆畫上我簡化的不算特別多,橫豎筆畫設(shè)定的粗細較為類似,撇捺點這一類筆畫在起筆和收筆處還是保留了一些角度,并沒有完全切平。

圖片

首先還是搭建結(jié)構(gòu),不管做什么變化,都要在結(jié)構(gòu)穩(wěn)定的基礎(chǔ)上去做,不然字體會越變越亂的,一直使用思源宋呢,是因為可以免費商用,即使改動不大也不用擔(dān)心版權(quán)問題,如果大家有基礎(chǔ),可以選擇其他墊底字。

圖片

這里的連筆形式絕大多數(shù)都是基于手寫的規(guī)律而連接的,就不再重新畫草圖分析了。

圖片

最后再簡單排個版,加個英文和一點小裝飾即可。

圖片

 

 

圖片

這一方法是比較簡單且很容易出效果的,常規(guī)的宋體結(jié)構(gòu)很容易就看膩了,這個時候我們可以考慮用楷體的結(jié)構(gòu),但依然使用宋體的筆畫,最終效果就是下面的樣子了。

圖片

首先還是要稍微設(shè)定一下筆畫的造型,這種形式不用設(shè)定太復(fù)雜的筆畫造型,常規(guī)一點就可以了,因為結(jié)構(gòu)并不是常規(guī)的宋體,所以設(shè)計感也并不體現(xiàn)在筆畫上。

圖片

下面選擇一個稍微正一點的楷體來墊底參考結(jié)構(gòu),這里我選的是華文楷體,然后拉高了一點。

圖片

這里也可以稍作一點變動,比如口字部分下方的橫筆替換成提的形式是比較常用的方法,愿字上邊的一撇延伸進下邊,從而省略掉橫筆的一部分,也有結(jié)合前面的一些知識點,大家可以靈活去處理。

圖片

最后簡單排一下就好了。

圖片

 

 

圖片

共性這一概念之前有單獨開過一篇文章來寫,所以這里就不贅述太多了,簡單來理解,這里用到的共性就是筆畫上的統(tǒng)一,我們可以從一組字當(dāng)中尋找相同位置,且相似或相同造型的筆畫,進行夸張?zhí)幚?,這樣就得到了一組有特征,但整體又很統(tǒng)一的字形了。所以我們還是得先畫草圖來尋找共性筆畫。

圖片

嘗試過后,發(fā)現(xiàn)這一組字當(dāng)中,適合做共性筆畫的要么是撇的筆畫,要么是豎筆延長成豎撇的形式,像第一組,撇筆畫的位置在每個字當(dāng)中并不是很統(tǒng)一,所以不是很好的選擇,而第二組則要好得多,維度壁字下邊是強行做的這種處理,有些不和諧,但整體來看是沒問題的,所以這里選擇第二種,延長豎筆。

圖片

下面還是老樣子,墊底,搭建結(jié)構(gòu),就完了,說實話寫到這我有點膩了,但還是要繼續(xù)寫下去,既然說了是 16 種,那就得整完…

圖片

正常搭建好結(jié)構(gòu)后,就可以按照草圖階段的想法來進行延長筆畫了。

圖片

然后,排版,就好了。

圖片

 

 

圖片

這個算是偏技法類型的方式了,毫無難度,一看就會,學(xué)了肯定不會廢。常規(guī)的描邊形式我們都會做,一鍵轉(zhuǎn)換就好了。

圖片

在這個基礎(chǔ)上,把筆畫的邊緣剪斷,然后做一點延長或是交叉的處理,這樣就能讓字體具備一定的形式和設(shè)計感了。

圖片

然后還是排版,字體其實不排版的話,大多數(shù)看起來都會比較單薄,而且字體單獨出現(xiàn)的情況也比較少,所以盡量還是要排一下的。

圖片

沒什么難度,幾下就完事了,很快,希望你們每次都這么快。

 

 

圖片

這個方法其實不算是設(shè)計字體的方法,更多算是字體的排列布局的方式,主要就是要對一組字做一些大小變化,從而讓整體看起來比較有節(jié)奏感。但這里要注意一個問題,字雖然有大小變化了,但筆畫粗細是不變的。

首先我們要對所做的字進行大致的分析,哪個字應(yīng)該大,哪個字應(yīng)該小。一般來說,筆畫多的字我們可以做的大一點,筆畫少的字就做得小一點。

圖片

且上中下或上下結(jié)構(gòu)的字則可以做的瘦高一些,左中右以及左右結(jié)構(gòu)的字則做的寬一些。這是基于漢字的基本結(jié)構(gòu)而有的規(guī)律,當(dāng)然你也可以自己去設(shè)定規(guī)則。

圖片

那其實還有一個點需要注意,就是對齊的位置,要么是底對齊,要么頂對齊,要么居中都在一條水平線上,具體要看整體排出來的美感來選擇。

圖片

其實三種都是可以的,因為整體的節(jié)奏是沒問題的,“小大大小小”。這里我選擇最后一種居中對齊的形式,開始搭建字形。

圖片

可以看到,這里我也做了大量的簡化,甚至橫豎筆畫我都是用鋼筆畫的等粗線條…我承認偷懶了。所以這種方法可以與前面很多知識點相結(jié)合,能做出很多有意思的宋體字,最后排版也比較簡單。

圖片

 

 

圖片

這個方法有點類似給筆畫加裝飾,但不需要那么夸張,我們只需要在正常字體的基礎(chǔ)上,對筆畫稍稍加一點改變就可以有不同的效果和氣質(zhì)。

圖片

搭建字形的步驟我就不磨嘰了,還是一樣的方法,正常做完就這樣,雖然這里我換了一種形式的筆畫,但還是比較常規(guī),沒什么意思。

圖片

在這一基礎(chǔ)上,稍稍對筆畫邊緣加入一點類似毛筆字拖出來的墨跡形式,整體就變得好玩多了。

圖片

這種小細節(jié)不一定要加在所有筆畫上面,大家可以選擇性的添加一些即可,全都加了反而無趣了,最后添加上排版即可。

圖片

 

 

圖片

民國時期的美術(shù)字可以說是已經(jīng)達到了巔峰,現(xiàn)在大家做的很多變化以及形式,有很多都是借鑒于民國時期,這里先稍微看幾個例子。

圖片

可以看到,變化形式非常豐富,S 形狀的筆畫,口字部分的變化,星星元素,幾何元素,各種連筆造型等。那具體做法也比較簡單,我們只要在正常搭建好結(jié)構(gòu)之后,適當(dāng)替換一些民國字的特征筆畫進來即可。

圖片

最后添加排版,雖然是借鑒了民國字的筆畫,但這里看起來并不老氣,還是非常好用的。

圖片

需要注意的是這里調(diào)整的更多的其實還是撇捺點這一類的筆畫,橫豎筆畫還是比較少做變動的。

 

 

圖片

虛擬連筆,實際上就是基于常規(guī)連筆的一個延展而已,只不過這種形式的適用范圍也比較廣。

那做法其實就是用稍微細一點的線條,來勾勒出連筆的走勢而已,只帶出局部,并非真正的連接上。(ps:這個方法借鑒了岳昕老師的字。)

圖片

最后再加上偷懶式排版。

圖片

這里再稍微多說幾句,這里面的筆畫我是用鋼筆畫的兩種粗細的線條,而撇捺的部分采用的是豎筆粗細,然后用寬度工具把收筆的部分給拖窄一點就好了,也是個偷懶神器。

圖片

 

 

圖片

常規(guī)的字體在視覺上看著都是比較接近正方形的,所以我們偶爾可以對字體的字面進行夸張?zhí)幚?,非常寬扁又或是非常瘦高,都會很直觀的給到視覺感受,這樣看著就比較陌生,那相應(yīng)的也就有了設(shè)計感。

圖片

這個就不做案例了,調(diào)整完字面后可以和前面所有的方式做結(jié)合。

 

 

圖片

宋體的筆畫修飾一般都不會很大,所以當(dāng)我們嘗試把這些修飾放大處理的時候,那設(shè)計感自然也就有了,放大特征的對象主要就是橫筆的末端,和豎筆的起筆或收筆處,當(dāng)然也包括撇的起筆,甚至是連筆的特征都可以去放大處理。也是一個一秒就學(xué)會的方式。

圖片

 

 

圖片

這也是一個專門開過一篇文章來講的方式,西文中用在宋體中的表現(xiàn)更為優(yōu)秀,因為筆畫特征較為特別,且西文的數(shù)量極為龐大,具體做法就是通過拆分西文的筆畫,以提取出橫豎撇捺點等中文筆畫。

圖片

乍一看好像英文的最大特征并不能結(jié)合多少,這時候就要去思考問題了,像英文中的一些細線的變化非常相似連筆的形式,所以我們可以在中文當(dāng)中去尋找一些可以做連筆的位置,來借鑒英文的特征結(jié)合進去。可以結(jié)合墊底字大致畫一下草圖進行嘗試。

圖片

不需要畫的很細致,自己能看懂就行,這組字可以做的瘦高一些會更能凸顯英文特征的氣質(zhì),所以我們可以適當(dāng)調(diào)整一下,就可以直接開始拼字了。

圖片

還是很簡單的,大家只需要多注意西文筆畫與中文筆畫的契合度,以及把曲線刻畫的流暢一些就問題不大了。

圖片

 

 

圖片

這里主要是對于古籍碑帖的一些提取與借鑒,相對來說要難一點點,我們先來看一下碑帖。

圖片

首先我們要做的就是提取筆畫,其實主要就是橫筆的造型要提取出來,其余的筆畫都可以通過橫筆來進行延展。那橫筆的起筆部分造型還是很好提取的。

圖片

其次是收筆,但這里的收筆造型并不容易提取出一個明確的造型,所以這里我直接就做成了最簡單的三角形。

圖片

其次就是對于豎筆的延展了,豎筆的部分我們可以直接把橫筆豎起來,這樣能最直接的保證筆畫造型的統(tǒng)一,相應(yīng)的撇的造型也有了,至于捺和點的造型,使用正常宋體的造型就可以了。

圖片

下面直接把碑帖墊在下面使用楷體的結(jié)構(gòu),然后宋體的筆畫,和前面講到的宋楷結(jié)合是一個意思。

圖片

當(dāng)然也可以把它改成正常宋體的結(jié)構(gòu),筆畫處理成平直的就好了,但結(jié)構(gòu)上會有一些變動,大家可以參考字庫來調(diào)整視覺上的平衡。

圖片

這個方法的可塑性是比較強的,因為會涉及到比較多的主觀處理,下面我再放幾個之前做的這種類型的字。

圖片

圖片

圖片

圖片

好了,那這期教程就到這了,我們下期再見,告辭老鐵。


作者:猴子

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》一次教你16種宋體字的變化!

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


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


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



海報排版設(shè)計沒有想法,這招真的很有用?。?/a>

seo達人



一部97年的科幻類型電影,我們來一起看看它的海報設(shè)計有什么值得我們學(xué)習(xí)的地方。

圖片

當(dāng)我們手里有幾張照片時,上面這張海報的設(shè)計方式就特別適合我們借鑒,三張照片依次等距裁切下來,標(biāo)題放在視覺中心處,文本的編排可以貼著圖片的邊界放,效果就出來了。

圖片

這張和上面那張方式類似,主體是兩張照片裁切,信息全部居中對齊,色調(diào)進行了統(tǒng)一。

圖片

這張我們可以學(xué)習(xí)的是什么呢,首先是人物的雙重曝光手法,是人物主體經(jīng)常用到的方式,再就是背景的重要性,后面用了漸變的圓形來增強視覺效果,所以有時候背景不需要太復(fù)雜,重復(fù)的元素就可以表現(xiàn)的很有感覺。

圖片

插畫形式往往更注重創(chuàng)意和視覺性,這里用了對稱構(gòu)圖,也傳達出電影核心要素是基因。

圖片

這張與上面的類似,變成了對角構(gòu)圖,同時元素的處理是寫實的,感覺上會有所不同。

圖片

這張主要的是創(chuàng)意的表達,將火箭的尾氣變成了基因。

注:以上圖片來源網(wǎng)絡(luò),版權(quán)歸設(shè)計者所有。

學(xué)會了嗎?


作者:設(shè)獵派

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》海報排版設(shè)計沒有想法,這招真的很有用??!

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


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


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



轉(zhuǎn)化利器-用戶行為模型

seo達人



圖片

試想一下我們只知道通過獎勵去激勵用戶行為的話,不僅會花費比較大的運營成本,有時候,還不一定見效。而對于我們自身的成長來說,如果一直都用這種套路,很容易形成“路徑依賴”,限制思維。所以我們需要把視野再拓寬一些,通過用戶行為的三大要素動機、能力、觸發(fā)挖掘更多的用戶動機,幫助我們做轉(zhuǎn)化。

 

圖片

“設(shè)計是人為的,為人的行為”,行為設(shè)計學(xué)是一門為改變用戶行為而設(shè)計的新興科學(xué),它起源于1930年哈佛大學(xué)的心理學(xué)家B.F.Skinner的一個實驗,結(jié)果表明:只要設(shè)計好激勵措施和機制,人就會按照設(shè)定的目標(biāo)推進。

試想一下我們在為用戶設(shè)計的過程中,在需求正確的情況下,目標(biāo)用戶依然覺得我們的產(chǎn)品不好用,多半是用戶完成某任務(wù)時行為路徑遇到問題。這些問題可能不符合用戶心理模型、行為路徑過長且未解決用戶核心問題等等。

那么,究竟是什么因素能夠激勵用戶行為的發(fā)生或改變呢?

福格行為模型BJ Fogg’s behavior model

這個模型是以斯坦福大學(xué)教師 Fogg2009 年發(fā)表的一篇論文為中心,總結(jié)了如何從設(shè)計上提高轉(zhuǎn)化率,其關(guān)鍵是Motivation-Ability-Trigger(動機-能力-觸發(fā)),三要素缺一不可;

圖片

● 任何一個行為的發(fā)生,都需要滿足以上三個要素——人們需要有產(chǎn)生行為的動機、要有發(fā)生行為的能力,以及正好有一個合適的觸發(fā)點

● 也就是說你如果想要用戶發(fā)生某種行為,你必須給到用戶足夠的動機,并且讓用戶有能力去做到,而且有一種能觸發(fā)用戶行動的觸發(fā)器

 

 

圖片

那么什么是動機?

我們常說洞察用戶需求,挖掘用戶痛點,其實就是在尋找用戶動機!

動機又分為內(nèi)在動機和外在動機兩種:

圖片

我們都在說折扣或獎勵,那屬于什么動機呢?在動機的范疇里屬于“外在動機”,如果說的形象點,它就像一個誘餌,吸引用戶去做某個行為,它給用戶產(chǎn)生的是一種“拉”力。

比如產(chǎn)品設(shè)計:獲得折扣,優(yōu)惠券,綁定會員(降低目標(biāo)會員的感知價格),對某類商品的折扣與其月銷量掛鉤,提高收益評估的感覺等。

如果說外在動機是一種“拉”力,那么在用戶的行為路徑里是否可以讓這個“拉”力變得更長。一步步牽引用戶完成訂單呢?

以到家精選為例:試想一下如果用戶從活動頁進來后一步一步的路徑進行下鉆,當(dāng)用戶從熱鬧的活動頁中一步一步到越來越冷靜的頁面會是怎樣的感受?是不是會懷疑我到底是否享受到活動給我?guī)淼睦?。通過活動延伸到用戶可觸達的每個路徑中,使其成功的形成一種牽引用戶的拉力。

圖片

除了有“拉”力外,還有沒有一種方式,能讓用戶自己產(chǎn)生動機,去做這件事,形成一種內(nèi)在的“推”力呢?其實是有的,這種動力,在動機理論里,就叫做“內(nèi)在動機”。

在用戶體驗中,我們所說的內(nèi)在動機是指用戶使用產(chǎn)品是因為產(chǎn)品本身激發(fā)了他們的興趣和欲望,當(dāng)用戶真正被內(nèi)在動機驅(qū)動的時候,使用這款產(chǎn)品本身就是最大的享受。所以內(nèi)在動機是可以被設(shè)計被引導(dǎo)的。

 

1、給予用戶足夠動機

當(dāng)用戶沒有足夠的動機時,行為就無法發(fā)生。常見消費者購買行為動機有以下幾種:可以根據(jù)用戶場景及產(chǎn)品特性去使用。

圖片

 求廉動機:

以到家精選為例:結(jié)合用研報告,通過熱力圖可以看到用戶在行為路徑中的價格模塊停留較久,說明用戶在這個模塊遇到了阻力,用戶在拆價格,算性價比。所以我們運用“求廉”動機的設(shè)計方法幫助用戶消除對于價格的阻力。

業(yè)務(wù)之前展示價格為2小時起,我們利用“黃金分割法”對價格進行分割,拆成單價以每小時起來喚醒用戶“求廉”的動機。

圖片

那么除了以上使用“價格分割法”以外,還有什么樣的表現(xiàn)形式讓用戶能感受到優(yōu)惠去引導(dǎo)用戶進行下一步操作?

其實用戶在價格方面只需感知3類信息,商品多少錢,優(yōu)惠了多少錢,原來多少錢。在價格表達方面我們可以使用價格錨定效應(yīng)等讓用戶感受到便宜。

那么在設(shè)計層面其實也可以把價格進行視覺化處理來體現(xiàn)便宜,如下圖中價格曲線的表達很好的詮釋了用戶對價格“降價”的心理走勢去設(shè)計的價格表達。

圖片

 求速(快)動機:

以到家精選為例:之前調(diào)研發(fā)現(xiàn)我們的用戶選擇當(dāng)天的服務(wù)的比較多,所以在用戶的行為路徑中我們需要將當(dāng)天能服務(wù)的能力傳遞給用戶,大家都知道服務(wù)是無形的,如何在線上界面中呈現(xiàn)給用戶服務(wù)感知。基于用戶LBS把服務(wù)人員的地理位置進行展示,傳遞給用戶服務(wù)“0距離”的感受。

一大波暖心服務(wù)就在你家附近,最快2小時就可以上門。這就是將服務(wù)要素進行數(shù)字化展示的意義-為用戶帶來確定性。

圖片

 

2、幫助用戶獲得能力

只有激勵手段是無法有效促成行為發(fā)生的,如果用戶沒有足夠的能力,我們需要想辦法幫助用戶“獲得能力”。福格博士提出了一條“能力鏈”,其中包含5個影響能力的因素:時間、資金、體力、腦力、日程。

圖片

以到家精選為例:我們在做老用戶下單路徑的時候,在老用戶這個場景中如何幫助老用戶快速完成下單是一直思考的,所以為了減少老用戶在下單過程中的損耗,直接把詳情頁去掉,減少用戶操作,老用戶直接從入口就可以到達訂單頁面從而快速完成下單。所以最好的方法,就是持續(xù)地用“能力鏈”來分析,找到問題所在,再針對問題重新設(shè)計。

圖片

 

3、觸發(fā)

有動機并且有能力,觸發(fā)才能有價值,用戶的行為=動機+能力+觸發(fā);根據(jù)不同動機和不同能力來說用戶的觸發(fā)點也會不一樣。

● 人們的行為并不完全是自己主動選擇的,而是在社會情境和個人因素的雙重作用下產(chǎn)生的。

● 不同動機不同能力的用戶需要不一樣的刺激

 a.場景刺激:適合高動機的人:

高動機高能力的人只需一個觸發(fā)點即可。低門檻吸引力高的活動,我們只需要將參與的按鈕做的醒目再醒目。例如很多活動會把按鈕做的很有點擊的欲望,在產(chǎn)品界面設(shè)計中也可以在用戶觸發(fā)的過程中。

圖片

 b.利益刺激:適合低動機、高能力的人 

這種用戶需要更多的事件來激發(fā)他們做某件事的動機;例如朋友在玩拼多多的時候讓我們幫忙助力,你是不是也曾經(jīng)被可以得到現(xiàn)金紅包去邀請更多的好友助力,其實你本來沒有想玩助力的,只是朋友分享了一個助力鏈接給我,上邊的現(xiàn)金紅包激勵以及輕易完成任務(wù)使你動心,心想這么容易領(lǐng)到,結(jié)果要經(jīng)過九九八十一難現(xiàn)金紅包才能到手。在這里“現(xiàn)金紅包助力”鏈接就是觸發(fā)器。

 c.場景+利益刺激:適合低動機、高能力的人 

對于利益刺激沒那么直接沒那么誘惑的時候,可以場景和利益一起更強烈的刺激,例如到家精選儲值卡充值促銷活動給人的感官意識是:儲值送會員可以加送其他福利給你,超級劃算超級便宜快來買!

圖片

其實在我們?nèi)粘9ぶ谐艘陨嫌脩粜袨槟P椭猓€有很多模型在設(shè)計中可以幫助我們解決問題,比如kano 模型、馬斯洛的層次需要理論等都可以輔助我們挖掘用戶需求,提升業(yè)務(wù)指標(biāo)。

 

 

圖片

以上是通過用戶行為的三大要素動機、能力、觸發(fā)結(jié)合工作中的實踐案例來講的,試想一下我們只知道通過獎勵去激勵用戶行為的話,不僅會花費比較大的運營成本,有時候,還不一定見效。而對于我們自身的成長來說,如果一直都用這種套路,很容易形成“路徑依賴”,限制思維。所以我們需要把視野再拓寬一些,能通過用戶行為模型挖掘更多的用戶動機,幫助我們做轉(zhuǎn)化。


作者:環(huán)鐵藝術(shù)家

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》轉(zhuǎn)化利器-用戶行為模型

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


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


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



日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔