首頁

圖標設計知多少

周周

圖標分類.001.png

圖標分類.002.png



圖標分類.003.png



圖標分類.004.png



圖標分類.005.png



圖標分類.006.png



圖標分類.007.png



圖標分類.008.png



圖標分類.009.png



圖標分類.010.png



圖標分類.011.png



圖標分類.012.png



圖標分類.013.png



圖標分類.014.png



圖標分類.015.png



圖標分類.016.png



圖標分類.017.png



圖標分類.018.png



圖標分類.019.png



圖標分類.020.png



圖標分類.021.png



圖標分類.022.png



圖標分類.023.png



圖標分類.024.png



圖標分類.025.png



圖標分類.026.png



圖標分類.027.png



圖標分類.028.png



圖標分類.029.png




文章來源:藍藍設計     作者:張藝仁



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



體驗設計如何降低成本提高效益?

資深UI設計者

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



今天學習一下用戶體驗的結構化衡量標準。不管是日常工作還是作品提升,都可以作為一個方向性的指導。


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


首先我們來了解一下通用設計法則之——成本效益法則



成本效益法則的概念


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


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


用戶價值 = 新體驗 - 舊體驗 - 切換成本


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


體驗 = 效益 - 認知成本 - 時間成本 - 操作成本


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


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


糟糕的展覽設計成本大于效益


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



怎么做?


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



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



PART 1 

降低認知成本


1. 減少冗余信息


a. 去掉累贅文案





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


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


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



b. 去掉多余選項



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



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


a. 文案與圖片匹配度



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



b. 結構框架好理解——格式塔原理



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



c.記憶的局限,降低記憶負擔


人們工作記憶的容量有限,大約是 4±1。由于短期記憶的局限,設計師應該確保用戶可以簡單地識別信息,但不能從之前的對話中回想信息。


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


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



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



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


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


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



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



 4. 文字、圖標的識別性、易讀性



美團Tab icon簡潔明了,圖形與含義符合,文案簡潔清晰。而悅會則顯得復雜難以識別,不僅文案復雜,易讀性比較差,圖標也沒有準確表達其寓意。



 5. 一致性


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


f. 視覺的一致性



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



 6. 提示、引導、反饋



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



 7. 符合用戶習慣


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



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



PART 2 

降低時間成本


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



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


 2.  增加等待過程中的價值



王者榮耀游戲開始前的加載界面會有小技巧的提示,等待的時間可以學習一些小技巧。



PART 3 

降低操作成本


 1. 先價值吸引后行動(先瀏覽后登陸)



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



 2. 預測用戶行為



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



3. 主動替用戶選擇



美團外賣支付時主動幫用戶選擇極速支付選項,一方面讓用戶更便捷,另一方面也能增加銀行卡賬戶的綁定,賦能業(yè)務。



 4. 簡化關鍵節(jié)點



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



5. 減少手動輸入操作



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



降低成本的誤區(qū)


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


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



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


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



總結


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


設計師運用成本效益法則提升用戶體驗的維度主要在降低用戶的認知成本、時間成本、操作成本。


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


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


降低操作成本包括:先價值吸引后行動;預測用戶行為;主動替用戶選擇;簡化關鍵節(jié)點;減少手動輸入操作。


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


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

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



一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

資深UI設計者

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

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

劍指移動:快速迭代的芯片

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

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

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

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

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

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

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

屏幕延展:智能手機的下一個階段

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

場景細化:智能家居的差異進化

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

智能家居的花樣就多了。

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

CES 2021 的這些新型的智能家居類設備上,可以更進一步印證之前大家對于趨勢的預測:

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

疫情催化:健康與可穿戴設備的進化

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

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

相比于雷蛇的科幻感,AirPop Active +智能口罩就顯得更加運動。

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

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

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

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

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

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

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

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

一年一度的CES 2021消費電子展,有哪些值得關注的設計趨勢?

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

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

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

給設計師的新機遇

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

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

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

那個時候,交互設計師這個門類應該會真正意義上徹底獨立出來,而不是把交互的活兒讓產(chǎn)品或者UI設計師來完成……因為交互設計本身的工作量會暴增,而且有著更高的要求和更加復雜的情況要處理。

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

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


優(yōu)惠券設計基礎知識

資深UI設計者

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

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

優(yōu)惠券的優(yōu)點

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

1. 提升用戶活躍度:

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

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

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

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

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

4. 提升用戶的購買力:

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

優(yōu)惠券的類型

1. 按使用條件劃分

體驗券

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

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

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

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

滿減券

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

打折券

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

2. 按使用范圍劃分

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

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

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

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

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

店鋪優(yōu)惠券則是店鋪自行發(fā)放的,如:關注有禮、抽獎、新老顧客回饋等;

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

優(yōu)惠券的作用

1. 拉新

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

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

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

設計目標 – 吸引新用戶;刺激用戶的購買需求;使其真正成為我們的用戶。

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

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

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

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

2. 促活

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

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

小結:

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

優(yōu)惠券設計的基本要素

收益預估:設計前預先判斷本次活動的成交量,計算每單的收益大小以及總收益。

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

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

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

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

用一篇文章,幫你了解優(yōu)惠券設計的基礎知識

展望

通?;顒咏Y束后設計師要對本次設計進行復查,通過調(diào)研判斷優(yōu)惠券對用戶的吸引力。一方面從定量的維度考量,我們要對用戶的瀏覽量、領取量、使用率、實際下單量和用戶參與程度進行觀測;另一方面從定性的維度分析用戶的實際感受,用戶在體驗完成后是否愿意再次光臨或推薦給親友,也是我們需要考查的方面。

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

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


品牌升級思路

資深UI設計者

想做品牌升級?先來學會高手的結構化思維!

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

想做品牌升級?先來學會高手的結構化思維!

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

想做品牌升級?先來學會高手的結構化思維!

按照這個思路,設計風格以及重要因子(顏色 / 字體等)就基本被確認下來了,然后就需要相關的設計師按照邏輯圖的順序落實到業(yè)務應用當中:

想做品牌升級?先來學會高手的結構化思維!

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

想做品牌升級?先來學會高手的結構化思維!

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

想做品牌升級?先來學會高手的結構化思維!

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

想做品牌升級?先來學會高手的結構化思維!

想做品牌升級?先來學會高手的結構化思維!

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

想做品牌升級?先來學會高手的結構化思維!

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

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

品牌設計中需要符合和 logo 搭配使用,因為在一定場景下,真正能讓用戶感知并認可的可能是超級符號,而非品牌的 LOGO;

想做品牌升級?先來學會高手的結構化思維!

當然,超級符號可以依附于 logo 存在,同樣也可以作為個體單獨存在,兩者并沒有絕對意義上的劃分:

1. 超級符號的形式

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

想做品牌升級?先來學會高手的結構化思維!

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

想做品牌升級?先來學會高手的結構化思維!

符號和 logo 分離的例子也有很多,比如滴滴的圓:

想做品牌升級?先來學會高手的結構化思維!

咱也不知道為啥,ta 就用了個通用符號,不過屬實還挺好看~

2. 淺談超級符號的設計 

設計一個符號一定要把產(chǎn)品的特色最大化,試想一下漫畫的畫法,其中最重要的一點就是特點的不斷夸張夸張再夸張,不斷讓人記住 ta 最具特色的那一面:

想做品牌升級?先來學會高手的結構化思維!

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

想做品牌升級?先來學會高手的結構化思維!

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

上點小福利

想做品牌升級?先來學會高手的結構化思維!

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

想做品牌升級?先來學會高手的結構化思維!

總結一下

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


文章來源:優(yōu)設  作者:負能量補給站

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


如何選擇合適的圖標?來看這份圖標類型和風格匯總

ui設計分享達人

常見的分類是簡單的線性分類,缺少立體化的圖標分類思維。文章通過梳理來幫助大家對不同類型及風格的圖標有一個體系化的認知。

大家好,我是Clippp??吹胶玫膱D標我們會習慣性地截圖保存,但隨著收集的圖標越來越多,會發(fā)現(xiàn)對圖標的分類會變得越來越混亂…做設計時也不清楚到底該參考或運用哪種風格最合適。來看看如何解決這些問題!

一、定義圖標類型

對圖標進行分類時,普遍會遇到的問題是一個圖標有多種風格。例如下面這個水滴圖標,樣式很簡單,但可以劃分到多個類別中。

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

  • 繼續(xù)細分對應的面性、線性、線面結合、扁平、擬物化等類型;

  • 最后選擇標準、容器、漸變、3D、手繪、陰影等風格。

利用這種結構層級,可以明確定義圖標類別。

二、圖標尺寸

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

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

三、圖標類型

確定圖標尺寸后,進一步細分圖標類型: 
面性圖標 
線性圖標 
線面結合圖標 
扁平化圖標 
擬物化圖標 


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

四、圖標組成


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


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

五、小尺寸圖標樣式


簡單的圖像可以更具包容性。圖標的尺寸越小,越考驗設計師傳達信息的能力。 

1.面性圖標

1.1標準面性圖標

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

1.2帶有背景色的面性圖標

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

2.線性圖標

2.1標準線性圖標

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

2.2雙色線性圖標

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

3.線面結合圖標

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

 4.扁平化圖標 

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

六、大尺寸圖標樣式

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

 1.線性圖標 

1.1標準線性圖標

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

1.2漸變線性圖標

添加一些漸變能讓原本單一的線性圖標賦予更多的個性。 
關鍵點:
在小尺寸圖標中添加漸變會降低圖標的可視性。 
選擇漸變時,首先考慮鄰近色。 
線條越粗,漸變越明顯。 
線條細節(jié)越多,漸變越明顯。 

1.3等距線性圖標

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

1.4手繪線性圖標

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

1.5斷線圖標

標準的線性圖標看起來可能會很單調(diào),而簡單靈活的斷線處理能為圖標增加更多個性。 
關鍵點:
斷線粗細應該相同。 
圖標的中斷次數(shù)盡可能保持一致。 

1.6雙色線性圖標

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

2.線面結合圖標

線面結合圖標可以看作是添加顏色后的線性圖標。線面結合具有很強的輪廓,讓圖標能夠清晰可見。 
2.1標準線面結合圖標

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

2.2帶有背景色的線面結合圖標

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

2.3錯位線面結合圖標

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

2.4色塊圖標

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

2.4單色線面結合圖標

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

 3.扁平化圖標 

扁平化圖標通常沒有描邊,主要使用形狀和顏色來完成組合搭配。簡潔、友好和適當?shù)募毠?jié),讓這類圖標非常具有吸引力。 
3.1標準扁平化圖標

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

3.2帶有容器的扁平化圖標

嘗試讓圖形打破容器,帶來動態(tài)的感覺。 
關鍵點:
嘗試讓圖形從容器中凸出來,以增加深度。 
因為在容器中,可以添加更多的細節(jié)而不用擔心圖形變得混亂。 
嘗試使用正方形、橢圓形或與品牌相關的容器形狀。 

3.3等距圖標

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

3.4半陰影扁平圖標

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

3.5長陰影扁平圖標

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

 4.擬物化圖標 

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

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

總結

希望大家能對圖標的分類及設計有更全面深入的認識,從而構建一套完整的圖標思維體系。


文章來源:站酷     作者:Clip設計夾



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

網(wǎng)格的基礎---藍藍設計

ui設計分享達人

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

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


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


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


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




目錄


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

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

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

4. 表現(xiàn)形式

5. 元素的比例

6. 元素的層級

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




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


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

undefined


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

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



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


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


網(wǎng)格的構成 - 大體結構 :

- 版面:版面是頁面中所有構成部分的總和;

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

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

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

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

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

