淄博阎囤工贸有限公司

首頁

設計的兩面性:理性決策與感性表達

天宇 設計思維

引言
設計應該是感性的還是理性的?設計是感性重要還是理性重要?此類問題一經(jīng)出現(xiàn)便會引起爭議無數(shù),每個人對此都有自己的見解與理由,還有些人主張“理性與感性需要平衡”“既要理性也要感性”,此類觀點看似正確,卻缺乏任何實質性的指導價值。
實際上,很多人都沒注意到問題本身存在的多義性。究竟什么是“設計”?有些人認為是設計決策的過程,而有的人則認為是最終產(chǎn)出的設計作品。大多時候,理性和感性兩種觀點看似針鋒相對,實際上是站在設計的不同層面進行討論。
設計的兩面性:理性決策與感性表達
 
 
 
01|設計決策
從設計決策的角度來看,感性設計指的是設計師在設計過程中主要依靠個人情緒或情感進行創(chuàng)作。許多人誤認為,只要在設計時能與用戶產(chǎn)生共情,理解其情緒波動,并將這些喜怒哀樂、喜好厭惡融入設計作品,就算是感性設計了。然而,共情并不等同于感性。共情是一種能力,理解他人處境與情感,并善于換位思考。而感性則是自己對外界事物產(chǎn)生的直接感受和情緒反應,強調的是個人視角。
在藝術領域,感性占據(jù)主導地位,但設計并非藝術。設計的主要目標是解決問題和滿足特定需求,而藝術更多地關注自我表達和情緒傳遞。設計始終受到客戶需求、商業(yè)目標、市場趨勢和技術可行性等一系列的限制與約束。由于這些條件的存在,直覺與天賦這些感性力量只能得到極其有限的發(fā)揮。這也是設計與藝術的顯著區(qū)別。
設計的兩面性:理性決策與感性表達
 
 
站在感性“對立面”的理性,將設計視為一項工程或科學,力求流程化和系統(tǒng)化,講究方法論,注重各方面的調研,一切動作因問題存在而起,以問題解決而終
。甚至在實際場景中持續(xù)觀察作品表現(xiàn),以期得出可復用的設計模型或定律,為后人更加高效地解決類似問題提供幫助。
所以,從解決問題的本質屬性出發(fā),理性應該才是設計的底色。數(shù)據(jù)驅動、方法論支撐、可用性測試、競品分析、用戶研究等都屬于理性思維的具象化體現(xiàn)。
由于大部分設計師的出身多以藝術打底,所以一旦設計與藝術的界限在心中變得模糊,會習慣性地
將產(chǎn)品看作自己的"作品",而非用戶的"解決方案"
。如此一來,當面對來自各個方向的邊界與不確定性,本能的反應就不是思考了,而是抵觸,尤其是“完美”的方案已在腦中形成,如果突如其來的新要求打亂了這一切,哪怕假以用戶之名也要選擇懟回去,并不斷美化、合理化自己的設計理念。對設計師來說,這是一種自私、不負責任和缺乏職業(yè)素養(yǎng)的表現(xiàn)。
設計的兩面性:理性決策與感性表達
 
 
接下來,想象一下你的手中有一把槍,準備射擊某個目標。你的第一個動作是什么?大概率是瞄準。因為大家都知道,射擊前通過瞄準鏡或者準星,先對目標位置進行瞄準校正,射擊時才能提高命中率,這也正是理性對于設計的重要性所在。
理性在設計中的作用類似于瞄準動作,它幫助我們在設計過程中做出科學的決策,確保設計方案的準確性和可執(zhí)行性。未經(jīng)理性思考的設計,就像是不瞄準就立即開槍,其結果往往難以預測。當然也可能會擊中目標,這基本上取決于兩個因素:
  1.  
    目標遠近:
    近處的目標,即使不瞄準,也很容易擊中;但對于遠處的目標,命中率則必然大幅下降。我們可以把目標遠近理解為設計需求的難易程度,對于簡單需求,不用過多的理性分析,直接設計也能完成任務,但面對復雜的設計項目,如果不進行充分的理性分析上手就畫,大概率就要偏離產(chǎn)品目標了。
  2.  
    個人經(jīng)驗:
    經(jīng)過反復練習,可以練就不瞄準也能遠射的本領,隨著經(jīng)驗積累還能不斷提升距離值;在經(jīng)驗不足的情況下,還不瞄準,就只能選擇一些近距離的射擊目標了。設計也是這樣,對于某類產(chǎn)品的設計經(jīng)驗較多,不用太多理性的分析決策,也能達成設計目標;缺乏經(jīng)驗時,還憑借直覺草率地進行設計,再簡單的項目也可能會搞砸。
設計的兩面性:理性決策與感性表達
 
 
所以,沒有理性支撐而完全依賴直覺經(jīng)驗的設計,一個致命性的問題就是
不穩(wěn)定
!日常工作中,設計師的有效輸出和穩(wěn)定輸出至關重要。
 
02|設計表達
假設經(jīng)過瞄準后的射擊都能順利擊中目標,那么接下來要關注的是什么呢?子彈的沖擊力和殺傷力!這里的子彈就是我們最終輸出的設計作品。在這一環(huán)節(jié),理性設計指的是方案完全圍繞產(chǎn)品功能來呈現(xiàn),追求效率與極簡認知,較少運用裝飾性設計元素,即使使用,也大多兼具輔助內容理解的功能性目的。
而感性設計,我并不太愿意使用“感性”這一措辭,正如在上一段中的定義,感性強調的是個人出發(fā)的情緒表達。其實,“情感化設計”才更負荷大家口中常說的“感性設計”所想表達的含義,相比“理性”的設計作品,情感化設計更具有“一擊必殺”的效果。
在滿足基礎功能需求的基礎之上,通過色彩、排版、圖像、動畫等元素給予用戶充分的情感體驗,也可以利用敘事、對話、情景、微交互等策略引發(fā)共鳴。豐富多樣的情感化設計策略,讓用戶與產(chǎn)品之間更容易建立情感連接。
設計的兩面性:理性決策與感性表達
 
 
在設計決策的階段,理性確保了我們更高的命中概率,而情感的注入讓我們的設計表達具有深入人心的穿透力和影響力。典型設計案例如Apple、Tesla等產(chǎn)品設計無一不是理性決策和感性表達的充分結合。因此,回到開篇提出的問題,設計應該是感性的還是理性的?我的回答是:
作為設計師,要
堅持理性的設計決策
,同時
追求感性的設計表達
。
設計的兩面性:理性決策與感性表達
 
 
 
03|兩者關系
很多人認為,不同的設計領域對理性和感性的要求有所不同,在B端產(chǎn)品中,理性占據(jù)主導地位,而C端產(chǎn)品更強調感性。從設計最終所呈現(xiàn)的效果來看,這種觀點在一定程度上是合理的。B端產(chǎn)品多用于生產(chǎn)場景,追求的是可用性,是克制和效率;C端產(chǎn)品面向普通大眾的各種生活場景,因此關注體驗的愉悅感受。兩者往往在風格調性上差異化很大。
但是,對于設計決策來說,無論C端、B端還是G端,都屬于設計項目,都要進行理性的需求分析和策略制定,即使某些產(chǎn)品類型最終選擇了偏感性的或情感化的表達手法,也是
基于理性決策后的一種選擇
,是實現(xiàn)目標的一種手段。
所以我想說的是,理性和感性兩者既不是對立關系,也不是并列關系,而是先后關系或嵌套關系:
理性是設計的基礎和第一步,感性則是在理性之上的選擇和展開
。
 
最后的話
作為設計師,對于設計中的理性與感性之問,不應停留在非此即彼或既要也要的簡單認知里,任何深入的思考都是有意義的。在這個存在分歧的問題上,希望我的觀點可以為你提供一點點啟發(fā),也希望各位設計師既能夠通過理性的分析制定出有效的設計策略,又能夠通過感性的表達手法創(chuàng)造出動人的設計作品,不斷提升自身的設計價值,與產(chǎn)品實現(xiàn)共贏


作者:設計來電
鏈接:https://www.zcool.com.cn/article/ZMTYyNjY2MA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

動效讓這些設計更驚艷

天宇 交互設計及用戶體驗

微動效在產(chǎn)品設計中的運用已經(jīng)非常普及了,無論是在圖標還是界面場景中,都運用得很普遍。通過動效的輔助不僅可以提升設計情感化,也能解決更為復雜的交互場景,讓設計更驚艷。
 
