當(dāng)看到一個(gè)產(chǎn)品的視覺效果時(shí),我們通常能很快地判斷出它是吸引人的還是哪兒有點(diǎn)不對(duì)勁。但是,很少有人能接著說出來為什么這樣設(shè)計(jì)的原因。
本文定義了影響UX的5條實(shí)用法則:
1. 比例
2. 視覺層級(jí)
3. 平衡
4. 對(duì)比
5.格式塔原則
遵循以下5條設(shè)計(jì)法則可以創(chuàng)造出全面周到的視覺效果,推動(dòng)用戶的參與度并提高可用性。
01 比例
定義:比例原則是指在布局中使用相對(duì)大小來展示設(shè)計(jì)元素的重要性和層級(jí)的優(yōu)先關(guān)系。
正確使用此原理最簡(jiǎn)單的方式是,最重要的設(shè)計(jì)元素的尺寸要比不重要的元素大。原因很簡(jiǎn)單,大的事物更能引起用戶的注意。在停車場(chǎng)中,當(dāng)前所在停車區(qū)域往往會(huì)突出顯示,這樣做的目的是加深用戶的記憶,方便回來取車。
良好的視覺設(shè)計(jì)通常使用不超過三種不同的尺寸。擁有一系列大小不同的設(shè)計(jì)元素,不僅能在排版上創(chuàng)造出多樣性,而且還能在頁(yè)面上建立視覺層級(jí)結(jié)構(gòu)。
確保最大程度地強(qiáng)調(diào)設(shè)計(jì)中最重要的部分,幫助用戶理解如何使用它。例如在Medium中,熱門文章在視覺上比其他文章更大。
02 視覺層級(jí)
定義:視覺層級(jí)的原理是指在布局中,按照元素的重要性排序來引導(dǎo)用戶的注意力。
視覺層級(jí)可以通過比例,顏色,間距,位置和其他各種信號(hào)的變化來實(shí)現(xiàn)。同時(shí)它也控制用戶最終的體驗(yàn)。如果很難確定頁(yè)面布局的具體位置,則很可能是其布局缺少清晰的視覺層級(jí)。
要?jiǎng)?chuàng)建清晰的視覺層級(jí)結(jié)構(gòu),請(qǐng)使用2–3種字體大小來向用戶展示頁(yè)面最重要的信息?;蛘邔?duì)重要的內(nèi)容使用明亮的顏色標(biāo)注,對(duì)次要內(nèi)容使用柔和的顏色。在Medium中,標(biāo)題、副標(biāo)題、正文具有清晰的視覺層級(jí),文章每部分的字體大小都和其重要性相對(duì)應(yīng)。
比例的大小也可以幫助定義視覺層級(jí),因此可以針對(duì)不同設(shè)計(jì)元素進(jìn)行各種比例的組合,一般的設(shè)計(jì)經(jīng)驗(yàn)是包含大、中、小三種設(shè)計(jì)組件。Uber中的視覺層級(jí)結(jié)構(gòu)就很清晰。地圖和輸入框?qū)Π敕珠_,輸入框上的灰色的背景引導(dǎo)用戶進(jìn)行下一步操作。
03 平衡
定義:平衡原則是指對(duì)設(shè)計(jì)元素進(jìn)行滿意的排列和比例設(shè)置。當(dāng)屏幕兩側(cè)存在分布相同(不一定對(duì)稱)的視覺元素時(shí),就會(huì)達(dá)到平衡。在設(shè)計(jì)時(shí)元素所占的面積在創(chuàng)建平衡時(shí)也很重要,而不僅僅是元素的數(shù)量。
平衡的布局可以是:
對(duì)稱:元素相對(duì)于中心線對(duì)稱分布
不對(duì)稱:元素相對(duì)于中心線不對(duì)稱分布
徑向:元素從中心的公共點(diǎn)放射分布
在設(shè)計(jì)中使用什么樣的布局取決于想要傳達(dá)的內(nèi)容。對(duì)稱的布局安靜而穩(wěn)定,例如The Hub Style Exploration的界面展現(xiàn)了穩(wěn)定的對(duì)稱布局。
不對(duì)稱的布局是動(dòng)態(tài)的并且引人入勝,創(chuàng)造了一種活力和動(dòng)感。Nike的設(shè)計(jì)布局,顯示出與品牌相稱的具有運(yùn)動(dòng)感的不對(duì)稱的布局。
而徑向的布局始終將用戶的注意力引向視覺中心,Brathwait手表在徑向上保持平衡,所以注意力立即被吸引到表盤的中心。
04 對(duì)比
定義:對(duì)比原理別。是指將視覺上不同的元素并列排布,以傳達(dá)這些元素不同的功能類別。換句話說,對(duì)比為用戶提供了不同對(duì)象在大小或顏色上的明顯差異。
對(duì)比原則通常利用顏色來進(jìn)行分辨。例如,在UI設(shè)計(jì)中紅色通常代表刪除,而綠色代表同意或繼續(xù)。換句話說,對(duì)比為用戶提供了不同對(duì)象在大小或顏色上的明顯差異。
通常在UX中說起對(duì)比度,我們會(huì)想到文字與其背景之間的對(duì)比。有時(shí)設(shè)計(jì)人員會(huì)故意降低文字的對(duì)比度,用來表示不太重要的內(nèi)容。
但是在降低文字對(duì)比度的同時(shí)文字的可讀性也會(huì)降低,這會(huì)導(dǎo)致用戶無法看清文字內(nèi)容。在Greenhouse Juice的包裝上,瓶身上文字的可讀性取決于果汁的顏色。在深色果汁瓶身上文字對(duì)比強(qiáng),可讀性比較好,但是淺色果汁瓶身上的文字幾乎無法識(shí)別。
05 格式塔原理
定義:格式塔原理解釋了人類如何簡(jiǎn)化和組織由許多元素組成的復(fù)雜圖像,通過下意識(shí)的將各個(gè)部分安排到一個(gè)有組織的系統(tǒng)中,而不是將它們解釋為一系列不同的元素。
格式塔原理指出了我們傾向于感知整體而不是個(gè)體元素。在NBC徽標(biāo)中,中間空白處并沒有孔雀,但我們的大腦卻能自動(dòng)填補(bǔ)空缺的部分,感覺到孔雀的存在。
在Uber的注冊(cè)頁(yè)面中,字段標(biāo)簽靠近其相應(yīng)的文本框,這樣能輕松理解需要在哪些文本框中輸入信息。
總結(jié)
除了使某些東西看起來“漂亮”之外,理解和利用這些法則還有助于:
1. 增加可用性。遵循這些視覺設(shè)計(jì)原則能夠設(shè)計(jì)出易于使用的頁(yè)面布局。
2. 激發(fā)積極情感。美好的事物會(huì)引發(fā)積極的情緒。美學(xué)-可用性效應(yīng)表明,當(dāng)人們發(fā)現(xiàn)外觀上具有吸引力的設(shè)計(jì)時(shí),可能會(huì)對(duì)設(shè)計(jì)的可用性更寬容。
3. 增強(qiáng)品牌認(rèn)知度。強(qiáng)大的視覺系統(tǒng)可以幫助建立用戶對(duì)產(chǎn)品的信任和興趣。
文章來源:站酷 作者:Clippp
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)
當(dāng)你為你的項(xiàng)目創(chuàng)建有效的,可訪問的,漂亮的ui時(shí),只需要最小的調(diào)整來幫助快速改善你的設(shè)計(jì)。 努力創(chuàng)造。在這篇簡(jiǎn)短且易于理解的指南中,我收集了一些容易放置的內(nèi)容。在實(shí)踐中,這些小技巧可以毫不費(fèi)力地幫助你改善你的設(shè)計(jì),還有用戶體驗(yàn)。
希望你喜歡!
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界(只是一個(gè)陰影比你的實(shí)際影子)周圍的某些元素可以使這些元素出現(xiàn)
更清晰,更清晰,幫助你避免那些看起來泥濘的陰影。
標(biāo)題給一個(gè)更好的光學(xué)范圍。減少長(zhǎng)格式正文的字母間距?這是一個(gè)大大的“不”。但對(duì)于標(biāo)題……我要說“是”!
你的標(biāo)題很可能會(huì)比他們的標(biāo)題更大,更重。相比于正文,字母之間的間距有時(shí)會(huì)出現(xiàn)視覺上更大,這并不是你想要的。減少字母間距,只是少量,可以使你的標(biāo)題視覺平衡,更易于閱讀,通常更賞心悅目。
為了一致性,確保你的圖標(biāo)具有相同的視覺風(fēng)格。確保它們擁有相同的視覺風(fēng)格;同樣的重量,要么填滿,要么秒變了。不要混搭。
只使用一種字體就很好。在設(shè)計(jì)時(shí),使用單一字體是絕對(duì)沒問題的,這樣做實(shí)際上可以幫你產(chǎn)生更強(qiáng)、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量,大小和顏色,你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個(gè)單獨(dú)的字體。
留白是UI設(shè)計(jì)朋友。大膽的使用。適度的留白,即使是少量的白色物質(zhì),但要使用得當(dāng)。能讓你的設(shè)計(jì)透氣,而且看起來更光亮。
創(chuàng)建長(zhǎng)篇內(nèi)容?給20 pt試試。對(duì)于長(zhǎng)形式的內(nèi)容(即微博文章,項(xiàng)目描述等等),試著這樣做20pt(甚至更多一點(diǎn))為你的文本字號(hào)。當(dāng)然,這取決于所選擇的字體,但大多數(shù)流行的字體在20pt時(shí)效果得很好,并帶來更好的閱讀體驗(yàn)當(dāng)你的用戶面對(duì)一堵文字墻的時(shí)候。18pt太過時(shí)了。
使用字體比例定義一個(gè)適合的字體大小集。使用字體比例可以幫助您輕松、實(shí)用地定義一組字體大小。顧名思義,Type Scale基于一個(gè)比例因子(比如1.25)工作的。從一個(gè)基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?,H?等),或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來和諧的文本字號(hào)集。因?yàn)樗麄兊拇笮「鶕?jù)設(shè)定的固定比例增加和減少。
選擇一個(gè)基本顏色,然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計(jì)。如果項(xiàng)目允許,簡(jiǎn)單地使用一個(gè)有限的調(diào)色板選擇一個(gè)基地顏色,然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡(jiǎn)單的方式來改變你的設(shè)計(jì)。
改善用戶登錄的體驗(yàn)。記住拇指規(guī)則。允許用戶在任何時(shí)候跳過您的移動(dòng)應(yīng)用程序上線序列,并且放置跳過鏈接在拇指容易觸及的位置。只是一個(gè)簡(jiǎn)單的調(diào)整,可以為你的用戶提供更好的體驗(yàn)……
記住,拇指仍然是主宰!
你的影子來自其中一個(gè)光源對(duì)吧?確保你的影子總是來自一個(gè)光源。這是一個(gè)簡(jiǎn)單的錯(cuò)誤,但它可以讓你的設(shè)計(jì)看起來更拋光且統(tǒng)一。記住,我們不是生活在一個(gè)擁有一千個(gè)太陽(yáng)的國(guó)度里。
使用更好的字體組合,效率會(huì)很很快。當(dāng)你想要提高你的字體組合技巧的時(shí)候,當(dāng)面對(duì)1000個(gè)字體選擇,只是去尋找對(duì)應(yīng)的自己集合,效率會(huì)快很多。
文字和圖像與一個(gè)微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置,您可以選擇嘗試,并測(cè)試完整的圖像覆蓋,或更微妙的(從下到上,或從上到下)漸變疊加,以實(shí)現(xiàn)兩者之間的簡(jiǎn)單對(duì)比。為了在你的文本之間形成良好的對(duì)比,不要太復(fù)雜的內(nèi)容和圖片。
太多就會(huì)導(dǎo)致用戶體驗(yàn)不合格。盡量只在標(biāo)題和小段落中使用中心文字。對(duì)于幾乎所有其他內(nèi)容,保持文本左對(duì)齊。你的用戶會(huì)感謝你的你。
當(dāng)選擇一個(gè)多用途的文字,盡量找一個(gè)大量權(quán)重。你搜索的字體有很多選擇嗎?重量、風(fēng)格?如果你打算在你的一些項(xiàng)目中使用它,請(qǐng)嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話,我建議你避開這些。當(dāng)然也有例外,某些項(xiàng)目會(huì)要求“只有一種風(fēng)格”
更精致的字體,但對(duì)于絕大多數(shù)項(xiàng)目,你想要的字體再多一點(diǎn)就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格,希望你在設(shè)計(jì)過程的后期需要更多的空間。
想要?jiǎng)?chuàng)造更容易理解的界面,對(duì)吧?把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時(shí),不要讓你的文本太亮。
當(dāng)涉及到長(zhǎng)形式的內(nèi)容時(shí),某些常規(guī)的粗細(xì)字體仍然可以看。但太重了,在屏幕上會(huì)很僵硬。你可以很容易地解決這個(gè)問題,選擇一些像深灰色(即#4F4F4F)的基調(diào),把文字往下寫,讓眼睛更容易看。
總是通過icon最突出的內(nèi)容。你認(rèn)為這是常識(shí),對(duì)嗎?我并不覺得。通過使用色彩對(duì)比度做區(qū)分,尺寸和標(biāo)簽,確保盡可能突出。如果可以的話,不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽,那就使用它們,讓用戶更好地理解。
當(dāng)你的字體變小時(shí),請(qǐng)?jiān)黾有懈撸赃_(dá)到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡(jiǎn)單地降低行高。
使用x-height來測(cè)試字體的可讀性?;旧?,x-height是一個(gè)小寫字母' x '相對(duì)于大寫字母高度 (T)的相同字體。如果你的字體有一個(gè)大的x高,通常有助于更好地閱讀,特別是在使用長(zhǎng)形式的正文文本。另一種確定字體可讀性,并縮小范圍的方法如果你有一些無法選擇的字體,可以做這個(gè)測(cè)試,比較來自特定字體的三個(gè)字符:大寫字母I,小寫的L和數(shù)字1。
當(dāng)設(shè)計(jì)一個(gè)在應(yīng)用程序內(nèi)部使用的菜單時(shí),確保提供最多經(jīng)常使用的動(dòng)作(例如:上傳圖像,添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇,會(huì)給你的產(chǎn)品帶來生命。簡(jiǎn)單地從你的產(chǎn)品圖片中選擇顏色,然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景,文字,圖標(biāo)或更多,可以添加。你的設(shè)計(jì)具有豐富的視覺趣味和個(gè)性。
基于字體的x坐標(biāo),設(shè)置您的線高度。不同x高的字體需要不同的行高測(cè)量,實(shí)現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即:18px)它們的x的高度可以有很大的不同,這在選擇正確的線的種類起著很大的作用高度來實(shí)現(xiàn)。
突出最重要的元素。通過使用字體大小,權(quán)重,顏色和布局的組合,可以很輕松的突出UI中最重要的元素。只是很簡(jiǎn)單,但微妙的調(diào)整,讓用戶體驗(yàn)更好一點(diǎn)。
操作錯(cuò)誤的時(shí)候,添加一個(gè)額外的視覺輔助。在用戶剛剛采取的操作附近添加一個(gè)錯(cuò)誤消息可以是簡(jiǎn)單的形式,但很有幫助,當(dāng)他們填寫任何形式的表格時(shí)額外的視覺輔助。
嘗試在移動(dòng)端創(chuàng)建慷慨的熱區(qū)。當(dāng)為移動(dòng)設(shè)備設(shè)計(jì)時(shí),嘗試創(chuàng)建足夠大的可點(diǎn)擊區(qū)域,是好的。對(duì)于只包含文本的按鈕和鏈接來說,這是很有挑戰(zhàn)性的,盡可能使用帶有標(biāo)簽的圖標(biāo)。
以下是iOS和Android的最小推薦點(diǎn)擊區(qū)域:
44 x 44pt用于iOS
48x48dp用于Android
在短標(biāo)題上盡量使用全大寫。如果你想在標(biāo)題上使用全大寫,請(qǐng)確保它們?cè)谌魏螘r(shí)候都很短。有可能,最好是一行。將它們用于較長(zhǎng)的文本是不好的。和之前的技巧一樣,在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢,而且視覺效果更好。
在輕文本和圖像之間,保持可接受的對(duì)比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡(jiǎn)單地應(yīng)用一個(gè)稍微不透明的背景在你的文本后面將保持這些元素之間的對(duì)比度很好。
看看這些很棒的字體,用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題,設(shè)計(jì)感很強(qiáng)。(我沒有推廣費(fèi)用,請(qǐng)放心用)
看看這些很棒的字體,用于長(zhǎng)文本是非常好的,強(qiáng)烈推薦使用。(我仍然沒有任何推廣費(fèi))。
標(biāo)題和正文。當(dāng)你想實(shí)現(xiàn)一個(gè)好的垂直節(jié)奏,以及一個(gè)強(qiáng)大的視覺之間,需要對(duì)文本元素排版、間距作設(shè)計(jì)。我見過許多設(shè)計(jì),最常見的是在文章列表中,它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等,這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下,我總是會(huì)給我的標(biāo)題更多的頂部邊距,而在底部,標(biāo)題和下面的內(nèi)容之間的連接是更強(qiáng),有良好的垂直節(jié)奏,視覺層次保留在所有的文章之間。
對(duì)于下載指標(biāo),試著去做盡可能提供信息。對(duì)于用戶,嘗試使具有信息性的下載指示符對(duì)用戶很友好。你可以通過使用顏色來實(shí)現(xiàn)這一點(diǎn),用百分?jǐn)?shù)來顯示當(dāng)前進(jìn)度,一個(gè)簡(jiǎn)單的圖標(biāo),讓他們可以在任何地方取消下載時(shí)間。
如果你能保持標(biāo)題簡(jiǎn)短,簡(jiǎn)潔……“想做就做”。
如果可以,如果合適的話,保持標(biāo)題簡(jiǎn)短,時(shí)髦,切中要點(diǎn)。而不是“這是你的風(fēng)格,你的方式”,簡(jiǎn)單地使用像這樣的“你的風(fēng)格。你的方式?!比藗儠?huì)瀏覽,保持這些標(biāo)題簡(jiǎn)短有力有助于他們更快地消化中的信息。
記住,這種方式可能會(huì)讓人感覺很突然,你需要考慮一下你所從事的項(xiàng)目類型,以及目標(biāo)受眾來決定方法是合適的,相對(duì)于更標(biāo)準(zhǔn)的格式。
正確的設(shè)計(jì)“聲音”。在項(xiàng)目中處理文本時(shí),選擇正確的字體將影響就像你說話的聲音一樣。要大聲,要柔和,要友好,要正式,要有趣。每一種字體都有自己獨(dú)特的聲音,關(guān)鍵在于找到合適的字體你正在做的項(xiàng)目的聲音。當(dāng)你剛接觸字體時(shí),這似乎是一項(xiàng)艱巨的任務(wù),所以不要害怕從類似的項(xiàng)目中獲得靈感,并從這些項(xiàng)目中汲取靈感它們有助于影響你的決定,并提高你的理解什么是合適的。
你的正文,并提高可讀性處理正文文本,并試圖找到合適的行長(zhǎng)度可能有點(diǎn)平衡。對(duì)于一個(gè)單獨(dú)的列頁(yè)面,45到75個(gè)字符被普遍認(rèn)為是滿意的行長(zhǎng)度,而行長(zhǎng)度為66個(gè)字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然,字體大小和行高在決定可讀性時(shí)也起著重要作用,但是對(duì)于行長(zhǎng),保持在45到75個(gè)字符之間,就會(huì)更好了。
偶爾使用純裝飾的幽靈文字也可以,但要保留閱讀的問題。屏幕上的大部分文本內(nèi)容應(yīng)該堅(jiān)持可用性最佳的做法是沒有問題的。但有時(shí),希望添加純出于裝飾目的的文本,我們不希望所有的設(shè)計(jì)都落入乏味。如果沒有元素會(huì)以任何方式影響用戶體驗(yàn),那么出于裝飾的原因,插入奇怪的元素是可以的。
使用戶界面中的元素彼此區(qū)分。按鈕、通知,ui中兩個(gè)獨(dú)立但重要的元素。如果可以的話,總是試著確保你的用戶能夠快速地將它們區(qū)分開來,輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕,在大多數(shù)情況下,將優(yōu)先,所以確保他們是最突出的。項(xiàng)目在屏幕上,并很容易區(qū)分其他元素。
只是一些細(xì)微的陰影,你所需要的。我們都喜歡陰影,對(duì)吧?它們可以作為微妙又很強(qiáng)大的視覺線索,在您的設(shè)計(jì)中使用要適度。現(xiàn)實(shí)世界中的陰影,在大多數(shù)情況下幾乎是不可察覺的,而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度,以實(shí)現(xiàn)一些的東西更微妙和栩栩如生。
使用全部大寫?選擇適合的字體,能夠達(dá)到光學(xué)清晰度。在你的設(shè)計(jì)中適度使用“全部大寫”是很好的。選擇一個(gè)合適的字體與行高和較重的字重,使用戶的光學(xué)清晰度。
讓面包屑脫穎而出,易于為用戶解釋。面包屑無處不在,經(jīng)常用于內(nèi)容豐富的網(wǎng)站,通過最小的調(diào)整,你可以確保用戶能夠快速定位他們?cè)谝粋€(gè)網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過使用跳轉(zhuǎn)到網(wǎng)站的某個(gè)深度,這一點(diǎn)尤其有用。
使用高度飽和的顏色?試一試用淺色調(diào)來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)可以讓網(wǎng)站看起來很棒,但是當(dāng)過度使用時(shí),它們會(huì)使使用者的眼睛疲勞,主要是在使用的時(shí)候的文字內(nèi)容。盡可能使用時(shí)要適度,并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色,以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心,與更柔和的顏色采取較少突出角色,讓用戶的眼睛休息一下。記住,在選擇顏色時(shí),可讀性和可訪問性應(yīng)該是最優(yōu)先的。
在ui中使用已建立的圖標(biāo),為了避免給用戶造成混淆。在你的設(shè)計(jì)中添加圖標(biāo)時(shí),試著選擇一個(gè)有代表性的已建立的圖標(biāo)。不要選擇一個(gè)能傳達(dá)正確含義和功能的圖標(biāo)否則會(huì)引起困惑,成為用戶的認(rèn)知障礙。不要在這些圖標(biāo)上過于叛逆。
在眾多經(jīng)過嘗試和測(cè)試的設(shè)計(jì)原則中,這里有一個(gè)是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計(jì)元素放置在一起的過程,表明彼此之間的關(guān)系,這有助于加快用戶的認(rèn)知。
4pt基線網(wǎng)格+ 8pt網(wǎng)格=單一網(wǎng)格。當(dāng)使用類型時(shí),8點(diǎn)網(wǎng)格旁邊使用4點(diǎn)基線
可以為你的設(shè)計(jì)帶來更和諧的垂直節(jié)奏。您需要對(duì)齊您的類型到基線網(wǎng)格4,使用的行高值為4的倍數(shù)(16、20、24、28等)
為什么4?我發(fā)現(xiàn)在過去使用特定的文本大小時(shí),按8的倍數(shù)縮放是不太合適。
減少標(biāo)題上的行高是很好的。與長(zhǎng)形式的主體文本不同,它需要足夠的行高,以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。
選顏色有困難計(jì)劃嗎?在顏色上進(jìn)行類比論。類似的顏色,也被稱為相鄰或相鄰的色調(diào),是其中之一最和諧的配色方案,可以大大幫助你,如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個(gè)簡(jiǎn)單的,顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時(shí),可以使用類似的方法。
在你的設(shè)計(jì)中盡量提高信噪比。你可以在你的設(shè)計(jì)中通過最大化信號(hào)來實(shí)現(xiàn)清晰和可用性最小化噪聲,從而產(chǎn)生高信噪比。您可以通過確保提供相關(guān)信息(信號(hào))來實(shí)現(xiàn)這一點(diǎn)有效,不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎?嘗試所有小寫字母。使用較重的字體和大寫會(huì)顯得有點(diǎn)正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項(xiàng)目時(shí),使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達(dá)到較強(qiáng)的對(duì)比。
當(dāng)使用類型時(shí),元素不需要尖叫“看看我!”一直如此但他們確實(shí)需要一個(gè)平衡的等級(jí)制度。只需通過重量、大小和顏色進(jìn)行細(xì)微的調(diào)整就可以實(shí)現(xiàn)這一點(diǎn)。這樣做可以讓用戶掃描并找到必要的元素,避免在過程中產(chǎn)生任何混淆。
養(yǎng)肥了,字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景,選擇一個(gè)更輕的粗細(xì)。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點(diǎn)字體重量,特別是對(duì)于長(zhǎng)表單副本。以最佳的易讀性為目標(biāo),避免讓用戶的眼睛疲勞。
試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的,有一種直觀的感覺,當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的,使您的內(nèi)容講給他們直率和情感的水平。
你是否使用全大寫的短行文本?嗯…這是一個(gè)好主意,增加這些字母之間的間距,以達(dá)到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理,因?yàn)樽帜父啾舜藚^(qū)分。字母之間的間距只要稍微增加一點(diǎn)就可以。
打開這些錯(cuò)誤消息,您的表格有幫助。在使用表單時(shí),請(qǐng)嘗試并確保錯(cuò)誤消息得到解釋。出了什么問題,如何補(bǔ)救??偸亲層脩袅私馇闆r,即使是像常規(guī)一樣常見的事情的形式。讓這些錯(cuò)誤消息有用,不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會(huì)發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見性是一個(gè)重要的原則要遵循,并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應(yīng)用了某個(gè)動(dòng)作。在應(yīng)用特定的操作之前,總是嘗試并詳細(xì)地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為,如刪除某些東西。讓用戶知道將要發(fā)生什么,并在此之前要求他們進(jìn)行確認(rèn)。他們就會(huì)按下那個(gè)標(biāo)有“刪除”的紅色大按鈕。
文章來源:站酷 作者:卡洛設(shè)計(jì)雜貨鋪
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)
Duoton icon
漸變色已經(jīng)流行了段時(shí)間,雙色漸變?cè)O(shè)計(jì)依然持續(xù)是一個(gè)大趨勢(shì),因?yàn)閱我坏纳{(diào)無法滿足產(chǎn)品所需,雙色調(diào)圖標(biāo)的特點(diǎn)就是色彩對(duì)比鮮明,青春活力,這種相比單色調(diào)圖標(biāo),更適合應(yīng)用于一些主流偏年輕化產(chǎn)品,因此設(shè)計(jì)師還可以通過設(shè)計(jì)色彩打動(dòng)用戶,提升產(chǎn)品競(jìng)爭(zhēng)力,工具化產(chǎn)品也可以使用這樣有層次的圖標(biāo),不過使用時(shí),需要對(duì)色彩進(jìn)行克制使用。因此,如果您希望自己的設(shè)計(jì)界面脫穎而出,可以去大膽的使用雙色調(diào)色彩。
1. 雙色調(diào)多層質(zhì)感(彌散漸變,直投影,混合模式)
2. 雙色調(diào)混合模式疊加
Alpha icon 圖標(biāo)風(fēng)格最大特點(diǎn)就是單色帶透明漸變,通過弱透明度來制造視覺層次,如果是純白色,就會(huì)顯得圖標(biāo)平庸了一些,這種圖標(biāo)運(yùn)用范圍可以是界面中空?qǐng)鼍盎蛘咭恍╆P(guān)鍵模塊的主功能圖標(biāo)。
如下圖左側(cè)大卡片上面圖標(biāo)應(yīng)用思路。
層疊式圖標(biāo),相比于純白色線條圖標(biāo),它帶來一種更舒適的質(zhì)感,其設(shè)計(jì)方法是通過穿插層疊的手法,將日常我們所見到的單一的線條圖標(biāo),變得更具有視覺層次感,當(dāng)然這種圖標(biāo)使用場(chǎng)景一般會(huì)是在功能說明性頁(yè)面,功能介紹等。
品牌植入一直是非常大趨勢(shì),包括今年我們所看到兩大廠的品牌更新IBM和UBER等,都是將品牌核心符號(hào)植入設(shè)計(jì)中,我想這樣的思路在2020年將持續(xù)會(huì)是一個(gè)重要表達(dá)產(chǎn)品氣質(zhì)和記憶點(diǎn)手法打造思路之一,因?yàn)橛脩粢呀?jīng)很熟悉目前圖標(biāo)模式,如何能創(chuàng)新區(qū)別其他產(chǎn)品,那么融入品牌將是一個(gè)不錯(cuò)的選擇~品牌的融入技巧有高低之分,需要設(shè)計(jì)師去巧妙設(shè)計(jì)
同樣多鄰國(guó)在前段時(shí)間更新品牌,并將其LOGO特征符號(hào)植入字體中。
同樣多鄰國(guó)在前段時(shí)間更新品牌,并將其特征元素植入字體中
動(dòng)態(tài)圖標(biāo)是一個(gè)能提升產(chǎn)品體驗(yàn)的方法之一,也是微交互中的一種,它可以增加產(chǎn)品趣味性,F(xiàn)acebook在評(píng)論入口的表情動(dòng)畫就運(yùn)用了動(dòng)態(tài)圖標(biāo), 包括蘋果Apple Pay支付成功圖標(biāo)動(dòng)畫,Google Assistant智能助手,Messenger中的打招呼動(dòng)畫等等我們可以逐漸發(fā)現(xiàn)動(dòng)態(tài)圖標(biāo)比靜態(tài)圖標(biāo)的表達(dá)性更強(qiáng),更受到青睞,隨著硬件升級(jí),這種動(dòng)態(tài)圖標(biāo)運(yùn)用逐漸在越來越多場(chǎng)景可見到。
備注(因?yàn)橐曨l比較麻煩,因此省略了)
文章來源:優(yōu)波設(shè)計(jì) 作者:設(shè)計(jì)TNT
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)
隨著體驗(yàn)設(shè)計(jì)的持續(xù)發(fā)展,行業(yè)內(nèi)各領(lǐng)域的體驗(yàn)設(shè)計(jì)質(zhì)量都有了很大的提升,并且各個(gè)競(jìng)品之間的差距越來越小。而更高的界面細(xì)節(jié)設(shè)計(jì)質(zhì)量不僅是各個(gè)大廠產(chǎn)品體驗(yàn)設(shè)計(jì)的追求,也是我們拉開競(jìng)品差距的關(guān)鍵一環(huán)。我們平時(shí)可能閱讀了很多理論知識(shí)文章,但往往在實(shí)際工作中卻較少運(yùn)用。學(xué)習(xí)掌握理論基礎(chǔ)知識(shí)固然是很重要的,但在設(shè)計(jì)執(zhí)行時(shí)掌握設(shè)計(jì)技巧也更能提升工作的效率和質(zhì)量。那么在設(shè)計(jì)執(zhí)行層遇到問題有沒有一些立竿見影的解決方案呢?本篇文章分別從視覺、內(nèi)容和交互三個(gè)角度總結(jié)了十個(gè)界面細(xì)節(jié)設(shè)計(jì)點(diǎn),希望可以幫助你遇到問題時(shí)另辟蹊徑,延伸更好的設(shè)計(jì)思路。
在封面和背景圖設(shè)計(jì)的場(chǎng)景中,我們?yōu)榱俗尫饷嫔系男畔⒛軌蚋菀卓辞澹ǔ?huì)在文字下添加一層黑色半透明或者漸變蒙層,但你有想過這個(gè)蒙層可以不止是黑色的嗎?
在設(shè)計(jì)社區(qū)話題詳情頂部背景圖時(shí),我們采用封面圖模糊處理后作為背景圖的方案,為保證信息能夠清晰顯示會(huì)在背景上加一個(gè)深色半透明蒙層。當(dāng)用純黑色作為蒙層時(shí)淺色背景可能會(huì)顯得很臟,這時(shí)可以改用深灰色讓背景看起來不會(huì)太臟,加入深灰色可以減弱部分背景的黑色讓背景圖看起來更加柔和。下圖左邊是用黑色#000000、30%不透明度,右邊是深灰#333333、30%不透明度??梢钥闯鲇疫叿桨傅男Ч黠@更清爽一些。當(dāng)然更好的方案是通過客戶端拾取背景圖顏色后生成對(duì)應(yīng)色相的深色蒙層,但這個(gè)方案設(shè)計(jì)相對(duì)比較復(fù)雜。需要制定一系列拾色和生成對(duì)應(yīng)色值的規(guī)范,并且開發(fā)成本偏高。有條件的話也可以考慮應(yīng)用。
界面中使用圓角設(shè)計(jì)更能讓用戶感到親和力和舒適感,所以運(yùn)用場(chǎng)景也非常廣泛。除了比較常見的封面、卡片、按鈕等等圓角的使用場(chǎng)景,在一些細(xì)節(jié)的處理運(yùn)用圓角也能提升設(shè)計(jì)品質(zhì)。比如下圖中頭像和背景圖的銜接處、按鈕和底欄背景的相交缺口處如果運(yùn)用常規(guī)的切割邊角就比較尖銳,會(huì)略顯生硬。
而添加了圓角處理后視覺上會(huì)更加柔和更協(xié)調(diào),對(duì)比一下前后的方案不難發(fā)現(xiàn)圓角的效果更勝一籌。不要看只是一點(diǎn)很小的細(xì)節(jié),其實(shí)也體現(xiàn)了設(shè)計(jì)師對(duì)細(xì)節(jié)的細(xì)心追求,用戶看了也會(huì)體會(huì)到設(shè)計(jì)師的用心。
另外再介紹一下我個(gè)人在sketch中快速繪制這類圓角銜接的方法。以下圖為例,首先頭像的圓形描邊需要單獨(dú)畫一個(gè)白色的圓形圖層,而不能直接在頭像上添加描邊。然后把圓形圖層和白色矩形圖層設(shè)為聯(lián)集,再將圖層路徑合并。然后在兩個(gè)銜接處的兩邊各添加一個(gè)錨點(diǎn),注意兩個(gè)錨點(diǎn)和銜接點(diǎn)的距離一定要相等,這個(gè)距離決定了圓角的大小,可以根據(jù)需要來調(diào)整。之后把銜接點(diǎn)的錨點(diǎn)類型改為“筆直”,再給這個(gè)錨點(diǎn)添加圓角半徑。這樣銜接點(diǎn)的圓角繪制就完成啦。另外運(yùn)用布爾運(yùn)算來畫出圓角也是可以的,具體方法可以根據(jù)個(gè)人習(xí)慣來選擇。
我們?cè)陧?yè)面取色時(shí)經(jīng)常會(huì)給背景色和陰影等結(jié)合場(chǎng)景帶有一些顏色傾向,以達(dá)到更舒適的視覺效果,其實(shí)這個(gè)方法也適用于文字。為了提升效率,我們習(xí)慣了在選擇字色時(shí)使用一套設(shè)計(jì)規(guī)范里的顏色,比如#333333、#999999等等。但是個(gè)別的特殊模塊我們是可以根據(jù)實(shí)際情況調(diào)整以獲得更好的視覺效果的。比如下面這個(gè)案例是一個(gè)熱帖榜單的入口模塊,為了提高信息層級(jí)讓頁(yè)面更有活力,這里選擇用淺黃色作為背景。如果使用規(guī)范的字色與背景的結(jié)合會(huì)相對(duì)不太協(xié)調(diào),這里選擇字色時(shí)就可以讓文字顏色和背景顏色帶有相同的色相,選用高飽和度低明度的顏色,并且次級(jí)信息同時(shí)可以帶一點(diǎn)不透明度。讓整個(gè)模塊視覺更統(tǒng)一,信息與背景更融合。
類似這樣的場(chǎng)景其實(shí)還有很多,有時(shí)我們也不必拘泥于設(shè)計(jì)規(guī)范中,適當(dāng)?shù)母鶕?jù)模塊定制化一些細(xì)節(jié)可以達(dá)到更好的視覺效果。
我們經(jīng)常會(huì)遇到一個(gè)頁(yè)面中有多個(gè)同級(jí)圖標(biāo)排列的情況,不管是用宮格排列或是列表排列都需要每個(gè)圖標(biāo)整齊有序、尺寸統(tǒng)一。但實(shí)際情況下不可能每個(gè)圖標(biāo)尺寸都完全統(tǒng)一。一般這種情況我們可以給每個(gè)圖標(biāo)統(tǒng)一添加一個(gè)相同尺寸的矩形圖層作為背景板,將背景板隱藏后再整體編組,這樣一來就能保證每個(gè)圖標(biāo)所在的組都是相同的尺寸就能統(tǒng)一對(duì)齊了。
然鵝,我們有時(shí)會(huì)遇到一些不規(guī)則形狀圖標(biāo),尺寸是奇數(shù)甚至是帶小數(shù)的。這種情況圖標(biāo)如果要在背景板上完全居中,我們可以打開首選項(xiàng)中的圖層項(xiàng),關(guān)閉契合像素功能,然后可以拖動(dòng)圖標(biāo)或者用對(duì)齊功能讓圖標(biāo)與背景板對(duì)齊。不要忽略這一兩個(gè)像素的差別,這些微小的細(xì)節(jié)往往決定了界面設(shè)計(jì)的嚴(yán)謹(jǐn)和精致程度。
另外,我們可以根據(jù)情況靈活調(diào)整圖標(biāo)在背景板中的位置,例如左右箭頭圖標(biāo)為了與頁(yè)面其他內(nèi)容邊距對(duì)齊,可以將圖標(biāo)貼合背景板左右兩邊。這樣就能減少后期開發(fā)還原調(diào)整的工作量,提高工作效率。
標(biāo)題信息在界面設(shè)計(jì)中使用頻率非常高,而在設(shè)計(jì)過程中我們可能會(huì)忽略極限字?jǐn)?shù)的情況,導(dǎo)致開發(fā)還原時(shí)實(shí)際效果不理想。下面以一個(gè)案例來分享一下標(biāo)題極限值的處理方法。
在騰訊動(dòng)漫社區(qū)改版中設(shè)計(jì)話題詳情頁(yè)的標(biāo)題時(shí),產(chǎn)品規(guī)劃標(biāo)題的字?jǐn)?shù)為12個(gè)字符,在右邊有看漫畫按鈕的情況下是顯示不完全的。這個(gè)情況就要考慮設(shè)計(jì)極限值的顯示方案。常規(guī)的方案有:1、顯示不完全時(shí)后面顯示“...”;2、換行顯示。考慮到詳情頁(yè)需要將標(biāo)題完全展示,所以方案一不可行。而方案二在單行和雙行兩種情況下視覺效果不好統(tǒng)一。最終經(jīng)過思考決定使用方案三:標(biāo)題顯示不全時(shí)左右滾動(dòng)展示,可以在保證視覺統(tǒng)一同時(shí)顯示完整的標(biāo)題。
同樣的,在很多情況下我們由于空間受限無法展示完整信息時(shí),這個(gè)方案也不失為一個(gè)很好的選擇。
在頁(yè)面設(shè)計(jì)工作中我們有時(shí)會(huì)遇到信息容器邊界固定,而容器內(nèi)信息可以滑動(dòng)的情況。例如下圖中頂部導(dǎo)航和音樂播放的歌詞頁(yè)面,這種場(chǎng)景下一般容器邊界不會(huì)做明顯的界限,如果內(nèi)容在邊界處是直接被裁切的話體驗(yàn)的感受就會(huì)比較割裂。我們可以嘗試更好的解決方案,在容器邊界增加漸變過渡,這樣信息在邊緣的過渡就變得柔和,頁(yè)面整體更協(xié)調(diào)。
這種漸變的過渡的應(yīng)用場(chǎng)景還有很多,比如瀏覽簡(jiǎn)介或者文章時(shí),需要隱藏部分內(nèi)容并提供展開閱讀全文的操作。利用漸變過渡也能隱喻還有未完全展示的內(nèi)容,降低用戶的理解成本并且也能夠讓用戶有心理預(yù)期。
另外在sketch上呈現(xiàn)這種漸變過渡也很方便,如果背景是純色的話可以在邊界處添加一個(gè)與背景色相同顏色的色塊,然后給色塊添加添加不透明度從0~100的漸變,這個(gè)方法比較簡(jiǎn)單。如果遇到背景復(fù)雜的情況,也可以繪制一個(gè)和容器相同大小的矩形,在矩形邊緣添加不透明度從0~100的漸變,然后建立蒙版把信息剪切到矩形中。
至于開發(fā)實(shí)現(xiàn)的方案還是要和開發(fā)哥哥具體溝通,確保用最便捷的方案還原出最好的效果。
動(dòng)態(tài)流是我們非常常見的樣式,是分發(fā)用戶生產(chǎn)內(nèi)容的主要載體之一。主要包含了用戶信息、文字、圖片和視頻等內(nèi)容。一般情況支持九張圖片或一個(gè)視頻,在有多張圖片時(shí),可以如下圖做成宮格的樣式適配,每張圖片截取中間的正方形部分。
而只有一張圖片或者視頻時(shí),為了保證圖片和視頻的預(yù)覽效果,通常會(huì)做大尺寸的預(yù)覽圖,而圖片的寬高尺寸并不固定,所以只截取中間方形的方案并不能滿足要求,我們要根據(jù)這個(gè)情況做單獨(dú)的適配方案。首先我們要設(shè)定一個(gè)裁切的比例,比如我們?nèi)∝Q圖最小裁剪寬高比為2:3,橫圖最大裁剪寬高比為3:2(這里的寬高比并不是固定的,可以根據(jù)實(shí)際需要自己定義比例,采用4:3、16:9等比例都是可以的)。這樣當(dāng)圖片寬高比小于2:3時(shí),我們可以把圖片中間區(qū)域按寬高2:3裁剪出來;圖片寬高大于2:3并且小于3:2時(shí)可以按原圖比例預(yù)覽;而圖片寬高大于3:2時(shí),把圖片中間區(qū)域按寬高3:2裁剪出來。另外要注意要給圖片設(shè)置最大高度,否則圖片高度太高會(huì)減少頁(yè)面信息承載量,降低閱讀效率,相應(yīng)的也要限制最大寬度,否則會(huì)使圖片規(guī)則不統(tǒng)一,從而頁(yè)面適配效果不協(xié)調(diào)。
同樣的,這個(gè)規(guī)則也適用于視頻,由于全面屏手機(jī)占比越來越高,這些手機(jī)拍攝的視頻大多是19:9、20:9的寬高比例,相比視頻常用的16:9的比例更加細(xì)長(zhǎng),所以橫屏視頻可以統(tǒng)一裁剪為16:9比例,而豎屏視頻可以裁剪為9:16比例。
動(dòng)態(tài)流圖片適配的核心是制定一個(gè)適配的規(guī)范來保證閱讀的舒適度和效率。而這個(gè)規(guī)范并不是恒定的,可以根據(jù)自身平臺(tái)需要來制定,以上僅作為一個(gè)示例供參考哦。
隨著沉浸式設(shè)計(jì)的趨勢(shì),很多頁(yè)面會(huì)采用無標(biāo)題欄的設(shè)計(jì)。例如下圖的個(gè)人中心頁(yè)面,頂部利用背景圖來渲染品牌氛圍。但是這類無標(biāo)題欄頁(yè)面的上滑交互普遍有個(gè)缺陷,就是如果未經(jīng)處理上滑后內(nèi)容會(huì)與頂部電池條者是置頂?shù)陌粹o位置重疊。這種類似“穿幫”的情況給用戶的體驗(yàn)就是設(shè)計(jì)處理不夠嚴(yán)謹(jǐn)。然而這種交互細(xì)節(jié)也是可以優(yōu)化改善的。
優(yōu)化的原理也很簡(jiǎn)單,就是在上滑過程中添加一個(gè)標(biāo)題欄來分割頁(yè)面內(nèi)容,從而讓內(nèi)容和頂部元素不重疊。標(biāo)題欄可以隨上滑高度改變不透明度,以達(dá)到柔和的過渡從而實(shí)現(xiàn)絲滑的交互體驗(yàn)。
類似的處理方案在各大平臺(tái)也有較為廣泛的應(yīng)用。
在用戶體驗(yàn)發(fā)展的趨勢(shì)中,無論是交互的反饋或者是圖片、信息等都趨于由靜態(tài)向動(dòng)態(tài)發(fā)展。常規(guī)的靜態(tài)圖片承載的信息相對(duì)有限,所以在有限的載體內(nèi)讓內(nèi)容動(dòng)起來展示更大的信息量不失為一個(gè)很好的選擇。
在舊版本的iOS12系統(tǒng)中有一個(gè)視圖選擇的功能,用戶在這個(gè)頁(yè)面可以選擇標(biāo)準(zhǔn)視圖和放大視圖,并且有三張圖可以滑動(dòng)展示不同場(chǎng)景下兩個(gè)選項(xiàng)的差異,但是這個(gè)方案需要來回切換標(biāo)簽和滑動(dòng)圖片來對(duì)比差異,效率很低。而在之后改版的iOS13系統(tǒng)中,這三張靜態(tài)圖被替換成了兩張動(dòng)圖,輪流切換三個(gè)場(chǎng)景的頁(yè)面,用戶不需要再滑動(dòng)圖片就能更加直觀的對(duì)比兩個(gè)選項(xiàng)的差異。這個(gè)小改動(dòng)不僅可以讓圖片展示更多的信息,還能減少用戶的操作成本提升操作上的體驗(yàn),讓閱讀效率更高。
類似的延展應(yīng)用場(chǎng)景也有很多,例如新功能引導(dǎo)動(dòng)畫、動(dòng)態(tài)banner等等。其實(shí)原理都是一樣的,在常規(guī)靜態(tài)圖的基礎(chǔ)上優(yōu)化為動(dòng)態(tài)圖,不僅能增加信息的承載量,提高閱讀效率,也能讓頁(yè)面更有活力。
為了滿足運(yùn)營(yíng)的需要,我們有時(shí)會(huì)在多同級(jí)個(gè)圖標(biāo)或者按鈕中突出其中的一個(gè)。例如下圖的分享彈窗,想要在多個(gè)分享途徑中突出微信的圖標(biāo),但同時(shí)又要保證圖標(biāo)風(fēng)格的一致性,這時(shí)就可以利用微動(dòng)效來達(dá)到強(qiáng)調(diào)的效果。
而微動(dòng)效的落地形勢(shì)也有很多種,下面拋磚引玉介紹幾種簡(jiǎn)單高效的方案。
可以看到添加了微動(dòng)效后不僅可以達(dá)到強(qiáng)調(diào)某一個(gè)對(duì)象的目的,同時(shí)也能保證每個(gè)圖標(biāo)風(fēng)格的統(tǒng)一,微動(dòng)效也讓頁(yè)面更活潑有靈性,不失為一舉多得的方案。
微動(dòng)效的形勢(shì)當(dāng)然不局限于上面幾種,大家也可以發(fā)散思維,創(chuàng)造更多有創(chuàng)意的方案。
文章來源:站酷 作者:騰訊動(dòng)漫TCD
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)
如果需要設(shè)計(jì)一個(gè)輪播,我們應(yīng)該考慮哪些因素?如何讓輪播更具有價(jià)值?如何讓輪播的體驗(yàn)更好?如何避免輪播常見的問題。
提到輪播首先可能想到的是廣告,我們經(jīng)常在移動(dòng)端首頁(yè)或網(wǎng)站首頁(yè)會(huì)看到各式各樣的輪播banner,不管在移動(dòng)端還是網(wǎng)頁(yè)上通常點(diǎn)擊數(shù)據(jù)都是非常差的,本篇文章帶你深入了解banner輪播。
如果需要設(shè)計(jì)一個(gè)輪播,我們應(yīng)該考慮哪些因素?如何讓輪播更具有價(jià)值?如何讓輪播的體驗(yàn)更好?如何避免輪播常見的問題。
本篇文章通過以下幾點(diǎn)探索輪播的特性,預(yù)計(jì)閱讀20分鐘
目錄
1、用戶真的使用輪播嗎
2、輪播的輪換形式
3、輪播的進(jìn)度展示
4、輪播定位
5、輪播的切換
6、對(duì)輪播進(jìn)行分類
7、使用縮略圖進(jìn)行預(yù)知
8、輪播異形化
9、輪播時(shí)間
10、總結(jié)
一、用戶真的使用輪播嗎
用戶是否對(duì)輪播有感知,這個(gè)則需要根據(jù)不同的場(chǎng)景進(jìn)行判斷,包括每個(gè)產(chǎn)品中的每個(gè)輪播對(duì)用戶用戶的定位也不相同,常見的應(yīng)用場(chǎng)景品牌曝光、活動(dòng)營(yíng)銷、產(chǎn)品展示,每個(gè)場(chǎng)景下相關(guān)的數(shù)據(jù)也不相同。
促銷輪播banner
品牌推廣輪播banner
產(chǎn)品介紹輪播banner
同時(shí)還有個(gè)關(guān)鍵因素,輪播的占比,這里以pc端為例若是產(chǎn)品是以品牌效應(yīng)吸引用戶的,大多輪播是以大的屏幕占比為主通常會(huì)占首屏的50%,如果是以營(yíng)銷、內(nèi)容為主的產(chǎn)品,輪播通常以16:9、7:4的常規(guī)比例進(jìn)行展示。
輪播的頁(yè)數(shù)
用戶在使用產(chǎn)品時(shí)會(huì)默認(rèn)忽略輪播區(qū)域,一般輪播都會(huì)有自動(dòng)輪換機(jī)制,一定時(shí)間后自動(dòng)輪放下一張banner,那么每當(dāng)頁(yè)面上進(jìn)行輪播時(shí)便會(huì)吸引用戶進(jìn)行關(guān)注,效果上會(huì)有一定的提升,所以在輪播中第二張第三張的效果往往會(huì)比第一張輪播的效果更有效一些。
還有一種用戶比較喜歡關(guān)注輪播過去的banner以此來滿足好奇心。
如果banner是作為內(nèi)容傳播希望用戶通過banner了解內(nèi)容,那么則要避免放在最后一位置,對(duì)于用戶而言最后一張輪播路徑過于長(zhǎng),并且用戶很少會(huì)手動(dòng)滑動(dòng)banner。
國(guó)外一家公司在針對(duì)輪播中進(jìn)行了相關(guān)的研究測(cè)試,隨著頁(yè)數(shù)的增加用戶的點(diǎn)擊逐步下降。
那么如果想讓產(chǎn)品中的輪播更具有效果,則需要根據(jù)不同的場(chǎng)景設(shè)定策略達(dá)到目的。
二、輪播的輪換形式
不管在移動(dòng)端還是手機(jī)端,輪播都有各種交互形式和尺寸,以pc為例在交互上會(huì)多樣化一些,常見的幾種則是通過滾輪滑動(dòng)、通過點(diǎn)擊切換兩種。
如下圖某藝術(shù)網(wǎng)站,它則是通過鼠標(biāo)滾輪進(jìn)行切換輪播banner,并且banner的占比也是鋪滿首屏,這種輪播形式適合一些品牌、產(chǎn)品宣傳等相關(guān)的網(wǎng)站以此來突出產(chǎn)品的亮點(diǎn),同時(shí)也符合用戶目標(biāo)。
在看下面這個(gè)醫(yī)美網(wǎng)站它的切換方式則是通過鼠標(biāo)點(diǎn)擊進(jìn)行切換,并且占比也是鋪滿首屏,在醫(yī)美領(lǐng)域用戶更關(guān)注美感,而輪播形態(tài)也是符合用戶的心理預(yù)期更加沉浸美觀。
而在移動(dòng)端輪播的形式就比較統(tǒng)一,大多都是自動(dòng)播放+手指滑動(dòng)進(jìn)行切換。
三、輪播的進(jìn)度展示
在網(wǎng)頁(yè)中輪播都會(huì)有當(dāng)前的定位點(diǎn),許多用戶的習(xí)慣是點(diǎn)擊進(jìn)度條進(jìn)行切換banner這樣能夠更快的達(dá)到目標(biāo),不用一張一張切換,但是在有些產(chǎn)品中會(huì)忽略這一點(diǎn),設(shè)計(jì)中會(huì)做的非常小導(dǎo)致用戶在點(diǎn)擊上可用性不太友好,如下圖中的banenr進(jìn)度點(diǎn)設(shè)計(jì)上過于小導(dǎo)致點(diǎn)擊上有些阻礙。
如以下網(wǎng)站去除進(jìn)度定位的方式,通過縮略圖預(yù)覽來告知用戶下一個(gè)banner的內(nèi)容,空白區(qū)域也可以添加縮略圖引導(dǎo)介紹等關(guān)鍵信息,幫助用戶提前預(yù)知在體驗(yàn)上相對(duì)較好。
以下國(guó)外某網(wǎng)站在進(jìn)度定位的設(shè)計(jì)上采用了標(biāo)簽文案方式進(jìn)行設(shè)計(jì),能夠幫助用戶更加全局的了解banner內(nèi)容
四、輪播的定位
定位主要是用來指示當(dāng)前輪播的進(jìn)度,像上圖中講的便于用戶更加全局的觀看banner的張數(shù)和當(dāng)前進(jìn)度。
以下網(wǎng)站的設(shè)計(jì)中則把定位與進(jìn)度相結(jié)合,進(jìn)度條展示該banner預(yù)計(jì)多久會(huì)切換下一張,對(duì)于自動(dòng)切換的產(chǎn)品輪播這個(gè)更直觀的進(jìn)度展示體驗(yàn)上相對(duì)較好。
以下是某個(gè)國(guó)外網(wǎng)站,不管是pc還是移動(dòng)端都在輪播底部添加了水平條,告知用戶當(dāng)前位置
隨著市場(chǎng)上產(chǎn)品同質(zhì)化嚴(yán)重,產(chǎn)品的競(jìng)爭(zhēng)力也更依賴體驗(yàn),在下圖中的數(shù)據(jù)可視化的網(wǎng)站上,在進(jìn)度條上就利用了產(chǎn)品的特性以餅狀圖的形式進(jìn)行展示。
五、輪播的切換
在剛才上面舉的例子中很多優(yōu)秀的網(wǎng)站在設(shè)計(jì)上都很有創(chuàng)新性,但是需要注意一個(gè)點(diǎn),在輪播中不只有自動(dòng)播放,還需要考慮用戶手動(dòng)切換,因?yàn)樵趯?shí)際用戶瀏覽中可能會(huì)對(duì)產(chǎn)品的播放時(shí)間達(dá)不到預(yù)期,此時(shí)則會(huì)使用手動(dòng)切換,除去可點(diǎn)擊的進(jìn)度點(diǎn),還需要上一張和下一張的入口切換。
在此基礎(chǔ)上需要注意,在處于最后一張banner時(shí),下一張切換還能不能點(diǎn)擊,第一張時(shí)上一張切換還能不能切換,這個(gè)取決于產(chǎn)品特性和輪播張數(shù),如果輪播張數(shù)過小的話則需要進(jìn)行循環(huán)播放,如果過多的頁(yè)數(shù)則第一步和最后一步不可點(diǎn)擊。
切換的距離和位置
上一張和下一張的距離遠(yuǎn)近取決于banner的大小,如果輪播banner占比較大時(shí)則需要考慮用戶的操作時(shí)長(zhǎng),距離越短時(shí)間越快,為了避免用戶操作失誤在相對(duì)較近的切換按鈕則需要在視覺上做的比較突出,便于用戶尋找。
如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大,保持視覺平衡,因?yàn)樾^(qū)域banner用戶能夠更加全局的觀看,在使用上不會(huì)猶豫。
反觀移動(dòng)端在輪播中除了展示banner進(jìn)度外很少展示切換按鈕,移動(dòng)端更加依賴手勢(shì)交互。
六、對(duì)輪播進(jìn)行分類
當(dāng)輪播banner過多時(shí)利用標(biāo)簽進(jìn)行分類,用戶通過點(diǎn)擊標(biāo)簽進(jìn)行查看相關(guān)的輪播組合。
此方式更適合一些電商平臺(tái)、新聞網(wǎng)站這種內(nèi)容過多的產(chǎn)品
如下圖國(guó)外社交媒體網(wǎng)站則使用了標(biāo)簽進(jìn)行分類,此處提一句輪播不僅限于首屏banner。他的用處可落地在各個(gè)場(chǎng)景。
七、使用縮略圖進(jìn)行預(yù)知
在banner首屏中,顯示的內(nèi)容越多,越能激發(fā)用戶進(jìn)行點(diǎn)擊,像上面講過的農(nóng)業(yè)產(chǎn)品網(wǎng)站就使用下一張預(yù)覽圖的形式進(jìn)行展示,當(dāng)然不僅局限于這種形式,如下圖中的餐飲網(wǎng)站把所有的輪播banner展示給用戶觀看。
相對(duì)于縮放圖,圖標(biāo)展示效果上也較好,空間占用更少,使用這種方式需要謹(jǐn)慎,對(duì)圖標(biāo)的識(shí)別性要求較高,我印象中能夠使用的這種方法的網(wǎng)站是蘋果官網(wǎng),讓產(chǎn)品抽象化展示。
在移動(dòng)端也存在這種設(shè)計(jì)手法,但是基于分辨率原因移動(dòng)端的縮略圖展示過少,最常見的如下圖中的馬蜂窩和企鵝電競(jìng)。
八、輪播個(gè)性化
輪播最大的缺陷則是像剛開始講的用戶會(huì)默認(rèn)為廣告,對(duì)此可以使用個(gè)性化設(shè)計(jì)突破用戶心理障礙,使輪播banner更具備親和力。
如下圖中的數(shù)碼科技網(wǎng)站,利用產(chǎn)品與背景的結(jié)合營(yíng)造出一種功能性的展示。
再例如下圖中蘋果官網(wǎng)入口,結(jié)合百度的定制化功能在大搜中進(jìn)行個(gè)性化處理,把常規(guī)的banner輪播以功能卡片形式進(jìn)行展示,同時(shí)卡片承載產(chǎn)品動(dòng)畫引導(dǎo)用戶進(jìn)行點(diǎn)擊。
蘋果官網(wǎng)進(jìn)入后隨意點(diǎn)擊產(chǎn)品介紹頁(yè)后會(huì)發(fā)現(xiàn),蘋果把輪播結(jié)合鼠標(biāo)滾輪營(yíng)造沉浸式觀看,每個(gè)屏效內(nèi)都展示產(chǎn)品一個(gè)功能特點(diǎn),打破傳統(tǒng)banner的展現(xiàn)形式。
九、自動(dòng)輪播時(shí)間
自動(dòng)播放的輪播會(huì)根據(jù)用戶的耐心和用戶的訴求進(jìn)行調(diào)整優(yōu)先級(jí),如我們平常使用產(chǎn)品時(shí)會(huì)忽略banner廣告,我們會(huì)更加關(guān)注移動(dòng)中的東西,特別是在移動(dòng)端上通常是banner進(jìn)行輪播時(shí)才會(huì)關(guān)注。
谷歌設(shè)計(jì)團(tuán)隊(duì)曾對(duì)banner輪播的時(shí)間進(jìn)行測(cè)試,測(cè)試結(jié)果得出5s-7s的輪播時(shí)間最佳,在這個(gè)時(shí)間內(nèi)用戶有足夠的時(shí)間對(duì)輪播banner上的產(chǎn)品內(nèi)容進(jìn)行了解。
如下圖谷歌商店的輪播時(shí)間設(shè)定在6s。
同時(shí)還需要注意,在自動(dòng)播放的過程中如果用戶鼠標(biāo)hover上去后,則需要判定播放暫定,避免用戶錯(cuò)過感興趣的內(nèi)容。
十、總結(jié)
本文從輪播的樣式、特性、用戶對(duì)輪播的認(rèn)知等多方面的介紹,在實(shí)際產(chǎn)品中輪播有很多可用性上的問題存在,我們?cè)谠O(shè)計(jì)中則需要根據(jù)自己產(chǎn)品的特性、用戶群體特點(diǎn)等多維度去思考適合什么樣的輪播形式。
文章來源:UI中國(guó) 作者:愛吃貓的魚____
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)
一、什么是交互設(shè)計(jì)?
先來看一下百度百科的定義
交互設(shè)計(jì)(英文Interaction Design, 縮寫IXD),是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域,它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu),使之互相配合,共同達(dá)成某種目的。交互設(shè)計(jì)努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系,以“在充滿社會(huì)復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心。交互系統(tǒng)設(shè)計(jì)的目標(biāo)可以從“可用性”和”用戶體驗(yàn)“兩個(gè)層面上進(jìn)行分析,關(guān)注以人為本的用戶需求。簡(jiǎn)而言之,交互設(shè)計(jì)是解決特定場(chǎng)景下的人群如何高效使用機(jī)器或軟件的目標(biāo)行為。
為什么要做交互設(shè)計(jì)
在使用網(wǎng)站,軟件,消費(fèi)產(chǎn)品或各種服務(wù)的時(shí)候(實(shí)際上是在同它們交互),使用過程中的感覺就是一種交互體驗(yàn)。隨著網(wǎng)絡(luò)和新技術(shù)的發(fā)展,各種新產(chǎn)品和交互方式越來越多,人們也越來越重視對(duì)交互的體驗(yàn)。當(dāng)大型計(jì)算機(jī)剛剛研制出來的時(shí)候,可能為當(dāng)初的使用者本身就是該行業(yè)的專家,沒有人去關(guān)注使用者的感覺;相反,一切都圍繞機(jī)器的需要來組織,程序員通過打孔卡片來輸入機(jī)器語言,輸出結(jié)果也是機(jī)器語言,那個(gè)時(shí)候同計(jì)算機(jī)交互的重心是機(jī)器本身。當(dāng)計(jì)算機(jī)系統(tǒng)的用戶越來越由普通大眾組成的時(shí)候,對(duì)交互體驗(yàn)的關(guān)注也越來越迫切了。因此交互設(shè)計(jì)作為一門關(guān)注交互體驗(yàn)的新學(xué)科在二十世紀(jì)八十年代產(chǎn)生了。
從用戶角度來說,交互設(shè)計(jì)是一種如何讓產(chǎn)品易用,有效而讓人愉悅的技術(shù),它致力于了解目標(biāo)用戶和他們的期望,了解用戶在同產(chǎn)品交互時(shí)彼此的行為,了解“人”本身的心理和行為特點(diǎn),同時(shí),還包括了解各種有效的交互方式,并對(duì)它們進(jìn)行增強(qiáng)和擴(kuò)充。
通過對(duì)產(chǎn)品的界面和行為進(jìn)行交互設(shè)計(jì),讓產(chǎn)品和它的使用者之間建立一種有機(jī)關(guān)系,從而可以有效達(dá)到使用者的目標(biāo),這就是交互設(shè)計(jì)的目的。
二、交互設(shè)計(jì)常用原則和定律有哪些?
尼爾森十大可用性原則
1、狀態(tài)可見原則
系統(tǒng)應(yīng)該讓用戶時(shí)刻清楚當(dāng)前發(fā)生了什么事情,也就是快速的讓用戶了解自己處于何種狀態(tài)、對(duì)過去發(fā)生、當(dāng)前目標(biāo)、以及對(duì)未來去向有所了解,一般的方法是在合適的時(shí)間給用戶適當(dāng)?shù)姆答仯乐褂脩羰褂贸霈F(xiàn)錯(cuò)誤。
即在用戶操作界面功能時(shí)給予實(shí)時(shí)反饋,例如:頁(yè)面加載狀態(tài)提示、按鈕點(diǎn)擊后的狀態(tài)變化、進(jìn)度條提示等。
2、環(huán)境貼切原則
設(shè)計(jì)的一切表現(xiàn)和表述,盡可能貼近用戶所在的環(huán)境,將現(xiàn)實(shí)環(huán)境的操作功能巧妙的轉(zhuǎn)化為線上功能,使其貼近用戶。使用用戶能聽懂的專業(yè)術(shù)語,涉及到專業(yè)化語言時(shí)要轉(zhuǎn)化成用戶熟悉的語言。
即模擬真實(shí)的事物,使用戶更容易理解。例如:天氣應(yīng)用中的天氣插圖、音樂播放器的膠片都是生活中熟悉的場(chǎng)景和物品,降低理解成本。
3、操作可控原則
對(duì)于用戶的誤操作,提供二次確認(rèn)或者撤銷的功能,這樣可提高用戶的操作可控性。
例如:刪除聯(lián)系人二次確認(rèn)提示、消息可撤回操作。
4、一致性原則
遵循統(tǒng)一的產(chǎn)品設(shè)計(jì)規(guī)范/邏輯。這里的一致性包含產(chǎn)品和跨平臺(tái)產(chǎn)品之間的一致性。
一致性包含視覺交互、文案描述、組建樣式等,例如:微信小程序設(shè)計(jì)規(guī)范。
5、防錯(cuò)原則
設(shè)置防錯(cuò)的機(jī)制,減少用戶犯錯(cuò)。在用戶選擇動(dòng)作發(fā)生之前,就要防止用戶容易混淆或者錯(cuò)誤的選擇。
例如:用戶名稱校驗(yàn)提示、手機(jī)號(hào)碼位數(shù)限制等。
6、易取原則
減少用戶記憶負(fù)荷,在適合的時(shí)機(jī)給用戶需要獲取的信息。
例如:驗(yàn)證碼讀取、找人轉(zhuǎn)賬提示等。
7、靈活高效原則
提供靈活的操作和高效的獲取信息能力。
例如:手機(jī)號(hào)碼一鍵登錄、消息關(guān)鍵字識(shí)別等。
8、優(yōu)美簡(jiǎn)約原則
保留產(chǎn)品最主要的信息,如果不是優(yōu)先級(jí)最高,要盡一切可能避免去影響產(chǎn)品的簡(jiǎn)潔和美觀。
9、容錯(cuò)原則
用戶在使用產(chǎn)品過程中出現(xiàn)了問題,及時(shí)準(zhǔn)確的告知用戶出現(xiàn)問題的原因。
例如:信息輸入提示、搜索無結(jié)果等。
10、提供人性化幫助
在用戶需要的時(shí)候提供必要的幫助說明。
例如:新功能引導(dǎo)、解釋說明文案等。
七個(gè)交互設(shè)計(jì)定律
1、菲茲定律
點(diǎn)擊一個(gè)目標(biāo)的時(shí)間同以下兩個(gè)因素有關(guān):
(1)設(shè)備當(dāng)前位置和目標(biāo)位置的距離(D)。距離越長(zhǎng),所用時(shí)間越長(zhǎng);
(2)目標(biāo)的大?。⊿)。目標(biāo)越大,所用時(shí)間越短。
該定律經(jīng)常運(yùn)用于鼠標(biāo)從點(diǎn)A到點(diǎn)B的運(yùn)動(dòng)。
例如常用按鈕的尺寸設(shè)計(jì)等。
2、??硕?
一個(gè)人面臨的選擇(n)越多,所需要作出決定的時(shí)間(T)就越長(zhǎng)。
交互設(shè)計(jì)中要合理設(shè)置選項(xiàng),以免用戶使用中決策時(shí)間過長(zhǎng),降低使用效率。
3、米勒7±2定律
喬治米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究,他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7(±2)項(xiàng)信息塊,在記憶了 5-9 項(xiàng)信息后人類的頭腦就開始出錯(cuò)。
例如:手機(jī)號(hào)碼的分位顯示、應(yīng)用中標(biāo)簽欄數(shù)量等
4、鄰近性法則
人們通常將距離近的事物劃分為一組。
界面設(shè)計(jì)中可以用對(duì)象間的相對(duì)距離來區(qū)分信息層級(jí)。
5、復(fù)雜性守恒定律
每個(gè)應(yīng)用程序都具有其內(nèi)在的、無法簡(jiǎn)化的復(fù)雜度。無論在產(chǎn)品開發(fā)環(huán)節(jié)還是在用戶與產(chǎn)品的交互環(huán)節(jié),這一固有的復(fù)雜度都無法依照我們的意愿去除,只能設(shè)法調(diào)整、平衡。
例如:在智能手機(jī)出現(xiàn)之前,手機(jī)上的操作按鈕都是實(shí)體按鈕。在智能手機(jī)出現(xiàn)手,手機(jī)被整個(gè)屏幕占據(jù)后,所有的操作都集合在了手機(jī)系統(tǒng)之中,等于把物理操作轉(zhuǎn)移到了系統(tǒng)操作中,其本身的功能復(fù)雜程度并沒有發(fā)生改變,只是轉(zhuǎn)移了而已。
6、防錯(cuò)原則
大部分的意外都是由設(shè)計(jì)的疏忽,而不是人為操作疏忽。因此,在設(shè)計(jì)中要有必要的防錯(cuò)機(jī)制;在此,特別要注意在用戶操作具有毀滅性效果的功能時(shí)要有提示,防止用戶犯不可挽回的錯(cuò)誤。
例如:登錄時(shí)用戶名校驗(yàn),手機(jī)號(hào)碼位數(shù)限制等。
7、奧卡姆剃刀原則
“切勿浪費(fèi)較多東西去做,用較少的東西,同樣可以做好的事情。
”這個(gè)原理稱為“如無必要,勿增實(shí)體”,即“簡(jiǎn)單有效原理”。
在設(shè)計(jì)中可以使用戶關(guān)注最主要的信息而非其它無關(guān)緊要的事物,從而提升使用效率。
三、交互設(shè)計(jì)如何開展工作
首先在交互設(shè)計(jì)師拿到需求后不要急著打開軟件開始繪制線框圖,而是要先分析需求,了解產(chǎn)品的戰(zhàn)略層和范圍層的業(yè)務(wù)目標(biāo)。把握產(chǎn)品設(shè)計(jì)大方向,只有方向?qū)α撕竺娴墓ぷ鞑攀怯袃r(jià)值的。
把握了產(chǎn)品方向,下面就該進(jìn)行需求的分析,
首先針對(duì)需求考慮5個(gè)問題:
1、為什么要做這個(gè)功能?(業(yè)務(wù)需求)
2、產(chǎn)品期望得到怎樣的成果?(業(yè)務(wù)目標(biāo))
3、誰來使用?(目標(biāo)用戶)
4、他們要怎樣使用?(用戶需求)
5、如何讓他們都來使用?(將業(yè)務(wù)目標(biāo)轉(zhuǎn)化為用戶行為)
清楚這5個(gè)問題后,再根據(jù)交互設(shè)計(jì)流程進(jìn)行一步一步的進(jìn)行
這實(shí)際上就是對(duì)需求的戰(zhàn)略層分析。
我們進(jìn)一步分析業(yè)務(wù)需求(業(yè)務(wù)目的、業(yè)務(wù)目標(biāo))和用戶需求(目標(biāo)用戶、用戶體驗(yàn)?zāi)繕?biāo)),把握關(guān)鍵因素(用戶的動(dòng)機(jī)、擔(dān)憂和影響目標(biāo)達(dá)成的障礙)。
歸納這些需求,明確設(shè)計(jì)策略。
將“業(yè)務(wù)目標(biāo)”轉(zhuǎn)化為“用戶行為”,通過引導(dǎo)用戶的使用來幫助產(chǎn)品實(shí)現(xiàn)目標(biāo)。
從設(shè)計(jì)“用戶行為”到設(shè)計(jì)“用戶界面”,用戶行為決定了用戶界面,用戶界面也導(dǎo)致了用戶會(huì)出現(xiàn)什么樣的行為。
設(shè)計(jì)需求分析方法就是要幫助用戶創(chuàng)造動(dòng)機(jī)、排除擔(dān)憂、解決障礙。
四、如何進(jìn)行用戶研究,方法有哪些
評(píng)估的形式及方法
常見的評(píng)估形式分為三類:
1、評(píng)估主體:根據(jù)評(píng)估的主體不同來進(jìn)行區(qū)分,即誰來做評(píng)估。
按照評(píng)估主體來區(qū)分主要有兩個(gè)主體:用戶和專家
用戶評(píng)估主要靠收集用戶使用數(shù)據(jù),也就是用戶測(cè)試,它的數(shù)據(jù)相對(duì)客觀,但時(shí)間和費(fèi)用較多,評(píng)估范圍較窄。
專家評(píng)估是讓工程師及設(shè)計(jì)師等專家基于自身的專業(yè)知識(shí)和經(jīng)驗(yàn)進(jìn)行評(píng)估的一種方式。專家評(píng)估相對(duì)主觀,但費(fèi)時(shí)少、費(fèi)用少、評(píng)估范圍窄。
兩種評(píng)估方法可以相互補(bǔ)充,并結(jié)合使用。
2、評(píng)估性質(zhì):例如定性評(píng)估、定量評(píng)估或著其它方式。
按照評(píng)估的性質(zhì)來區(qū)分可以分為定量評(píng)估和定性評(píng)估。
定量評(píng)估是指對(duì)可以計(jì)量的部分進(jìn)行評(píng)價(jià),如點(diǎn)擊量、使用率等,可以用數(shù)據(jù)來說明。
定性評(píng)估是指對(duì)非計(jì)量性的部分進(jìn)行評(píng)價(jià),如流暢度、舒適性、創(chuàng)造性等進(jìn)行評(píng)價(jià)。它只能表示一個(gè)度,無法準(zhǔn)確用數(shù)據(jù)來說明問題。
3、評(píng)估過程:按照評(píng)估的過程來進(jìn)行區(qū)分。
從評(píng)估的過程來區(qū)分可以分為理性評(píng)估和感性評(píng)估。
理性評(píng)估相對(duì)客觀,從客觀的角度出發(fā)判斷客觀事物。
感性評(píng)估更為主觀,評(píng)估結(jié)果并沒有客觀規(guī)律。
在實(shí)際應(yīng)用中也需要將理性評(píng)估和感性評(píng)估結(jié)合使用,才能完整的完成我們的任務(wù),達(dá)到我們的目標(biāo)。
常見的評(píng)估方法有四種:
1、原型評(píng)估方法:在產(chǎn)品研發(fā)過程中,對(duì)于界面設(shè)計(jì)以及程序的測(cè)試來獲得用戶的反饋是至關(guān)重要的。以用戶為中心和交互式設(shè)計(jì)的重要因素之一就是原型方法,原型方法的目的是將界面設(shè)計(jì)與用戶的需求進(jìn)行匹配。
一般來說原型評(píng)估方法分為三大類型:
(1)快速原型:原型迅速成型并分配實(shí)施,在原型實(shí)驗(yàn)收集的信息基礎(chǔ)上,系統(tǒng)從草案中得以完善。
(2)增量原型:應(yīng)用與大型系統(tǒng),從系統(tǒng)的基本骨架開始,需要階段性的安裝,及系統(tǒng)的本質(zhì)特征是在初次安裝完成后允許階段性測(cè)試,以減少遺漏的重要特征。
(3)演化原型:對(duì)前期的設(shè)計(jì)原型不斷進(jìn)行補(bǔ)充和優(yōu)化,直到成為最后的系統(tǒng)。
2、簡(jiǎn)易測(cè)試評(píng)估方法
在條件不允許的情況下,可以采取簡(jiǎn)易的方法來對(duì)用戶體驗(yàn)進(jìn)行評(píng)價(jià)。步驟是:
(1)實(shí)驗(yàn)室環(huán)境準(zhǔn)備:準(zhǔn)備好測(cè)試用的電腦或其他媒介。兩個(gè)房間,房間1用來對(duì)被測(cè)試者進(jìn)行測(cè)試,房間2用于設(shè)計(jì)師和工程師的觀察。
(2)被試選擇:分為用戶組和專家組。
(3)進(jìn)行測(cè)試:房間1中被試者根據(jù)自己的選擇進(jìn)行操作和測(cè)試,同時(shí)說出自己的內(nèi)心想法,觀察員在調(diào)查表上記錄被試者的每一次的操作情況,包括出錯(cuò)情況和被試者的口語描述,當(dāng)被試者在測(cè)試過程中遇到困難或操作無法進(jìn)行時(shí),觀察員要給予一定的客觀提示。房間2中通過相關(guān)設(shè)備將房間1的情況傳輸?shù)椒块g2,設(shè)計(jì)師和工程師實(shí)時(shí)觀察和記錄被試者的情況,以便今后對(duì)產(chǎn)品做進(jìn)一步的修改和完善。
(4)結(jié)果分析:通過多次測(cè)試后,將測(cè)試結(jié)果匯總,提取出交互設(shè)計(jì)中存在的問題,以及對(duì)交互設(shè)計(jì)有益的建議形成測(cè)試報(bào)告。
3、眼動(dòng)評(píng)估方法
眼動(dòng)追蹤可以用來評(píng)價(jià)對(duì)產(chǎn)品(包括硬件產(chǎn)品和軟件產(chǎn)品)設(shè)計(jì)的感性意象,評(píng)測(cè)產(chǎn)品設(shè)計(jì)特征。眼動(dòng)評(píng)估的主要指標(biāo)有注視熱點(diǎn)圖、搜索過程測(cè)量指標(biāo)、興趣區(qū)域即用戶視覺注意的焦點(diǎn)區(qū)??梢越Y(jié)合口語分析法了解用戶的所想 和所做。
4、腦電評(píng)估方法
通過對(duì)腦電信號(hào)的分析,研究者可以探索大腦的認(rèn)知加工過程和受試者的心理狀況。近年來腦電評(píng)估方法在人機(jī)交互心理學(xué)等領(lǐng)域應(yīng)用廣泛,被用來評(píng)估交互設(shè)計(jì)、人機(jī)界面、產(chǎn)品設(shè)計(jì)等方面的內(nèi)容。但是腦電評(píng)估也有一定的缺陷,例如空間分辨率上的局限性,因而對(duì)某些認(rèn)知過程和腦區(qū)的定位并不是很準(zhǔn)確。第二,在許多相似的實(shí)驗(yàn)研究中,由于研究者采用了不同的實(shí)驗(yàn)材料和方法等,實(shí)驗(yàn)結(jié)果也存在差異性。第三 ,由于采集記錄時(shí)間的滯后性,腦電所記錄的并不一定是當(dāng)下被試者所想到的內(nèi)容。
采取哪種方法來開展用戶測(cè)試和評(píng)估,要根據(jù)不同的任務(wù)結(jié)合不同的環(huán)境來開展,比如:時(shí)間、成本、資源等。
啟發(fā)式評(píng)估法
是專家評(píng)估法的一種,也被稱為經(jīng)驗(yàn)性評(píng)估,最初由Nielsen博士提出。簡(jiǎn)單來說,啟發(fā)式評(píng)估是一種簡(jiǎn)易的可用性評(píng)估方法,使用一套相對(duì)簡(jiǎn)單、通用、有啟發(fā)性的可用性原則,讓幾個(gè)評(píng)審根據(jù)專業(yè)知識(shí)和經(jīng)驗(yàn)來進(jìn)行評(píng)估,發(fā)現(xiàn)產(chǎn)品潛在的可用性問題。
啟發(fā)式評(píng)估的兩大要素:評(píng)估者和評(píng)估參照的原則。
對(duì)評(píng)估者的要求主要有四個(gè)方面:
(1)人數(shù):推薦3-5人,有時(shí)會(huì)更少
(2)知識(shí):最好同時(shí)具有可用性知識(shí)及設(shè)計(jì)知識(shí)
(3)身份:最好是非設(shè)計(jì)者本人,否者不具有客觀性
(4)崗位:設(shè)計(jì)師或用戶研究員
評(píng)估參照的原則有:尼爾森十大可用性原則、八項(xiàng)黃金法則、首頁(yè)可用性指南、ios設(shè)計(jì)指南、拓展原則、HHS網(wǎng)頁(yè)設(shè)計(jì)與可用性指南等。具體需要根據(jù)實(shí)際項(xiàng)目來選擇,常用的是尼爾森十大交互原則。
什么時(shí)候適合使用啟發(fā)式評(píng)估法?
交互設(shè)計(jì)和UI設(shè)計(jì)階段、測(cè)試優(yōu)化和產(chǎn)品發(fā)布后的階段。
啟發(fā)式評(píng)估的優(yōu)缺點(diǎn)有哪些?
優(yōu)點(diǎn):成本低、效率高、發(fā)現(xiàn)大多數(shù)可用性問題,甚至是用戶測(cè)試時(shí)不會(huì)出現(xiàn)的問題。
缺點(diǎn):不能代表真實(shí)用戶,相對(duì)主觀、有時(shí)候發(fā)現(xiàn)問題過多、對(duì)評(píng)估人員知識(shí)背景要求較高。
什么時(shí)候適用?
(1)適合時(shí)間、資源有限的情況下快速發(fā)現(xiàn)可用性問題,降低風(fēng)險(xiǎn)及成本。
(2)版本變動(dòng)不大的情況下,小成本檢驗(yàn)。
(3)作為可用性測(cè)試的之前準(zhǔn)備。
啟發(fā)式評(píng)估流程是什么?
(1)準(zhǔn)備階段:確定范圍、背景調(diào)查、參考評(píng)估原則、評(píng)委邀約、材料準(zhǔn)備
(2)執(zhí)行階段:任務(wù)走查、整體走查、結(jié)果記錄
(3)分析階段:匯總討論、報(bào)告總結(jié)、優(yōu)化方案
可用性測(cè)試
先來看一下我們?cè)谄綍r(shí)工作中常常會(huì)聽到這樣的問題
產(chǎn)品經(jīng)理:我們的用戶覺得產(chǎn)品好不好用?使用過程中會(huì)不會(huì)遇到問題?他們是否滿意?
設(shè)計(jì)師:設(shè)計(jì)的過程有一些糾結(jié)的地方,不知道實(shí)際用戶是怎么理解和操作的怎么辦?
產(chǎn)品開發(fā)后:想在大推前檢驗(yàn)一下產(chǎn)品是否靠譜,適不適合大推?
當(dāng)我們遇到這樣的一些問題時(shí),如何找到方法快速得到答案呢?
那就是接下來要介紹的可用性測(cè)試方法。
可用性測(cè)試是一種常用的、高效的方法。
它的定義是:通過觀察具有代表性的用戶,完成產(chǎn)品的典型任務(wù),從而找出產(chǎn)品可用性問題并解決,目的是為了改善產(chǎn)品,讓產(chǎn)品更容易使用。
什么時(shí)候適合做可用性測(cè)試呢?
一般是在:交互設(shè)計(jì)或UI設(shè)計(jì)、測(cè)試優(yōu)化、正式發(fā)布三個(gè)階段來做。當(dāng)然是越早做越好,可以盡早發(fā)現(xiàn)問題并及時(shí)調(diào)整。
類型分為兩種:形成式和總結(jié)式
形成式特點(diǎn):小樣本、發(fā)現(xiàn)問題為主、不能做定量對(duì)比。
總結(jié)式特點(diǎn):大樣本(30人以上)、定量的評(píng)估、可以做對(duì)比評(píng)估
可用性測(cè)試可以解決什么樣的問題?
1、發(fā)現(xiàn)問題,產(chǎn)品在體驗(yàn)上是否存在問題
2、檢驗(yàn)實(shí)現(xiàn),期望的設(shè)計(jì)目的有沒有達(dá)成,是否滿足了用戶的期望
3、產(chǎn)品評(píng)估,用戶是否會(huì)滿意
4、理解用戶,了解用戶行為習(xí)慣,了解用戶認(rèn)知,找到某些問題的原因
測(cè)試流程是什么?
整體上分為4個(gè)階段:1、準(zhǔn)備 2、測(cè)試 3、分析 4、優(yōu)化
1、準(zhǔn)備階段要做的有哪些?
確定目標(biāo):確定測(cè)試目標(biāo)決定了后面測(cè)試過程要怎樣去設(shè)計(jì)
常見的測(cè)試目標(biāo)有:
·對(duì)整個(gè)產(chǎn)品做可用性評(píng)估
·對(duì)新增的功能模塊進(jìn)行評(píng)估
·提前觀察新方案對(duì)新老用戶有怎樣的影響
·提前檢測(cè)改版是否達(dá)到預(yù)計(jì)目標(biāo)
·設(shè)計(jì)時(shí)存在爭(zhēng)議,如何選擇解決方案
·某個(gè)環(huán)節(jié)流失率較高,檢測(cè)是否為設(shè)計(jì)原因?qū)е?
·需要拓展某一類特殊用戶,測(cè)試針對(duì)這類用戶在設(shè)計(jì)上是否需要作出調(diào)整
準(zhǔn)備測(cè)試方案
方案中應(yīng)當(dāng)包含以下內(nèi)容:
·測(cè)試目的:明確測(cè)試的目的及范圍,測(cè)試目的決定了測(cè)試方案
·測(cè)試關(guān)注點(diǎn):與負(fù)責(zé)的設(shè)計(jì)師一起梳理測(cè)試中要關(guān)注的問題
·用戶招募:招募要求,樣本配比,招募渠道
·經(jīng)費(fèi)預(yù)算:獎(jiǎng)勵(lì)的形式和額度
·時(shí)間計(jì)劃:用于把控時(shí)間計(jì)劃
撰寫測(cè)試腳本:設(shè)計(jì)測(cè)試任務(wù),通過用戶行為去觀察提問來獲得我們想要的內(nèi)容
基本的流程有:
·暖場(chǎng):3min,簡(jiǎn)單聊天,消除用戶的緊張情緒
·測(cè)試說明:2min,對(duì)測(cè)試內(nèi)容規(guī)則做說明
·測(cè)試前訪談:10min,了解用戶基本信息
·簡(jiǎn)單試用:3min,讓用戶熟悉產(chǎn)品
·測(cè)試執(zhí)行:30-45min,提示任務(wù)并觀察
·事后訪談:15min,針對(duì)疑點(diǎn)問點(diǎn)追問,填寫評(píng)價(jià)表
·道別:5min,支付禮金,送用戶離開
招募用戶
招募什么樣的用戶呢?
·根據(jù)測(cè)試目的來定,找出與測(cè)試目標(biāo)有關(guān)的篩選緯度
·特別考慮用戶使用行為相關(guān)的特征,例如競(jìng)品使用經(jīng)驗(yàn),使用產(chǎn)品的目的,用戶的活躍度等
·挑選最核心的緯度,轉(zhuǎn)化成用戶招募的條件,并盡量客觀化,具體化,可衡量
·避免設(shè)置交叉條件過多,導(dǎo)致樣本代表性降低
·學(xué)會(huì)辨別真假的用戶信息
招募多少用戶合適?
·以發(fā)現(xiàn)問題為目的快速可用性測(cè)試,6-8名即可
·考慮產(chǎn)品的復(fù)雜性,覆蓋人群差異性,適當(dāng)做調(diào)整,拓展到10-15名
招募渠道有哪些?
·公司內(nèi)部
·現(xiàn)有產(chǎn)品用戶庫(kù)
·公司其他產(chǎn)品用戶庫(kù)
·熟人,朋友等
·推廣渠道:官微、公眾號(hào)、門戶網(wǎng)等
·社區(qū),論壇,qq群等
·第三方調(diào)研公司
準(zhǔn)備測(cè)試素材:低保真或高保真原型,或線上已經(jīng)可以使用的產(chǎn)品,也可以準(zhǔn)備一些量表工具來輔助測(cè)試。在測(cè)試
過程中需要用到的電腦或手機(jī)設(shè)備,攝像頭,紙,筆,桌椅等。
測(cè)試場(chǎng)地選擇:
·專業(yè)可用性測(cè)試實(shí)驗(yàn)室:一般對(duì)測(cè)試質(zhì)量要求較高,旁聽人數(shù)較多且需要采集豐富的數(shù)據(jù)的時(shí)候采用此方法。實(shí)驗(yàn)室有兩個(gè)房間,一個(gè)測(cè)試間,一個(gè)觀察間,中間有單向玻璃分隔。測(cè)試間中有多角度的攝像頭,用來記錄測(cè)試過程,觀察間可以同步看到測(cè)試間里的情況,
·普通測(cè)試環(huán)境:在觀察人數(shù)較少(小于3人),條件有限時(shí)使用。
預(yù)測(cè)試階段:正式測(cè)試前進(jìn)行預(yù)測(cè)試,保證測(cè)試流程通暢
·走查:記錄可能出現(xiàn)的問題
·預(yù)測(cè)試:找人先測(cè)試一下
·調(diào)整:調(diào)整測(cè)試流程
正式測(cè)試階段
測(cè)試參與人員有
·主持人:引導(dǎo)整個(gè)測(cè)試流程
·記錄員:記錄操作行為,訪談內(nèi)容,發(fā)現(xiàn)問題等
·產(chǎn)品團(tuán)隊(duì):參與旁聽,觀察,結(jié)束后交流
·用戶:完成測(cè)試及訪談任務(wù)
測(cè)試過程中需要觀察的要點(diǎn):
·用戶是否獨(dú)立完成了任務(wù)
·是否存在無效操作或不知所措的情況
·用戶是否滿意
結(jié)果分析
邊測(cè)試邊總結(jié),越及時(shí)越好
·測(cè)試完一個(gè)用戶,做一次小結(jié)
·測(cè)試結(jié)束當(dāng)天寫小結(jié),與設(shè)計(jì)師當(dāng)場(chǎng)討論
·重要問題反饋后再總結(jié)分析報(bào)告
·邊測(cè)邊改,邊改邊測(cè)
結(jié)果分析4個(gè)步驟:1、對(duì)發(fā)現(xiàn)分類 2、整理不確定項(xiàng) 3、評(píng)定優(yōu)先級(jí) 4、結(jié)果記錄
撰寫報(bào)告
從4個(gè)方面來寫:
·總體如何
·有哪些問題
·嚴(yán)重程度如何
·建議是什么
·除此之外,還可以圍繞關(guān)注的問題,未滿足需求補(bǔ)充分析
優(yōu)化跟蹤
在測(cè)試之后需要出優(yōu)化的方案,測(cè)試優(yōu)化的過程是循環(huán)的。
測(cè)試之后如果還有其他問題沒有得到解決,可以結(jié)合其他的一些測(cè)試方法來得到。
問卷調(diào)研
問卷調(diào)查法是以書面提出問題的方式搜集數(shù)據(jù)的一種研究方法,研究者將所要研究的問題編制成問題表格,讓受訪對(duì)象以郵寄、當(dāng)面作答、在線作答或追蹤訪問的方式填寫,從而了解被試者對(duì)某一現(xiàn)象或問題的看法和意見。問卷調(diào)研可以用于需求挖掘階段,也可以用于產(chǎn)品上線后的評(píng)估階段。
如果是想了解用戶對(duì)產(chǎn)品上線后的滿意度,可以使用問卷調(diào)研的方法。它比較適合去了解用戶的認(rèn)知態(tài)度,也可以附帶了解用戶的行為習(xí)慣,
問卷調(diào)研的優(yōu)缺點(diǎn)
優(yōu)點(diǎn):統(tǒng)一性、靈活性、量化性、匿名性
缺點(diǎn):(1)只能獲得書面的信息,而不能了解到生動(dòng)、具體的情況。(2)缺乏彈性,很難做深入的定性調(diào)研。(3)調(diào)查者難以了解被調(diào)查者是否認(rèn)真作答,是不是自己填寫的。(4)填寫問卷比較容易,有些別調(diào)查者會(huì)隨意選擇,或者按照社會(huì)主流觀點(diǎn)選擇,這樣會(huì)使調(diào)查失去真實(shí)性。(5)回復(fù)效率低,對(duì)無回答者的研究比較困難。
問卷調(diào)查的使用場(chǎng)景
適用于:(1)需要進(jìn)行定量分析的調(diào)研。(2)需要匿名進(jìn)行調(diào)研的問題。(3)對(duì)已有假設(shè)進(jìn)行檢驗(yàn)。(4)尋找問題隱藏的關(guān)聯(lián)。(5)對(duì)產(chǎn)品設(shè)計(jì)用戶認(rèn)知及態(tài)度的評(píng)估。
不適用于:(1)發(fā)現(xiàn)和描述具體問題。(2)探索受訪對(duì)象的模糊態(tài)度。(3)獲取創(chuàng)新想法。(4)獲取精確的行為數(shù)據(jù)。
問卷調(diào)研流程
1、確定目標(biāo):確定調(diào)研目的、對(duì)象、分析目的和應(yīng)用對(duì)象。
2、調(diào)研方案:通過訪談、經(jīng)驗(yàn)、理論等,確定調(diào)研框架,題目選項(xiàng),分析思路,投放渠道,相本配比等。
3、問卷設(shè)計(jì):?jiǎn)柧碓O(shè)計(jì),問題美化,投放渠道。
4、問卷測(cè)試:多人測(cè)試,確保問卷的可讀性,邏輯通暢
5、問卷投放:按照計(jì)劃好的投放渠道進(jìn)行投放,回收數(shù)據(jù),數(shù)據(jù)清洗
6、問卷分析及填寫報(bào)告:分析及報(bào)告填寫,調(diào)研結(jié)果落地
數(shù)據(jù)分析
概述:通過在網(wǎng)站或應(yīng)用中進(jìn)行數(shù)據(jù)埋點(diǎn),獲取用戶對(duì)產(chǎn)品的使用和行為數(shù)據(jù),并進(jìn)行基于產(chǎn)品體驗(yàn)優(yōu)化的數(shù)據(jù)進(jìn)行分析。
數(shù)據(jù)分析可以做什么?
1、可以做到用戶從哪里來,來了多少
2、獲取用戶屬性,用戶地域,用戶設(shè)備
3、訪問了哪些頁(yè)面,使用了哪些功能,消費(fèi)了多少錢,消耗了多少時(shí)間
4、哪些流量可能存在問題,忠誠(chéng)度如何,活躍度如何,有沒有達(dá)到目標(biāo),和行業(yè)相比如何
5、流失情況如何,離開之后是否還回來
可以作為產(chǎn)品的眼鏡和大腦,提供客觀衡量的依據(jù),可以持續(xù)優(yōu)化改進(jìn)。
數(shù)據(jù)獲取方式的對(duì)比
日志文件:優(yōu)勢(shì),完整的服務(wù)端請(qǐng)求記錄。
缺點(diǎn),日志的獲取和清洗有過濾成本,許多頁(yè)面操作無法記錄。
JS頁(yè)面標(biāo)記:優(yōu)勢(shì),數(shù)據(jù)獲取可控、靈活,可以對(duì)頁(yè)面操作記錄進(jìn)行記錄,獲取數(shù)據(jù)比較完整豐富。
缺點(diǎn),需要在頁(yè)面植入JS標(biāo)記代碼,某些情況下無法獲取,如當(dāng)用戶禁用JS功能時(shí)。
常用的數(shù)據(jù)監(jiān)控平臺(tái)
1、第三方監(jiān)控平臺(tái):如Google Analytics、百度統(tǒng)計(jì)、騰訊云分析等
2、自研平臺(tái)
數(shù)據(jù)分析流程
1、監(jiān)控 2、定義 3、埋點(diǎn) 4、測(cè)量 5、分析 6、優(yōu)化
Web分析常用的指標(biāo)
PV:是指頁(yè)面瀏覽量,網(wǎng)頁(yè)瀏覽數(shù)實(shí)施評(píng)價(jià)網(wǎng)站流量最常用的指標(biāo)之一,用戶每一次訪問網(wǎng)站中的頁(yè)面均被記錄,對(duì)統(tǒng)一頁(yè)面多次訪問,訪問量累計(jì)
UV:是指獨(dú)立訪客,是通過互聯(lián)網(wǎng)訪問、瀏覽這個(gè)頁(yè)面的自然人
UPV:是指唯一身份綜合瀏覽量
訪問:是指在一定時(shí)間范圍內(nèi),網(wǎng)站所有訪問者對(duì)網(wǎng)站發(fā)起訪問的總次數(shù),從訪客來到網(wǎng)站到最終關(guān)閉網(wǎng)站所有頁(yè)面,記為一次訪問
識(shí)別用戶的方式:IP、IP+User Agent、cookie、User ID、設(shè)備ID、其他
復(fù)合指標(biāo)
跳出率:指用戶來到網(wǎng)站,只瀏覽了一個(gè)頁(yè)面就離開的訪問次數(shù),占全部訪問次數(shù)的百分比,簡(jiǎn)稱“來了就走”。跳出率可以被用來衡量流量和頁(yè)面質(zhì)量,高跳出率表示訪問者對(duì)著陸頁(yè)面不感興趣,沒有繼續(xù)訪問更深入的頁(yè)面。也可能頁(yè)面設(shè)計(jì)存在問題,也可能是導(dǎo)入的用戶不匹配。跳出率可以通過調(diào)整廣告渠道,優(yōu)化頁(yè)面內(nèi)容來降低。
退出率:訪問者離開網(wǎng)站一次被記錄為一次退出,某一范圍內(nèi)退出的數(shù)量/該范圍的綜合訪問量就是退出率。如果關(guān)鍵流程中的某一頁(yè)面退出率高,代表某一頁(yè)面可能出現(xiàn)了問題。
訪問時(shí)長(zhǎng):網(wǎng)站停留時(shí)長(zhǎng),頁(yè)面停留時(shí)長(zhǎng),應(yīng)用使用時(shí)長(zhǎng)。訪問量是訪問質(zhì)量的一個(gè)衡量指標(biāo),較長(zhǎng)的訪問時(shí)間說明用戶與產(chǎn)品進(jìn)行了較多的互動(dòng)。
訪問深度:可以理解為單個(gè)用戶平均訪問的頁(yè)面數(shù),是PV/UV的比值。訪問深度也是訪問質(zhì)量的一個(gè)衡量指標(biāo),可以考察用戶是否和網(wǎng)站進(jìn)行了較多互動(dòng)。這個(gè)比值越大,代表網(wǎng)站的粘性越高。
轉(zhuǎn)化率:指在一個(gè)統(tǒng)計(jì)周期內(nèi),完成轉(zhuǎn)化目標(biāo)行為的次數(shù)占總訪問次數(shù)的比率。根據(jù)設(shè)置不同目的進(jìn)行計(jì)算,例如注冊(cè)轉(zhuǎn)化率、付款轉(zhuǎn)化率等,是一個(gè)重要的分析指標(biāo)。
移動(dòng)端基礎(chǔ)指標(biāo)
移動(dòng)端的基礎(chǔ)指標(biāo)監(jiān)測(cè)與web端略有不同,但分析思路大致相同。指標(biāo)分為:新增設(shè)備、累計(jì)設(shè)備、啟動(dòng)次數(shù)、單詞使用時(shí)長(zhǎng)。
常見分析內(nèi)容
流量分析(哪里來?)、用戶分析(什么樣的用戶?)、行為分析(如何使用的?)、路徑轉(zhuǎn)化(表現(xiàn)如何?)、流失分析(粘性如何?)
A/B test
A/B測(cè)試是一種幫助網(wǎng)頁(yè)優(yōu)化實(shí)驗(yàn)的方法。A/B測(cè)試的目的在于通過科學(xué)的實(shí)驗(yàn)設(shè)計(jì)和采集數(shù)據(jù)的方式,來獲得具有代表性的實(shí)驗(yàn)結(jié)論,從而尋找到更好的產(chǎn)品策略。
簡(jiǎn)單來說,就是為同一目標(biāo)制定兩個(gè)方案,讓一部分用戶使用A方案,另一部分使用B方案,記錄用戶的使用情況,對(duì)比兩個(gè)方案的結(jié)果,選擇更符合的方案。
A/B test一般會(huì)在產(chǎn)品改版正式上線之前使用,來驗(yàn)證新的設(shè)計(jì)是否可以提高產(chǎn)品的表現(xiàn)。
A/B test可以測(cè)試的元素有:標(biāo)題、圖片、顏色、社交元素、段落文本、按鈕、導(dǎo)航、任務(wù)流程、頁(yè)面布局、價(jià)格、視頻等??梢淮沃桓淖円粋€(gè)元素或一次改變多個(gè)元素的方式來測(cè)試,這就是兩個(gè)測(cè)試類型單變量測(cè)試和多變量測(cè)試。
A/B test工具
Google Website Optimizer:搜索巨頭提供的免費(fèi)A/B test工具,一個(gè)很好的入門級(jí)工具,但是沒有一些先進(jìn)的功能。
Visual Website Optimizer:一個(gè)易于使用的A/Btest測(cè)試工具,包含功能有所見即所得的編輯器,單機(jī)地圖,訪問者分割和標(biāo)簽等。
Unbounce and Performable:集成著陸設(shè)計(jì)的A/B測(cè)試工具。
Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target:企業(yè)級(jí)測(cè)試工具
App Adhoc Optimizer:國(guó)內(nèi)A/B Test工具,同時(shí)支持前端(Web/H5、IOS、Android)及后端(Node.JS、PHP、Java)AB測(cè)試服務(wù)的專業(yè)Saas平臺(tái)
Optimizely:是網(wǎng)上現(xiàn)有的最專業(yè)的AB測(cè)試工具之一,它的價(jià)格要比其他的工具高很多(也可以免費(fèi)使用一個(gè)月),它提供了一些非常好的功能。
Unbounce:對(duì)于登錄頁(yè)面的測(cè)試來講非常不錯(cuò),而且它不僅僅是個(gè)測(cè)試工具,還可以在無需自己編寫任何代碼的情況下來創(chuàng)建登錄頁(yè)面。
如何做A/Btest
1、確定目標(biāo),例如提高網(wǎng)站的付費(fèi)轉(zhuǎn)化率,降低跳出率等
2、測(cè)試方案,建立假設(shè):購(gòu)買按鈕的顏色會(huì)影響點(diǎn)擊率?縮短流程可以提高復(fù)費(fèi)率?改變導(dǎo)航可以降低跳出率等?
3、創(chuàng)建相比較的兩個(gè)版本,改變其中的變量
4、發(fā)布測(cè)試,將部分流量導(dǎo)向B方案,但不一定是5:5
5、數(shù)據(jù)分析,收集數(shù)據(jù),對(duì)比AB版本的轉(zhuǎn)化率、跳出率、留存率等
感謝閱讀!
文章來源:站酷 作者:_微光
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)
于B端,我想剛開始很多同學(xué)就直接拿Ant Design套套界面,因?yàn)楣疽蟛⒉桓?,隨后字節(jié)Arco Design也推出了對(duì)應(yīng)的模版和規(guī)范,能讓我們快速作出一個(gè)不出錯(cuò)的方案。
但是隨著公司對(duì)B端越來越重視,這些模版顯然就太爛大街了。公司、市場(chǎng)的要求顯然不止于此,我們的設(shè)計(jì)追求也不止于此。
那么我們?nèi)绾尾拍軘[脫套模版,提高界面的精致度,提升界面的交互體驗(yàn)?zāi)兀?
其實(shí)很簡(jiǎn)單,王陽(yáng)明先生告訴我們知行合一,知是行之始行是知之成。我們?nèi)绾尾拍芴嵘鼴端界面端精致度?
第一,需要知道什么是好的設(shè)計(jì);
第二,需要不斷的去實(shí)踐去練習(xí),缺一不可。
本文先和大家談?wù)勚膶用?,提高我們的眼界,下面就和大家分享一些不錯(cuò)的B端產(chǎn)品,大家有時(shí)間可以去慢慢體驗(yàn)。
PS:作為B端設(shè)計(jì)師,一定要去多拆解競(jìng)品,多研究好的產(chǎn)品,別面試的時(shí)候,面試官問你研究的B端產(chǎn)品是什么,你只知道阿里云、騰訊云、百度云哦!
1、Hubspot
做B端的同學(xué),尤其是做CRM的同學(xué)應(yīng)該都知道Salesforce,他是全球最大的 CRM(客戶關(guān)系管理) 工具公司。
Hubspot同樣是提供客戶管理相關(guān)的應(yīng)用,雖然成立相對(duì)Salesforce晚,但是在市場(chǎng)上也占有一席之地。
從設(shè)計(jì)的角度來看,他的界面風(fēng)格更加簡(jiǎn)潔舒適,從體驗(yàn)上來看和國(guó)內(nèi)的CRM系統(tǒng)完全不同,其體驗(yàn)更加自然和舒適。
這種風(fēng)格大家看了有沒有覺得很熟悉呢?
大家在去看看 GoDoddy , Airbnb ,Zillow,是不是發(fā)現(xiàn)風(fēng)格有一點(diǎn)類似,大家可以對(duì)比國(guó)內(nèi)產(chǎn)品去拆解下他們的交互細(xì)節(jié)有什么不同,完成同樣的任務(wù)他們采用的方案有何不同,相信你會(huì)有很多的收獲。
國(guó)外的界面看著總讓人覺得很舒適,僅僅是因?yàn)榭酥频脑O(shè)計(jì)、中性灰使用得好嗎?當(dāng)然不是,是因?yàn)橛⑽谋旧砭褪菆D形化的文字。
如果翻譯成中文,你會(huì)發(fā)現(xiàn)好像不是特別理想。
這個(gè)樣子拿給領(lǐng)導(dǎo)過稿,怕是分分鐘被拍死,因此我們還是需要多看看國(guó)內(nèi)優(yōu)秀的產(chǎn)品。
2、神策
神策的設(shè)計(jì),我想B端的朋友不陌生吧,國(guó)內(nèi)產(chǎn)品中他的設(shè)計(jì)一直是我們的參考對(duì)象。
不同于其他產(chǎn)品,他的體驗(yàn)門檻比較低,注冊(cè)后就可以去體驗(yàn)他的demo,也沒有試用期限,參考對(duì)象從可視化報(bào)表,到界面交互均能找到參考。
不過當(dāng)你參考一次后發(fā)現(xiàn),做出來的界面怎么還是少了一些靈魂,雖然界面風(fēng)格上了一個(gè)臺(tái)階,但為什么用戶還是覺得產(chǎn)品難用。
3、項(xiàng)目管理類
這里不得不和大家推薦項(xiàng)目管理類產(chǎn)品了,這類產(chǎn)品是專門給互聯(lián)網(wǎng)公司的開發(fā)團(tuán)隊(duì)使用,他們都是專業(yè)用戶,同時(shí)這些都是提高他們工作效率的工具,因此這些產(chǎn)品投入的成本更高,優(yōu)化得更好,拆解他們的產(chǎn)品,就是直接觀看高手的成長(zhǎng)之路。
Jira
Jira是Atlassian公司出品的一款事務(wù)管理軟件,JIRA的界面效果交互都非常不錯(cuò)。大型互聯(lián)網(wǎng)公司如LinkedIn、Facebook、eBay等內(nèi)部都在使用Jira。
同時(shí)他也是國(guó)內(nèi)項(xiàng)目管理類產(chǎn)品的學(xué)習(xí)研究對(duì)象,因此大家可以通過文章、B站、界面截圖,自己申請(qǐng)?bào)w驗(yàn)等方式全面的進(jìn)行體驗(yàn)。
同時(shí)也可借助群的力量,調(diào)研下有使用Jira的小伙伴,看看他們?cè)谑褂弥杏惺裁磫栴},下面是我收集Jira網(wǎng)頁(yè)版和本地配置版的問題截圖,這些都來自不同角色的真實(shí)體驗(yàn),會(huì)更有分析的價(jià)值。(這部分截圖涉及到公司的數(shù)據(jù),同時(shí)數(shù)量多不太方便打碼,就不分享給大家了。)
當(dāng)然國(guó)內(nèi)的項(xiàng)目管理類產(chǎn)品也得去看,我們要對(duì)比哪里做得好,哪里還需要改進(jìn)。國(guó)內(nèi)的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition,這些產(chǎn)品不管從視覺還是體驗(yàn)都非常不錯(cuò),大家一定要去體驗(yàn)。
5、文檔管理類產(chǎn)品
通過不斷對(duì)競(jìng)品進(jìn)行拆解,你已經(jīng)不是當(dāng)初那個(gè)小白了,你的行業(yè)認(rèn)知,方案設(shè)計(jì)能力應(yīng)該趕超了一大波人。
成長(zhǎng)的同時(shí),又發(fā)現(xiàn)你設(shè)計(jì)的界面,不太精致,少了些溫度,這時(shí)候推薦你看文檔管理類產(chǎn)品。
WPS
第一個(gè)和大家推薦的是WPS,界面簡(jiǎn)潔,配色舒適。
飛書
在管理類的軟件中,不得不提飛書的管理界面,從設(shè)計(jì)到使用體驗(yàn),他給我的感覺終于不是那么千遍一律,用組件庫(kù)搭建起來的感覺。
他開始有了溫度,開始注重品牌感的打造,用戶的引導(dǎo),符合品牌調(diào)性的插畫。
對(duì)一些體驗(yàn)的細(xì)節(jié)進(jìn)行優(yōu)化,比如傳統(tǒng)的編輯都是放在頁(yè)面頂部,它采用了離光標(biāo)更近的位置。
根據(jù)菲茲定律,光標(biāo)當(dāng)前的位置和目標(biāo)位置的距離D越短,所用的時(shí)間越短,具體好不好用,歡迎大家在評(píng)論區(qū)留言哦。
6、概念稿
到這時(shí)候如果你覺得線上的產(chǎn)品太禁錮思維,那么推薦你看看dribbble、behance,搜索data、web、dashboard等關(guān)鍵詞,去看看有沒有新的靈感。
我的花瓣收集了一部分,如果不嫌棄,可以去看看,順藤摸瓜應(yīng)該可以找到很多不錯(cuò)的設(shè)計(jì)。
圖片標(biāo)題
7、畫重點(diǎn)
如何提升B端界面的精致度?
第一,要知道什么是好的設(shè)計(jì),多拆解國(guó)內(nèi)外優(yōu)化的B端產(chǎn)品。
第二,多在工作中時(shí)間,有時(shí)間多做ABC方案,鍛煉自己的方案設(shè)計(jì)能力,多踩一些坑,時(shí)刻保持學(xué)習(xí)能力,慢慢就成長(zhǎng)了。
文章來源:UI中國(guó) 作者:風(fēng)箏KK
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)
從挑選出的828件作品中,排名前十的作品中9件為B端設(shè)計(jì),另一件作品也是B端產(chǎn)品C端化的產(chǎn)物。其中:
B端界面設(shè)計(jì)占比476/828,57.4%;
C端界面設(shè)計(jì)占比180/828,21.7%;
視頻動(dòng)效作品占比223/828,26.9%;
能看出其中的比重關(guān)系,B端設(shè)計(jì)再次大火,為什么是再次?因?yàn)锽端設(shè)計(jì)之前火過,只不過沒有趕上一個(gè)好的時(shí)代,在C端設(shè)計(jì)風(fēng)光的十年里而忽略了其存在。隨著C端市場(chǎng)飽和與數(shù)字化的浪潮下,實(shí)體經(jīng)濟(jì)、To B 、To G的產(chǎn)業(yè)再次迎來了它的曙光。視頻動(dòng)效的作品占比也已超過C端界面設(shè)計(jì),相信今年視頻動(dòng)效作品占比還會(huì)再次提升。
追波年度最佳作品
追波年度最佳作品來自大家最熟悉的UI8團(tuán)隊(duì)中的Tran Mau Tri Tam ,作者來自越南西貢,最佳作品截止目前355K瀏覽量,2933個(gè)贊。
為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢?既不是C端也不是純B端的作品,更像一個(gè)網(wǎng)頁(yè)與平面的結(jié)合體。如果去掉搜索圖標(biāo)、分類圖標(biāo)和按鈕,你可以理解它就是一個(gè)平面作品,一個(gè)字體加幾何形體構(gòu)建的作品,為了豐富畫面的層次,讓畫面更加的活潑采用了多彩加幾何色塊,讓標(biāo)題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標(biāo)題文字中脫穎而出,這種使用線條突出重要信息的設(shè)計(jì)也是今年追波設(shè)計(jì)流行趨勢(shì)之一。
MetroUI是Windows8的界面設(shè)計(jì)語言,在2010年至2013年間曾經(jīng)風(fēng)靡一時(shí),那也是移動(dòng)互聯(lián)網(wǎng)的發(fā)展元年,現(xiàn)在國(guó)家推行實(shí)體經(jīng)濟(jì)、數(shù)字化帶動(dòng)To B 、To G 的發(fā)展元年,通過幾何色塊(MetroUI)實(shí)現(xiàn)B端產(chǎn)品與C端設(shè)計(jì)風(fēng)格的傳承與銜接,你會(huì)發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風(fēng),毛玻璃的多彩高斯模糊漸變風(fēng),年度作品當(dāng)之無愧。
最后來看下按鈕的設(shè)計(jì),正常的按鈕要么文字加色塊,要么左圖標(biāo)加右文字,它設(shè)計(jì)成左文本加右圖標(biāo),更加注重信息的可讀性和易讀性,也體現(xiàn)B端設(shè)計(jì)重功能和交互體驗(yàn),視覺點(diǎn)到為止的設(shè)計(jì)理念。
下面我們來欣賞年度最佳作品里面的流行趨勢(shì)吧。
易讀性(停頓感)
字體三原則:可讀性、易識(shí)性、易讀性。當(dāng)你同時(shí)讀一篇文言文和一篇設(shè)計(jì)文章,肯定設(shè)計(jì)文章的內(nèi)容可讀性更好。易識(shí)性是用在字體設(shè)計(jì)上,不能過于浮夸的改變字體骨架、形體而不易識(shí)別。易讀性和每位設(shè)計(jì)師都息息相關(guān),因?yàn)槲覀兌夹枰幣盼谋?。?dāng)我們小時(shí)候?qū)懽魑臅r(shí),不會(huì)寫的文字可以用拼音代替。這時(shí)候讀者讀到拼音時(shí)會(huì)有停頓感,更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性??梢栽谙嚓P(guān)聯(lián)文本后面添加圖片、表情、圖標(biāo)來更好的理解文本內(nèi)容,豐富文本內(nèi)涵。比如情侶間表達(dá)愛意時(shí)會(huì)輸入文本,“我愛你”、“我Love你”、“我ai你”、哪個(gè)更加會(huì)有情感共鳴呢?不言而喻,相信你心中已經(jīng)有答案了。
曲線
在標(biāo)題文字上添加曲線來突出重要文案是2021追波最流行的趨勢(shì)之一,第一個(gè)設(shè)計(jì)目的就是突顯文字,其次就是想表現(xiàn)鉛筆真實(shí)書寫的感覺。之前很多帶有簽名的設(shè)計(jì)中,簽字的文本都是手寫體的感覺,手寫體對(duì)比電腦的機(jī)械字體會(huì)帶有一種人文氣息,也會(huì)讓兩者之間產(chǎn)生一種對(duì)比、矛盾。
除了突顯文本外,曲線還有視覺引導(dǎo)的作用。通過視覺引導(dǎo)讓用戶按照設(shè)計(jì)師編排的順序進(jìn)行瀏覽界面。當(dāng)然還有比這更科學(xué)的工具就是眼動(dòng)儀測(cè)試,通過真實(shí)用戶眼睛瀏覽界面顯示對(duì)應(yīng)的熱點(diǎn)圖。
多彩高斯?jié)u變風(fēng)
多彩高斯?jié)u變風(fēng)是從色彩的角度來傳達(dá)和豐富畫面的,多彩高斯?jié)u變風(fēng)其實(shí)是從制造矛盾到平衡矛盾的過程,多彩漸變多為冷暖對(duì)比來制造畫面的沖突,需要控制冷暖畫面的大小來實(shí)現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新,給用戶呈現(xiàn)一種更加新穎的視覺表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上,為了更好的傳達(dá)信息需要去設(shè)計(jì)與內(nèi)容相匹配的視覺風(fēng)格。
B端界面設(shè)計(jì)
側(cè)邊欄Sidebar
B端設(shè)計(jì)的火爆帶動(dòng)了B端相關(guān)模塊設(shè)計(jì),更多的人也愿意嘗試B端相關(guān)模塊設(shè)計(jì),側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導(dǎo)航系統(tǒng),好的側(cè)邊欄設(shè)計(jì)能為用戶帶來更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果,也是受限于PC屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔(dān)的功能有導(dǎo)航、分類、自定義篩選、共享、新增等。追波的B端產(chǎn)品設(shè)計(jì)已經(jīng)不再是假大空概念設(shè)計(jì),而是一套實(shí)用美觀可落地的設(shè)計(jì)。
儀表盤設(shè)計(jì)
儀表盤設(shè)計(jì)是一個(gè)很好的隱喻,想象一下開摩托車或汽車主駕駛前面的屏幕,汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B端類產(chǎn)品后臺(tái)界面的儀表盤設(shè)計(jì)也需要展示一些重要的數(shù)據(jù)和各種狀態(tài),大體分為側(cè)標(biāo)欄、導(dǎo)航欄、待辦任務(wù)、個(gè)人信息、報(bào)表數(shù)據(jù)、消息中心、快捷入口等。當(dāng)然最重要的就是報(bào)表數(shù)據(jù),團(tuán)隊(duì)收益、任務(wù)進(jìn)度、轉(zhuǎn)化比例、新增、存量、團(tuán)隊(duì)工作時(shí)長(zhǎng)等都是老板或領(lǐng)導(dǎo)關(guān)心的內(nèi)容。每個(gè)公司業(yè)務(wù)不同、每個(gè)人員權(quán)限不同,自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài),需要分層級(jí)系統(tǒng)性去思考和設(shè)計(jì)。
流程設(shè)計(jì)
復(fù)雜的事情簡(jiǎn)單化,簡(jiǎn)單的事情標(biāo)準(zhǔn)化,標(biāo)準(zhǔn)的事情流程化,流程的事情自動(dòng)化。流程設(shè)計(jì)是每一個(gè)企業(yè)核心功能和業(yè)務(wù),可自定義的管理流程系統(tǒng)搭建也是B端產(chǎn)品設(shè)計(jì)的難點(diǎn),需要對(duì)業(yè)務(wù)高度抽象,讓每一個(gè)業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計(jì)。
B端C化
B端C化是B端產(chǎn)品設(shè)計(jì)的視覺表現(xiàn)力慢慢往C端產(chǎn)品設(shè)計(jì)的視覺靠齊,國(guó)內(nèi)B端產(chǎn)品界面設(shè)計(jì)視覺水平還有很大的提高空間。除了視覺上的提升外,由于業(yè)務(wù)的發(fā)展,B端產(chǎn)品也開始移動(dòng)化、智能化,國(guó)內(nèi)主流還是通過小程序、H5來實(shí)現(xiàn)B端產(chǎn)品C端化。
輕代碼化
輕代碼化是一種低代碼賦能無代碼的方式,彌補(bǔ)無代碼拓展性差、覆蓋場(chǎng)景少的問題。在保有無代碼靈活、易用、快捷的同時(shí),又能覆蓋低代碼使用場(chǎng)景。簡(jiǎn)單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個(gè)性化管理系統(tǒng),輕松實(shí)現(xiàn)多元業(yè)務(wù)場(chǎng)景的數(shù)字化管理。
輕代碼化將功能進(jìn)行打包,升級(jí)成全局可以用的配置,技術(shù)人員配置好后,業(yè)務(wù)人員在應(yīng)用編輯時(shí)直接選擇使用模版,綁定對(duì)應(yīng)的變量即可使用。
界面設(shè)計(jì)技巧
人文氣息
為什么人加色塊的組合方式能流行起來?還是B端行業(yè)流行帶動(dòng)的。B端講的更多的是企業(yè)對(duì)企業(yè)。企業(yè)對(duì)企業(yè)除了講行業(yè)解決方案外,還需要傳達(dá)公司的價(jià)值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對(duì)于一家全球化的公司不同膚色的人物組合在一起,這種人文氣息和價(jià)值觀已經(jīng)就不言而喻了。
當(dāng)然企業(yè)也需要進(jìn)行營(yíng)銷,抓人眼球。幾千年來的遺傳證明了,人的大腦對(duì)食物、性、動(dòng)的東西、人臉和眼睛、危險(xiǎn)的動(dòng)物很敏感。人加色塊的組合方式也具有抓人眼球營(yíng)銷的功能。真可謂一舉兩得。
這種風(fēng)格更適合大公司,國(guó)內(nèi)的一些手機(jī)廠商OPPO、VIVO等也會(huì)通過手機(jī)+背景+人物來體現(xiàn)科技與人文的結(jié)合,而對(duì)于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。
毛玻璃效果
毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的順應(yīng)當(dāng)下UI扁平化的設(shè)計(jì)趨勢(shì)。蘋果Mac OS Big Sur系統(tǒng)的圖標(biāo)、界面中運(yùn)用了大量毛玻璃和半透明元素,界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術(shù)-C4D創(chuàng)建彩色玻璃的4個(gè)技法”,完全能滿足UI設(shè)計(jì)師。當(dāng)然還有一個(gè)好消息就是Mac用戶可以享有OC一年免費(fèi)的使用權(quán),具體安裝購(gòu)買方法可以上“某寶”就可以輕松搞定,真香。
輕擬物
輕擬物這幾年一直流行,在UI設(shè)計(jì)中趨于穩(wěn)定的位置。從寫實(shí)到扁平再到輕擬物,其實(shí)是設(shè)計(jì)師們一路不斷探索的結(jié)果。本質(zhì)就是光影對(duì)形體產(chǎn)生的視覺感受。在色彩中對(duì)高光、亮面、明暗交界線、暗面、反光(環(huán)境光)五個(gè)部分的處理。寫實(shí)三維的圖標(biāo)等設(shè)計(jì)更適用于簡(jiǎn)潔的畫面中,扁平等設(shè)計(jì)更適用于復(fù)雜一點(diǎn)的界面中,比如B端產(chǎn)品界面中的功能圖標(biāo)。輕擬物可使用的范圍更廣,效果更佳。Sketch、Figma軟件對(duì)于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡(jiǎn)單且出彩。
簡(jiǎn)潔設(shè)計(jì)
簡(jiǎn)潔設(shè)計(jì)遵從了密斯·凡德羅的“少即是多”的設(shè)計(jì)原則,在B端產(chǎn)品界面中更加需要簡(jiǎn)潔設(shè)計(jì),我們最熟悉的Sketch軟件界面已經(jīng)是相當(dāng)?shù)暮?jiǎn)潔了。回到現(xiàn)實(shí)當(dāng)需求功能不斷增加,產(chǎn)品界面的編排如何取舍,如何保證界面的簡(jiǎn)潔是設(shè)計(jì)師需要深度思考的問題?如何與上級(jí)溝通?該功能是否可做可不做?是否需要埋點(diǎn)用數(shù)據(jù)說話?如果只是一味競(jìng)品有我們就需要有,功能不斷累加只會(huì)讓界面越來越重。
幾何圖形
幾何圖形和幾何插畫有異曲同工之妙,幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象,產(chǎn)品界面的幾何圖形多為占位符形式,加上色彩和幾何色塊讓其成為一個(gè)整體。B端產(chǎn)品視覺設(shè)計(jì)C端化的進(jìn)程中,幾何圖形、幾何色彩不失為最好的突破口,相信今年追波B端產(chǎn)品的視覺設(shè)計(jì)一定會(huì)更上一個(gè)臺(tái)階。
幾何圖形另一個(gè)場(chǎng)景化的地方就是品牌,作為一名UI設(shè)計(jì)師一定會(huì)經(jīng)歷從圖標(biāo)到幾何圖形到品牌設(shè)計(jì)的過程,品牌設(shè)計(jì)的技巧基本還是以幾何圖形為主,至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計(jì)的技巧對(duì)產(chǎn)品定位、品牌宣傳打下扎實(shí)的基礎(chǔ)。
暗黑設(shè)計(jì)
暗黑模式的設(shè)計(jì)是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時(shí)長(zhǎng)增大,如何在夜晚這個(gè)特定場(chǎng)景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞,提高在夜間使用的可讀性。
在設(shè)計(jì)暗黑主題時(shí),不能為了突顯視覺上的逼格,而去使用高飽和度鮮艷的色彩來突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計(jì)的衡量指標(biāo)。Material Design給出了暗黑主題的設(shè)計(jì)準(zhǔn)則,即正文和背景之間的對(duì)比度應(yīng)至少為15.8:1。按照此標(biāo)準(zhǔn)設(shè)計(jì),可讀性都還不錯(cuò)。這里介紹一個(gè)插件“Stark”(Figma、Sketch、XD、Chrome插件)用來測(cè)試界面的對(duì)比度。
模塊化(組件化)
為什么叫模塊化,而不叫組件化,組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁(yè)面來快速的搭建界面,但在B端產(chǎn)品設(shè)計(jì)中基礎(chǔ)組件和業(yè)務(wù)組件的搭建是以提高工作效率為前提,是否有從0到1搭建B端產(chǎn)品組件的經(jīng)歷是設(shè)計(jì)師一生中最寶貴的經(jīng)驗(yàn)之一,它能提高設(shè)計(jì)師的系統(tǒng)化思維、邏輯思維和抽象思維能力。
產(chǎn)品模塊化設(shè)計(jì)就是將產(chǎn)品分成幾個(gè)部分,也就是幾個(gè)模塊,每一部分都是具有獨(dú)立功能,具有一致的連接接口和一致的輸入、輸出接口的單元,相同種類的模塊在產(chǎn)品族中可以重用和互換,相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過模塊的組合配置,就可以創(chuàng)建不同需求的產(chǎn)品,滿足客戶的定制需求 。
插畫
插畫作為設(shè)計(jì)的一大品類,不同的插畫師都有自己擅長(zhǎng)的風(fēng)格,本質(zhì)是都有自己的個(gè)性,但是在產(chǎn)品設(shè)計(jì)中更多是需要共情、共性來講故事,表達(dá)產(chǎn)品理念和價(jià)值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)類的插畫風(fēng)格。設(shè)計(jì)的本質(zhì)是舊元素的重新組合,插畫不會(huì)過時(shí),而是需要結(jié)合當(dāng)下和產(chǎn)品找到最匹配的設(shè)計(jì)風(fēng)格。
幾何插畫
幾何插畫算是插畫簡(jiǎn)化的一種表現(xiàn)形式,人和物的形態(tài)不再寫實(shí),而是抽象成幾何圖形拼湊的感覺,同時(shí)保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn),傳達(dá)出簡(jiǎn)潔、科技的現(xiàn)代感。難點(diǎn)還是在人物形態(tài)的表現(xiàn)上,平時(shí)多練習(xí)練習(xí)速寫還是很有必要的。
線面插畫
線面插畫最近一兩年非常流行,準(zhǔn)確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成,用塊面表現(xiàn)人物形態(tài)時(shí)某些結(jié)構(gòu)會(huì)表現(xiàn)不出來,這時(shí)候用線條簡(jiǎn)單勾勒后,結(jié)構(gòu)就會(huì)清晰明了。其次當(dāng)線面插畫運(yùn)用在界面上時(shí),可以打破界面純文字或組件化的機(jī)械和沉悶感。線面插畫的風(fēng)格提升畫面熱鬧感的同時(shí),還能保持界面的干凈整潔。
動(dòng)效
微交互
界面微交互動(dòng)效會(huì)讓用戶的體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì),微交互和動(dòng)效設(shè)計(jì)是繞不開的,UI界面設(shè)計(jì)通過微交互反饋告知用戶當(dāng)前正在發(fā)生的事情,所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶情緒,取悅用戶。C端產(chǎn)品微交互和動(dòng)效已經(jīng)很成熟了,一部分功勞來自iOS系統(tǒng)原生自帶的效果。B端產(chǎn)品的微交互和動(dòng)效更多還是在學(xué)習(xí)海外產(chǎn)品,還需要給前端工程師灌輸微交互和動(dòng)效的設(shè)計(jì)價(jià)值,共同打造產(chǎn)品體驗(yàn)細(xì)節(jié)。
Mg動(dòng)畫
Mg動(dòng)畫需要很好的節(jié)奏感、韻律,每一個(gè)場(chǎng)景動(dòng)畫都需要其中的元素進(jìn)行連接變化,讓轉(zhuǎn)場(chǎng)動(dòng)畫更加自然,MG人物動(dòng)畫通過點(diǎn)線面的動(dòng)效變化讓畫面更加有趣、自然,通過粒子效果讓特定場(chǎng)景無限循環(huán)會(huì)讓人更加印象深刻。
三維
三維圖標(biāo)
MacOS Big Sur系統(tǒng)圖標(biāo)的更新帶動(dòng)了三維圖標(biāo)的流行,三維圖標(biāo)的應(yīng)用場(chǎng)景還是需要有較大留白空間的界面,因?yàn)槿S圖標(biāo)太小后就看不到更多細(xì)節(jié)。三維圖標(biāo)感覺又回到了擬物化和扁平化哪個(gè)更好的問題上?設(shè)計(jì)師應(yīng)該保持開放多元的視角。設(shè)計(jì)本身也在不斷的演化融合,存在即合理。合適最重要,它們都會(huì)有適合自己的場(chǎng)景和設(shè)計(jì)價(jià)值。
輕三維
為什么輕三維在界面設(shè)計(jì)中占有一席之位?一個(gè)是設(shè)計(jì)師不斷追求差異化的產(chǎn)物。另一個(gè)是更好的表現(xiàn)內(nèi)容,并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來自手機(jī)界面中的各種元素,比如組件、開關(guān)、按鈕、占位符、圖表、幾何圖形、圖標(biāo)、進(jìn)度條等,這些都是用戶日常使用系統(tǒng)軟件常見的元素,通過簡(jiǎn)單的幾何形體建?!驘艄狻硬馁|(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個(gè)出彩點(diǎn)是模型帶有厚度的倒角,結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個(gè)出彩點(diǎn)就是材質(zhì)自由添加,特別是當(dāng)下流行的毛玻璃效果,玻璃材質(zhì)渲染效果更佳。第三個(gè)出彩點(diǎn)就是可以加局部燈光,局部的漸變色或環(huán)境光更加出彩。
P4D(PS+C4D)
P4D是PS加C4D的設(shè)計(jì)表現(xiàn)技法,也是視覺設(shè)計(jì)的最后一個(gè)環(huán)節(jié),通過PS對(duì)C4D的渲染圖片進(jìn)行調(diào)色,利用PS的調(diào)色技巧可以很好的解決C4D打燈光的瑕疵,還可以利用PS強(qiáng)大的合成功能,將渲染圖片與圖片素材進(jìn)行合成,來表現(xiàn)畫面的視覺度,當(dāng)然三維軟件比較難實(shí)現(xiàn)的水、粒子、煙花等效果,也可以通過PS的后期合成來實(shí)現(xiàn),這也是P4D的強(qiáng)大之處。
卡通IP
卡通IP設(shè)計(jì)最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟,卡通IP也從傳統(tǒng)的純PS手繪技法,轉(zhuǎn)到C4D建?!巧壎ā狹D衣服制作—OC渲染—PS(靜態(tài))/AE(動(dòng)態(tài))調(diào)色。
卡通IP火的本質(zhì)更適合做營(yíng)銷,相比于品牌或Slogan,卡通IP具有親和力和畫面感。隨著各種手辦行業(yè)大熱,受互聯(lián)網(wǎng)大廠影響下,卡通IP已經(jīng)是互聯(lián)網(wǎng)B輪以上公司的標(biāo)配了。如果團(tuán)隊(duì)中沒有這樣能力的人,也可以通過繪制好二維,一套三維IP可以選擇外包完成。
對(duì)于UI設(shè)計(jì)師來說學(xué)習(xí)是有成本的,暫時(shí)并不是必備技能,如果喜歡完全可以學(xué)習(xí),從設(shè)計(jì)差異化的角度來看三維視覺確實(shí)有一定的競(jìng)爭(zhēng)力。
三維動(dòng)畫
C4D三維場(chǎng)景動(dòng)畫通過構(gòu)建實(shí)物和場(chǎng)景模擬生活中的現(xiàn)實(shí)場(chǎng)景,會(huì)讓用戶體驗(yàn)真實(shí)感,三維軟件制作動(dòng)效的最大優(yōu)勢(shì)是通過動(dòng)力學(xué)和表達(dá)式來模擬真實(shí)感,未來在AR/VR領(lǐng)域會(huì)有更好的發(fā)展。相對(duì)于界面動(dòng)效學(xué)習(xí)成本難度也相對(duì)較大。在三維動(dòng)畫中C4D軟件對(duì)于域、動(dòng)力學(xué)還是有一定的優(yōu)勢(shì)。
文章來源:UI中國(guó) 作者:RaDesign
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)
在終端APP中,動(dòng)畫非常常見,它可以輔助視覺制造焦點(diǎn),同時(shí)也可以讓用戶交互更加順滑,但動(dòng)畫的實(shí)現(xiàn)卻是設(shè)計(jì)師和研發(fā)群體的一個(gè)痛點(diǎn)。如何輔助設(shè)計(jì)師設(shè)計(jì)高性能炫酷的動(dòng)畫、如何將設(shè)計(jì)師設(shè)計(jì)的動(dòng)畫準(zhǔn)確無誤的還原到終端APP上是業(yè)界不斷探索和解決的問題。
圖1 傳統(tǒng)動(dòng)畫實(shí)現(xiàn)流程圖
當(dāng)前最好的動(dòng)畫設(shè)計(jì)軟件是Adobe After Effects(簡(jiǎn)稱AE),從AE動(dòng)畫制作到終端APP呈現(xiàn),傳統(tǒng)的實(shí)現(xiàn)方式如圖1所示,有三大痛點(diǎn):實(shí)現(xiàn)成本高、溝通成本高和性能難以保證。
近幾年,業(yè)界誕生了像Lottie、SVGA這樣的動(dòng)畫工作流解決方案,雖然在一定程度上提升了生產(chǎn)效率,但存在AE支持能力有限、動(dòng)畫性能難以保證、配套工具支持有限的問題。
PAG(Portable Animated Graphics)是騰訊PCG發(fā)布器中臺(tái)自主研發(fā)的一套完整的動(dòng)畫工作流解決方案,助力于將AE動(dòng)畫方便快捷的應(yīng)用于各平臺(tái)終端。PAG的流程圖如圖2所示,設(shè)計(jì)師在AE上設(shè)計(jì)出動(dòng)畫后,可以通過導(dǎo)出插件導(dǎo)出pag文件,同時(shí)PAG提供了桌面端預(yù)覽工具,支持實(shí)時(shí)預(yù)覽效果,在確認(rèn)效果后,通過運(yùn)行配置上線,各平臺(tái)終端可以通過PAG SDK加載渲染pag動(dòng)畫。
圖2 PAG動(dòng)畫工作流流程圖
與Lottie、SVGA相比,PAG增加支持了服務(wù)端。除此之外,如圖3所示,PAG動(dòng)畫方案在導(dǎo)出動(dòng)畫文件大小、AE特性支持和可編輯性方面具有較大的優(yōu)勢(shì)。
圖3 PAG和Lottie對(duì)比圖
和Lottie、SVGA實(shí)現(xiàn)不同的是,PAG不依賴平臺(tái)端渲染接口,可以實(shí)現(xiàn)各平臺(tái)的渲染一致性。PAG與Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。
無論是PAG還是Lottie、SVGA,所支持的AE特性僅僅是AE眾多特性中的很少的一部分,這在一定程度上限制了設(shè)計(jì)師的創(chuàng)造力。針對(duì)這個(gè)問題,PAG新增了BMP預(yù)合成的導(dǎo)出方式,支持導(dǎo)出所有AE特性,適用于不可編輯的場(chǎng)景。其原理如圖4所示,在合成的層面將渲染結(jié)果截取成圖片,然后進(jìn)行視頻編碼。
圖 4 BMP預(yù)合成原理圖
針對(duì)視頻不支持透明通道而動(dòng)畫需要包含透明通道的問題,在編碼的層面擴(kuò)展了透明通道的支持,如圖5所示。
圖6 PAG矢量和BMP預(yù)合成混合導(dǎo)出
針對(duì)導(dǎo)出動(dòng)畫和AE設(shè)計(jì)動(dòng)畫存在偏差的問題,PAG導(dǎo)出插件增加了使用了不支持AE特性提醒功能,如下圖7所示。
圖7 PAG導(dǎo)出面板
在預(yù)覽界面,同樣有不支持特性的提示,如圖8所示。
圖8 PAG導(dǎo)出面板預(yù)覽窗口
在使用AE設(shè)計(jì)動(dòng)畫的過程中,設(shè)計(jì)師可以方便快捷的提前查看使用了那些不支持直接導(dǎo)出的AE特性,換種實(shí)現(xiàn)方式或者導(dǎo)出成BMP預(yù)合成,有效的解決了設(shè)計(jì)動(dòng)畫和導(dǎo)出動(dòng)畫存在偏差的問題。
在AE動(dòng)畫設(shè)計(jì)的過程中,PAG導(dǎo)出面板提供了一鍵設(shè)置BMP預(yù)合成的方法,如下圖9所示。需要提示的是,一旦設(shè)置了BMP預(yù)合成,該合成中的文本和圖片將不能再被用戶編輯。
圖9 BMP 預(yù)合成設(shè)置
由于BMP預(yù)合成可能會(huì)影響到可替換圖片的數(shù)量,PAG同時(shí)會(huì)實(shí)時(shí)更新可替換圖片的數(shù)量給設(shè)計(jì)以提示。
在用pag設(shè)置的素材中,經(jīng)常會(huì)遇到用戶填充的圖片與默認(rèn)占位圖尺寸不一致的情況,在導(dǎo)出面板中PAG增加圖片填充的四個(gè)規(guī)則,如圖10所示:
圖10 可替換圖片填充設(shè)置
其中:
不縮放:畫面不縮放,從左上角位置開始裁剪
黑邊:在保持高寬比的情況下縮放到設(shè)備的可用屏幕大小,圖像不發(fā)生變形,如果圖片尺寸和填充區(qū)域比例不一致,會(huì)出現(xiàn)黑邊,為默認(rèn)填充模式
拉伸:不保持寬高比填充,會(huì)發(fā)生失變形
裁剪:在保持高寬比的情況下縮放到完全填滿可用的屏幕大小
具體效果如圖11所示。
圖11 圖片填充效果圖
PAGViewer支持桌面端預(yù)覽PAG文件動(dòng)畫效果,如下圖所示。支持查看動(dòng)畫文件中包含有多少個(gè)可編輯文本和可編輯圖片,且支持設(shè)計(jì)師本地填充素材,實(shí)時(shí)預(yù)覽填充效果,無需等待上線后才能確認(rèn)真實(shí)效果。圖片占位圖支持填充圖片或視頻,如果PAG文件內(nèi)置了音頻文件,支持播放音頻效果。具體效果如圖12所示。
圖12 PAG效果預(yù)覽
在pag動(dòng)畫實(shí)際使用的過程中,PAG經(jīng)常遇到的問題是設(shè)計(jì)師辛辛苦苦設(shè)計(jì)的動(dòng)畫在終端上性能表現(xiàn)不佳,需要進(jìn)行返工優(yōu)化,同樣的問題在使用Lottie方案時(shí)候也會(huì)存在。
除了效果預(yù)覽,PAGViewer還增加了性能展示面板,可以很方便的看到pag動(dòng)畫的基本信息,如時(shí)長(zhǎng)、幀率、尺寸、bmp預(yù)合成的數(shù)量,圖層總數(shù)等,還有量化的性能指標(biāo),定量的評(píng)估pag文件的性能,如圖13所示,方便設(shè)計(jì)師進(jìn)行針對(duì)性的優(yōu)化,而不需要等到上線前才會(huì)暴露性能問題。具體效果如圖13所示。
圖13 PAG性能展示面板
目前PAG方案已經(jīng)廣泛應(yīng)用于騰訊公司內(nèi)外幾十款產(chǎn)品中,涵蓋了眾多的國(guó)民級(jí)應(yīng)用。
總結(jié)下來,PAG目前主要使用在以下幾大場(chǎng)景:
圖15 UI動(dòng)畫場(chǎng)景
設(shè)計(jì)師設(shè)計(jì)出動(dòng)畫文件后,研發(fā)只需要替換預(yù)設(shè)的文本內(nèi)容即可,并且文件體積非常小。
圖16 貼紙動(dòng)畫場(chǎng)景
圖17 照片/視頻模板場(chǎng)景
PAG支持將內(nèi)置的圖片作為占位圖替換,并保留所有動(dòng)畫效果。因此可以將整個(gè)PAG動(dòng)畫設(shè)計(jì)成一個(gè)模板,把預(yù)設(shè)的占位圖替換成用戶選取的照片,自動(dòng)套用效果生成視頻。全程可以讓設(shè)計(jì)師自由批量生產(chǎn)模板,無需研發(fā)介入。
仍然基于圖片替換原理,PAG也支持將占位圖替換為視頻,實(shí)現(xiàn)視頻模板功能。
圖18 智能剪輯場(chǎng)景
智能剪輯是圍繞用戶上傳的視頻內(nèi)容,生成定制化的模板,模板本身是不固定的,可以從多個(gè)PAG文件組合而成,類似活字印刷。設(shè)計(jì)師可以利用這個(gè)特性,構(gòu)建自己的特效組件庫(kù),然后對(duì)接AI的識(shí)別能力,根據(jù)一定規(guī)則組合得到無限數(shù)量的模板效果,可以做到一鍵出片。這塊目前的典型應(yīng)用場(chǎng)景是王者榮耀的周戰(zhàn)報(bào)功能,隨機(jī)生成游戲高光時(shí)刻視頻。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ì)公司
本文從What和How兩個(gè)部分闡述如何輸出清晰有效的設(shè)計(jì)方案,為大家建立系統(tǒng)的設(shè)計(jì)思路提供幫助。
很多初入職場(chǎng)的設(shè)計(jì)師在審美和平面圖形基礎(chǔ)上都比較扎實(shí),對(duì)軟件的操作也出神入化,單個(gè)方案的界面視覺表現(xiàn)完成度和細(xì)致度也沒有太大問題。但卻往往在實(shí)際輸出項(xiàng)目方案的時(shí)候碰到瓶頸,方案反復(fù)地修改還不盡人意,設(shè)計(jì)能力無法得到質(zhì)的提升,晉升的腳步也從而停滯。
本文從What/How兩個(gè)部分循序漸進(jìn)地闡述如何輸出清晰有效的設(shè)計(jì)方案,希望給大家一些建立系統(tǒng)性設(shè)計(jì)思路的啟發(fā),幫助大家更好地輸出設(shè)計(jì)方案,為決策設(shè)計(jì)方案提供更有力的參考。
WHAT: 什么是清晰有效的設(shè)計(jì)方案
首先我們需要對(duì)清晰有效有一個(gè)整體的認(rèn)知。所謂清晰,從字面上理解是指看得很清楚、明朗,設(shè)計(jì)層面來說就是方案能做到方向明確,方案明了。而有效字面上指的是有效果,有效力,從設(shè)計(jì)層面來說就是輸出的方案可以解決存在的問題,能達(dá)到設(shè)定的目標(biāo)以及可以切實(shí)落地。
清晰和有效的考量維度是不一樣的:清晰更多是針對(duì)設(shè)計(jì)這一環(huán)節(jié),在于不同方向/方案的差異度和側(cè)重點(diǎn);而有效則更多需要聯(lián)合設(shè)計(jì)上下游(用戶/產(chǎn)品/開發(fā))。對(duì)于優(yōu)秀的設(shè)計(jì)方案來說兩者相輔相成,缺一不可。
接下來我們來詳細(xì)拆解什么是清晰和有效。
1.清晰 - 方向明確,方案明了
——————————
很多設(shè)計(jì)師對(duì)方案輸出的數(shù)量有個(gè)認(rèn)知誤區(qū),認(rèn)為設(shè)計(jì)方案越多越好,可以給老板、合作方更多選擇,往往不假思索地用大量的時(shí)間輸出所有可能的方案,并拿出來讓別人評(píng)審,認(rèn)為把所有的可能性列出來就不會(huì)錯(cuò),這正是對(duì)方案清晰性缺乏認(rèn)知的表現(xiàn)。
在設(shè)計(jì)最初期,不要著急動(dòng)手輸出界面,先結(jié)合目標(biāo)(近期目標(biāo)和遠(yuǎn)期目標(biāo))綜合考量,系統(tǒng)性地思考有哪些途徑達(dá)到目標(biāo),確保所有實(shí)現(xiàn)手段的方式都有考慮到,并且可以整合途徑一致、方向近似的方案。對(duì)差異性不大的方案進(jìn)行合并劃歸,才能在合理范圍內(nèi)整理出具有不同思考維度與目標(biāo)側(cè)重的提案方向。前期規(guī)劃思考的深度決定了方案的廣度,只有清晰的思考方案才會(huì)創(chuàng)造無限的可能。
用案例來讓大家對(duì)清晰這個(gè)定義有更具象的認(rèn)知:
相冊(cè)小程序Logo這個(gè)需求的目標(biāo)是需要突出相冊(cè)元素,并強(qiáng)化品牌識(shí)別度。
這是設(shè)計(jì)師輸出的Logo提案初稿,雖然輸出了28個(gè)方案之多,但沒有設(shè)計(jì)思路的規(guī)劃,想到哪就畫到哪,很多方案是重復(fù)的,還有一些方案在設(shè)計(jì)初期就應(yīng)該P(yáng)ass,設(shè)計(jì)的整個(gè)細(xì)致度也不夠充分。
于是設(shè)計(jì)師對(duì)設(shè)計(jì)方向重新進(jìn)行規(guī)劃整合,按照輸出形式重新規(guī)劃了分類。
按照分類篩選出四個(gè)可以繼續(xù)優(yōu)化的方案。并且拿著四個(gè)不同方向的方案去匯報(bào)。最終確定D方案。
我們重新回顧一下這個(gè)需求,28個(gè)方案 VS 4個(gè)方案,設(shè)計(jì)師需要的不是盡可能輸出多方案的能力,方案越多可能表示你在錯(cuò)誤的道路上越走越遠(yuǎn),需要的是通過前期系統(tǒng)的思考能一次把方案做對(duì)的能力。
2. 有效 - 解決存在的問題、能達(dá)到設(shè)定的目標(biāo)、可以落地的方案
——————————
很多設(shè)計(jì)師拿到產(chǎn)品需求會(huì)立即動(dòng)手,認(rèn)為滿足了產(chǎn)品這個(gè)角色提的需求便是好的設(shè)計(jì)輸出,或者把方案出的天花亂墜,當(dāng)產(chǎn)品或者其他角色提出不同意見就會(huì)覺得他們不懂什么是好的設(shè)計(jì)。這些現(xiàn)象大多是因?yàn)樵O(shè)計(jì)師在項(xiàng)目前期沒有正確思考和評(píng)估這個(gè)需求本身需要解決什么問題、方案能否達(dá)到團(tuán)隊(duì)共同設(shè)定的目標(biāo),以及方案是否能平穩(wěn)落地這三個(gè)維度。
解決存在的問題—從問題出發(fā)
我們?cè)趯?shí)際輸出方案的時(shí)候,不能從產(chǎn)品經(jīng)理的需求文檔開始,而是要把考量維度更前置,從項(xiàng)目現(xiàn)有的問題出發(fā)。這個(gè)問題的搜集包括外部用戶的反饋,內(nèi)部團(tuán)隊(duì)的聲音,但需要注意的是用戶的反饋不一定是真正的問題,需要做到篩選和甄別。比如新發(fā)布一個(gè)版本可能會(huì)碰到的一個(gè)情況是很多用戶打一星反饋說界面太難看太丑,這種屬于用戶感受,我們可以再深挖一下用戶覺得丑的原因,是不是改變了太多用戶習(xí)慣,但又沒有給用戶真的帶來更好的體驗(yàn)和更多的收益。
能達(dá)到設(shè)定的目標(biāo)—從目標(biāo)啟動(dòng)
問題還需要結(jié)合目標(biāo)一起考慮,解決問題的思路并不完全等同于目標(biāo),目標(biāo)是大家一起制定的未來產(chǎn)品的發(fā)展方向。比如我們新發(fā)布的版本里面新加了一個(gè)Tab改變了用戶習(xí)慣,大批用戶投訴,但如果這個(gè)新Tab是符合我們目標(biāo)的,我們不能為了短期解決用戶投訴把這個(gè)Tab下掉,應(yīng)該繼續(xù)觀察用戶在這個(gè)使用過程中碰到了什么問題,解決實(shí)際操作中碰到的問題。
用案例來讓大家對(duì)問題和目標(biāo)有更具象的認(rèn)知:
我們需要優(yōu)化QQ空間的為空界面,首先我們梳理下現(xiàn)網(wǎng)存在的問題,風(fēng)格整體比較老舊,很多圖形表意不明確,新出模塊就會(huì)有新風(fēng)格,所以存在很多不統(tǒng)一的地方,空間整個(gè)業(yè)務(wù)有一百多個(gè)為空界面,導(dǎo)致開發(fā)也不清楚到底應(yīng)該怎么用,用什么,所以很長(zhǎng)一段時(shí)間是處于亂用的狀態(tài)。
接著我們梳理了這次優(yōu)化的目標(biāo):
1 界面統(tǒng)一,用戶能對(duì)表意感知明確(解決現(xiàn)網(wǎng)問題)
2 強(qiáng)化QQ的品牌
3 做成基礎(chǔ)組件,保證復(fù)用性
4 低成本開發(fā)
確定了優(yōu)化目標(biāo)以后我們沒有馬上急于嘗試風(fēng)格,而是先遍歷了所有為空異常頁(yè),整合了所有場(chǎng)景最后梳理出八種情況,這八種情況可以覆蓋所有的為空?qǐng)鼍?,梳理整合?chǎng)景是目標(biāo)1、3、4能實(shí)現(xiàn)的前提。
然后我們基于這八個(gè)場(chǎng)景來輸出設(shè)計(jì)風(fēng)格,要低成本開發(fā),所以這里沒有考慮加動(dòng)畫,用企鵝剪影結(jié)合具體的場(chǎng)景來表意,不僅強(qiáng)化了品牌,也能做到表意清晰明確。圖形定好以后我們馬上也輸出了規(guī)范,Push給對(duì)接的開發(fā)同學(xué)方便調(diào)用。
在輸出方案過程中,始終都要緊緊貼合問題和目標(biāo),避免無效設(shè)計(jì)。
能落地的方案—技術(shù)可以實(shí)現(xiàn)
在輸出設(shè)計(jì)方案的時(shí)候,設(shè)計(jì)師需要考慮到開發(fā)成本是什么,需要消耗多少資源去實(shí)現(xiàn)這個(gè)需求,最低成本達(dá)到目標(biāo)的路徑是什么。如果有些方案開發(fā)成本很大卻收益價(jià)值卻很小,我們就需要斟酌它是否仍有執(zhí)行的必要。避免一味的追求設(shè)計(jì)效果不去對(duì)齊成本、人力,最后也只會(huì)是設(shè)計(jì)的自嗨。
用案例來讓大家對(duì)清晰這個(gè)定義有更具象的認(rèn)知:
產(chǎn)品提了好友生日推送禮物的需求,目標(biāo)是想用生日這一比較溫情的場(chǎng)景去設(shè)計(jì)專門的祝福頁(yè),用來提升寫操作和大盤活躍。我們需要設(shè)計(jì)送給用戶的禮物卡片,從實(shí)現(xiàn)手段的難易規(guī)劃了三個(gè)方向:
A 手勢(shì)交互但開發(fā)難度大: 3D手勢(shì)交互動(dòng)畫
B 趣味動(dòng)圖且開發(fā)成本適中:局部小動(dòng)畫
C 靜態(tài)但開發(fā)成本低:全靜態(tài)視覺,復(fù)用已有開發(fā)流程
最后團(tuán)隊(duì)對(duì)齊了人力成本,決定采用方案C,把設(shè)計(jì)精力放在本身卡片的表現(xiàn)上。
HOW: 如何輸出清晰有效的設(shè)計(jì)方案
那如何才能輸出清晰有效的設(shè)計(jì)方案呢?設(shè)計(jì)方案歸根結(jié)底是思維方式的具體體現(xiàn),輸出清晰有效的設(shè)計(jì)方案最核心的點(diǎn)在于體系化的思考方式,我總結(jié)了一下幾點(diǎn):
1 拓寬邊界
——————————
拓寬邊界需要設(shè)計(jì)師站在更高的視角和有更廣的視野,把設(shè)計(jì)從表現(xiàn)和執(zhí)行抽離往前后延展,在整個(gè)設(shè)計(jì)過程中往前去挖掘需求和規(guī)劃產(chǎn)品結(jié)構(gòu),往后做到把控和沉淀,能站在上下游各維度去Review整個(gè)項(xiàng)目,只有站在更全局的視角審視,才能跳出片面設(shè)計(jì)的維度。
2 轉(zhuǎn)換視角
——————————
從不同的視角看待問題,學(xué)會(huì)拆解問題和解決問題,從產(chǎn)品/開發(fā)不同的角度來全盤看整個(gè)產(chǎn)品,分析這個(gè)需求的投入產(chǎn)出比是不是足夠,是不是能達(dá)到目標(biāo)(包括設(shè)計(jì)目標(biāo)和產(chǎn)品目標(biāo))。設(shè)計(jì)、產(chǎn)品、開發(fā)從來都不是對(duì)立的,都是不同角色為了整個(gè)產(chǎn)品發(fā)力。
舉個(gè)例子,產(chǎn)品同學(xué)覺得輸出的方案不好看,是在用感性表達(dá),我們可以嘗試?yán)^續(xù)拆解不好看背后的原因,比如是不是核心內(nèi)容不夠突出、擔(dān)心按鈕轉(zhuǎn)化率等,一開始就抱著產(chǎn)品不懂設(shè)計(jì)這種想法是沒有辦法解決問題的。
還有一個(gè)就是用戶同理心,很多時(shí)候我們不能只站在設(shè)計(jì)師和產(chǎn)品的角度看待用戶反饋的問題,比如新功能內(nèi)部團(tuán)隊(duì)覺得很厲害,但實(shí)際門檻太高,用戶根本不知道怎么操作,而我們長(zhǎng)期體驗(yàn)這個(gè)產(chǎn)品反而忽略了產(chǎn)品的易用性。
3 結(jié)構(gòu)思維
——————————
我們?cè)趩?dòng)項(xiàng)目的時(shí)候,不要單點(diǎn)去看要在某個(gè)頁(yè)面要做什么改動(dòng),而是從問題入手,和產(chǎn)品同學(xué)對(duì)齊好目標(biāo),結(jié)合設(shè)計(jì)理念,最后找到發(fā)力點(diǎn)在哪里,循序漸進(jìn),這樣很大程度上能避免項(xiàng)目的反復(fù),對(duì)設(shè)計(jì)流程的準(zhǔn)確把控也是輸出優(yōu)秀設(shè)計(jì)方案的基礎(chǔ)。
舉一個(gè)日常生活的例子幫助大家理解,比如我的問題是長(zhǎng)得丑,我的目標(biāo)是要變得更年輕漂亮,我的理念就是改善體型和優(yōu)化五官,最后找到具體的發(fā)力點(diǎn)比如晚上不吃晚飯,去美容院打美容針、學(xué)會(huì)怎么化妝等。
4 認(rèn)知?jiǎng)?chuàng)新
——————————
有些新設(shè)計(jì)師對(duì)設(shè)計(jì)創(chuàng)新的認(rèn)知還停留在是去做一些創(chuàng)造世界、改變世界的事情,認(rèn)為創(chuàng)新就是把原項(xiàng)目進(jìn)行翻天覆地的改變,初入職場(chǎng)會(huì)覺得負(fù)責(zé)的業(yè)務(wù)和項(xiàng)目都很小,沒有什么意思,其實(shí)創(chuàng)新的維度有很多,包括設(shè)計(jì)工作流程的優(yōu)化、還有從小的問題點(diǎn)著手去深挖和思考,找到合適的解決方案并打磨細(xì)節(jié)給用戶創(chuàng)造驚喜。擺正心態(tài)才能做對(duì)事做好事。
5 及時(shí)復(fù)盤
——————————
完成項(xiàng)目以后需要不斷的總結(jié)方法,遇到的問題,除了技法層面的提升,更重要的還包括思考層面的提升。學(xué)會(huì)去總結(jié)之前踩過的坑,避免重復(fù)性的問題,比如你的輸出一直存在層級(jí)不清晰的問題,那么你需要關(guān)注后續(xù)輸出的界面里大模塊之間以及元素之間的層次是否還存在這個(gè)問題??梢苑稿e(cuò)誤,但是盡量避免總是犯同樣的錯(cuò)誤,這樣才能加速成長(zhǎng)的腳步。
寫在最后
進(jìn)入互聯(lián)網(wǎng)公司工作之前,我們對(duì)設(shè)計(jì)的理解更多停留在表現(xiàn)層面,所以對(duì)好設(shè)計(jì)的判斷標(biāo)準(zhǔn)更多是好不好看、喜不喜歡。當(dāng)進(jìn)入互聯(lián)網(wǎng)公司后,隨著工作經(jīng)驗(yàn)的積累,我們會(huì)發(fā)現(xiàn)設(shè)計(jì)不只是狹義地使用軟件繪制圖形,背后需要很強(qiáng)的邏輯和系統(tǒng)思考的能力、結(jié)構(gòu)化的思維、溝通能力等,需要我們不斷的學(xué)習(xí)補(bǔ)齊自己的短板,及時(shí)轉(zhuǎn)換職場(chǎng)心態(tài)。
文章來源:站酷 作者:騰訊ISUX
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn