首頁

體驗(yàn)設(shè)計(jì)如何降低成本提高效益?

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

你是否和我有同樣的困惑,常常無法客觀看待自己的設(shè)計(jì),優(yōu)化的時(shí)候又常常不知從哪里下手,看到別的產(chǎn)品設(shè)計(jì)又無法給出具體的判斷依據(jù)。



今天學(xué)習(xí)一下用戶體驗(yàn)的結(jié)構(gòu)化衡量標(biāo)準(zhǔn)。不管是日常工作還是作品提升,都可以作為一個(gè)方向性的指導(dǎo)。


要想讀懂一個(gè)信息,多少文字才能解釋清楚(認(rèn)知成本)?網(wǎng)頁加載多長(zhǎng)時(shí)間才算合理(時(shí)間成本)?要設(shè)置攝像機(jī)的時(shí)間和日期,設(shè)定多少個(gè)步驟才算合理(操作成本)?


首先我們來了解一下通用設(shè)計(jì)法則之——成本效益法則



成本效益法則的概念


百科含義:成本效益法則指的是要從“投入”與“產(chǎn)出”的對(duì)比分析來看待“投入(成本)”的必要性、合理性,即考察成本高低的標(biāo)準(zhǔn)是產(chǎn)出(效益)與投入(成本)之比,該比值越大,則說明成本效益越高,相對(duì)成本越低;考察成本應(yīng)不應(yīng)當(dāng)發(fā)生的標(biāo)準(zhǔn)是產(chǎn)出(效益)是否大于為此發(fā)生的成本支出,如果大于,則該項(xiàng)成本是有效益的,應(yīng)該發(fā)生。


從設(shè)計(jì)的角度來看,成本效益法則一般是用來評(píng)估伴隨著新功能或新元素出現(xiàn)新增加成本的最后財(cái)務(wù)回收狀況。


用戶價(jià)值 = 新體驗(yàn) - 舊體驗(yàn) - 切換成本


從用戶角度來看,成本效益法則也可以用來提高設(shè)計(jì)的品質(zhì)。如果與設(shè)計(jì)互動(dòng)的相關(guān)成本大于收益,就是不良設(shè)計(jì);相反,如果效益大于成本,就是優(yōu)秀設(shè)計(jì)。用戶成本一般包括認(rèn)知成本、操作成本、時(shí)間成本。


體驗(yàn) = 效益 - 認(rèn)知成本 - 時(shí)間成本 - 操作成本


例如:把走一段路到展覽館看展當(dāng)作成本,把看展的趣味程度當(dāng)作效益,如果趣味程度超過走路的成本,那么這個(gè)展覽設(shè)計(jì)就是優(yōu)秀設(shè)計(jì)。


優(yōu)秀的展覽設(shè)計(jì)效益大于成本


糟糕的展覽設(shè)計(jì)成本大于效益


每個(gè)設(shè)計(jì)的品質(zhì)都可以用成本效益法則來進(jìn)行衡量。如果與某項(xiàng)設(shè)計(jì)互動(dòng)之后,用戶覺得獲得的效益高于此次互動(dòng)的相關(guān)成本,即是優(yōu)秀的設(shè)計(jì);相反,如果成本高于效益,即是糟糕的設(shè)計(jì)。



怎么做?


若想提高體驗(yàn)的價(jià)值,可以從兩方面入手:1. 提高效益;2. 降低成本。



提高效益更多是產(chǎn)品層面的決策,所以站在設(shè)計(jì)師的角度,這篇重點(diǎn)從如何“降低成本”展開。降低成本主要有三方面:降低認(rèn)知成本、降低時(shí)間成本、降低操作成本



PART 1 

降低認(rèn)知成本


1. 減少冗余信息


a. 去掉累贅文案





為了避免客訴,設(shè)計(jì)常常會(huì)“被迫”在首頁做冗長(zhǎng)的文案提示,比如美團(tuán)民宿的“今天入住、明天離店”的文字提示,彷佛在跟著文案做“今天入住+明天離店=1晚”的數(shù)學(xué)題,過于平鋪直述反而增加了用戶思考。而且過于具體的文案在小字顯示的效果下閱讀性也不夠好,反而增加了用戶閱讀文案的認(rèn)知負(fù)擔(dān)。


同樣是 1 晚,Airbnb的文案表達(dá)簡(jiǎn)潔明了,日期間的橫杠足以理解是從哪天到哪天的含義。


如果說Airbnb是國(guó)外產(chǎn)品,調(diào)性不同,那么像馬蜂窩的解決方案也是層次與閱讀都更加清晰易懂的方式。



b. 去掉多余選項(xiàng)



招行銀行的首頁功能并不是我會(huì)經(jīng)常要用的功能,但是卻無法像支付寶那樣自定義編輯首頁的功能icon,去掉不需要的功能入口。



2. 內(nèi)容好理解,減少思考,減少記憶


a. 文案與圖片匹配度



文案與圖片的契合度高更夠幫助用戶更有效的理解內(nèi)容,App Store的推薦卡片在這方面表現(xiàn)的非常優(yōu)秀。



b. 結(jié)構(gòu)框架好理解——格式塔原理



接近原則中指明物體之間的相對(duì)距離會(huì)影響我們感知它們是否以及如何組織在一起。京喜首頁功能模塊區(qū)分的相對(duì)距離差別不夠大,加上商品圖的視覺干擾,更加影響信息層次的區(qū)分。而淘寶的模塊信息分組則清晰明確,信息辨識(shí)度高,視覺干擾少,能夠有效減少用戶區(qū)分信息的思考。



c.記憶的局限,降低記憶負(fù)擔(dān)


人們工作記憶的容量有限,大約是 4±1。由于短期記憶的局限,設(shè)計(jì)師應(yīng)該確保用戶可以簡(jiǎn)單地識(shí)別信息,但不能從之前的對(duì)話中回想信息。


比如我們經(jīng)常會(huì)發(fā)現(xiàn)考試中的選擇題比簡(jiǎn)答題更容易,這是因?yàn)檫x擇題要求我們?nèi)プR(shí)別答案,而不是在記憶里回想答案。


再例如搜索,當(dāng)搜索結(jié)果出現(xiàn)時(shí),我們的注意力自然地從輸入的詞匯轉(zhuǎn)移到了結(jié)果上,因此好的設(shè)計(jì)應(yīng)該在搜索結(jié)果頁展示搜索詞。把點(diǎn)擊過的結(jié)果變色也是幫助用戶記憶已點(diǎn)過的內(nèi)容。



知乎的搜索結(jié)果不記憶已閱覽的內(nèi)容,而谷歌搜索則幫助用戶記憶已閱覽過的內(nèi)容。



 3. 優(yōu)先級(jí):信息層級(jí)


a.用戶優(yōu)先級(jí)、b.功能優(yōu)先級(jí)、c.視覺優(yōu)先級(jí)


d.交互優(yōu)先級(jí)



常見的是彈窗按鈕,需要區(qū)分信息優(yōu)先級(jí),不讓用戶產(chǎn)生選擇困擾。



 4. 文字、圖標(biāo)的識(shí)別性、易讀性



美團(tuán)Tab icon簡(jiǎn)潔明了,圖形與含義符合,文案簡(jiǎn)潔清晰。而悅會(huì)則顯得復(fù)雜難以識(shí)別,不僅文案復(fù)雜,易讀性比較差,圖標(biāo)也沒有準(zhǔn)確表達(dá)其寓意。



 5. 一致性


a. 內(nèi)部的一致性、b. 交互邏輯的一致性、c. 元素的一致性、d. 語詞的一致性、e. 信息架構(gòu)的一致性


f. 視覺的一致性



Airbnb的版式從banner到下面的標(biāo)題分類,對(duì)齊方式與字體對(duì)比都保持一致風(fēng)格,圖標(biāo)和插圖都是線與線面的風(fēng)格。對(duì)比之下,攜程的設(shè)計(jì)語言則相對(duì)不夠完整,不僅icon風(fēng)格不太一致(面和線都有),banner運(yùn)營(yíng)位的版式也是比較隨意的(文案沒有統(tǒng)一的排版規(guī)范)。



 6. 提示、引導(dǎo)、反饋



好的引導(dǎo)反饋能夠大大賦能業(yè)務(wù)目標(biāo),相對(duì)于躺平的關(guān)注引導(dǎo),好好住的類似提示引導(dǎo),則生硬了很多,特別是兩句文案的切換動(dòng)作比較刻意,加的笑臉表情也跟引導(dǎo)關(guān)系不大。而躺平的引導(dǎo)非常的萌,文案與形象風(fēng)格都很nice,加上形象手指的動(dòng)態(tài)效果,使引導(dǎo)非常的自然討喜。



 7. 符合用戶習(xí)慣


比如,Windows 與 Mac 系統(tǒng)的軟件關(guān)閉方式。使用windows電腦時(shí),我們形成了右上角關(guān)閉的操作習(xí)慣。后來開始用Mac電腦,關(guān)閉入口都在左上角,在一段時(shí)間內(nèi),每次關(guān)閉都要找一下關(guān)閉按鈕在哪里。由于Mac的關(guān)閉方式?jīng)]有比windows產(chǎn)生顯而易見的體驗(yàn)提升,改變操作習(xí)慣成本高,部分用戶可能會(huì)認(rèn)為Mac的關(guān)閉操作不好用。



當(dāng)然,假如最開始用的是 Mac 電腦,后面再使用 Windows 電腦,也會(huì)感到 Windows 不好用,這是先入為主的觀念,一旦產(chǎn)生習(xí)慣,改變習(xí)慣將產(chǎn)生一定的學(xué)習(xí)成本。



PART 2 

降低時(shí)間成本


1. 扭轉(zhuǎn)用戶對(duì)時(shí)間的感知



今日頭條通過懶加載的方式,將文字內(nèi)容優(yōu)先顯示,并且將圖片位用默認(rèn)底色先顯示出來,用戶可以在圖片加載出來之前先看文字內(nèi)容,大大避免了等待的焦慮。我們應(yīng)該避免像移動(dòng)營(yíng)業(yè)廳這樣的空白加載頁面。


 2.  增加等待過程中的價(jià)值



王者榮耀游戲開始前的加載界面會(huì)有小技巧的提示,等待的時(shí)間可以學(xué)習(xí)一些小技巧。



PART 3 

降低操作成本


 1. 先價(jià)值吸引后行動(dòng)(先瀏覽后登陸)



每日瑜伽可以先瀏覽內(nèi)容,想要了解更多的時(shí)候才引導(dǎo)登錄,降低了操作成本。而keep卻必須要先登錄才可以瀏覽里面的內(nèi)容,增加了使用門檻。



 2. 預(yù)測(cè)用戶行為



滴滴出行根據(jù)用戶經(jīng)常使用的地點(diǎn)預(yù)測(cè)用戶要去的地方,一鍵選擇地址更便捷。



3. 主動(dòng)替用戶選擇



美團(tuán)外賣支付時(shí)主動(dòng)幫用戶選擇極速支付選項(xiàng),一方面讓用戶更便捷,另一方面也能增加銀行卡賬戶的綁定,賦能業(yè)務(wù)。



 4. 簡(jiǎn)化關(guān)鍵節(jié)點(diǎn)



淘寶確認(rèn)訂單自動(dòng)選擇優(yōu)惠券,簡(jiǎn)化了關(guān)鍵流程,降低操作成本,提高下單轉(zhuǎn)化?,F(xiàn)在很多購物平臺(tái)也都實(shí)現(xiàn)了這一點(diǎn)。



5. 減少手動(dòng)輸入操作



以閃送為例,自動(dòng)讀取復(fù)制信息——一鍵粘貼——智能識(shí)別——自動(dòng)填充信息,減少了用戶的手動(dòng)輸入操作,大大提高了體驗(yàn)的質(zhì)量與效率。



降低成本的誤區(qū)


是不是成本越低,這項(xiàng)設(shè)計(jì)就是越優(yōu)秀的設(shè)計(jì)呢?在成本效益法則下,絕不是成本越低,效益就越高,設(shè)計(jì)決策需要把互動(dòng)產(chǎn)生的效益考慮在內(nèi)。


如果一個(gè)交互的復(fù)雜度能夠提高交互產(chǎn)生的效益,那么就應(yīng)該適當(dāng)?shù)脑黾咏换サ膹?fù)雜度。



比如我們常用到的密保鍵盤,打亂的數(shù)字順序能夠防止偷窺者從手勢(shì)位置竊取密碼,因此這項(xiàng)交互成本的提高相應(yīng)的能夠大大了我們資產(chǎn)賬戶的安全效益。


所以,必要時(shí)是可以通過提高成本換取更高的收益。但同時(shí)如果技術(shù)允許,通過手機(jī)短信驗(yàn)證登錄與面容識(shí)別這種成本更低安全系數(shù)更高的方式,還是更好的選擇,要根據(jù)具體的場(chǎng)景具體對(duì)待。



總結(jié)


每個(gè)設(shè)計(jì)的品質(zhì)都可以用成本效益法則來進(jìn)行衡量。如果與某項(xiàng)設(shè)計(jì)互動(dòng)之后,用戶覺得獲得的效益高于此次互動(dòng)的相關(guān)成本,即是優(yōu)秀的設(shè)計(jì);相反,如果成本高于效益,即是糟糕的設(shè)計(jì)。


設(shè)計(jì)師運(yùn)用成本效益法則提升用戶體驗(yàn)的維度主要在降低用戶的認(rèn)知成本、時(shí)間成本、操作成本。


降低認(rèn)知成本包括:減少冗余信息;內(nèi)容好理解,減少思考,減少記憶;優(yōu)先級(jí):信息層級(jí);文字、圖標(biāo)識(shí)別性,可讀性,易讀性;一致性;提示、引導(dǎo)、反饋;符合用戶習(xí)慣。


降低時(shí)間成本包括:扭轉(zhuǎn)用戶對(duì)時(shí)間的感知;增加等待過程中的價(jià)值、趣味性、小貼士。


降低操作成本包括:先價(jià)值吸引后行動(dòng);預(yù)測(cè)用戶行為;主動(dòng)替用戶選擇;簡(jiǎn)化關(guān)鍵節(jié)點(diǎn);減少手動(dòng)輸入操作。


同時(shí)我們也要注意降低成本的誤區(qū),并不是成本越低越好,如果提高成本可以換來更高的效益,也要具體情況具體對(duì)待。


文章來源:站酷  作者:水原七秒

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



一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

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

每年年初的 CES 消費(fèi)電子展,是一個(gè)非常適合了解前沿技術(shù),了解消費(fèi)和產(chǎn)品趨勢(shì),甚至在這些量產(chǎn)、準(zhǔn)量產(chǎn)以及概念設(shè)計(jì)產(chǎn)品當(dāng)中,窺見屬于未來的設(shè)計(jì)趨勢(shì)。

每年的 CES 都是一個(gè)特別適合展示新趨勢(shì)的地方。雖然很多廠商會(huì)傾向于在 CES 上發(fā)布新品,但是相比于這些為數(shù)不多的新品和發(fā)布會(huì),CES 上更加值得一看的是那些正在研發(fā)、小范圍內(nèi)投產(chǎn)并且你即將會(huì)看到的新技術(shù)和有趣的東西,它們所指向的都是消費(fèi)級(jí)的產(chǎn)品,也貼合我們一直在說的「趨勢(shì)」。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

今年 CES 大會(huì)選擇了線上舉辦,不同廠商選擇使用直播、視頻或者圖文的形式發(fā)布了自己的產(chǎn)品,有的是概念設(shè)計(jì),更多的是后續(xù)會(huì)量產(chǎn)的產(chǎn)品,類型豐富。這篇文章會(huì)按照幾個(gè)大的類別和趨勢(shì),將今年的CES 展上產(chǎn)品進(jìn)行了梳理,方便和我們之前的設(shè)計(jì)/技術(shù)趨勢(shì)相互印證。

劍指移動(dòng):快速迭代的芯片

銳龍系列的 AMD CPU 以極高的性價(jià)比讓廣大電腦用戶喊出了「AMD Yes !」的最強(qiáng)音,而脫離 Intel 陣營(yíng)的蘋果干脆以 M1 芯片,把牙膏廠 Intel 原本的不安全感直接拉滿,成為了壓垮駱駝的最后一根稻草。在 CES 大會(huì)開始之前干脆把 CEO 換成了工程師出身的行業(yè)老兵 Pat Gelsinger,試圖重拾工程師文化。

在今年的 CES 大會(huì)上,試圖改變的 Intel 發(fā)布了針對(duì)高性能輕薄筆記本電腦的芯片,H 系列:

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

H 系列采用 Tiger Lake 架構(gòu),全系列搭載高性能的 Iris Xe 核顯,它的性能足以在 1080p 分辨率下流暢運(yùn)行《古墓麗影》這個(gè)級(jí)別的游戲(實(shí)際上 M1 的發(fā)布會(huì)上也同樣使用了這款游戲作為性能測(cè)試)。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

英特爾的11代桌面端芯片也在性能上又不小提升,采用了全新的 Rocket Lake-S 架構(gòu),不過最值得期待的是下半年才會(huì)公布細(xì)節(jié)的12代混合架構(gòu) CPU,Alder Lake。

老對(duì)手 AMD 在 CES 2021 上則發(fā)布了全新的 5000 系列移動(dòng)端處理器,其中標(biāo)壓的 5000H 系列和低壓的 5000U 系列,都用自身的配置和性能解釋了“便宜大碗”的概念。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

最高可選 8核16線程的配置,主頻可飆升至 4.4GHz,充滿電之后日常使用可以達(dá)到 17.5小時(shí),電影播放可以長(zhǎng)達(dá) 21 小時(shí)的電影。

而同為御三家之一的 Nvidia 則帶來了桌面級(jí)的RTX 3060顯卡以及移動(dòng)端的RTX 3080/RTX 3070/RTX 3060。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

當(dāng)然,無論是桌面端的顯卡還是移動(dòng)端顯卡的性能都有著不俗的表現(xiàn),具體大家可以去官網(wǎng)看看這里就不說了……(一個(gè)很重要的原因是由于比特幣的瘋狂漲幅,導(dǎo)致挖礦需求暴漲以至于這波顯卡價(jià)格出現(xiàn)了極其瘋狂的增長(zhǎng),一卡難求,鬼知道啥時(shí)候能恢復(fù)正常)

總而言之,移動(dòng)端芯片(主要是 針對(duì)筆記本電腦)在性能提升的同時(shí)還控制好續(xù)航,無論是CPU本身的算力還是顯卡的性能,都有著相當(dāng)明顯的提升。這對(duì)于設(shè)計(jì)和創(chuàng)意從業(yè)者而言,意味著有著更加輕薄地電腦和平板可供選擇,并且性能足以支撐從平面到3D渲染、 視頻剪輯乃至于大型游戲,而且很大程度上,性價(jià)比有 「AMD Yes」,高性能可以上 Intel H 系列 + Nvidia ,而習(xí)慣使用 macOS 地用戶應(yīng)該也會(huì)在未來幾個(gè)月內(nèi)等到新的 M 系列芯片和 Macbook Pro 16 和 Macbook Pro 14 ,當(dāng)然這和 CES 2021 就沒啥關(guān)系了。

目前這些新芯片本身的強(qiáng)大性能和優(yōu)良的續(xù)航,可能需要到后續(xù)的電腦和筆記本上才有所體現(xiàn),好在 CES 2021 本身還發(fā)布了不少性能優(yōu)秀、設(shè)計(jì)過硬的電腦類產(chǎn)品。

創(chuàng)意筆電:為創(chuàng)意工作者提供更多可能性

筆記本電腦在歷年 CES 大會(huì)上都是重要的組成部分。在這些筆電類產(chǎn)品當(dāng)中,除了一部分迭代更新的量產(chǎn)新款之外,還會(huì)有不少基于特定的需求,在設(shè)計(jì)和功能上高度特化的產(chǎn)品出現(xiàn)。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

比如 HP 的 Envy 14 筆記本就很典型地屬于前者,11代英特爾 CPU 和 Nvidia GeForce GTX 系列的顯卡,傳統(tǒng)的造型和更加精致的工業(yè)設(shè)計(jì),這種不過不失的產(chǎn)品其實(shí)是各大廠商在 2021 年鋪貨時(shí)的中堅(jiān)力量。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

而微軟的 Surface Pro 7+ 也只能算得上是小幅更新,多個(gè)配置可選,沒有太多好說的。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

而出自聯(lián)想的 ThinkBook Plus Gen 2 i 筆記本在繼續(xù)探索了雙屏筆記本的另外一種可能性,A面的超大尺寸電子墨水屏搭配手寫筆,簡(jiǎn)直就是給手繪和筆記愛好者量身定制的創(chuàng)作空間。掀開之后又是一臺(tái)傳統(tǒng)的超極本,13.9 mm 的厚度 和 1.3 KG 的重量也非常符合攜帶通勤的標(biāo)準(zhǔn)。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

相比之下, 同一譜系的 ThinkPad X1 Titanium Yoga 的翻轉(zhuǎn)設(shè)計(jì)則顯得更加傳統(tǒng),不過在性能和影音上,Dolby Vision HDR和Dolby Atmos揚(yáng)聲器的支持讓它在影音娛樂上更加突出,少了電子墨水屏,整體厚度也縮減到了11 mm。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

不過,更有意思的是華碩ZenBook Pro Duo 15 OLED 筆記本電腦,原本 Duo 系列的雙屏設(shè)計(jì)已經(jīng)相當(dāng)獨(dú)特了,這次的新款不僅將配置進(jìn)一步推升到了 i9 cpu + NVIDIA GeForce RTX 307 的級(jí)別,還給副屏增加了一個(gè)自然的 9.5 度傾斜,防炫光的同時(shí)還更加貼合人體工程學(xué)。這可能不一定符合每個(gè)人的審美,但是可能正好是某些天天肝視頻跑渲染的設(shè)計(jì)師同學(xué)正好需要的東西。

另外一邊,游戲本也基本上是在堆配置,Alienware M15 R4和M17 R4 老老實(shí)實(shí)地把顯卡推到了 NVIDIA GeForce RTX 3080,加上 360hz 超高頻率的顯示屏,內(nèi)存堆到32GB,存儲(chǔ)支持 4TB PCIe,性能夠怪獸,但是別的就沒啥好說的。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

而另外一邊的 Razer 推出的 Razer Blade Pro 17 2021 和 Razer Blade 15 2021 這兩款筆記本,本質(zhì)上和外星人家的差不太多,配置有多高堆多高,機(jī)身工藝搞好點(diǎn),RGB 信仰燈炫起來……

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

當(dāng)然這并不重要,這次 CES 2021 上,Razer 真正的殺手锏是這倆筆記本的配件,Razer Project Brooklyn概念游戲椅:

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

只需按一下按鈕,這款游戲椅就可以從背面展開60英寸的OLED顯示屏,真正沉浸式的游戲體驗(yàn),帶有4D模塊化功能的扶手以及折疊可調(diào)的桌子,連整個(gè)框架都是帶有高保真觸覺模塊的,體驗(yàn)有多好,就要看你和游戲廠商的想象力了。

對(duì)于游戲本本體而言,在配置和外觀上的設(shè)計(jì)很大概率只能靠添油戰(zhàn)術(shù),互相之間見招拆招,真正能夠打出新意,玩兒出花樣的,基本都是在外設(shè)和配件上。

屏幕延展:智能手機(jī)的下一個(gè)階段

智能手機(jī)毫無疑問是大家最關(guān)心的事情。支持5G頻段,AI驅(qū)動(dòng)的后置多鏡頭模組,前置挖孔/劉海鏡頭,6英寸屏幕,這幾乎是當(dāng)下絕大多數(shù)智能手機(jī)的標(biāo)準(zhǔn)配置,也是貼合大眾需求的最佳實(shí)踐。CES 2021 發(fā)布的 三星 Galaxy S21 Ultra 5G 就是這種典型,配置到位無懈可擊,更重要的是,后置鏡頭模組的工業(yè)設(shè)計(jì)相當(dāng)具有識(shí)別度,邊角凌厲又富有美感。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

不過大家都很清楚未來趨勢(shì)肯定不會(huì)止步于此,柔性屏幕給人帶來的想象力太過豐富,包括蘋果在內(nèi)的一線廠商幾乎都在這個(gè)基礎(chǔ)上進(jìn)行探索。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

三星的 Galaxy Fold 系列已經(jīng)發(fā)不到第二代,Moto 的新生 Razr 也發(fā)布了迭代之后的版本,蘋果早早申請(qǐng)了環(huán)繞式柔性屏幕的設(shè)計(jì)專利:

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

不過,最有意思的還是卷軸屏幕。在 CES 2021 之前,OPPO 就公布過卷軸屏手機(jī)的概念設(shè)計(jì):

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

在今年CES 上, LG 發(fā)布的 LG Rollable 則可能是最早量產(chǎn)的卷軸屏的智能手機(jī)(預(yù)計(jì)在今年年內(nèi)發(fā)布):

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

雖然沒有 LG 這么快,TCL 也同樣帶來了自己的卷軸屏智能手機(jī),不過和 LG 的橫向拉伸不同,TCL 的屏幕選擇了縱向拉伸:

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

相比于折疊機(jī)構(gòu),卷軸式的柔性屏幕將不會(huì)因?yàn)檫^大的折疊角度而出現(xiàn)屏幕折痕。不過這種收納方式在保持優(yōu)雅的同時(shí),還會(huì)面對(duì)和升降式攝像頭一樣的問題:展開和收納結(jié)構(gòu)的可靠性和開闔時(shí)間的控制。

可以確定的是,柔性屏幕設(shè)備會(huì)逐漸增加,而目前技術(shù)的快速迭代意味著在未來2年內(nèi)會(huì)有一大批類似的設(shè)備出現(xiàn)。無論是折疊、翻轉(zhuǎn)、卷軸還是翻蓋式雙屏,都意味著 UI 界面的動(dòng)態(tài)延展,而不同的結(jié)構(gòu)設(shè)計(jì)帶來的是交互方式的百花齊放,這對(duì)于UI 和交互設(shè)計(jì)而言,都是全新的挑戰(zhàn),以及新的機(jī)遇。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

不要忽視了這種硬件設(shè)計(jì)之下的復(fù)雜度,即使是最簡(jiǎn)單的雙屏折疊,對(duì)于 UI 交互和開發(fā)而言,都是巨大的挑戰(zhàn),不信可以先看看微軟的雙屏設(shè)計(jì)規(guī)范:

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

場(chǎng)景細(xì)化:智能家居的差異進(jìn)化

物聯(lián)網(wǎng)和智能家居從提出來到最終落地為消費(fèi)級(jí)產(chǎn)品,經(jīng)歷了十幾年漫長(zhǎng)的過程。在今年的 CES 展上所展示的很多智能家居類的產(chǎn)品,確確實(shí)實(shí)比以往更加「智能」也更加富有想象力。除了各大廠商原本在工業(yè)設(shè)計(jì)和基礎(chǔ)技術(shù)上的積淀,這些產(chǎn)品大多借助了機(jī)器學(xué)習(xí)技術(shù)來提升「智能」程度,并且借助語音交互來保持操控的便捷性。

智能家居的花樣就多了。

三星推出的 Bot Care 智能機(jī)器人看起來像是一個(gè)更具未來感的的 R2D2,不僅能夠識(shí)別你的語音命令,而且能夠借助成熟的 AI 技術(shù)識(shí)別你的行為,它會(huì)學(xué)習(xí)和了解你的日程安排,能夠逐漸了解你的習(xí)慣,并且在日常的生活中提供幫助。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

而更加進(jìn)階的是 Bot Handy 智能家居機(jī)器人功能就更多一些了,它不僅可以在室內(nèi)到處溜達(dá),而且能夠能夠識(shí)別材質(zhì)和物品,它自帶的機(jī)械臂能夠幫你收拾房間,收拾廚房物品等等等等。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

CareOS Themis 的智能鏡子也借助傳感器和 AI 實(shí)現(xiàn)了諸多傳統(tǒng)鏡子做不到的事情。通過內(nèi)置的 IR 溫度傳感器、UV皮膚分析燈以及相機(jī),CareOS Themis 智能鏡子 能夠?qū)δ愕男l(wèi)生狀況、皮膚狀況乃至于心理健康狀態(tài)進(jìn)行分析,并且提供切實(shí)可行的建議。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

傳統(tǒng)家居和傳感器、數(shù)字硬件的結(jié)合,將家居設(shè)備的安全性、可用性和完備性全方位地進(jìn)行了提升。比如 LOCKLY Duo 智能鎖就加入了雙重鎖定技術(shù),可以更快打開又保證了安全性:

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

而 Ampere Shower 這個(gè)藍(lán)牙淋浴揚(yáng)聲器,不僅可以讓你在淋浴時(shí)享受 360 度環(huán)繞立體聲,想要播放什么內(nèi)容完全可以用語音控制,而且考慮到它特殊的使用場(chǎng)合,它干脆借助淋浴噴頭的水流來進(jìn)行充電:

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

而便攜式投影儀也是諸多大廠的下一個(gè)發(fā)力點(diǎn),在保持高流明、智能可控的特性的同時(shí),進(jìn)一步縮小提及,提升音響效果,就像華碩的 ZenBeam Latte 的便攜投影儀一樣:

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

傳統(tǒng)家電設(shè)備則在智能化和場(chǎng)景化的探索之下,呈現(xiàn)更加靈活的新玩法。三星定制的4門 Flex 冰箱可以針對(duì)不同的食品進(jìn)行定制化的管理,而傳統(tǒng)固定的冷凍/冷藏式的分區(qū)也借用智能化的管理打破,如果你需要更多的冷藏空間,只需要通過設(shè)置就能夠進(jìn)行轉(zhuǎn)換和調(diào)整。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

當(dāng)然,智能電視當(dāng)然是 CES 大會(huì)上繞不過去的門類,只是多數(shù)廠商的產(chǎn)品都是在自然硬件和性能迭代上「更高、更快、更強(qiáng)」。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

而其中真正稱得上有趣的,還是 LG 的升降式透明電視:

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

透明屏幕在不同光照條件下的泛用性,應(yīng)該還是存疑的。畢竟去年8月小米發(fā)布透明電視之后,已經(jīng)有過不少質(zhì)疑的聲音了。不過這些小眾產(chǎn)品的不斷迭代和推出才有可能讓透明屏幕技術(shù)上的不斷前進(jìn),更貼近科幻電影中使用場(chǎng)景的小型透明智能設(shè)備的普及才有希望。屆時(shí),UI 設(shè)計(jì)應(yīng)該又有新的設(shè)計(jì)需求了吧?

CES 2021 的這些新型的智能家居類設(shè)備上,可以更進(jìn)一步印證之前大家對(duì)于趨勢(shì)的預(yù)測(cè):

  • 傳統(tǒng)家居設(shè)備智能化之后有著極大的拓展空間
  • 相比手機(jī)電腦和平板,家居類設(shè)備更加仰賴語音交互來進(jìn)行控制
  • 新型的家居設(shè)備需要探索貼合各自特征的新交互模式
  • 不同使用場(chǎng)景下智能家居設(shè)備需要不同的控制方式
  • 機(jī)器學(xué)習(xí)是讓智能家居設(shè)備更加貼合不同用戶需求的必要組成部分
  • 新材料和新技術(shù)的加入,是家居類設(shè)備差異化發(fā)展的契機(jī)

疫情催化:健康與可穿戴設(shè)備的進(jìn)化

可穿戴設(shè)備的熱度也一直在逐漸提升。

國(guó)外疫情的持續(xù)也促使很多廠商開始考慮如何制作更加貼合健康需求的可穿戴設(shè)備。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

游戲硬件雷蛇的 Project Hazel N95智能口罩應(yīng)該是 CES 展上最受關(guān)注的硬件之一,它并不僅僅搭配了 N95 級(jí)別的防護(hù)和可更換濾芯,透明的遮罩充滿了未來感,同時(shí)雷蛇還將揚(yáng)聲器和信仰燈集成在過濾器的外側(cè),確保語言交流清晰,視覺風(fēng)格獨(dú)特:

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

另外,為了確保整體的安全性還附帶了專用的紫外線消毒盒:

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

相比于雷蛇的科幻感,AirPop Active +智能口罩就顯得更加運(yùn)動(dòng)。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

AirPop Active + 則是一個(gè)專業(yè)的運(yùn)動(dòng)口罩,借助內(nèi)置傳感器,這款口罩能夠跟蹤空氣質(zhì)量以及佩戴者的呼吸狀況,并且通過藍(lán)牙和手機(jī)同步,方便查看。同時(shí),在濾芯即將耗盡時(shí),也會(huì)提醒用戶。這款口罩從外觀到功能都是明顯面向運(yùn)動(dòng)愛好者的。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

BioButton 這款設(shè)備則是一款新冠病毒感應(yīng)器,將它貼在頸部,它會(huì)跟蹤你的呼吸、心率、睡眠和血氧狀況等生命體征,并且識(shí)別你是否出現(xiàn)了感染新冠病毒的癥狀,可以說是針對(duì)性極強(qiáng)了。不過,對(duì)于絕大多數(shù)隔離在家的用戶,鍛煉是更重要的事情。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

NordicTrack Vault 頂級(jí)家庭健身房就是一個(gè)這樣的產(chǎn)品,超大屏幕結(jié)合 iFit 的互動(dòng)健身體系,你可以清晰直觀地對(duì)自身的動(dòng)作進(jìn)行審視和視覺反饋,進(jìn)一步進(jìn)行矯正,同時(shí)確保在家也可以獲得健身教練 1對(duì)1 的指導(dǎo)。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

智能手表是可穿戴設(shè)備這一領(lǐng)域是一個(gè)大類。目前絕大多數(shù)的智能手表在各種傳感器功能上都做得不錯(cuò),差異主要是在體驗(yàn)的細(xì)節(jié)優(yōu)化、工業(yè)設(shè)計(jì)、品質(zhì)以及品牌溢價(jià)上了。

Fossil 在 CES 2021 上帶來了支持 5G LTE 網(wǎng)絡(luò)的 Fossil Gen 5 LTE,芯片用的高通驍龍 3100,心率、GPS、海拔、環(huán)境光等傳感器一個(gè)不缺。Fossil Gen 5 LTE 提供金色和玫瑰金兩種配色

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

相比之下 Amazfit GTR 2e 智能手表則更加關(guān)注運(yùn)動(dòng)愛好者的細(xì)分需求——直接提供了90多種不同的運(yùn)動(dòng)模式,它可以識(shí)別你是在跑步還是騎車,45 天超長(zhǎng)續(xù)航,5 ATM 的防水級(jí)別,可以說是在專業(yè)性上相當(dāng)?shù)轿涣恕?

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

此外,飛利浦發(fā)布的 Sonicare 9900 Prestige 智能牙刷也相當(dāng)亮眼。通過傳感器,它能夠識(shí)別不同位置的壓力,監(jiān)控清潔位置和刷牙的運(yùn)動(dòng)軌跡,并且提供 AI 實(shí)時(shí)指導(dǎo)和個(gè)性化刷牙動(dòng)作推薦,同樣是通過藍(lán)牙連接手機(jī)來實(shí)現(xiàn)信息的傳達(dá)。

其實(shí)這些健康相關(guān)的可穿戴設(shè)備也呈現(xiàn)出幾個(gè)典型的趨勢(shì)性的特征:

  • 可穿戴設(shè)備已經(jīng)基于不同人群和需求細(xì)分化了
  • 根據(jù)不同需求植入有針對(duì)性的傳感器,讓健康數(shù)據(jù)更加清晰明確
  • 結(jié)合機(jī)器學(xué)習(xí)和 AI 來幫助用戶了解信息,并且提供優(yōu)化方案
  • 隨著性能逐漸跟上需求,對(duì)于個(gè)性化的需求已經(jīng)凸顯出來了
  • 在新冠疫情徹底過去之前,還會(huì)有不少疫情相關(guān)的穿戴設(shè)備出現(xiàn)

在可穿戴設(shè)備當(dāng)中,涉及到VR/AR的產(chǎn)品需要單獨(dú)說一下。

虛擬照進(jìn)現(xiàn)實(shí):VR/AR/MR/XR

VR 和 AR 你應(yīng)該比較了解了,虛擬現(xiàn)實(shí)和增強(qiáng)現(xiàn)實(shí),那么MR 和 XR 呢?

MR 是混合現(xiàn)實(shí),通俗的說它是介乎 VR 和 AR 之間,虛擬合成的「圖像」和真實(shí)的世界相互融合,還可以和現(xiàn)實(shí)物品進(jìn)行一定程度的互動(dòng)。而 XR 是擴(kuò)展現(xiàn)實(shí)(Extened Reality)的縮寫,它其實(shí)是以上 VR、AR、MR 的一個(gè)總稱,或者說 VR/AR/MR 是 XR 的子集,XR 所涵蓋的領(lǐng)域和范疇比以上幾個(gè)都要寬泛。

比如虛擬觸感就是屬于 XR 的。在今年的 CES 大會(huì)上,Senseglove Nova 和 bHaptics 推出的緊身衣套裝,所帶來的體驗(yàn)就是虛擬世界在觸感上的投射介質(zhì)。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

以 bHaptics TactSuit X40全身觸覺套裝 為例,全身內(nèi)置 40 個(gè)觸覺反饋點(diǎn),15 個(gè)小時(shí)的續(xù)航,在 VR 和 AR 眼鏡的支持之下,無論是游戲還是看電影,只要有相關(guān)的數(shù)據(jù)支撐,就能帶來真正意義上完全沉浸式的體驗(yàn),視覺聽覺觸覺全覆蓋,這大概才是真正意義上的「沉浸式體驗(yàn)」吧?

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

Xenoma EMStyle 套裝也是一個(gè)針對(duì)皮膚和肌肉的新玩意,這款可穿戴設(shè)備當(dāng)中包含 24 個(gè)電極,胸部4個(gè),腹部4個(gè),每個(gè)手臂2個(gè),臀部2個(gè),每條腿4個(gè),它們可以為全身主要的肌肉群提供刺激,并且可以讓健身教練在安全距離之外,通過電極刺激的方式提供指導(dǎo),也算是某種意義上的「虛擬觸覺」。

接下來說說我們更熟悉的智能眼鏡。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

聯(lián)想 ThinkReality A3 智能眼鏡也算是今年 CES 上關(guān)注度較高的產(chǎn)品。其中,ThinkReality A3 又分 PC版和工業(yè)版兩種,兩者硬件配置上相同,但PC版只能和Windows 同步,工業(yè)版可以連接到Android智能手機(jī)(基于驍龍800系列芯片),并運(yùn)行使用聯(lián)想ThinkReality軟件平臺(tái)構(gòu)建的定制行業(yè)應(yīng)用。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

Vuzix 也在 CES 上發(fā)布了下一代智能眼鏡,其中集成了MicroLED顯示引擎,具有完全透明的高級(jí)波導(dǎo)光學(xué)器件。Vuzix 使用一對(duì)微小的高效 MicroLED投影儀提供動(dòng)力,從而可以為用戶提供高密度像素陣列,在雙眼中投射超級(jí)清晰的視覺內(nèi)容。

一年一度的CES 2021消費(fèi)電子展,有哪些值得關(guān)注的設(shè)計(jì)趨勢(shì)?

上面的智能眼鏡還算得上是科技產(chǎn)品,而 Mojo Vision Len AR 隱形眼鏡就算得上科幻級(jí)別的產(chǎn)品了。從尺寸上來說,普通眼鏡和隱性眼鏡就是數(shù)量級(jí)上的差別,Mojo 的這款智能隱形眼鏡使用微電子技術(shù),內(nèi)置了微型顯示屏,可以共享重要信息,用 Mojo Vision 來使用增強(qiáng)現(xiàn)實(shí),不僅無縫,而且無形。

可以說,如今的虛擬現(xiàn)實(shí)技術(shù)已經(jīng)走到了一個(gè)全新的階段了:

  • 基于視覺的 AR/MR 技術(shù)已經(jīng)小型化到一個(gè)全新的量級(jí)了
  • 從傳統(tǒng)的虛擬視覺、沉浸式的聽覺,已經(jīng)可以虛擬觸覺了
  • 極其學(xué)習(xí)和人工智能 技術(shù)同樣支撐著這一領(lǐng)域快速迭代
  • 這一領(lǐng)域需要更多更富想象力的交互設(shè)計(jì)來予以支持

給設(shè)計(jì)師的新機(jī)遇

新事物正在以無與倫比的速度進(jìn)化。芯片性能和基礎(chǔ)的技術(shù)為消費(fèi)級(jí)的硬件提供了最扎實(shí)的工業(yè)基礎(chǔ),繁盛而多樣的企業(yè)開始有意識(shí)地深耕細(xì)分領(lǐng)域的產(chǎn)品,其中留給設(shè)計(jì)師的空間其實(shí)非常大。

各式各樣的筆記本類產(chǎn)品,已經(jīng)針對(duì)不同需求的設(shè)計(jì)師進(jìn)行了細(xì)分優(yōu)化,不同類型的設(shè)計(jì)師應(yīng)該都會(huì)找到針對(duì)自身領(lǐng)域需求的硬件設(shè)備,多屏幕、多輸入方式的筆電和周邊外設(shè)正在快速地豐富起來。

而快速發(fā)展的柔性屏幕,則可能正在給 UI、交互設(shè)計(jì)師提出一個(gè)復(fù)雜的難題,那就是屏幕延展之后的UI和交互上的提升的問題。而智能家居和虛擬現(xiàn)實(shí)相關(guān)領(lǐng)域的快速進(jìn)化,最終的問題同樣會(huì)壓到設(shè)計(jì)師頭上——你要如何為這一新的交互和UI進(jìn)行設(shè)計(jì)?

那個(gè)時(shí)候,交互設(shè)計(jì)師這個(gè)門類應(yīng)該會(huì)真正意義上徹底獨(dú)立出來,而不是把交互的活兒讓產(chǎn)品或者UI設(shè)計(jì)師來完成……因?yàn)榻换ピO(shè)計(jì)本身的工作量會(huì)暴增,而且有著更高的要求和更加復(fù)雜的情況要處理。

文章來源:優(yōu)設(shè)  

藍(lán)藍(lán)設(shè)計(jì)www.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ōu)惠券設(shè)計(jì)基礎(chǔ)知識(shí)

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

優(yōu)惠券是我們電商中最常見的活躍用戶的一種方式,簡(jiǎn)單的設(shè)計(jì)就能帶來巨大的客流量。雖然小小的一張優(yōu)惠券并不會(huì)占用太多的版面,也不會(huì)浪費(fèi)太多的色彩去裝飾,但想要知道優(yōu)惠券的種類、特點(diǎn),還需要我們認(rèn)真剖析,仔細(xì)揣摩。

今天就和大家分享一下關(guān)于優(yōu)惠券設(shè)計(jì)的那些事兒~

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

優(yōu)惠券的優(yōu)點(diǎn)

通常在活動(dòng)、促銷、甩賣等場(chǎng)景中,我們最常用到的手段無疑是優(yōu)惠券了,為什么被眾多設(shè)計(jì)師和商家所喜愛,也是源于它的這幾大優(yōu)點(diǎn)。

1. 提升用戶活躍度:

人們總是對(duì) “降價(jià)”、“打折” 這樣的字眼充滿了興趣,用戶也習(xí)慣于在了解到商品的價(jià)格及優(yōu)惠力度后再?zèng)Q定購買,所以有優(yōu)惠的商品才更具有吸引力。

2. 增加產(chǎn)品曝光量:

用戶一券在手,總是讓人忍不住翻看可以使用的商品,這無形中增加了平臺(tái)商品的曝光量。同時(shí)好的優(yōu)惠券會(huì)在用戶的口口相傳中得到推廣,這對(duì)平臺(tái)、商家和產(chǎn)品來說,都是一個(gè)很好的展現(xiàn)自己口碑的機(jī)會(huì)。

3. 刺激用戶的潛在購買需求:

當(dāng)用戶的購買行為背后沒有充分的購買動(dòng)機(jī),交易就會(huì)輕易的受到其他因素的影響而中斷。優(yōu)惠券的出現(xiàn)滿足了用戶 “賺到” 的心理,用戶就愿意為潛在的購物需求買單。

4. 提升用戶的購買力:

用戶的購買力和收入水平成正比,和商品價(jià)格呈反比,當(dāng)價(jià)格受到優(yōu)惠時(shí),用戶的購買力也可以得到相應(yīng)改善。

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

優(yōu)惠券的類型

1. 按使用條件劃分

體驗(yàn)券

一般針對(duì)新品或測(cè)試產(chǎn)品向用戶免費(fèi)發(fā)放的體驗(yàn)券,意在吸引用戶的關(guān)注,傾聽用戶的意見,有時(shí)體驗(yàn)券也會(huì)以邀請(qǐng)碼的形式出現(xiàn)。

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

△ 體驗(yàn)券(圖片來源:京東智聯(lián)云官網(wǎng))

代金券(又稱現(xiàn)金券)

一般使用門檻較低,不會(huì)有金額、數(shù)量等方面的要求,可以直接使用,若購買商品不夠券面金額,通常情況下是不退還差額的,如:新人大禮包、無門檻紅包和員工福利等。

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

滿減券

通常會(huì)有訂購數(shù)量、訂單總價(jià)、產(chǎn)品種類等方面的要求,滿足條件的訂單才可享受滿減,如:生活繳費(fèi)商品滿 ¥100 減 ¥2 優(yōu)惠券。

打折券

打折券是直接對(duì)商品進(jìn)行打折,一般商品較貴,購買的用戶較少,或者用戶訂購量大會(huì)采用此類型優(yōu)惠券,如:8.8 折優(yōu)惠券等。

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

2. 按使用范圍劃分

單品券為購買單一商品時(shí)使用的優(yōu)惠券;

系列產(chǎn)品券為購買某種特定系列產(chǎn)品時(shí)所使用的優(yōu)惠券,用戶只需要購買指定系列的產(chǎn)品就可以享用這張優(yōu)惠券,如:購買無線寶 WiFi5 系列產(chǎn)品優(yōu)惠券等;

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

品類券為購買某一類商品時(shí)使用的優(yōu)惠券,如:購買清潔類、醫(yī)藥類、生鮮類等優(yōu)惠券;

品牌券為購買某一品牌商品時(shí)使用的優(yōu)惠券,如:購買華為、京東云等品牌產(chǎn)品所用的優(yōu)惠券。

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

3. 按發(fā)放的主體劃分

店鋪優(yōu)惠券則是店鋪?zhàn)孕邪l(fā)放的,如:關(guān)注有禮、抽獎(jiǎng)、新老顧客回饋等;

平臺(tái)優(yōu)惠券是由平臺(tái)直接發(fā)放給用戶的優(yōu)惠券,針對(duì)的目標(biāo)群體范圍較廣,如:購物津貼、百億補(bǔ)貼等;

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

政企消費(fèi)券成本由政府、企業(yè)和平臺(tái)共同承擔(dān),意在提升某些地區(qū)消費(fèi)者的消費(fèi)能力和消費(fèi)水平,如:北京消費(fèi)券等。

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

優(yōu)惠券的作用

1. 拉新

說到拉新,我們總會(huì)遇到一些一點(diǎn)誠意都沒有的優(yōu)惠券,例如:勞斯萊斯 “5 元代金券”。實(shí)際上這也是一種吸引用戶關(guān)注的方法,成為了人們口口相傳的調(diào)侃。

下面是 “京東智聯(lián)云官網(wǎng)活動(dòng)” 拉新引流的新人禮包,我們可以看到 “新人千元大禮包” 字樣,新用戶在完成注冊(cè)任務(wù)之后就可以領(lǐng)取相應(yīng)優(yōu)惠券。

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

通常情況下,我們使用 “代金券” 進(jìn)行拉新。代金券的價(jià)值相當(dāng)于同等金額的現(xiàn)金,購物時(shí)直接使用,一般不會(huì)有過于苛刻的門檻,用戶使用起來方便,所以對(duì)新用戶的吸引力極大。在設(shè)計(jì)時(shí)我們需要注意以下幾點(diǎn):

設(shè)計(jì)目標(biāo) – 吸引新用戶;刺激用戶的購買需求;使其真正成為我們的用戶。

任務(wù)模塊 – 除了優(yōu)惠券本身外,設(shè)計(jì)時(shí)還應(yīng)該注意各任務(wù)模塊的銜接與規(guī)劃,如:用戶登錄、注冊(cè)、用戶的信息填寫等。

門檻值設(shè)定 – 門檻值設(shè)置較小的優(yōu)惠券才具有較強(qiáng)的吸引力。對(duì)于新用戶來說,用戶不需要購買太多商品,也不用局限于某個(gè)商品的使用。對(duì)于設(shè)計(jì)師而言,需要考慮門檻值和商品成本之間的關(guān)系。

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

面額設(shè)定 – 優(yōu)惠券面額的設(shè)定可以很好的反應(yīng)我們吸引消費(fèi)者所付出的成本,控制獲客成本也是拉新過程中的重要環(huán)節(jié),設(shè)計(jì)師應(yīng)該清楚了解用戶喜好,剖析哪種互動(dòng)方式可以在降低成本的同時(shí)擴(kuò)大優(yōu)惠券和商品的吸引力。

時(shí)間設(shè)定 – 這里可以強(qiáng)調(diào)優(yōu)惠券使用時(shí)間的展示,方便用戶在有效期內(nèi)即時(shí)使用,避免浪費(fèi)。

2. 促活

當(dāng)然,每一種優(yōu)惠券都有 “促活” 的屬性,不管是優(yōu)惠還是打折無不吸引著消費(fèi)者的注意。例如:每年的 “京東 618” 和 “京東智聯(lián)云 11.11 大促(下圖)” 都是采用了各種優(yōu)惠券來吸引用戶完成交易的。

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

促活一般是電商發(fā)展的關(guān)鍵時(shí)期,設(shè)計(jì)上會(huì)呈現(xiàn)出:短期內(nèi)讓利、時(shí)間短促、宣傳、優(yōu)惠券種類不限等特點(diǎn)。

小結(jié):

其實(shí)優(yōu)惠券的作用還有很多,它還可以解決用戶存留等問題。由于篇幅有限這里就不過多展開,期待小伙伴們一起思考和挖掘。

優(yōu)惠券設(shè)計(jì)的基本要素

收益預(yù)估:設(shè)計(jì)前預(yù)先判斷本次活動(dòng)的成交量,計(jì)算每單的收益大小以及總收益。

使用范圍:根據(jù)活動(dòng)的目的,確定使用范圍( “平臺(tái)”、“品類”、“品牌”、“店鋪” 等)。

使用門檻:每種優(yōu)惠券都有相應(yīng)的使用門檻,這是保證商家不會(huì)虧損的重要環(huán)節(jié)。

領(lǐng)取上限:設(shè)置領(lǐng)取上限,一方面根據(jù)商品庫存的多少,盡可能照顧到更多有需要的用戶;另一方面也可以表明優(yōu)惠并不是那么輕易就會(huì)得到,增加優(yōu)惠券的吸引力。

使用有效期:如果優(yōu)惠券的使用期過長(zhǎng)或沒有有效期,那就和降價(jià)沒有什么區(qū)別了。

用一篇文章,幫你了解優(yōu)惠券設(shè)計(jì)的基礎(chǔ)知識(shí)

展望

通常活動(dòng)結(jié)束后設(shè)計(jì)師要對(duì)本次設(shè)計(jì)進(jìn)行復(fù)查,通過調(diào)研判斷優(yōu)惠券對(duì)用戶的吸引力。一方面從定量的維度考量,我們要對(duì)用戶的瀏覽量、領(lǐng)取量、使用率、實(shí)際下單量和用戶參與程度進(jìn)行觀測(cè);另一方面從定性的維度分析用戶的實(shí)際感受,用戶在體驗(yàn)完成后是否愿意再次光臨或推薦給親友,也是我們需要考查的方面。

文章來源:優(yōu)設(shè)  作者:JellyDesign

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


品牌升級(jí)思路

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

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

品牌升級(jí)設(shè)計(jì)不是件小事,也不像看到的那樣光鮮亮麗。這個(gè)過程很復(fù)雜,充滿了很多人的意見和情感?;谖覀€(gè)人對(duì)品牌的認(rèn)知,品牌設(shè)計(jì)的整個(gè)推導(dǎo)過程是“文化←專業(yè)→業(yè)務(wù)”,也就是說核心的品牌資產(chǎn)去承載文化和賦能業(yè)務(wù)。害,虛頭巴腦的,還是上張圖來捋一下思路:

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

確定虛的部分后,需要多維度分析需求,并且了解用戶對(duì)品牌的印象(前提是要確定你的用戶是誰),但首當(dāng)其沖的是確定一個(gè)方法,那么情緒版是一個(gè)相對(duì)來說還算靠譜的推導(dǎo)方式:

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

按照這個(gè)思路,設(shè)計(jì)風(fēng)格以及重要因子(顏色 / 字體等)就基本被確認(rèn)下來了,然后就需要相關(guān)的設(shè)計(jì)師按照邏輯圖的順序落實(shí)到業(yè)務(wù)應(yīng)用當(dāng)中:

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

哦,對(duì)了,做這些之前最好確定一個(gè) SOP 模版,幫助你可以快速的完成適配工作:

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

另外還要強(qiáng)調(diào)一點(diǎn)(這個(gè)點(diǎn)我在面試的時(shí)候也會(huì)經(jīng)常問候選人),因?yàn)檎麄€(gè)項(xiàng)目涉及的人很多,耗費(fèi)的資源也巨大,所以為了確保無縫執(zhí)行,協(xié)調(diào)工作要怎么進(jìn)行呢?這就需要機(jī)制和規(guī)則的設(shè)定來輔助你管理/協(xié)調(diào)每一個(gè)人的工作了(不要忽視這塊,并不是只有界面設(shè)計(jì)是設(shè)計(jì),思維的設(shè)計(jì)同樣是設(shè)計(jì)哈):

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

對(duì)了,除了運(yùn)用在品牌視覺之外,產(chǎn)品中也需要適當(dāng)?shù)谋?highlight 一下,以馬蜂窩為例:

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

如果說 logo 是企業(yè)的象征,那么超級(jí)符號(hào)是品牌形而上的靈魂。不同于輔助圖形,輔助圖形往往來源于品牌標(biāo)志,可以是品牌標(biāo)志本身,也可以是品牌標(biāo)志某一部分;超級(jí)符號(hào)的形式偏生活化的符號(hào),跟輔助圖形形式上可能類似,但用途往往更大;

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

比如可口可樂的瓶身,寶馬的前臉,ta 通常不那么起眼,甚至在你腦海里都習(xí)以為常,覺著就應(yīng)該這樣,絲毫提不出什么質(zhì)疑;

著名搜索引擎百度定義超級(jí)符號(hào)為:他們本身具有一定意義,要求人們按照其指導(dǎo)進(jìn)行活動(dòng)。(這個(gè)解釋感覺冷颼颼的…)我試圖用自己話來說:就是品牌本身傳承下來或者創(chuàng)造出來最具特色最能代表的圖騰;

品牌設(shè)計(jì)中需要符合和 logo 搭配使用,因?yàn)樵谝欢▓?chǎng)景下,真正能讓用戶感知并認(rèn)可的可能是超級(jí)符號(hào),而非品牌的 LOGO;

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

當(dāng)然,超級(jí)符號(hào)可以依附于 logo 存在,同樣也可以作為個(gè)體單獨(dú)存在,兩者并沒有絕對(duì)意義上的劃分:

1. 超級(jí)符號(hào)的形式

最著名的兩者合二為一的就是天貓啦,從天貓 logo 的誕生到現(xiàn)在,質(zhì)疑一直沒有停止過,碩大的貓頭看起來傻里傻氣但恰恰也是這個(gè)原因,被記住了概率大大增加;如今我們能看得到每年的雙十一都會(huì)有這只貓存在:

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

另外如果用一個(gè)通用符號(hào)作為超級(jí)符號(hào)的話,其實(shí)是比較吃虧的,用戶雖然可以比較容易的描述出比如一個(gè)圓一個(gè)矩形之類的,但是卻不容易讓用戶記住你,記住你跟其他產(chǎn)品的區(qū)別;比如美團(tuán)外賣的品牌升級(jí),一定程度上是想從通用符號(hào)過渡到專屬符號(hào)。

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

符號(hào)和 logo 分離的例子也有很多,比如滴滴的圓:

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

咱也不知道為啥,ta 就用了個(gè)通用符號(hào),不過屬實(shí)還挺好看~

2. 淺談超級(jí)符號(hào)的設(shè)計(jì) 

設(shè)計(jì)一個(gè)符號(hào)一定要把產(chǎn)品的特色最大化,試想一下漫畫的畫法,其中最重要的一點(diǎn)就是特點(diǎn)的不斷夸張夸張?jiān)倏鋸?,不斷讓人記?ta 最具特色的那一面:

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

初期的超級(jí)符號(hào)絕對(duì)不是簡(jiǎn)單的設(shè)計(jì)一個(gè)圖形就完了,從最基本的圖形到顏色、字體、元素、板式再到整個(gè)視覺風(fēng)格體系,再到融入到產(chǎn)品 UI 或者線下媒介的傳播的每一個(gè)觸點(diǎn)去傳達(dá)品牌;當(dāng)然超級(jí)符號(hào)也會(huì)有進(jìn)化,比如最終進(jìn)化到可口可樂最后會(huì)進(jìn)化成一個(gè)顏色-紅色;再比如已經(jīng)銷聲匿跡的 ofo,你永遠(yuǎn)也不會(huì)說:“我要騎一輛 ofo”,取而代之的是“我要騎一輛小黃車”,所以你看符號(hào)進(jìn)化到最頂級(jí)的時(shí)候未必需要實(shí)體(咦,這句話又讓我想到了奧卡姆剃刀)。

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

綜上,做出具有可被記憶的特殊性符號(hào),基本上就成功了 80%了。再經(jīng)過長(zhǎng)期不斷的迭代優(yōu)化,最終進(jìn)化為無形的品牌資產(chǎn)就基本上可以宣告品牌的成功了~

上點(diǎn)小福利

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

盡管我一直堅(jiān)持輸出設(shè)計(jì)觀點(diǎn),但我發(fā)現(xiàn)好多朋友練就了 “一看就會(huì),一用就廢” 的日常技能,所以還是準(zhǔn)備了一些經(jīng)過我嚴(yán)選的模版和素材送給鐵子們,希望鐵子們?cè)趯W(xué)會(huì)理論的同時(shí)也能手活跟上,眼高手低不可取,眼手雙高真牛 B!

想做品牌升級(jí)?先來學(xué)會(huì)高手的結(jié)構(gòu)化思維!

總結(jié)一下

當(dāng)下,品牌設(shè)計(jì)的價(jià)值也不斷的被提高,一方面是在流量尤為重要的今天,品牌的第一個(gè)作用就是導(dǎo)入流量;另一方面是因?yàn)楫a(chǎn)品的溢價(jià)主要是由商業(yè)包裝決定的,包裝最終成就一個(gè)品牌,而品牌就是終極的包裝。設(shè)計(jì)師作為其中的重要參與者,一定要明白品牌資產(chǎn)的沉淀和品牌是其實(shí)是質(zhì)的區(qū)別,別試圖去用形而上的手段去解釋本質(zhì)性的問題,試著把產(chǎn)品和品牌緊密結(jié)合,畢竟品牌的最大輸出口就是產(chǎn)品本身。


文章來源:優(yōu)設(shè)  作者:負(fù)能量補(bǔ)給站

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


如何選擇合適的圖標(biāo)?來看這份圖標(biāo)類型和風(fēng)格匯總

ui設(shè)計(jì)分享達(dá)人

常見的分類是簡(jiǎn)單的線性分類,缺少立體化的圖標(biāo)分類思維。文章通過梳理來幫助大家對(duì)不同類型及風(fēng)格的圖標(biāo)有一個(gè)體系化的認(rèn)知。

大家好,我是Clippp。看到好的圖標(biāo)我們會(huì)習(xí)慣性地截圖保存,但隨著收集的圖標(biāo)越來越多,會(huì)發(fā)現(xiàn)對(duì)圖標(biāo)的分類會(huì)變得越來越混亂…做設(shè)計(jì)時(shí)也不清楚到底該參考或運(yùn)用哪種風(fēng)格最合適。來看看如何解決這些問題!

一、定義圖標(biāo)類型

對(duì)圖標(biāo)進(jìn)行分類時(shí),普遍會(huì)遇到的問題是一個(gè)圖標(biāo)有多種風(fēng)格。例如下面這個(gè)水滴圖標(biāo),樣式很簡(jiǎn)單,但可以劃分到多個(gè)類別中。

面對(duì)這樣的問題,推薦使用系統(tǒng)性的結(jié)構(gòu)來劃分圖標(biāo)類別: 
  • 首先將圖標(biāo)按尺寸大小分為兩類;

  • 繼續(xù)細(xì)分對(duì)應(yīng)的面性、線性、線面結(jié)合、扁平、擬物化等類型;

  • 最后選擇標(biāo)準(zhǔn)、容器、漸變、3D、手繪、陰影等風(fēng)格。

利用這種結(jié)構(gòu)層級(jí),可以明確定義圖標(biāo)類別。

二、圖標(biāo)尺寸

圖標(biāo)的大小取決于具體功能。例如帶有漸變和陰影的圖標(biāo)看起來很酷,但把它縮小到16px,這些酷炫的效果都無法呈現(xiàn)出來。

在對(duì)圖標(biāo)歸類時(shí),首先要考慮圖標(biāo)用在什么位置需要多大尺寸。這里將圖標(biāo)分為兩大類: 
  • 大尺寸圖標(biāo)通常指標(biāo)志性圖標(biāo),例如App啟動(dòng)圖標(biāo)或代表品牌形象; 
  • 小尺寸圖標(biāo)用作UI控件,起到引導(dǎo)功能或裝飾目的。

三、圖標(biāo)類型

確定圖標(biāo)尺寸后,進(jìn)一步細(xì)分圖標(biāo)類型: 
面性圖標(biāo) 
線性圖標(biāo) 
線面結(jié)合圖標(biāo) 
扁平化圖標(biāo) 
擬物化圖標(biāo) 


利用這種簡(jiǎn)單的分類方式就能避免圖標(biāo)發(fā)生重疊。另外擬物化這種細(xì)膩的風(fēng)格不適用于小尺寸圖標(biāo)中,所以在小圖標(biāo)分類中沒有展示。

四、圖標(biāo)組成


圖標(biāo)尺寸越小,展示的細(xì)節(jié)越有限。相比于大圖標(biāo),小圖標(biāo)的尺寸有一定局限性,圖標(biāo)組成包括 標(biāo)準(zhǔn)和容器兩種。 


大圖標(biāo)利用尺寸上的優(yōu)勢(shì)能展示更多內(nèi)容,分為多種組成形式。

五、小尺寸圖標(biāo)樣式


簡(jiǎn)單的圖像可以更具包容性。圖標(biāo)的尺寸越小,越考驗(yàn)設(shè)計(jì)師傳達(dá)信息的能力。 

1.面性圖標(biāo)

1.1標(biāo)準(zhǔn)面性圖標(biāo)

面性圖標(biāo)易識(shí)別,適合應(yīng)用在小尺寸圖標(biāo)中。 
關(guān)鍵點(diǎn):
確保圖標(biāo)有清晰的邊緣,避免羽化; 
圖標(biāo)復(fù)雜程度隨著尺寸變小而靈活調(diào)整。 

1.2帶有背景色的面性圖標(biāo)

彩色背景為簡(jiǎn)約設(shè)計(jì)帶來了更多可能。通過這個(gè)技巧使面性圖標(biāo)更友好,更具吸引力。 
關(guān)鍵點(diǎn):
為背景選擇4-12種顏色。 
考慮圖標(biāo)是淺色還是深色,是否適用于所有背景色。 
在彩色背景上使用白色圖標(biāo)比黑色效果更好。 

2.線性圖標(biāo)

2.1標(biāo)準(zhǔn)線性圖標(biāo)

線性圖標(biāo)因?yàn)楹?jiǎn)潔性和現(xiàn)代性而受到用戶的歡迎。隨著屏顯越來越清晰,我們可以更加大膽地使用線性圖標(biāo)。 
關(guān)鍵點(diǎn):
確保輪廓像素清晰。 
越簡(jiǎn)單越好。 
追求更簡(jiǎn)單的細(xì)節(jié)。 

2.2雙色線性圖標(biāo)

設(shè)計(jì)小尺寸圖標(biāo)時(shí),必須放棄細(xì)節(jié)并強(qiáng)調(diào)簡(jiǎn)單的形狀。但當(dāng)使用一種顏色效果不太理想時(shí),可以考慮添加一些顏色。 
關(guān)鍵點(diǎn):
使用兩種搭配和諧的顏色。 
考慮將一種顏色用于主要形狀,另一種顏色用于細(xì)節(jié)。 
少即是多。 
使用粗線條。 

3.線面結(jié)合圖標(biāo)

線面結(jié)合擁有更多細(xì)節(jié),提升用戶的愉悅感。 
關(guān)鍵點(diǎn):
最好使用深色而不是純黑色描邊。 
限制圖標(biāo)的顏色種類。 
避免過多細(xì)節(jié)。 

 4.扁平化圖標(biāo) 

扁平化圖標(biāo)既簡(jiǎn)單又巧妙,表達(dá)品牌形象的同時(shí)具有豐富的內(nèi)涵。 
關(guān)鍵點(diǎn):
避免在<20px的尺寸中使用此圖標(biāo)樣式。 
選擇2-3種顏色,可以一起使用。 
一種顏色為主色,另一種顏色應(yīng)為高光/細(xì)節(jié)色。 

六、大尺寸圖標(biāo)樣式

大尺寸圖標(biāo)在界面中使用較少,更多用于產(chǎn)品標(biāo)識(shí)或品牌宣傳。 

 1.線性圖標(biāo) 

1.1標(biāo)準(zhǔn)線性圖標(biāo)

在設(shè)計(jì)任何圖標(biāo)前,都可以先創(chuàng)建一個(gè)線性輪廓,確保形狀看起來足夠美觀后再添加顏色。 
關(guān)鍵點(diǎn):
這類圖標(biāo)最容易制作。 
避免出現(xiàn)輪廓羽化。 
線條粗細(xì)要一致。 
不要害怕添加細(xì)節(jié)。 

1.2漸變線性圖標(biāo)

添加一些漸變能讓原本單一的線性圖標(biāo)賦予更多的個(gè)性。 
關(guān)鍵點(diǎn):
在小尺寸圖標(biāo)中添加漸變會(huì)降低圖標(biāo)的可視性。 
選擇漸變時(shí),首先考慮鄰近色。 
線條越粗,漸變?cè)矫黠@。 
線條細(xì)節(jié)越多,漸變?cè)矫黠@。 

1.3等距線性圖標(biāo)

2.5D圖標(biāo)做起來會(huì)花費(fèi)很多時(shí)間,但效果會(huì)很好。在設(shè)計(jì)汽車、房屋、家具等實(shí)體產(chǎn)品時(shí),建議優(yōu)先使用2.5D圖標(biāo)。 
關(guān)鍵點(diǎn):
同一組圖標(biāo)要使用相同的等軸測(cè)網(wǎng)格。 
2.5D等軸圖標(biāo)很復(fù)雜,在較小的尺寸下會(huì)失去作用。 
如果可以,讓所有圖標(biāo)都朝向同一個(gè)方向。 

1.4手繪線性圖標(biāo)

隨著設(shè)計(jì)趨勢(shì)向簡(jiǎn)約化、扁平化發(fā)展,很多設(shè)計(jì)師喪失了手繪圖標(biāo)的能力。實(shí)際上手繪圖標(biāo)讓品牌更真實(shí)甚至更有趣。 
關(guān)鍵點(diǎn):
手繪圖標(biāo)掃描后,再用數(shù)字方式重新繪制,這樣可以保證線條粗細(xì)一致。 
盡量讓所有的線條保持相同的顏色,這會(huì)使文件更小。 

1.5斷線圖標(biāo)

標(biāo)準(zhǔn)的線性圖標(biāo)看起來可能會(huì)很單調(diào),而簡(jiǎn)單靈活的斷線處理能為圖標(biāo)增加更多個(gè)性。 
關(guān)鍵點(diǎn):
斷線粗細(xì)應(yīng)該相同。 
圖標(biāo)的中斷次數(shù)盡可能保持一致。 

1.6雙色線性圖標(biāo)

關(guān)鍵點(diǎn):
確保兩種顏色具有相同的對(duì)比度,否則可能會(huì)導(dǎo)致用戶看不清其中一種顏色,因此無法識(shí)別完整的圖標(biāo)。例如左下角的淺綠色對(duì)于視力弱的用戶來說就很不友好。 

2.線面結(jié)合圖標(biāo)

線面結(jié)合圖標(biāo)可以看作是添加顏色后的線性圖標(biāo)。線面結(jié)合具有很強(qiáng)的輪廓,讓圖標(biāo)能夠清晰可見。 
2.1標(biāo)準(zhǔn)線面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn):
使用有限的顏色和統(tǒng)一的線條風(fēng)格,使圖標(biāo)具有品牌性。 
使用線條和點(diǎn)來添加更多細(xì)節(jié)。 
避免使用純黑色描邊。 

2.2帶有背景色的線面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn):
描邊斷開時(shí),圖標(biāo)效果很更好。 
避免在小尺寸時(shí)使用。 
使用有限的調(diào)色板。 
考慮使用較淺的描邊/背景色。 
考慮在圖標(biāo)下方添加一條水平線,使圖形具有相同的位置(中間的圖標(biāo)示例) 

2.3錯(cuò)位線面結(jié)合圖標(biāo)

當(dāng)填充色與描邊錯(cuò)位時(shí),顏色移到右邊圖標(biāo)左上角留出高光,帶來一種清新的感覺。 
關(guān)鍵點(diǎn):
考慮使用斷線描邊。 
使用有限的調(diào)色板。 
確保描邊和填充色簡(jiǎn)單且一致。 

2.4色塊圖標(biāo)

這種風(fēng)格的圖標(biāo)的特點(diǎn)在于并不依賴于顏色,僅將其用于裝飾。 
關(guān)鍵點(diǎn):
選擇有限的調(diào)色板。 
先關(guān)注輪廓再關(guān)注顏色,顏色僅用于裝飾。 
避免形狀色和背景色過于相似,降低可見度。 

2.4單色線面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn):
避免使用暖色調(diào)尤其是紅色,會(huì)讓用戶感到壓抑。 
首先確定合適的描邊顏色,再考慮填充色。 

 3.扁平化圖標(biāo) 

扁平化圖標(biāo)通常沒有描邊,主要使用形狀和顏色來完成組合搭配。簡(jiǎn)潔、友好和適當(dāng)?shù)募?xì)節(jié),讓這類圖標(biāo)非常具有吸引力。 
3.1標(biāo)準(zhǔn)扁平化圖標(biāo)

關(guān)鍵點(diǎn):
使用柔和的調(diào)色板,避免明亮的顏色。 
分清簡(jiǎn)化和添加細(xì)節(jié)之間的界限。 

3.2帶有容器的扁平化圖標(biāo)

嘗試讓圖形打破容器,帶來動(dòng)態(tài)的感覺。 
關(guān)鍵點(diǎn):
嘗試讓圖形從容器中凸出來,以增加深度。 
因?yàn)樵谌萜髦?,可以添加更多的?xì)節(jié)而不用擔(dān)心圖形變得混亂。 
嘗試使用正方形、橢圓形或與品牌相關(guān)的容器形狀。 

3.3等距圖標(biāo)

關(guān)鍵點(diǎn):
保持所有圖標(biāo)朝向同一方向。 
選擇恰當(dāng)?shù)恼{(diào)色板能讓圖標(biāo)看起來更一致。 
避免小尺寸使用。 

3.4半陰影扁平圖標(biāo)

半陰影圖標(biāo)是在扁平圖標(biāo)的基礎(chǔ)上添加半色調(diào)陰影,得到更具個(gè)性的圖標(biāo)。 
關(guān)鍵點(diǎn):
小尺寸圖標(biāo)不起作用。 
使用有限的調(diào)色板。 
確保所有的圖標(biāo)色調(diào)相似。 

3.5長(zhǎng)陰影扁平圖標(biāo)

當(dāng)圖標(biāo)位于容器中時(shí),可以考慮添加長(zhǎng)陰影,主要包括純色陰影和漸變陰影兩種類型。 
關(guān)鍵點(diǎn):
使容器具有相同的顏色或類似的色調(diào)。 
只在大尺寸圖標(biāo)中使用。 
將半陰影與長(zhǎng)陰影組合使用效果更好。 

 4.擬物化圖標(biāo) 

擬物化圖標(biāo)實(shí)際上已經(jīng)包含了大部分的樣式,例如它們是立體的,有豐富的漸變和陰影。 

這種風(fēng)格的圖標(biāo)看起來與現(xiàn)實(shí)生活中的圖標(biāo)盡可能類似,讓用戶感到更舒適。 
關(guān)鍵點(diǎn):
考慮添加底部陰影。 
使光源來自同一方向。 
確保圖標(biāo)都朝向相同的方向。 
目前絕大多數(shù)界面不在有這種風(fēng)格的圖標(biāo),可以考慮使用3D建模來實(shí)現(xiàn)這種效果。 

總結(jié)

希望大家能對(duì)圖標(biāo)的分類及設(shè)計(jì)有更全面深入的認(rèn)識(shí),從而構(gòu)建一套完整的圖標(biāo)思維體系。


文章來源:站酷     作者:Clip設(shè)計(jì)夾



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

網(wǎng)格的基礎(chǔ)---藍(lán)藍(lán)設(shè)計(jì)

ui設(shè)計(jì)分享達(dá)人

網(wǎng)格系統(tǒng)的基礎(chǔ)概念與基礎(chǔ)知識(shí)

開始講網(wǎng)格系統(tǒng)了,網(wǎng)格系統(tǒng)是針對(duì)于平面的,而不是網(wǎng)頁設(shè)計(jì)和移動(dòng)端的設(shè)計(jì)。網(wǎng)格系統(tǒng)、柵格系統(tǒng)、網(wǎng)格基線和網(wǎng)格基數(shù),應(yīng)用層面完全不同,大家跟著學(xué)慢慢就會(huì)理解它們之間的差異。平面中的網(wǎng)格系統(tǒng)非常的龐大,網(wǎng)格基礎(chǔ)這塊就分很多小塊,如:網(wǎng)格的基礎(chǔ)-知識(shí)(認(rèn)識(shí)網(wǎng)格)、網(wǎng)格的元素、網(wǎng)格的類型、網(wǎng)格的應(yīng)用等等。


這些知識(shí)掌握后就要去理解網(wǎng)格都應(yīng)用在哪里,如:宣傳冊(cè)和小冊(cè)子,插畫書,雜志和報(bào)紙,包裝,海報(bào)等等... 理解了網(wǎng)格系統(tǒng)都會(huì)使用在哪里后,就要去理解網(wǎng)格系統(tǒng)的具體結(jié)構(gòu),又分為兩類:結(jié)構(gòu)網(wǎng)格和解構(gòu)網(wǎng)格。它們倆的知識(shí)又細(xì)分為:模塊網(wǎng)格、比例網(wǎng)格、復(fù)合網(wǎng)格、分層網(wǎng)格、欄式網(wǎng)格等等... 


理解了網(wǎng)格系統(tǒng)的結(jié)構(gòu)就要去理解網(wǎng)格系統(tǒng)的設(shè)計(jì)思維,如:避免呆板的設(shè)計(jì)、留有呼吸的空間、用色彩來編碼、讓讀者參與運(yùn)用組織規(guī)則等等... 這些知識(shí)全部都掌握后,大體的網(wǎng)格系統(tǒng)知識(shí)就差不多全部都掌握了。廢話也不多說了,一點(diǎn)點(diǎn)來講,這篇文章先來講一下網(wǎng)格系統(tǒng)基礎(chǔ)中的基礎(chǔ)。


概念來自于嘉文·安布羅斯和保羅·哈里斯的《網(wǎng)格設(shè)計(jì)》。另外網(wǎng)格的歷史屬于網(wǎng)格的概念部分,有興趣的朋友可以看看前一篇文章 網(wǎng)格的歷史。




目錄


1. 網(wǎng)格的概念

2. 網(wǎng)格的構(gòu)成

3. 網(wǎng)格的度量

4. 表現(xiàn)形式

5. 元素的比例

6. 元素的層級(jí)

7. 網(wǎng)狀與點(diǎn)狀網(wǎng)格




1.網(wǎng)格的概念


這里我引用蒂莫西·薩馬拉和德里克·博德薩爾這兩位大師對(duì)網(wǎng)格系統(tǒng)的理解,來讓大家理解網(wǎng)格的基礎(chǔ)-概念。蒂莫西·薩馬拉認(rèn)為 -“在文字問題全部解決之后,網(wǎng)格真正的成功取決于設(shè)計(jì)師是否超越網(wǎng)格結(jié)構(gòu)所蘊(yùn)涵的整體性,然后用它來創(chuàng)造一部分動(dòng)態(tài)的視覺表述,這些部分可以讓讀者保持對(duì)整本書中每一頁的興趣”。德里克·博德薩爾認(rèn)為 - “在版式設(shè)計(jì)中,網(wǎng)格是最容易引起誤解和誤用的元素。網(wǎng)格只有在你想用的素材上時(shí)才會(huì)有用”。

undefined


另外在了解一下羅伯特·勞森伯格先生對(duì)網(wǎng)格的理解 - 網(wǎng)格是用來給讀者組織空間和信息的,它給整部作品提供了規(guī)劃。網(wǎng)格給信息提供了圍欄,同時(shí)也是規(guī)定和維持秩序的一種方法。雖然網(wǎng)格已經(jīng)使用了許多個(gè)世紀(jì),但是很多圖表設(shè)計(jì)師還是把網(wǎng)格與瑞士人聯(lián)系在一起。在20世紀(jì)40年代的時(shí)候,人們熱切希望維持秩序,因而創(chuàng)造了種可以提供視覺信息并且更加系統(tǒng)化的方法。幾十年后,網(wǎng)格設(shè)計(jì)被認(rèn)為既單調(diào)又乏味。而如今,網(wǎng)絡(luò)設(shè)計(jì)再次被看作是基礎(chǔ)性的工具,無論是行業(yè)新手還是具備幾十年經(jīng)驗(yàn)的老手都依賴此種工具。

我這里再引用一下《秩序之美 - 網(wǎng)頁中的網(wǎng)格設(shè)計(jì)》這本書中所闡述的對(duì)網(wǎng)格系統(tǒng)的觀點(diǎn),網(wǎng)格就是在混沌中建立規(guī)則。再引用《塑造和突破網(wǎng)格》書中的觀點(diǎn)根據(jù)以上觀點(diǎn)做結(jié)合得出 -“在混沌中建立規(guī)則,突破網(wǎng)格結(jié)構(gòu)并打破規(guī)則”,就是網(wǎng)格系統(tǒng)的核心概念。這些觀點(diǎn)結(jié)合起來,這就是我理解的網(wǎng)格系統(tǒng)的概念。



2.網(wǎng)格的構(gòu)成


網(wǎng)格構(gòu)成的概念:網(wǎng)格包括一套獨(dú)特的對(duì)齊關(guān)系的原則,用于指導(dǎo)如何在一個(gè)版面中分配各個(gè)組成部分。版面中包含若干個(gè)不同的部分和構(gòu)成,每個(gè)部分都有著不同的用途和功能。設(shè)計(jì)師也可以根據(jù)自身喜好,將某些部分從整體結(jié)構(gòu)中去掉,這一切也取決于設(shè)計(jì)師如何理解材料、市場(chǎng)和讀者的需求。網(wǎng)格的構(gòu)成 - 大體結(jié)構(gòu):版面、版心、外緣留白 / 外頁邊距、訂口、欄目、欄間空白、底部留白 / 底頁邊距。


網(wǎng)格的構(gòu)成 - 大體結(jié)構(gòu) :

- 版面:版面是頁面中所有構(gòu)成部分的總和;

- 版心:版心是頁面中主要內(nèi)容的所在區(qū)域;

- 外緣留白 / 外頁邊距:外緣留白或外頁邊距有助于講文本框納入整體的設(shè)計(jì)中;

- 訂口:訂口是裝訂時(shí)所需要的留白,通常存在于兩個(gè)頁面之間的折疊部分;

- 欄間空白:兩個(gè)欄目之間的分隔區(qū)域;

- 底部留白 / 底頁邊距:頁面底部的留白區(qū)域;

undefined


網(wǎng)格的構(gòu)成 - 局部結(jié)構(gòu) :

- 空白:空白可以提供如注釋和說明文字等二級(jí)信息。

- 基線:基線是網(wǎng)格的基本結(jié)構(gòu),用來引導(dǎo)文本和其他元素在設(shè)計(jì)中的布局。

- 欄目:欄目是有組織的放置正文的地方,并讓讀者容易閱讀;

- 空間區(qū):空間區(qū)可以為文字、廣告、圖像或其他信息構(gòu)成特定區(qū)域的模塊組或欄目組。

- 模塊:模塊是給網(wǎng)格內(nèi)圖像元素留出的空間,相連接的網(wǎng)格可以建議建立不同的行列模塊。 

- 標(biāo)志:標(biāo)志能標(biāo)明出現(xiàn)在同一位置的素材的方位,包括頁數(shù)、頁首標(biāo)題和頁腳(標(biāo)頭、頁腳),以及圖標(biāo);

undefined具網(wǎng)格系統(tǒng)的構(gòu)成部分又分為眾多的知識(shí)點(diǎn),應(yīng)該漸進(jìn)式的去理解,去學(xué)習(xí)。



3.網(wǎng)格的度量


在網(wǎng)格系統(tǒng)的中有兩種度量:絕對(duì)度量和相對(duì)度量。網(wǎng)格系統(tǒng)本身有自己的絕對(duì)度量單位,例如英寸(inch)或磅(Pt,印刷字體大小的一種單位,1pt等于0.01384英寸,約1/72英寸)。在網(wǎng)格內(nèi)部中很多元素可能會(huì)使用相對(duì)度量,來表示它們的大小和其他元素之間的關(guān)系。

undefined運(yùn)用網(wǎng)格系統(tǒng)時(shí),可以從起始點(diǎn)就開始使用坐標(biāo)。紅色的線條是基線,它們之間的間隔為12p磅。首行、分欄一起構(gòu)成一個(gè)坐標(biāo)。一個(gè)模塊單位有13條基線,每條間隔為12磅,因此版心高度是156磅(13x12)。



3.1 網(wǎng)格的度量 - 文字 


文字經(jīng)常以絕對(duì)單位磅來計(jì)算的。對(duì)于確定的長(zhǎng)度,絕對(duì)單位能提供一個(gè)固定值,這便意味著設(shè)計(jì)師能有效的控制文字和基線之間的關(guān)系。文字和基線通常使用磅值(pt)來進(jìn)行計(jì)算的,用毫米算也行,但要注意的是將文字和基線放在同一個(gè)度量單位下進(jìn)行計(jì)算,這樣會(huì)好做計(jì)算。

undefined上圖中就有一個(gè)兩欄文本塊。在這個(gè)例子中,一旦建立起網(wǎng)格系統(tǒng),說明元素的度量可變性更強(qiáng)了,絕對(duì)度量單位便不是那么重要了。



3.2 網(wǎng)格的度量 - 圖像


數(shù)碼圖像被用于設(shè)計(jì)時(shí),通常是按照百分比縮小的,或者可以在程序中重設(shè)尺寸以適應(yīng)特殊的空間要求。盡管如此,為了保證良好的印刷質(zhì)量,印刷時(shí)圖像的分辨率至少要保持在300dpi。而在屏幕上顯示,其分辨率則至少要保持72dpi。

undefined就像上圖所表現(xiàn)的這樣,圖像也能占據(jù)單個(gè)模塊或覆蓋一組模塊。



4.表現(xiàn)形式


網(wǎng)格系統(tǒng)與當(dāng)代藝術(shù)運(yùn)動(dòng)有著緊密的關(guān)聯(lián),例如立體主義、構(gòu)成主義和其他一些偏愛嚴(yán)謹(jǐn)結(jié)構(gòu)的當(dāng)代藝術(shù)的分支,都與網(wǎng)格系統(tǒng)有些緊密的聯(lián)系。為了創(chuàng)造出流暢并令人印象深刻的設(shè)計(jì),文本和圖像的不同組合被當(dāng)作表現(xiàn)形式來使用。如同畫家在畫布上構(gòu)圖一樣,設(shè)計(jì)師也用相似的辦法來吸引讀者的注意。不同的表現(xiàn)形式能有效吸引讀者,并形成一系列的聯(lián)系。

undefined上圖介紹了一種設(shè)計(jì)觀點(diǎn),利用元素的放置位置可以創(chuàng)造出不同的視覺效果。設(shè)計(jì)對(duì)象既可以在頁面中占主導(dǎo)位置,也可以被小心翼翼地插入頁面的一角;既可以建立相互之間的關(guān)系,也可以被清楚明白的獨(dú)立出來。


4.1 分組


聚合成組的元素能使相關(guān)的信息聯(lián)系起來。而不同的設(shè)計(jì)元素對(duì)應(yīng)排列,也有助于建立起它們之間的聯(lián)系。分組的方法就是將圖像和文字置于單頁、通頁甚至整個(gè)出版物的特定模塊或空間區(qū)中。

undefined


4.2 邊界


在設(shè)計(jì)中,為了使邊框保持整齊和美觀,設(shè)計(jì)師常常使用元素遠(yuǎn)離的遠(yuǎn)離來與邊框保持一定的距離。盡管如此,對(duì)于邊界的利用仍能有效的創(chuàng)造出具有設(shè)計(jì)感和活力感的版式設(shè)計(jì)。

undefined


4.3 水平


當(dāng)設(shè)計(jì)師要利用網(wǎng)格來引導(dǎo)讀者視線橫跨一個(gè)單頁或通頁時(shí),設(shè)計(jì)元素便會(huì)依照這種水平運(yùn)動(dòng)的趨向來進(jìn)行編排。也可以運(yùn)用出血印刷和橫跨訂口的圖片,形成水平的運(yùn)動(dòng)感。

undefined


4.4 垂直


當(dāng)設(shè)計(jì)師通過運(yùn)用網(wǎng)格中的各個(gè)元素來引導(dǎo)讀者視線在頁面上下瀏覽,就是垂直形式的最好表現(xiàn)。垂直形式的垂直線不一定要在中線的位置。在平面中設(shè)置一個(gè)軸線,元素按照這個(gè)軸線做重心的平衡這種表現(xiàn)形式更好,這樣不對(duì)稱的版面具有一定的動(dòng)勢(shì)和張力,也更有沖擊力和躍動(dòng)感。

undefined


4.5 斜角


把網(wǎng)格傾斜一定的角度,一般會(huì)傾斜至30°、45°和60°這三種角度,這些傾斜的網(wǎng)格發(fā)揮的作用原理與水平網(wǎng)格相同,但由于它們是傾斜的,設(shè)計(jì)師便能夠以不同尋常的方式展現(xiàn)自己的創(chuàng)意。因網(wǎng)格可以設(shè)置成任何角度,往往這樣有角度的網(wǎng)格更難設(shè)置也更難處理一些。

undefined


4.6 軸線


網(wǎng)格中的軸線是一條隱形的平衡線或重力線,會(huì)貫穿整個(gè)設(shè)計(jì)作品 這部作品就是利用軸線網(wǎng)格來做的,它產(chǎn)生并受控于頁面元素的位置和布局。

undefined



5.元素的比例


在設(shè)計(jì)中改變圖像或文本等元素的比例,頁面就能營(yíng)造出躍動(dòng)率和動(dòng)勢(shì)。在平面中運(yùn)用元素之間的比例關(guān)系,就可以從不同的視角展示同一個(gè)主題。元素在沒有經(jīng)過比例調(diào)整的情況下,元素之間的比例只是按照它們固有的樣式出現(xiàn),這時(shí)它們之間存在一種消極的關(guān)系。相反,元素之間的對(duì)比關(guān)系存在,比例經(jīng)過調(diào)整后,它們之間存在一種積極的關(guān)系。躍動(dòng)率在 添加變化 這篇文章中提過一嘴,以后會(huì)在“圖片裁剪與布置”系列文章中細(xì)講。

undefined


這里的積極和消極可以理解為“動(dòng)與不動(dòng)”,頁面元素沒有變化就給人感覺死氣沉沉的,版心上下留白一致也會(huì)給人這種感覺,這種布局適合用于古典書籍和較為傳統(tǒng)的平面設(shè)計(jì)中。不動(dòng)且沒有變化給人感覺沒有動(dòng)勢(shì)和張力并很消極,動(dòng)而有變化給人感覺靈動(dòng)活躍并很積極。

undefined通過改變?cè)刂g的比例關(guān)系就會(huì)存在積極的關(guān)系。相對(duì)較大的元素層級(jí)更高,并吸引了更多的注意力。



6.元素的層級(jí)


設(shè)計(jì)師利用層級(jí)的概念,通過比例大小或布局結(jié)構(gòu)來定義作品,并呈現(xiàn)作品中最重要的信息。

undefined


6.1 消極


下圖所示中的頁面是處于消極的狀態(tài),兩大欄目沒有對(duì)比關(guān)系。尺寸一致顯得整體頁面很平靜,也沒有表現(xiàn)出動(dòng)勢(shì)和張力,文本之間也不存在層級(jí)的關(guān)系。但要注意的是,采用這種排版布局,讀者的視線會(huì)自然的從左到右依次閱讀,并被帶入作品所傳遞的信息中。

undefined


6.2 位置


對(duì)設(shè)計(jì)元素的布局能明確設(shè)計(jì)中的層級(jí)關(guān)系。下圖中的標(biāo)題獨(dú)立放置在了左頁,來突顯出它的優(yōu)先級(jí)與重要性。

undefined


6.3 位置和尺寸


位于頁面入口處的元素被放大,它與下面元素的間距也被拉大,就形成了這個(gè)元素在層級(jí)中的重要性。

undefined



7.網(wǎng)狀與點(diǎn)狀網(wǎng)格


設(shè)計(jì)師會(huì)利用網(wǎng)狀網(wǎng)格或點(diǎn)狀網(wǎng)格來輔助對(duì)設(shè)計(jì)元素的布局。使用網(wǎng)格之前,必須理解它們是如何輔助設(shè)計(jì)師進(jìn)行設(shè)計(jì)的。要思考犧牲對(duì)布局的多樣性,換來多少設(shè)計(jì)的連貫性,而且也為實(shí)踐留下了更大的空間。

undefined


7.1 網(wǎng)狀網(wǎng)格


網(wǎng)狀網(wǎng)格是基礎(chǔ)網(wǎng)格,它由一系列的水平線和垂直線組成的,以此來引導(dǎo)設(shè)計(jì)元素的布局,使設(shè)計(jì)師能快速布局并變得連貫而準(zhǔn)確,它常被運(yùn)用在設(shè)計(jì)定稿之前的草圖中。

undefined


7.2 點(diǎn)狀網(wǎng)格


點(diǎn)狀網(wǎng)格同樣是一個(gè)基礎(chǔ)網(wǎng)格,用來安置不同的設(shè)計(jì)元素。它們也可以用來補(bǔ)充頁面元素的布局,例如文字和圖片之間的空白等。


文章來源:站酷     作者:羅耀_系列



藍(lán)藍(lán)設(shè)計(jì)www.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到UX設(shè)計(jì)的超全知識(shí)體系

周周


在給各位灌輸知識(shí)體系之前,先和大家分享下 UX 的行業(yè)近況。

這陣子又常被問到一個(gè)老生常談的話題:UI 需要升級(jí)成體驗(yàn)設(shè)計(jì)師嗎?升級(jí)成什么樣才算呢?

作為一個(gè)專業(yè)向和業(yè)務(wù)導(dǎo)向大廠都呆過的老司機(jī)很認(rèn)真負(fù)責(zé)的告訴各位鐵汁,升級(jí)是有必要的,但是度和偏重還是需要自己把握。

全面的 UX 知識(shí)體系如果能完整且合理的應(yīng)用在你出色的視覺能力基礎(chǔ)上的話,無論是去哪個(gè)廠子都是巨大的加分,但前提一定還是扎實(shí)的 UI 基本功。

行業(yè)背景交代完了,接下來給各位介紹一下我吐血整理的從 UI 到 UX 的完整知識(shí)體系,一共 6 大模塊:

數(shù)據(jù)收集/分析定義/策略定制/體系建設(shè)/設(shè)計(jì)執(zhí)行/設(shè)計(jì)驗(yàn)證(給大家新增了一個(gè)很多人都會(huì)忽略的體系化模塊,在大廠面試中是很加分的)。

這里都以腦圖的方式給大家整理出來了,超級(jí)清晰,這下再也不用說我想學(xué)習(xí) UX 的相關(guān)知識(shí),但是無從下手了。不過因?yàn)榫唧w的知識(shí)點(diǎn)對(duì)應(yīng)的保姆級(jí)教學(xué)內(nèi)容實(shí)在太多了,這里也不可能一一給大家都列舉,所以看到陌生的知識(shí)點(diǎn)建議大家可以去到各種設(shè)計(jì)、產(chǎn)品相關(guān)文章平臺(tái)去搜尋一下,一般都能通過自學(xué)解決掉很多漏洞。

數(shù)據(jù)收集

用一篇文章,幫你搭建從UI到UX設(shè)計(jì)的超全知識(shí)體系

數(shù)據(jù)收集模塊主要是我們?cè)陂_啟項(xiàng)目前需要了解的內(nèi)容,也是我們進(jìn)行策略制定和分析時(shí)候的重要依據(jù)。它屬于我們進(jìn)階模塊里最陌生的環(huán)節(jié),實(shí)際工作中可能應(yīng)用的并不是太多,但要求大家有一定了解,在有資源條件的時(shí)候合理利用,那么它就會(huì)是你作品集里加分的一部分。

分析定義

用一篇文章,幫你搭建從UI到UX設(shè)計(jì)的超全知識(shí)體系

分析定義通常是在我們做具體決策前,通過數(shù)據(jù)收集來的調(diào)研結(jié)果進(jìn)行一定的分析判斷。這里也包含我們對(duì)完整的項(xiàng)目事件進(jìn)行的完整分析,得出有利于我們做優(yōu)化決策的結(jié)論。

策略制定

用一篇文章,幫你搭建從UI到UX設(shè)計(jì)的超全知識(shí)體系

通過前 2 個(gè)模塊的內(nèi)容,可以輔助我們推到設(shè)計(jì)決策的落地。比如通過定義好的“產(chǎn)品目標(biāo)”與“業(yè)務(wù)指標(biāo)”來進(jìn)行設(shè)計(jì)改版的設(shè)計(jì)目標(biāo)與主題升級(jí)。

體系建設(shè)

用一篇文章,幫你搭建從UI到UX設(shè)計(jì)的超全知識(shí)體系

體系建設(shè)是很多鐵汁作品集里匱乏的一環(huán),但恰恰也是體現(xiàn)設(shè)計(jì)師沉淀和大型項(xiàng)目經(jīng)驗(yàn)的一環(huán)。體系化的搭建除了體現(xiàn)設(shè)計(jì)師的經(jīng)驗(yàn),也可以很好的從設(shè)計(jì)專業(yè)側(cè)角度為項(xiàng)目提升整體效率與品質(zhì)。

設(shè)計(jì)執(zhí)行

用一篇文章,幫你搭建從UI到UX設(shè)計(jì)的超全知識(shí)體系

設(shè)計(jì)執(zhí)行部分的內(nèi)容看似基礎(chǔ),但其實(shí)細(xì)分支的知識(shí)點(diǎn)特別多,很多設(shè)計(jì)師工作了很多年也沒有完全牢固的掌握,這樣就會(huì)影響很多日常的工作輸出效率與質(zhì)量。

設(shè)計(jì)驗(yàn)證

用一篇文章,幫你搭建從UI到UX設(shè)計(jì)的超全知識(shí)體系

完整的用戶體驗(yàn)設(shè)計(jì)流程一定是有頭有尾的,也就是我們做設(shè)計(jì)需要得到一個(gè)價(jià)值肯定,可以通過一系列的方式獲取主觀與客觀的驗(yàn)證。

介紹完 6 個(gè)模塊,還有一些話要叮囑大家:

知識(shí)體系給到大家也并不是要求大家面面俱到,精鉆每個(gè)方法論的細(xì)節(jié),只是至少腦子里能有這個(gè)概念,實(shí)際工作項(xiàng)目有可以應(yīng)用的地方你能想得起來,就不會(huì)“書到用時(shí)方恨少”啦。

用一篇文章,幫你搭建從UI到UX設(shè)計(jì)的超全知識(shí)體系




文章來源:優(yōu)設(shè)網(wǎng)     作者:柒言設(shè)語



藍(lán)藍(lán)設(shè)計(jì)www.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ì)玻璃態(tài)的UI設(shè)計(jì)效果

周周

一個(gè)簡(jiǎn)易的小教程,一起Get起來~



設(shè)計(jì)中存在一些不可忽視的趨勢(shì)。盡管玻璃態(tài)在UI設(shè)計(jì)中不是新的事物,但是最近又被人們挖掘出來了。有些人甚至將這個(gè)趨勢(shì)稱為“玻璃態(tài)”。

下面讓我向你展示如何通過7個(gè)簡(jiǎn)單的步驟教你如何創(chuàng)建玻璃態(tài)的UI效果。


1)畫一個(gè)形狀
首先創(chuàng)建一個(gè)基本形狀,一個(gè)具有以下尺寸的矩形:640×400,再加40pt的圓角。


2)應(yīng)用漸變填充

現(xiàn)在該基本填充了。在本教程中,我們將使用漸變。兩種漸變顏色都將是純白色(#FFFFFF),但是它們的不透明度會(huì)有所不同。將第一個(gè)設(shè)置為40%,第二個(gè)設(shè)置為10%。



3)添加背景模糊

我們來模仿玻璃的是模糊感。首先將背景模糊值設(shè)置為20左右,來看看這個(gè)是表面如何變化的。當(dāng)然,你也可以根據(jù)自己的效果來設(shè)置不同的模糊度。



4)添加邊框

一個(gè)優(yōu)雅的邊框會(huì)為元素增添了光澤。當(dāng)玻璃表面重疊時(shí),它也有助于建立視覺層次。如果要在設(shè)計(jì)中創(chuàng)建定向光的幻覺,則可能需要對(duì)邊框使用漸變。我是這樣制作卡片的,所以看起來更有“質(zhì)感”。

卡邊界對(duì)角漸變的設(shè)置:

邊框:3px

顏色1:#FFFFFF(不透明度50%)

顏色2:#FFFFFF(不透明度0%)

顏色3:#FF48DB(不透明度0%)

顏色4:#FF48DB(不透明度50%)


5)應(yīng)用陰影

細(xì)微的陰影效果有助于增強(qiáng)視覺層次。由于陰影的存在,區(qū)分所有層將更加容易。



在我的示例中,我使用具有24的模糊值的深色,并且擴(kuò)展減小為-1。這次,你將通過添加陰影樣式屬性以與玻璃表面一起成形來獲得最佳效果。


6)填寫內(nèi)容

是時(shí)候添加一些內(nèi)容了。填寫必要的徽標(biāo)和文字。要?jiǎng)?chuàng)建壓印層的錯(cuò)覺,請(qǐng)用白色填充內(nèi)容,并將不透明度降低到50%。你也可以玩圖層混合-嘗試疊加以獲得有趣的結(jié)果。



7)添加質(zhì)感

玻璃卡片已完成,但是,你可以進(jìn)一步添加一些高級(jí)紋理!要添加優(yōu)雅的噪點(diǎn),我們添加帶有噪點(diǎn)的圖像。將不透明度降低到20%,并將填充的混合模式設(shè)置為“疊加”??纯船F(xiàn)在看起來多么有質(zhì)感。


來看一些其它的嘗試~




文章來源:UI中國(guó)     作者:Tzw_n



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



管理學(xué) - 抽屜式管理法

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

95%的公司都會(huì)采用的方法

1981年,美國(guó)50%的企業(yè)都采用了抽屜式管理的方法來管理他們的公司,1985年則上升至25%,而在1999年上升至95%!泰國(guó)企業(yè)在1998年采用抽屜式管理的企業(yè)也占90%以上 - 《華盛頓郵報(bào)》




實(shí)用的管理方法


抽屜式管理法是一種通俗形象的管理術(shù)語,在現(xiàn)代管理中也叫做職務(wù)分析。抽屜式管理的主要含義是在每個(gè)管理人員的辦公桌的抽屜里,都有一個(gè)明確的職務(wù)工作規(guī)范。它包括兩個(gè)方面的含義

 

 - 每個(gè)人所從事的、責(zé)、權(quán)、等四個(gè)方面進(jìn)行明確的規(guī)定,做到四者統(tǒng)一;


 - 明確每個(gè)人所從事的管理和主要專業(yè)業(yè)務(wù),分工協(xié)作關(guān)系,橫向縱向聯(lián)合事宜,以及上下左右的對(duì)口單位等,達(dá)到理順企業(yè)管理關(guān)聯(lián)的目的。


抽屜式管理是近幾年世界上最為流行的管理方法。

他的主要內(nèi)容包括兩個(gè)方面

 

 - 業(yè)務(wù)部門的職務(wù)分析,即職能權(quán)限范圍。業(yè)務(wù)部門的職責(zé)權(quán)限范圍分析,應(yīng)根據(jù)企業(yè)的總體目標(biāo)、生產(chǎn)經(jīng)營(yíng)指標(biāo),以及專業(yè)對(duì)口的要求和協(xié)作關(guān)系進(jìn)行層層的分析、逐級(jí)落實(shí)、明確規(guī)定;


 - 管理人員的職務(wù)分析,即職務(wù)說明或職務(wù)規(guī)范;


管理人員的能力分析要根據(jù)管理層次的不同劃分來進(jìn)行,它的關(guān)鍵是處理好集權(quán)分權(quán)的關(guān)系。例如一家設(shè)計(jì)公司,美術(shù)指導(dǎo)要對(duì)設(shè)計(jì)總監(jiān)負(fù)責(zé),資深設(shè)計(jì)師要對(duì)美術(shù)指導(dǎo)負(fù)責(zé),設(shè)計(jì)師要對(duì)資深設(shè)計(jì)師負(fù)責(zé),設(shè)計(jì)助理要對(duì)設(shè)計(jì)師負(fù)責(zé),實(shí)習(xí)生要對(duì)設(shè)計(jì)助理負(fù)責(zé)。

 

企業(yè)在施行抽屜式管理方法時(shí),首先要組織一個(gè)由各個(gè)部門結(jié)成的職務(wù)分析小組。并對(duì)職務(wù)分析小組進(jìn)行短期培訓(xùn),以掌握抽屜式管理的概念和內(nèi)涵。其次,企業(yè)應(yīng)圍繞企業(yè)的總體目標(biāo)、生產(chǎn)經(jīng)營(yíng)指標(biāo)、根據(jù)業(yè)務(wù)對(duì)口,編制業(yè)務(wù)職責(zé)權(quán)限范圍。

 

企業(yè)應(yīng)分層進(jìn)行管理人員分析,按職、責(zé)、權(quán)、利四者統(tǒng)一,制定管理人員職務(wù)說明或職務(wù)規(guī)范。最后,企業(yè)需要制定必要的考核、獎(jiǎng)懲機(jī)制,與職務(wù)分析法配套執(zhí)行。

 

 


流行的管理方法


在一些商業(yè)企業(yè)中,不同程度的存在著職責(zé)分不清,分工不明確,權(quán)利與責(zé)任相分離等問題,造成辦事效率低,拖拉等狀況,它們一般都表現(xiàn)在

 

 - 各部門分工不明確,一些工作上的事情誰都不管,有些事情又都想插手,造成互相扯皮,嚴(yán)重影響了實(shí)際工作效率;


 - 企業(yè)內(nèi)部橫向聯(lián)系比較差,協(xié)調(diào)能力弱,使執(zhí)行人員只能聽四方指示,八方匯報(bào),大大的延長(zhǎng)了工作流程,極大的影響了實(shí)際工作效率與人員浪費(fèi);


 - 企業(yè)用人多少缺乏一個(gè)客觀標(biāo)準(zhǔn),容易受魅力偏見的影響,強(qiáng)壯的和漂亮的應(yīng)聘者更受歡迎;對(duì)于設(shè)計(jì)行業(yè)而言作品造假,作品集過度包裝引起的能力與職位不匹配的問題,沒有一個(gè)較為標(biāo)準(zhǔn)的審查機(jī)制,都屬于個(gè)人的主觀因素。


 

企業(yè)要進(jìn)行策略管理,就必須明確企業(yè)內(nèi)部各個(gè)崗位的主要職責(zé)以及各職務(wù)之間的分工協(xié)作關(guān)系,它能大大的提高企業(yè)戰(zhàn)略管理的科學(xué)性、系統(tǒng)性和有效性。

 

抽屜式管理在人力資源管理中一般用于職務(wù)分析。隨著社會(huì)經(jīng)濟(jì)的發(fā)展,抽屜式管理的公司也越來越普遍,人們認(rèn)為抽屜式管理是21世紀(jì)初現(xiàn)代化管理發(fā)展的新趨勢(shì)。

 

當(dāng)前一些經(jīng)濟(jì)發(fā)達(dá)國(guó)家的大中型企業(yè)都非常重視抽屜式管理和職位分類,并且都在抽屜式管理的基礎(chǔ)上,不同程度的建立了職位分類制度。絕大部分世界500強(qiáng)企業(yè)都在實(shí)施抽屜式管理,這一工具在福特經(jīng)理們的心目中,具有非常重要的地位,幾乎每一個(gè)經(jīng)理人都在管理下級(jí)之中應(yīng)用了這一工具。

 

 

 

抽屜式管理的步驟


第一步 - 建立一個(gè)由各部門組成的職務(wù)分析小組


考評(píng)小組的組成人員包括:


 - 企業(yè)領(lǐng)導(dǎo)者:可以保障部門權(quán)責(zé)設(shè)定與企業(yè)整體目標(biāo)一致,保障權(quán)威性與決策的有效性。

 - 人力資源管理領(lǐng)導(dǎo)者:抽屜式管理模式的主管者,有利于人力資源管理精準(zhǔn)性的提升。

 - 各部門角領(lǐng)導(dǎo)者和員工代表:促進(jìn)決策的民主性和科學(xué)性。



第二步 - 正確處理企業(yè)內(nèi)部的集權(quán)和分權(quán)關(guān)系

 

要考慮與正確劃分,在哪些領(lǐng)域或事項(xiàng)上集權(quán),在哪些工作上分權(quán),部門權(quán)責(zé)考評(píng)小組要以整體績(jī)效為基準(zhǔn)。


第三步 - 圍繞企業(yè)的總體目標(biāo),層層分解、逐級(jí)落實(shí)職責(zé)權(quán)限范圍

 

層層分解與逐級(jí)落實(shí)是“抽屜式”管理模式的核心環(huán)節(jié),或者說是管理落實(shí)與職權(quán)細(xì)化的關(guān)鍵性步驟。整體目標(biāo)指的是企業(yè)戰(zhàn)略總目標(biāo),實(shí)現(xiàn)企業(yè)經(jīng)濟(jì)效益、提升管理績(jī)效與職權(quán)分解、落實(shí)是目標(biāo)與手段的關(guān)系。



第四步 - 編寫職務(wù)說明書,制定出每個(gè)職務(wù)工作的要求準(zhǔn)則

 

職務(wù)說明書包括兩部分,即對(duì)部門領(lǐng)導(dǎo)者和員工的職務(wù)都進(jìn)行規(guī)范化說明。其次制定員工職務(wù)說明書,通過書面化的形式將員工工作相關(guān)內(nèi)容進(jìn)行明確規(guī)定。哪個(gè)員工在哪個(gè)環(huán)節(jié)上出了問題,只要拿出放在抽屜內(nèi)的職務(wù)說明書即可進(jìn)行查詢。


第五步 - 制定考核與獎(jiǎng)懲制度,與職務(wù)分析法配套執(zhí)行

 

績(jī)效考核與獎(jiǎng)懲制度是抽屜式管理模式的保障性措施,也是提升管理有效性的配套手段。制定與權(quán)、責(zé)相配套的獎(jiǎng)懲、晉升制度。以職務(wù)說明書為依據(jù),通過績(jī)效考核反饋給予認(rèn)真履職者獎(jiǎng)勵(lì),給予玩忽職守者相應(yīng)的懲罰。



總結(jié):其實(shí)抽屜式管理法就是管理層的一種管理手段,在抽屜里放一些對(duì)于員工的職務(wù)職責(zé)的約束規(guī)則,在心理上給員工施壓,進(jìn)而使之完善所做的工作;在規(guī)則上也同樣施壓,一旦員工的工作不飽和,又或沒有完善部分工作,就可以直接拿規(guī)則說事兒,企業(yè)也挺雞賊的。


對(duì)于員工而言還是要不斷完善自身能力,自己沒有問題別人也挑不出問題,其次要注意溝通協(xié)作的問題,把自己工作做好的同時(shí),如果有精力和能力也幫助同事提升能力和幫助完善部分工作,對(duì)自己負(fù)責(zé),對(duì)公司負(fù)責(zé),同事和公司才會(huì)對(duì)你負(fù)責(zé),更看重你。


文章來源:站酷  作者:羅耀_管理

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


日歷

鏈接

個(gè)人資料

存檔