最近在體驗一些產(chǎn)品的過程中,黑馬哥也發(fā)現(xiàn)了幾個借助動效表達的設計方案,效果十分的驚艷,分享出來和大家一起學習一下。
動效讓這些設計更驚艷
 
 
 
 
目錄
一、3D 動效呈現(xiàn)會員等級
二、情感化 IP 提升搜索關注度
三、結合場景的情感化動效
四、3D 空間感的 Banner 設計
五、通過動效引導用戶操作
六、微動效引導 VIP 續(xù)費
七、動態(tài)還原實時天氣
八、動態(tài) IP 引導按鈕設計
九、微動效賦予品牌活力
 
 
 
一、3D 動效呈現(xiàn)會員等級
會員中心通常會通過 3D 圖標來助力會員等級設計,除了靜態(tài)的表達也會通過動效和新穎的交互形式呈現(xiàn),以此提高會員中心的視覺表現(xiàn)力。
 
最近在體驗騰訊視頻 APP 時,會員專區(qū)在表現(xiàn)用戶會員等級的設計中,沒有使用傳統(tǒng)的徽章形式,而是以 3D 數(shù)字結合動效的形式表達。3D 動效的設計使得會員等級區(qū)別于常規(guī)形式,更有吸引力。 
動效讓這些設計更驚艷
 
 
 
 
二、情感化 IP 提升搜索關注度
IP 形象是成就品牌的關鍵因素之一,被廣泛運用到產(chǎn)品感官體驗的設計中,帶來的情感化共勉也是顯而易見的。
 
在使用悟空瀏覽器 APP 時,啟動產(chǎn)品進入首頁后搜索框上方出現(xiàn)悟空的 IP 形象,悟空呈現(xiàn)出左右環(huán)顧、上下打量,最后看向搜索框的系列動作等表現(xiàn)。不僅提高了搜索功能的關注度,也使得產(chǎn)品設計更具情感化。
動效讓這些設計更驚艷
 
 
 
 
三、結合場景的情感化動效
根據(jù)不同的業(yè)務場景進行設計表達,可以更好的服務目標用戶,而情感化的設計提升,可以拉近產(chǎn)品與用戶之間的親和力。
 
為了降低用戶等餐過程中出現(xiàn)的負面情緒,餓了么 APP 下單之后在詳情頁中根據(jù)點餐的不同設計了情感化的動效表達。無論是快餐還是冷飲等,都針對性地設計了微動效的元素,以此來表現(xiàn)當前狀態(tài)。
動效讓這些設計更驚艷
 
 
動效讓這些設計更驚艷
 
 
 
 
四、3D 空間感的 Banner 設計
通過突出設計、交互、布局結構等的創(chuàng)意性,可以使得 Banner 具備更強的差異化,以此來突出 Banner 的存在感。
 
騰訊視頻 APP 首頁的 Banner 布局也會經(jīng)常呈現(xiàn)出一些很有創(chuàng)意的方案,比如之前體驗到一個結合 3D 空間感營造的設計案例,就非常有吸引力。通過動態(tài)過度到立體空間,再恢復到默認形式,這個動態(tài)的過程演變就能讓用戶過目不忘。
動效讓這些設計更驚艷
 
 
 
 
五、通過動效引導用戶操作
針對一些使用頻次不高或者過于隱藏的功能,為了提高用戶的操作概率,會通過一些特殊的設計表達來提升用戶的關注度,引導用戶進行相關操作。
 
比如麥當勞 APP 首頁中,為了吸引用戶下拉進入二層樓,通過動效的形式設計了一個搖擺的鈴鐺,以此來吸引用戶的注意力。用戶看到像是隨風飄動的鈴鐺,就會忍不住去拉動,這就達到了引導用戶操作的目的,提高了二層樓內容的曝光度。
動效讓這些設計更驚艷
 
 
 
 
六、微動效引導 VIP 續(xù)費
針對一些無法通過占比面積進行突出的元素,運用微動效的形式設計是常見的設計手法。
 
網(wǎng)易云音樂 APP “我的”板塊中,為了突出 VIP 續(xù)費按鈕,黑膠唱片以動效的形式在按鈕中來回滾動,以此強化續(xù)費按鈕的關注度。
動效讓這些設計更驚艷
 
 
 
 
七、動態(tài)還原實時天氣
天氣類產(chǎn)品從簡單的靜態(tài)預告升級為動態(tài)實時還原,可以讓用戶更加直觀的判斷天氣變化,也能提高界面設計的感官體驗。
 
比如 iPhone 自帶的天氣 APP,以動態(tài)還原實時天氣作為界面背景,不僅便于用戶識別天氣,也使得產(chǎn)品設計更具情感化體驗。
動效讓這些設計更驚艷
 
 
 
 
八、動態(tài) IP 引導按鈕設計
按鈕設計樣式可以發(fā)揮的空間很大,除了在造型、配色、空間感等方面突出設計以外,也能通過按鈕微動效或者動態(tài)引導等形式強化。
 
比如智行火車票 APP “搶票”板塊中,為了突出“添加搶票”按鈕的存在感,以動效 IP 引導進行設計。不僅使得按鈕更突出,設計感也顯得俏皮可愛,凸顯親和力。
動效讓這些設計更驚艷
 
 
 
 
九、微動效賦予品牌活力
立足于品牌做設計是突出產(chǎn)品差異化的關鍵,這也是產(chǎn)品設計未來的演變趨勢之一,如何提高品牌的曝光度和記憶度,成為設計師不斷探索的方向。
 
最近在使用夸克 APP 時,微動效賦予品牌 LOGO 的活力感讓人印象深刻。在眾多特殊節(jié)慶等時間段,夸克也會以動效的形式賦予品牌更多變化,不僅使得產(chǎn)品更具年輕化屬性,也能更好的傳遞品牌基因。
動效讓這些設計更驚艷
 
 
動效讓這些設計更驚艷
 
 
 
 
小結
動效使得產(chǎn)品具備更多的變化,也能輔助解決更多復雜功能的交互場景,探索動效的場景運用可以提升設計靈感,希望本期的分享可以帶給大家更多設計靈感。本文描述屬于個人體驗總結,不足之處我們努力改進。
 
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉載。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYzOTIyOA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。
 

7大色彩技巧讓你界面更吸睛

天宇 B端ui設計文章及欣賞

色彩在我們日常設計中起著定生死的作用,它是設計的靈魂,舒適的色彩搭配可以讓設計師一遍定稿,感覺在自己的設計生涯中,大部分都是在與色彩的博弈中度過的,雖然客戶可能不懂色彩原理,可是客戶天生都是色彩的感受家,什么樣的色彩搭配美,通常他們瞄一眼就會有定論,不用你去辯解太多,不好的搭配,縱使有千萬種理由,也說服不了客戶,所以好好研究色彩以及每一種色彩傳遞的情感對我們做好設計至關重要。
 
7大色彩技巧讓你界面更吸睛
 
 
 
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見模型
四、 色彩的語意及它的應用
五、 不同場景下的色彩應用
六、 色彩在B端設計中的作用
七、 B端色彩設計使用的原則
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
一、色彩的定義?
1、物理學角度
色彩是光的屬性,當光波通過物體時,物體會吸收某些波長的光,而反射或透射其他波長的光,這些被反射或透射的光波長度決定了我們看到的顏色。
 
2、心理學角度
色彩是人腦對光波長的視覺感知,不同的波長刺激視網(wǎng)膜上不同類型的感光細胞,進而產(chǎn)生不同的色彩感覺。
 
3、 藝術學角度
色彩是藝術創(chuàng)作的重要元素,它不僅關乎視覺感受,還與情感、文化、象征意義相關聯(lián)。
 
4、 設計學角度
在設計領域,色彩是傳達信息、影響情緒和創(chuàng)造美感的關鍵工具。
 
5、 計算機科學角度
在數(shù)字圖像處理中,色彩通常通過顏色模型(如RGB、CMYK等)來定義,這些模型通過不同比例的原色或色料混合來表示各種顏色。
 
 
 
二、色彩的三屬性
1、色相
色相是指不同顏色之間的差別,即不同顏色的表象和名稱,每個顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍、紫等。不同的色別都可用光譜中的波長來表示,人的眼睛可分辨出的色別有180種左右。
7大色彩技巧讓你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光更明亮,而紅色光則比青色光要明亮。
同時,同一色相在受光強弱或者物體對光的吸收、反射性能不同的情況下,會呈現(xiàn)不同的明暗變化和差異。
7大色彩技巧讓你界面更吸睛
 
 
  
 
3、飽和度(純度)
飽和度(純度)是指同一色別的純凈度和鮮明度的變化。從色光的角度而言,光的波長單一程度越高,飽和度就會越高;不同色別所達到的飽和度不同,一般情況下,紅色的純度可達到最高,綠色的則相對較低;同一色相深淺不同的顏色有不同的飽和度;黑白色光的滲入會導致飽和度和明度發(fā)生變化;通常,照明光線的性質、物體表面結構對光線吸收與反射的性能等因素影響飽和度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
三、色彩的三種常見模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即顏色的種類;S代表飽和度,即顏色的純度;B(V)代表亮度,即顏色的明亮程度。
 