undefined


網(wǎng)格的構成 - 局部結構 :

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

- 基線:基線是網(wǎng)格的基本結構,用來引導文本和其他元素在設計中的布局。

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

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

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

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

undefined具網(wǎng)格系統(tǒng)的構成部分又分為眾多的知識點,應該漸進式的去理解,去學習。



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


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

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



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


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

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



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


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

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



4.表現(xiàn)形式


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

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


4.1 分組


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

undefined


4.2 邊界


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

undefined


4.3 水平


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

undefined


4.4 垂直


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

undefined


4.5 斜角


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

undefined


4.6 軸線


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

undefined



5.元素的比例


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

undefined


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

undefined通過改變元素之間的比例關系就會存在積極的關系。相對較大的元素層級更高,并吸引了更多的注意力。



6.元素的層級


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

undefined


6.1 消極


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

undefined


6.2 位置


對設計元素的布局能明確設計中的層級關系。下圖中的標題獨立放置在了左頁,來突顯出它的優(yōu)先級與重要性。

undefined


6.3 位置和尺寸


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

undefined



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


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

undefined


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


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

undefined


7.2 點狀網(wǎng)格


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


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



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

用一篇文章,幫你搭建從UI到UX設計的超全知識體系

周周


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

這陣子又常被問到一個老生常談的話題:UI 需要升級成體驗設計師嗎?升級成什么樣才算呢?

作為一個專業(yè)向和業(yè)務導向大廠都呆過的老司機很認真負責的告訴各位鐵汁,升級是有必要的,但是度和偏重還是需要自己把握。

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

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

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

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

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

用一篇文章,幫你搭建從UI到UX設計的超全知識體系

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

分析定義

用一篇文章,幫你搭建從UI到UX設計的超全知識體系

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

策略制定

用一篇文章,幫你搭建從UI到UX設計的超全知識體系

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

體系建設

用一篇文章,幫你搭建從UI到UX設計的超全知識體系

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

設計執(zhí)行

用一篇文章,幫你搭建從UI到UX設計的超全知識體系

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

設計驗證

用一篇文章,幫你搭建從UI到UX設計的超全知識體系

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

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

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

用一篇文章,幫你搭建從UI到UX設計的超全知識體系




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



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



教你如何設計玻璃態(tài)的UI設計效果

周周

一個簡易的小教程,一起Get起來~



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

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


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


2)應用漸變填充

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



3)添加背景模糊

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



4)添加邊框

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

卡邊界對角漸變的設置:

邊框:3px

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

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

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

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


5)應用陰影

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



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


6)填寫內(nèi)容

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



7)添加質(zhì)感

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


來看一些其它的嘗試~




文章來源:UI中國     作者:Tzw_n



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



管理學 - 抽屜式管理法

資深UI設計者

95%的公司都會采用的方法

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




實用的管理方法


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

 

 - 每個人所從事的、等四個方面進行明確的規(guī)定,做到四者統(tǒng)一;


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


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

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

 

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


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


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

 

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

 

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

 

 


流行的管理方法


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

 

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


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


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


 

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

 

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

 

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

 

 

 

抽屜式管理的步驟


第一步 - 建立一個由各部門組成的職務分析小組


考評小組的組成人員包括:


 - 企業(yè)領導者:可以保障部門權責設定與企業(yè)整體目標一致,保障權威性與決策的有效性。

 - 人力資源管理領導者:抽屜式管理模式的主管者,有利于人力資源管理精準性的提升。

 - 各部門角領導者和員工代表:促進決策的民主性和科學性。



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

 

要考慮與正確劃分,在哪些領域或事項上集權,在哪些工作上分權,部門權責考評小組要以整體績效為基準。


第三步 - 圍繞企業(yè)的總體目標,層層分解、逐級落實職責權限范圍

 

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



第四步 - 編寫職務說明書,制定出每個職務工作的要求準則

 

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


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

 

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



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


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


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

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


日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