這種色彩模型是我日常在的設計工作中用的最多的一種色彩模型,如果在同色系中如果只想讓他們有細微的變化,我通常會通過調節(jié)S和B的百分比數(shù)值來達到自己想要的目的。
7大色彩技巧讓你界面更吸睛
 
 
以上就是我在設計項目中,運用該色彩模型做的一個實戰(zhàn),項目中用到了一個圖形,需要用同色系來表達,我保持了H色值的不變,讓S值和B值都發(fā)生著微妙的不同,于是就產(chǎn)生了四五種同色系的綠色,該色彩模型特別的好使,也鼓勵大家多在實戰(zhàn)中運用這樣的色彩模型,簡單實用。
 
H色相:Hue,以角度(0°-360°)表示
S飽和度:Saturation,以百分比值(0%-100%)表示
B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示
 
 
 
 
2、RGB模型
RGB是從顏色發(fā)光的原理來設計定的,通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈,當它們的光相互疊合的時候,色彩相混,而亮度卻等于三者亮度之總和,越混合亮度越高,即加法混合。
 
紅、綠、藍三個顏色通道每種色各分為256階亮度,在0時“燈”最弱——是關掉的,而在255時“燈”最亮。當三色灰度數(shù)值相同時,產(chǎn)生不同灰度值的灰色調,即三色灰度都為0時,是最暗的黑色調;三色灰度都為255時,是最亮的白色調。
7大色彩技巧讓你界面更吸睛
 
 
R紅:Red,以數(shù)值(0-255)表示
G綠:Green,以數(shù)值(0-255)表示
B藍:Blue,以數(shù)值(0-255)表示
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、CMYK模型
雖然RGB模型色彩更加的豐富,但是很多顏色不能完全打印出來,于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑,通過顏料反射和吸收光線來顯色。
 
記得之前自己從事平面工作的時候,就經(jīng)常要用到CMYK模式,因為印出來的效果偏差是最小的,是最靠近設計效果圖的。
7大色彩技巧讓你界面更吸睛
 
 
通過對比,我們發(fā)現(xiàn)RGB色彩模型顏色顯示上確實更加的絢麗豐富些,而CMYK的色彩模型顏色顯示上就黯淡了不少,但是要印刷的話,就必須轉化為成CMYK的色彩模式。
 
R青:Cyan,以百分比值(0%-100%)表示
M品紅:Magenta,以百分比值(0%-100%)表示
Y黃:Yellow,以百分比值(0%-100%)表示
B黑:Black,以百分比值(0%-100%)表示
 
 
 
 
四、色彩的語意及應用
1、紅色的語意及應用
紅色代表熱情、活力、強烈的情感和愛。它可以象征著激情、勇氣和行動力,也常與興奮、熱烈的情緒相關。
著名的快餐品牌肯德基,在自己的網(wǎng)頁及店鋪裝修中都運用了紅色,因為紅色是所有顏色中最容易引起人們注意的顏色,也是很容易刺激人們食欲和購買的顏色。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、橙色的語意及應用
橙色傳達溫暖、歡快和積極向上的情感;它常與樂觀、友好、創(chuàng)造力聯(lián)系在一起,給人以活力充沛和充滿希望的感覺。
百度網(wǎng)盤的這個登錄界面就運用了橙色,給人陽光、向上、熱情的感覺,通過色彩的運用一下讓界面有了溫度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、黃色的語意及應用
黃色象征快樂、開朗和樂觀;它能帶來明亮、愉悅的情緒,代表著陽光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件,整個色調采用的是非常有活力的黃色,這與兒童處于好奇與活力的階段相符合,這種高亮的黃色,飽和度和明度都非常的高,特別容易抓住兒童的目光,同時它是一種快樂的顏色,也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色,特別符合兒童成長的需求。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、綠色的語意及應用
綠色代表平靜、和諧與生機。綠色常與大自然相關,給人帶來安寧、放松的感覺,也象征著成長、希望和新生。
青椒云的目標用戶是吸引年輕用戶和創(chuàng)意工作者,綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關注,同時綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、青色的語意及應用
青色寓意清新、寧靜和沉穩(wěn),它給人一種冷靜、理智的印象,同時也帶有一絲清新的活力。
青色是一種帶有藍色和綠色的顏色,因此青色既有藍色的專業(yè)感、信任感,也有綠色的生機感、希望感。
以下是日本某牙醫(yī)品牌的官網(wǎng)首頁,病人希望在這里帶來健康與復蘇,也希望獲得專業(yè)、可靠的治療,而青色就成了很好傳遞這種情感的品牌色。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
6、藍色的語意及應用
藍色代表冷靜、忠誠和信任;它常與沉穩(wěn)、深邃的情感相關,能帶來寧靜、平和的心境,也象征著智慧和理性。
123云盤使用了藍色,藍色符合社會的普遍審美認知,接受度比較高;其次,藍色給人安全的感覺,也符合云盤的初衷,給用戶安全的存儲服務。
7大色彩技巧讓你界面更吸睛
 
 
 
 
7、紫色的語意及應用
紫色象征神秘、高貴和浪漫;它常給人一種優(yōu)雅、奢華的感覺,同時也帶有神秘莫測的氛圍,與夢幻、創(chuàng)造力等情感相關。
美柚的主要用戶是女性,紫色在色彩心理學中常被認為具有優(yōu)雅、神秘、浪漫的特質,這些特質與女性的審美和情感需求相契合,能夠吸引女性的關注。
7大色彩技巧讓你界面更吸睛
 
 
 
 
8、白色的語意及應用
 
白色代表著純潔、神圣、信任、安靜、樸素和雅致,是一種充滿純潔的顏色,它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面,顏色用了大量的白與灰,簡潔又不失大氣,傳遞出了一種質樸、雅致的感覺。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
五、不同場景下的色彩應用
 
1、商場的色彩為什么總是多彩熱烈的?
 
? 吸引顧客注意力
在眾多商業(yè)場所中脫穎而出,色彩鮮艷的商場外觀和內部裝飾更容易在人們的視線中凸顯出來,吸引過往行人的目光,激發(fā)他們的好奇心和探索欲。
 
確實多彩的顏色更加容易引起我的關注,這不看到商場的美圖,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧讓你界面更吸睛
 
 
 
? 增強可見性
即使在較遠的距離或在繁忙的街道上,多彩熱烈的配色也能讓商場更容易被發(fā)現(xiàn),提高商場的知名度和曝光度。
多彩的配色,讓我遠遠的就被商場美輪美奐的插畫吸引,大大增加了商場的可見性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
營造愉悅氛圍
色彩可以激發(fā)積極情緒,明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關聯(lián)。當顧客進入一個色彩豐富的商場時,會感受到一種愉悅和輕松的氛圍,從而更愿意在商場中停留和購物。
星沙永旺城的美陳設計很好,墻面采用極具誘惑力的顏色與美食,把小小實物十倍放大,增加了視覺看點,讓人忍不住過去拍照曬一下,大大增加了愉悅性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
緩解壓力
在現(xiàn)代生活中,人們常常面臨各種壓力。走進一個多彩熱烈的商場,可以暫時擺脫日常的煩惱和壓力,享受購物的樂趣。
特別可愛夸張的插圖設計,引發(fā)了絲絲童趣和歡樂,讓人短暫忘記壓力,遠離煩惱。
7大色彩技巧讓你界面更吸睛
 
 
 
?
引導消費行為
商場通常會使用不同的顏色來區(qū)分不同的區(qū)域,如購物區(qū)、餐飲區(qū)、娛樂區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域,提高購物效率。
突出重點商品,對于一些重點推薦的商品或促銷活動,商場可以使用鮮艷的色彩來突出展示,吸引顧客的注意力,引導他們進行購買。
7大色彩技巧讓你界面更吸睛
 
 
 
?
塑造品牌形象
6.1 傳達個性和風格
不同的商場可能有不同的品牌定位和目標客戶群體。通過選擇特定的色彩組合,商場可以傳達出自己的個性和風格,吸引與之相符的顧客。
 
6.2 增強品牌記憶度
獨特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象,提高品牌的記憶度和辨識度。
 
芙蓉區(qū)的龍湖天街主要面向中等收入新興家庭,是一個區(qū)域型的購物中心,集購物、餐飲、休閑、娛樂等多業(yè)態(tài)于一體,為消費者提供一站式商業(yè)綜合體,它在餐飲區(qū)采用了大量的吃喝玩樂的插畫,來引導用戶消費。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、為什么藍色在B端設計中廣泛應用?
? 視覺特性方面
1.1 穩(wěn)定性
藍色給人一種沉穩(wěn)、可靠的感覺。在B端產(chǎn)品中,用戶往往需要處理重要的業(yè)務數(shù)據(jù)和進行復雜的操作,藍色的穩(wěn)定性可以讓用戶感到安心,增強對產(chǎn)品的信任感。
7大色彩技巧讓你界面更吸睛
 
 
 
1.2 專業(yè)性
藍色通常與科技、專業(yè)領域相關聯(lián)。B端產(chǎn)品通常面向企業(yè)用戶,需要傳達出專業(yè)、高效的形象,藍色正好符合這一需求。
 
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色,藍色較為柔和,不容易引起用戶焦慮和緊張的情緒;在B端使用場景中,用戶可能需要長時間使用產(chǎn)品,藍色的舒緩效果有助于提高用戶的使用體驗。
 
2.2 提高專注度
藍色具有一定的沉靜作用,能夠幫助用戶集中注意力,專注于工作任務。對于B端用戶來說,高效完成工作是首要目標,藍色的這一特性有助于提高工作效率。
 
B端產(chǎn)品在心理上追求的是類似如下圖的這種寧靜式的體驗,跟教育有著異曲同工之處,就像這個易貝樂少兒英語一樣,用大面積的藍色,希望孩子在這里能很快的安靜下來學習、專注自己的事情。
7大色彩技巧讓你界面更吸睛
 
 
 
? 行業(yè)習慣方面
3.1 科技行業(yè)引領
許多知名的科技企業(yè)和軟件產(chǎn)品在 B 端市場中廣泛使用藍色,逐漸形成了一種行業(yè)習慣。其他企業(yè)在設計B端產(chǎn)品時,也會傾向于選擇藍色以符合用戶的認知和期望。
 
3.2 傳統(tǒng)與延續(xù)
在過去的設計中,藍色在 B 端領域的成功應用使得它成為了一種傳統(tǒng)選擇。設計師們在延續(xù)這一傳統(tǒng)的同時,也不斷優(yōu)化和創(chuàng)新藍色的運用方式,使其更符合現(xiàn)代設計趨勢和用戶需求。
 
嘉為科技是一個有著20多年技術沉淀的科技公司,它的官網(wǎng)和產(chǎn)品風格一直是沿用著科技藍的風格,應該也是基于傳統(tǒng)的沉淀吧。
7大色彩技巧讓你界面更吸睛
 
 
 
?藍色可以提高產(chǎn)品的復用率
很多用戶都能接受藍色的B端界面,當面對有差不多需求客戶時,同一套UI,可以多次復用,可以減少開發(fā)成本和設計成本,這也是自己通過長期實戰(zhàn)觀察發(fā)現(xiàn)的。
 
一個UI風格,用在了兩個項目中,不同的用戶,趨向同樣的風格,說明藍色在大家心目中的接受度是非常的高,用藍色可以促進設計的多次復用。
7大色彩技巧讓你界面更吸睛
 
 
在日常的項目中,我看到的B端UI界面是千篇一律的穩(wěn)重,不追求過于刺激的顏色搭配,通常都比較的干凈簡潔,不像商場里面的美陳背景設計,色彩對比非常的強烈,比較的吸引人眼球。
 
有一次我厭煩了常規(guī)的穩(wěn)重風,探索一種大膽的色彩風格時,雖然風格比較新穎,可是發(fā)出去客戶的接受度不高,覺得太不穩(wěn)重了,然后重新按照以往習慣進行設計時,就很好,客戶一致認同。
 
可見每個領域都有自己的色彩運用習慣,商場需要吸引人眼球、刺激消費,越大膽越好,可是B端設計需要提供一個讓人平靜去處理工作事項的環(huán)境,它需要安靜,不需要過于刺激的顏色搭配。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
六、色彩在B端設計中的作用?
1、通過色彩向用戶反饋操作結果及當前狀況
比方在日常設計當中,紅色代表流程失敗,綠色代表流程成功,橙色代表信息有告警,藍色代表著鏈接,同時不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài),在反饋結果和狀況方面,色彩起著非常重要的作用。
 
下面這個IDC運營的監(jiān)測平臺,它就是通過顏色來區(qū)分不同的告警級別的,可見顏色在B端產(chǎn)品中的重要性。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、可以很好的進行品牌傳達
B端設計中大面積使用品牌色,可以強化品牌形象,使用與品牌標志風格相近的色彩,可以幫助用戶快速識別和記住品牌,在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案,有助于建立品牌的連貫性和一致性,增強用戶對品牌的信任。
 
例如我給湖南高速設計的一套B端界面設計,用戶強烈要求改變傳統(tǒng)的藍色風格,要求整套界面設計要用湖南高速品牌色-綠色,說明在追求大流和品牌色之間,客戶更加傾向品牌的傳達。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、顏色可以很好的進行信息區(qū)分
在B端界面設計中,顏色在幫助信息區(qū)分起著非常重要的作用,通常可以通過不同的色彩來區(qū)分功能區(qū)域,可以讓用戶更清晰地了解界面的結構和布局,例如,導航欄使用一種特定的顏色,而內容區(qū)域則使用另一種顏色。
 
我設計的天翼寫作,就是這樣的設計思路,導航欄和內容區(qū)的顏色完全不一樣,這里顏色起到了很好的區(qū)分作用。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、舒適的色彩搭配可以提升用戶體驗
選擇合適的色彩對比度可以增強文本的可讀性,減少用戶的視覺疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。
 
選擇適當?shù)纳士梢誀I造出專業(yè)、高效、舒適的工作氛圍,從而影響用戶的情緒和感受,提高用戶的使用體驗。
 
我參與的這個后臺界面,就是通過合理的色彩搭配來引導用戶使用的,當用戶已經(jīng)完成的環(huán)節(jié)都是用綠色表示,沒有走完的流程就會是灰色的,寓意指示非常的鮮明,很好的解決了用戶不知道清晰進程的卡點,提升了用戶體驗。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、色彩可以傳遞性格
人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的,其實色彩也是有性格的,不同的色彩也有不同的性格,當我們對色彩的性格有足夠多的了解,在面對不同的客戶時,我們對色彩的拿捏以及設計需求的把握時,會更加的游刃有余。
7大色彩技巧讓你界面更吸睛
 
 
 
我們平常確實是在做設計,但是我們更多的是在與人打交道,我們更好的聆聽,會幫助我們更快的抓取到客戶的喜好,快速做出滿足客戶需求的設計,少受加班之苦。
比方說我之前給云門戶設計的一套UI,客戶的決策層是男性,且年齡偏大,他們就偏愛深沉的UI風格;而我負責的天翼云電腦專家,客戶的決策層是女性,且年齡偏年輕,她每次就喜歡輕盈、明快的UI色調,不同的決策層客戶,就會帶來不同的設計結果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
七、B端色彩設計使用的原則
1、B端設計中,色彩設計應遵循6:3:1原則
在這個登錄頁面中,我就是運用的6:3:1原則,60%的主色,30%的次要色,10%的點綴色;使用了大面積的藍色和藍灰色,最后使用一點點的橙色,這樣的配色會顯得高級。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、文字、卡片背景色和邊框都使用無彩色
為了保證畫面風格的統(tǒng)一、干凈整潔,文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色,通常通過顏色的深淺來區(qū)分信息的層級關系。
 
比方說我參與的星辰大模型AI文檔生成能力的應用,里面無論文字顏色還是底色都是運用的無彩色,只是通過了色彩深淺變化來做了層級區(qū)分,因為無彩色可以起到很好的降噪作用,既傳達了信息,又不會顯得界面凌亂復雜。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、需要凸顯的內容,用明度和純度比較高的色彩
比方說,日常我們設計的卡片都是用的白色,而底色我們用的是灰色,因為卡片里面的內容都是比較重要的信息,需要用一個亮度比較的高的顏色,讓內容往前走,而灰色的背景通常就往后走的感覺,這樣能跟卡片形成一個一前一后的對比,更好的幫助內容進行傳播。
 
比方說我設計的這個IT運維監(jiān)控平臺的首頁,物理主機、網(wǎng)絡及安全設備、工單、在途工單這幾個指標是非常關鍵的,所以他們的圖片底色用了純度比較高的有彩色來標識。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、設計前一定要有定色調的意識
作為設計師,我們的設計工作其實就是在設計一種感覺,一種情緒,設計前定調的意識真的太重要了,感覺對了,什么都就對了。
 
比方說我前段時間接到了一個B端的大屏可視化需求設計,客戶說之前的大屏設計不喜歡,希望重新出一個新的設計,然后公司的需求對接人員在給我下達需求時,真的就只是給我下達了這幾個字,讓我重新出一個設計試試。
 
以我的職業(yè)直覺,感覺這個需求是不夠細化的,于是我就多問了幾句,我問客戶是想要常規(guī)的藍色調的還是別的?果然一問,客戶說不希望再用常規(guī)的藍色的,希望新的設計要用他們的品牌色綠色,剛聽到這幾個字的時候,我以為這次我把握住需求了,在收集參考圖的時候,我發(fā)現(xiàn)常見的綠色大屏有深色的和淺色的,根據(jù)自己以往的作圖習慣,我覺得深色會更加的受歡迎一些,我自以為是的朝著深色的方向去出圖,出到了一半的時候,我內心有些許的忐忑,我于是找了一深一淺的參考圖,讓同事跟客戶確認一下,客戶是想要深色的感覺,還是要淺色的感覺,這次溝通又給了我深深的一擊,客戶不按常理出牌,說希望按淺色的風格來出圖。
 
在出稿之前,通過自己反復的溝通確認,發(fā)現(xiàn)設計前的定調意識真的太重要了,要不是有出圖前一波三折的反復確認以及需求的細化,就不會有后來的一遍過稿。
7大色彩技巧讓你界面更吸睛
 
 
 
5.設計的灰色盡量使用帶有色彩偏向的灰
不管我們設計什么色系的界面,都避不開用到灰色,在設計中用跟主視覺相符的灰,會使得界面更加的高級、協(xié)調與美觀,注意好了這個小細節(jié),會給我們的設計加分不少。
 
下面是我日常體驗到的兩個界面,上面綜合管理平臺里面的灰色就沒有跟主色調藍色相呼應,灰色沒有向藍色傾斜,界面看起來就沒那么美觀;下面通義千問的灰色設計就非常的注重細節(jié),灰色偏紫,整個界面看起來渾然天成,毫無違和,美感、檔次瞬間提升好幾個等級。
 
一個微小細節(jié)的在意,在無形中拉高了設計的高度,十個細節(jié)乃至更多細節(jié)的在意,就會帶來更多意想不到的結果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
總結:
以上就是我最近對色彩的一些頓悟、感受和學習收獲,在不斷的復盤總結中,我們總會收獲一些新的認知,通過這次色彩的復盤之旅,發(fā)現(xiàn)色彩對設計師真的太重要了,希望我的分享對大家有啟發(fā),不足之處也歡迎大家留言交流。


作者:姝斐suphie
鏈接:https://www.zcool.com.cn/article/ZMTYzOTMwMA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

以用戶為中心的交互設計思維

天宇 交互設計及用戶體驗

 
聊聊關于設計思維的內容,會從產(chǎn)品設計、體驗設計、交互設計三個方面入手。
目前是第三篇,關于交互設計思維的內容。到這里設計思維的內容全部結束了。
感謝
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維


作者:DesignLink
鏈接:https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。
 

設計的意義

藍藍設計的小編 設計思維

保羅·蘭德說:“設計是一種行為,是想象力馳騁的過程和產(chǎn)物。”

作為設計師,設計是我們的專業(yè),也是我們用來解決商業(yè)問題的工具。

我們過去也許都曾思考過類似設計的價值、意義或是本質之類的問題。思考這類問題在某種意義上或許都是為了當我們遇到困難、沖突、低谷或是不確定性的時候給自己找一些能夠堅持下去的理由。

設計師在從業(yè)的不同階段,對設計的理解不同。從追求工具技能到表現(xiàn)力、方法論、風格到影響行業(yè)甚至社會審美意識等等。不斷的錘煉之后,對設計意義也會有不同理解。

我們奉為的大師,都擅長用自己的知識架構定義對設計的理解。

保羅·蘭德就是一位我們公認的設計大師、藝術家。他是當今美國乃至世界上最杰出的圖形設計師、思想家及設計教育家之一。他最出名的企業(yè)標志設計,包括IBM,UPS,ABC標志以及為史蒂夫·喬布斯設計NeXT.那段經(jīng)典橋段。

去研究這些前輩們如何看待設計、理解設計以及如何與設計相處一生,是另一種設計哲學的思辨。

保羅·蘭德說:

“設計是一種行為,是想象力馳騁的過程和產(chǎn)物。”

設計表現(xiàn)可能看似是簡單的組裝、排序或是美化的過程,但設計的過程也是賦予信息意義的過程。不斷的簡化、厘清、修飾甚至可能去說服、去取悅過后,設計就是把散文變成詩歌的過程。

設計師是孤獨的,大部分時候他們是一個人在戰(zhàn)斗。

設計是個人行為,即便在設計成熟度較高的國家、企業(yè)或是大型團隊,設計師仍需在一線才能真正掌控在這場戰(zhàn)斗中可能遇到的極其細節(jié)的變化和給人傳達的感受。

設計需要沖突來加深傳達的“戲劇性”。但設計過程也面臨種種沖突。這是設計的商業(yè)價值與藝術價值平衡的過程。正是因為這種關心很難平衡,才會出現(xiàn)雇主與設計師之間的沖突。

企業(yè)的目標是達到商業(yè)、經(jīng)濟、政治甚至社會性目的。對設計師而言,設計是一種創(chuàng)造和實驗行為。通過這種行為來平衡之前的目標。

設計品質最終決定設計師與核心決策者之間的關系。關心越是緊密,設計的產(chǎn)出就越有可能出彩。這其實并不難理解,對設計完成度有高追求的企業(yè),CEO也大多都跟設計團隊或是設計咨詢公司有較為緊密的往來。就比如蘋果的喬布斯與喬納森是我們都公認的CEO與設計師高緊密度關系的典范。

當今社會,市面上依然存在太多糟糕的設計。

一來,核心的決策者對設計專業(yè)的理解度不夠。

二來,很多決策依賴于市場調研,既得利益的權重大于長遠利益。

再就是我們回避不開的話題,設計師在某種意義上話語權不夠。

抉擇者很多時候不了解或是存在對某類元素特定的喜好偏見,他們有評價權,但卻缺乏對設計專業(yè)知識的儲備。所以就會普遍出現(xiàn)外行指導內行的情況。過往(現(xiàn)在好一些),他們將設計師看做一套繪圖工具,一個合作供應商而不是一個業(yè)務團隊里重要的組成部門。

體系完整的企業(yè)可能會引入市場調研團隊,調研團隊為營銷提供定位信息,設計師來解讀和演繹那些信息。如果調研團隊能理解設計師的工作過程與其產(chǎn)生共鳴,就有可能促成正確決策甚至產(chǎn)生驚喜的創(chuàng)意作品。

但很多時候,我們聽到了太多這樣的回復:

 

我喜歡它;

我不喜歡它;

它太簡單了;

它太復雜了;

它讓我想起某某...

常常一句“我不喜歡”就可以終結任何設計作品。就像當初一位IBM的主管第一次看到這個條紋logo時嘲弄到說“這東西讓我想起格魯吉亞的鎖鏈囚犯”。

每個人所能感知的信息都不盡相同。

有人既看不到logo的意義,也看不到它的功能。也正因為過于用喜好而不是專業(yè)去評判,才讓糟糕的設計一直留存于我們的世界。而大眾對糟糕的設計要比對好設計更加熟悉,于是大家習慣于選擇不好的設計,因為和他們朝夕相處。

新事物讓人感受到威脅,而舊事物讓人安心。

要判斷一個設計的內在價值,決定性因素不是使用期,而是它所設定的“品質預期”。這是設計師的價值,也是設計師該練就的“知覺”。

何為知覺?

我們可以把知覺暫定為“瞬間的洞悉”。設計師在做設計決策的時候大部分都是依賴過往的知識儲備以及慣性技能。不斷的嘗試,都是通過瞬間對各方向的可能性判斷。

本能、預感、沖動、洞悉之后的綜合“洞悉”,這就是知覺。

說到logo,我們常把logo當成品牌價值傳遞的重要符號。

它是一面旗幟、一個簽名、一個路標。大部分時候,雇主期待logo能描述一個行業(yè),但歷史上最成功的logo都沒能做到。蘋果、勞斯萊斯、可口可樂、或是IBM等等...不可否認的是它們都是歷史上最成功的logo,但它們卻無法做到能傳遞它們的行業(yè)屬性。因為logo遠不如它所代表的產(chǎn)品重要,它所代表的比它看起來的樣子更重要。


因為只有l(wèi)ogo與它所屬的公司、產(chǎn)品、服務聯(lián)系起來時,它才具備真正的意義。一流的產(chǎn)品和公司的logo傳遞出一流的形象。反之一個公司如果是二流的,那么它的logo最終也會被歸為二流。

 

 

logo首先要告訴人們“是誰”,而不是“是什么”。這才是它最基礎且最重要的功能。它所扮演的角色就是“指示”。“簡潔”是達成指示的手段。所以設計過程中的特點、好記以及清楚都是需要設計師在打磨細節(jié)前首先要做好的決策。一個復雜、挑剔、模糊的設計潛藏著自我毀滅性的風險。

 

“好的設計帶來好的生意”。但不可否認,即使不好的設計,也可能帶來好的生意(比如下圖)。如果這樣,還需要好的設計么?

好的設計可以增添額外的附加價值,很多時候,也許光看著它就能給人們帶來快樂。它們更尊重感官,并通過這種友好的感官體驗,給企業(yè)帶來回報。人們更容易記得精美而不是一團糟的形象。它折射出一個考慮周全,目標明確的企業(yè),反映了它的產(chǎn)品或者服務的品質。所以,這個世界需要好的設計,設計師要做的就是用設計向世界傳遞一些更有價值的觀點。這是設計師的工作,也是設計該有的意義。

「大寶推薦閱讀書單之《設計的意義》」



作者:大寶頻道
鏈接:https://www.zcool.com.cn/article/ZMTQ3ODQzMg==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

 

優(yōu)秀的設計就是帶給用戶驚喜!

藍藍設計的小編 設計思維

優(yōu)秀的產(chǎn)品設計是能帶給用戶驚喜的,在不經(jīng)意間讓用戶感受到溫度,也是提升用戶體驗的關鍵。
 
隨著行業(yè)的進步,產(chǎn)品設計師也在不斷優(yōu)化體驗,輸出一個一個優(yōu)秀的解決方案。近期黑馬哥也發(fā)現(xiàn)了一些比較驚喜的設計,來和大家一起欣賞一下吧!
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
體驗目錄
一、降落傘帶來的營銷廣告
二、動效反饋商家備餐過程
三、這個廣告驚不驚喜意不意外
四、Banner 廣告的視覺沉浸感
五、待機狀態(tài)下的實時動態(tài)
六、小圖標里的細節(jié)反思
七、輪播式的懸浮設計
八、氛圍熱烈的底部標簽欄
九、收縮式交互設計
十、形象化的進度設計
 
 
一、降落傘帶來的營銷廣告
在這個廣告滿天飛的年代,用戶已經(jīng)逐步開啟廣告免疫模式,如何提高用戶對廣告的關注度至關重要。
 
近期在體驗餓了么時,等待送餐界面中空降一個降落傘,從左上角飄到右側懸浮,彈出紅包懸浮廣告。降落傘飄浮的動態(tài)過程吸引了用戶的關注度,進而提高了營銷廣告的點擊率,雖然廣告大家都比較反感,但是一個伴隨著驚喜的廣告也會讓你放下戒備心理。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
二、動效反饋商家備餐過程
提升等待過程對于用戶體驗來說尤為重要,降低用戶等待過程中的焦慮感,才能讓用戶愿意為此停留。
 
通過餓了么點餐之后,商家需要一定的時間完成餐飲的制作,必然需要用戶等待一些時間。在這個備餐過程中,當前界面以一個翻炒動效表達,情感化的動效不僅提示用戶當前狀態(tài),也提升了設計表達的感官體驗。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
三、這個廣告驚不驚喜意不意外
意料之外的廣告是帶給你驚喜還是反感呢?平臺為了提高變現(xiàn)能力,各種層出不窮的廣告玩法也讓你猝不及防。
 
之前在體驗騰訊視頻 App 時,從閃屏廣告過度到 Banner 圖的過程中,經(jīng)歷了多個廣告新花樣。首先從閃屏切換到自動輪播的彈窗模式,再演變到放大版的多個廣告切片(占 Banner 位呈現(xiàn)),最后再恢復到 Banner 的正常布局中。這個過程無疑是把廣告的存在感拉滿了,讓你對廣告的記憶形成硬性要求。
 
無論這個廣告設計方案是否讓用戶反感,但是這個呈現(xiàn)的互動方式還是比較新穎的,相信廣告的點擊率必然有所提升。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
四、Banner 廣告的視覺沉浸感
Banner 圖在產(chǎn)品中是非常普及的,各類形式的演變也層出不窮,產(chǎn)品設計師都在探索更多可能性。
 
在騰訊視頻 App 動漫欄目中,發(fā)現(xiàn)一例很有想法的 Banner 表現(xiàn)。Banner 上面新增了一個懸浮的火焰燃燒的動效,提升了整體的氛圍感,動效與 Banner 畫面完美貼合,視覺沉浸感十足。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
五、待機狀態(tài)下的實時動態(tài)
隨時讓用戶感受到你的存在,才能讓人感到安心,服務過程中狀態(tài)實時可見至關重要。
 
通過餓了么點餐之后,就算處于待機狀態(tài)時,只要點亮屏幕即可看到當前出餐狀態(tài)??梢暬膱D形結合時間提醒,讓狀態(tài)一目了然,使得點餐到用餐之間的過程更有用戶可控性。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
六、小圖標里的細節(jié)反思
產(chǎn)品中有很多輔助功能/信息等表達的圖標,既要能準確表達主題,也要讓用戶易于理解。
 
在汽車之家 App 發(fā)現(xiàn)了一個值得反思的圖標案例,在掃一掃的圖標中結合了汽車外形輪廓,不僅不會影響掃描的功能表達,也進一步表達了該功能的差異。和別的產(chǎn)品掃描功能不同,這個是對準汽車進行掃描,體現(xiàn)出了業(yè)務的差異化。一枚小小的圖標體現(xiàn)出了設計師的能力,用最簡單的方式表現(xiàn)自身產(chǎn)品的差異,以此提升用戶的操作體驗。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
七、輪播式的懸浮設計
懸浮設計非常普及,因為占比小和滑動頁面會隱藏,對用戶的干擾比較小。
 
最近在芒果 TV 首頁發(fā)現(xiàn)了懸浮窗口的輪播式表達,芒果卡和活動中心會自動輪播顯示(也能手動切換)。讓我們對懸浮窗口的設計又多了一種設計理解,可以呈現(xiàn)更多不同內容的表達,提升了窗口的利用率。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
八、氛圍熱烈的底部標簽欄
底部標簽欄的設計在圖標創(chuàng)意層面發(fā)揮較多,各類風格的圖標讓該欄目更加豐富多彩,除此之外也有在背景層渲染氛圍的案例。
 
近期恰逢芒果 TV 十周年之際,在底部標簽欄背景層也加強了氛圍感。豐富多彩的元素和配色,結合主題化的圖標設計,使得整體氛圍感拉滿。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
九、收縮式交互設計
通過交互方式應對用戶操作過程,特別是在滑動界面時,交互方式的優(yōu)化可以降低干擾,提高當前界面的利用率。
 
在 Blurrr App 創(chuàng)作界面,默認以 3D 動態(tài)圖標展示“開始創(chuàng)作”按鈕,當滑動界面時按鈕會收縮展示。通過收縮式的交互設計,讓界面可以展示更多內容,也不會影響用戶點擊按鈕進行創(chuàng)作。即通過 3D 動效加強了功能的曝光度,又通過收縮式交互提高了內容的展示空間,可謂是一舉多得的設計解決方案。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
十、形象化的進度設計
進度設計是反饋狀態(tài)變化的關鍵,通過可視化的表達讓用戶一目了然,提高用戶對服務過程的把控。
 
當用戶通過攜程旅行 App 訂票后,在行程訂單界面可以看到列車行駛狀態(tài)的進度提示。通過可視化的列車形象的表達了行駛狀態(tài),讓用戶清晰的看到行駛方向和抵達站點示意。不僅信息傳遞高效,形象的表達也使得感官體驗更佳。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
小結
優(yōu)秀的產(chǎn)品總能在細微之處帶給你驚喜,讓你感受到產(chǎn)品服務的情感化和溫度。本文觀點僅代表個人體會,希望可以和大家一起共勉。
 
作者:黑馬青年
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉載。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYxODE4MA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析

藍藍設計的小編 B端ui設計文章及欣賞

 
 
 
面向企業(yè)用戶、注重效率與管理、解決企業(yè)痛點、技術與服務并重、決策過程復雜
B端關注的是如何通過技術手段賦能企業(yè),提升其業(yè)務處理能力和管理效能,是企業(yè)間或企業(yè)內部運作不可或缺的工具和服務。
彈窗-聚焦任務處理與即時提醒的高效交互工具;作為一種常見的交互設計元素,在提升用戶體驗和效率方面扮演著重要角色。
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
 


作者:Miao_C
鏈接:https://www.zcool.com.cn/article/ZMTYyNDEwMA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。
 

每個設計都讓你感受到個性化

藍藍設計的小編 設計思維

隨著同類型產(chǎn)品越來越多,更有體驗感和個性化的設計才能打動用戶,成為被選擇的對象。作為產(chǎn)品設計師我們在不斷探索和創(chuàng)新,希望以更好的設計表達來解決業(yè)務場景,為提升用戶體驗而助力。
 
本期以個性化設計為出發(fā)點,給大家?guī)硎畟€不錯的設計方案,希望可以帶給大家更多設計靈感。
每個設計都讓你感受到個性化
 
 
 
 
體驗目錄
一、讓你感受溫暖的年度報告
二、趣味性的圖標設計
三、通過 AI 重新定義搜索體驗
四、動態(tài)化功能引導產(chǎn)品升級
五、動態(tài)優(yōu)惠券更有吸引力
六、人性化的溫馨提示設計
七、自定義形象的年度報告
八、個性化的主界面設置
九、情感化的表情設置
十、空間感的 Banner 輪播體驗
 
 
 
一、讓你感受溫暖的年度報告
這段時間相信大家經(jīng)常使用的產(chǎn)品都曬出了年度報告,設計風格與互動形式也層出不窮,哪一個產(chǎn)品的設計風格最打動你呢?
 
在我刷到的年度報告中,攜程旅行的年度旅行報告印象最深刻。毛茸茸的設計風格在寒冷的冬季顯得格外溫暖,圖標、字體、背景、按鈕等都以此風格進行設計,整體效果非常細膩柔軟,你也去體驗感受一下吧!
每個設計都讓你感受到個性化
 
 
 
 
二、趣味性的圖標設計
圖標在產(chǎn)品中主要以各種設計風格形成差異,打造出匹配品牌風格的個性設計,除此以外,我們也要多在圖形創(chuàng)意表達層面進行探索。
 
最近在使用極兔速遞小程序時,除了圖標設計的風格獨特以外,多個場景的圖形創(chuàng)意也很有意思。比如下單寄件、掃碼寄件和個人中心的圖標等,趣味性的設計表達讓人印象深刻,以個性化的圖形創(chuàng)意吸引用戶的注意力。
每個設計都讓你感受到個性化
 
 
 
 
三、通過 AI 重新定義搜索體驗
AI 化已經(jīng)成為眾多行業(yè)未來需要對接的方向,任何行業(yè)都可以通過 AI 進行重新定義,帶給用戶 AI 化的體驗。
 
以前在騰訊視頻 App 搜索時都是以關鍵詞為主,現(xiàn)在可以通過 AI 搜與騰訊元寶 AI 助手交流,以對話式的方式找到感興趣的影片。通過 AI 重新定義了搜索方式,讓用戶感受到屬于 AI 化的體驗感。
每個設計都讓你感受到個性化
 
 
 
 
四、動態(tài)化功能引導產(chǎn)品升級
引導用戶升級產(chǎn)品才能帶來新的功能和服務升級,如何吸引用戶進行升級變得至關重要。
 
高德地圖為了引導用戶點擊升級,以升級后帶來的更優(yōu)功能和服務為吸引點,通過動態(tài)輪播的形式表現(xiàn)升級彈窗。動態(tài)化的功能引導可以讓用戶提前了解新版本的信息,提高用戶升級的選擇性。
每個設計都讓你感受到個性化
 
 
 
 
五、動態(tài)優(yōu)惠券更有吸引力
各種優(yōu)惠券、打折券、新人紅包等讓用戶開始有點麻木,也不一定會領取和使用,如何增加其吸引力就變得越來越重要了。
 
近期高德地圖打車欄目的營銷活動中,為了展示更多類型的打車券、打車金等,通過動態(tài)輪播的方式進行設計表達。相較于靜態(tài)展示而言,不僅解決了內容展示的數(shù)量問題,動態(tài)的方式也更有吸引力,增加用戶的參與概率。
每個設計都讓你感受到個性化
 
 
 
 
六、人性化的溫馨提示設計
溫馨提示雖然不一定管用,但是依然可以讓用戶感受到人性化的服務,增加用戶對產(chǎn)品的好感度。
 
在比較晚的時間段使用洪恩識字 App 時,會出現(xiàn)溫馨提示的彈窗,勸導用戶注意休息時間。人性化的設計可以輔助家長管理孩子的使用習慣,提醒注意時間管理和作息規(guī)律。
每個設計都讓你感受到個性化
 
 
 
 
七、自定義形象的年度報告
年度報告的形式豐富多樣,都是以用戶個人數(shù)據(jù)生成,如何才能更加個性化,成為了設計表達的重點。
 
網(wǎng)易云音樂的年度聽歌報告可以自定義形象,可以針對身體的上中下三個部分進行定制,以個性化的形象開啟專屬的聽歌報告。整體表達很有設計感,圖形、排版與配色都很不錯,快去生成屬于你的聽歌報告吧!
每個設計都讓你感受到個性化
 
 
 
 
八、個性化的主界面設置
對于感官體驗每個人的喜好各不相同,為了滿足各自的選擇需求,個性化的設置變得尤為重要。
 
體重小本 App 的主界面,可以通過主題皮膚設置背景、配色等,提供了煥彩粉和清爽藍的多款選擇,用戶也可以自定義圖片進行設置。通過個性化的設置帶給用戶更多選擇性,滿足不同的感官體驗需求。
每個設計都讓你感受到個性化
 
 
 
 
九、情感化的表情設置
通過表情設計輔助可視化表達,其中表情符號的運用較為常見,豐富多樣的表情選擇更能滿足用戶需求。
 
體重小本 App 體重數(shù)據(jù)展示中,以不同表情來體現(xiàn)體重數(shù)據(jù)的變化,情感化的表達讓變化的呈現(xiàn)更加貼切。產(chǎn)品提供了多款表情供用戶選擇,用戶也可以設置自定義表情,情感化的設置讓體驗感變得更加豐富。
每個設計都讓你感受到個性化
 
 
 
 
十、空間感的 Banner 輪播體驗
輪播 Banner 圖在設計表達、布局結構、輪播形式等層面都可以進行創(chuàng)意發(fā)揮,有特點的形式更能吸引注意力,以此提高 Banner 的點擊率。
 
最近在體驗芒果 TV 時,發(fā)現(xiàn)首頁 Banner 的表現(xiàn)形式以分層式表達,輪播過程中更有空間感。將人物與背景進行分層設計,輪播時分前后入場,伴隨著縮放等動效表達,營造出更強的空間感。
每個設計都讓你感受到個性化
 
 
 
 
小結
設計思維的轉變離不開大量優(yōu)秀案例的輔助,對于產(chǎn)品設計師來說,體驗和總結的訓練至關重要。希望本期的分享可以帶給大家一些啟發(fā),觀點屬于個人見解,不足之處歡迎大家留言補充。
 
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉載。
 


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTY1MDA0OA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

B端基礎 | 52000余字總結 B 端基礎設計知識

天宇 B端ui設計文章及欣賞

最近看汪曾祺的《嘆息橋》中的一句話,我必須分享給你。緣起我在人群中看見你,緣散我看見你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設計文章的初衷。
 
慢慢發(fā)現(xiàn)其實分享也是一件快樂的事情、而且在分享的過程中我自己也收獲了很多。而且對設計的理解也更深了。更快樂的是收獲了一群一起同行的小伙伴、這個還挺開心。和他們一起在群里吹水、一起吐槽。一起討論問題、那真的是快樂無邊。哈哈哈
 
上面扯多了。我們開始今天的內容。今天內容分三部分、第一部分內容總結是對我寫的這個系列文章每一篇文章內容和核心的小總結。第二部分這個系列的文章頁算是告一段落了、下一階段我會做些什么。第三部分分享一些我寫文章的感受、然后煽煽情。
 
1、內容總結
因為在寫這個系列的文章時我加入了很多擴展知識。希望告訴你更多。這里我會把主要的這個系列的知識總結一下讓你盡量一次看完。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
1.1、登陸頁面
 
最近就在做我們系統(tǒng)的登陸頁面優(yōu)化。回頭我會寫一個項目總結給你們看。這里介紹一下B端登陸頁面該怎么去做。其實還挺簡單了。因為現(xiàn)在主流的布局就那幾個。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
登陸頁面:布局分為三種;居左、居右、居中
頁面元素:導航、登錄框、背景(裝飾元素)、互聯(lián)網(wǎng)信息。
導航高度:68px或48px、文字大小:14(大部分)16(也可以)
登錄框大?。捍笮〕叽绮唤y(tǒng)一、沒有固定的尺寸。可以根據(jù)自己和領導的喜好決定。對還有要承載的內容多少。
登錄方式:掃碼、手機號、賬號、第三方
標題切換字號:我喜歡用26px(也要其他的16、/18、/20)
輸入框高度:48px
按鈕文字和高度:16px、和輸入框高度一直就行。
背景可以是配的插畫(這種最簡單)、一般都是科技風
底部要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個就不多說了正常排版就行。
 
1.2、篩選
 
篩選相對是很簡單的部分把、因為你直接用規(guī)范里的組件。雖然不會很優(yōu)秀、但是剛重要的是不會出什么錯誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
篩選的意義:定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內容分類
 
篩選類型:基礎篩選組件(就是我們常見的頁面頂部的篩選)、高級篩選(就是那些需要你定義想一想的篩選部分)
 
篩選布局:頂部和左側
 
篩選樣式:平鋪;折疊;Tab篩選;單側選擇;表頭;綜合
 
1.3、柵格
 
這里其實還簡單的、首先你要明白柵格在我們的設計里面很重要。你不用當然也可以呀。但是你想要做的更好那就用起來你會有意外的收獲。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
怎么用:直接看ant design、TDesign、阿科desing的規(guī)范就行、寫的很清楚。
 
注意點:不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px
 
1.4、顏色
 
這部分相對來說是我自己的弱項、在寫當時的文章的時候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設計規(guī)范的。也清楚了自己應該怎么去規(guī)定自己的設計規(guī)范。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
主色確定:常見的方法、1、用自己品牌logo的顏色;2、用行業(yè)色
 
配色確定:我一般是找競品、或者優(yōu)秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。
 
大廠色彩:這里我分享了大廠的色彩是怎么去確定的、如何去確定??梢匀タ纯础N以谧约旱墓ぷ髦猩实膽镁蛥⒖剂薬nt Design的色彩應用方式定制的。
 
1.5、字體
 
字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來。還有就是如何去設計一款自己的字體。還有后臺字體規(guī)范的制定
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
中國文字:這里中國文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當做你喝酒吹水的談資。
 
字體規(guī)范:我們大部分的字體會采用黑體、可讀性強、親和、現(xiàn)代、清晰。
 
字號:最新的字體12px、正文、14px、通過+2, +4,+8,+12,+16 的步數(shù)增長規(guī)律
 
行高:通過邏輯得到這樣一個公式:「 行高 = 字號 + n 」,8 作為變量正好同時滿足與 1.5 倍的「 14px & 16px 」常用字號行高保持一致,總體文字間隙穩(wěn)定呼吸,行高空間較一致得出計算公式:「line-height = font size+8」
 
字重(就是字粗):建議使用兩種常規(guī)和加粗(在前端里一般就是400和500)
 
顏色:我是主張帶有色彩傾向的顏色應用的。根據(jù)字體樣式的設計原則,制定了簡易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結合,文字顯示色彩對比滿足至少1:4.5( AA級別)。且驗證了其中的實用性,共分為亮暗兩種模式,4 個色階。
 
1.6、ICON(圖標)
 
你要統(tǒng)一風格成套的去找參考和應用。在我們的系統(tǒng)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發(fā)直接引用。這個是自己累點、但是可以保障實現(xiàn)效果。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
設計原則:準確、簡單、節(jié)奏、愉悅。
 
設計實戰(zhàn):采用柵格
我是用的阿里巴巴矢量圖庫的設計規(guī)范、因為我要傳到這個平臺應用
 
ICON分類:交互性圖標、裝飾性圖標、說明性圖標
 
1.7、按鈕
 
按鈕我覺得這部分是相對簡單的、也是要做到風格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺的風格、不如圓角的大小其他的倒是沒什么了。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
常規(guī)按鈕:次要按鈕、主要按鈕、文字按鈕、圖標按鈕
 
按鈕狀態(tài):可用、禁用、加載、懸浮
 
尺寸:把按鈕分成:迷你、小、中、大,四種尺寸。高度分別為:24px/28px/32px/36px。推薦及默認為尺寸「中」。
 
樣式:各個規(guī)范對按鈕形狀的規(guī)范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
 
 
布局:這里分享了兩個概念、古登堡法則、費茨定律、告訴你我們?yōu)槭裁催@么排版。對產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。
 
1.8、彈窗
 
后臺彈窗是一個很復雜的內容、但是也是一個相對很好處理的部分。只要你做好規(guī)范這部分、簡直就是一點開胃小菜。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
彈窗是一個我頭痛的問題因為不太好規(guī)范。但是我還是把這個彈窗系統(tǒng)、在我們的體系中形成了一個小的規(guī)范。感謝領導、感謝前段端的龍哥。
 
我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務里我們會采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。
 
1.9、表單
 
什么是表單:我理解表單就是系統(tǒng)為和用戶進行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產(chǎn)品中對我們數(shù)據(jù)做的增、刪、改、查、驗都可以通過表單完成。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
我們在后臺系統(tǒng)中、大部分的場景都會使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設計時要遵循的原則、簡潔明了、清晰高效、適應業(yè)務、即時反饋。
 
表單的構成結構、基本都是由、標簽、域、提示、操作按鈕這四個部分構成的。
 
表單布局在表單中我們采用多種布局方式。信息分組、內容列表、標簽頁、分步驟。
 
1.10、表格
 
B端設計中,對數(shù)據(jù)瀏覽、操作、過濾、展示是最高效的。這你就不用質疑了。因為結構簡單、精準高效、數(shù)據(jù)形式豐富。
 
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內、外兩部分組成。其中,內部包含表頭、表體、底欄等。外部包含標題、篩選區(qū)、操作按鈕區(qū)等。
 
表格的類型:基礎表格、樹形、子表格、交叉表格、圖表表格、卡片表格
 
表格的樣式:網(wǎng)格型、水平線型、斑馬紋、自由形式
 
進階的一些知識就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識了。想了解去看更詳細的我的文章11表格設計和12表格優(yōu)化項目實戰(zhàn)。
 
1.11、大廠規(guī)范
 
如果你是一個小廠B端設計師、剛好沒有自己平臺的設計規(guī)范。那就去直接用的場的設計規(guī)范。去用沒問題的。大廠那么多的牛逼設計給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
在使用大廠的設計規(guī)范時然后慢慢的積累自己平臺的設計規(guī)范。逐漸的你就會形成一個屬于你們自己平臺業(yè)務的高質量設計規(guī)范了。
 
2、計劃
 
這個基礎系列的文章就這樣寫結束掉吧、希望可以對你的B端設計有所幫助。之后我會寫二個系列的文章、去分享我理解的B端設計。
 
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
第一個系列是B端基礎設計的加強版、B端高手。B端高手是會寫我的實戰(zhàn)里是怎么去做的。其實就是我的設計項目復盤。
 
第二個系列就隨便的去分享一些設計知識。比如哪些什么什么原理呀、什么什么法則呀、在設計里的應用。而且會提出和討論一些設計問題。
 
3、寫在最后
 
分別是為了更好的相見、我一直希望我的文章可以幫到你。慢慢來路還很長、總是要一步一步的來。很快我們會再次相見。我是KING(國王)
 
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
新的開始見.......
 
注解:標題的40000余字也好、50000字也好都是說的我這個系列總計的字數(shù)、因為想讓你們看到。

作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

日歷

鏈接

個人資料

藍藍設計的小編 http://m.ibut.com.cn

存檔

绥棱县| 镇巴县| 德令哈市| 宁津县| 雷州市| 平湖市| 西宁市| 惠东县| 平顶山市| 涿鹿县| 保康县| 枣强县| 桦川县| 上蔡县| 长治县| 商城县| 四会市| 中卫市| 新和县| 津市市| 孟州市| 湄潭县| 石门县| 安乡县| 监利县| 常宁市| 乐至县| 宜阳县| 酉阳| 罗平县| 获嘉县| 隆化县| 东台市| 稻城县| 抚顺市| 改则县| 巴林左旗| 镇平县| 台山市| 肥城市| 芜湖市|