92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

動效讓這些設計更驚艷

杰睿

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


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

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

杰睿

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


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

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

杰睿

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


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

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

杰睿

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

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

UI 設計的 10 個細節

杰睿

俗話說:“細節決定成敗”,細節的把控至關重要,這也是設計師能力的代表。隨著項目經驗的積累和專業能力的成熟,我們對于設計原則、設計細節和設計經驗的沉淀也會越來越多,設計輸出也會因為這些細節而顯得更優秀。
 
黑馬哥結合職場經驗和教學經驗,總結了 120+ 設計原則、設計細節和設計經驗的案例分析。案例內容涉及布局、圖標、按鈕、文本、配色、配圖、規范、交互和設計經驗等,目的是為了讓我們的設計更規范、更專業、有細節、有亮點、有思維。
 
今天先挑選其中的 10 個案例和大家一起交流一下。
UI 設計的 10 個細節
 
 
 
 
分享目錄
 
1. 圓角圖片對齊時不要完全左對齊
2. 同屬性版塊統一圖標設計規范
3. 數據表達特殊化
4. 預估好信息呈現的最大值
5. 慎用高飽和度的顏色
6. 通過蒙版降低信息干擾度
7. 利用背景色突出小圖標的空間占比
8. 漸變最好選擇近似色
9. 保持按鈕可讀性
10. 淺色背景不適合添加投影
 
 
 
1. 圓角圖片對齊時不要完全左對齊
 
設計中遇到圖片帶有圓角時,文字排版不適合完全基于圖片左對齊,視覺上會顯得文字太靠左,失去視覺平衡度。適當預留間距視覺上更平衡,版面結構也會更穩重。
UI 設計的 10 個細節
 
 
 
 
2. 同屬性版塊統一圖標設計規范
 
同屬性版塊需要統一圖標設計規范,不要出現風格混搭,遵循圖標設計的十大統一性:風格、大小、粗細、圓角、比例、透視、角度、疏密、間距、正負形。
UI 設計的 10 個細節
 
 
 
 
3. 數據表達特殊化
 
在可視化的場景中,針對一些特殊數據展示的時候,可以選擇特殊字體增加設計感。再通過字體大小對比、字重對比、顏色深淺對比等來突出數據。
UI 設計的 10 個細節
 
 
 
 
4. 預估好信息呈現的最大值
 
在進行 UI 設計時,需要預估好當前位置所能承載的最大值,不能只在理想化的狀態內設計。雖然簡化的內容看起來更美觀,但是最大值下的設計思考才能避免上線后的誤差。
UI 設計的 10 個細節
 
 
 
 
5. 慎用高飽和度的顏色
 
界面設計配色需要考慮用戶長時間的預覽體驗,高飽和度的配色不適合長時間觀看,容易造成視覺疲勞。適當降低飽和度使得配色更加舒適,有利于提升用戶預覽體驗度。
UI 設計的 10 個細節
 
 
 
 
6. 通過蒙版降低信息干擾度
 
在圖片上面展示文案時,需要考慮圖片對于文案信息的干擾度。為了防止復雜場景的圖片干擾信息傳遞,需要在信息區域添加漸變蒙版,以此來降低對于信息的干擾度。
UI 設計的 10 個細節
 
 
 
 
7. 利用背景色突出小圖標的空間占比
 
需要突出圖標的空間占比時,放大圖標會顯得視覺焦點太強,也容易暴露圖標繪制的缺點而顯得粗糙。添加統一的造型和背景色,可以突出小圖標的空間占比,提升感官體驗。
UI 設計的 10 個細節
 
 
 
 
8. 漸變最好選擇近似色
 
在主界面或者一些特殊場景中,需要對按鈕添加漸變色時,最好選擇近似色等鄰近范圍的配色,會使得視覺效果更加和諧、舒適。
UI 設計的 10 個細節
 
 
 
 
9. 保持按鈕可讀性
 
按鈕設計需要考慮在不同環境下的適應度,確保用戶可以一目了然的發現它。在白色背景、淺色背景、深色背景中都要形成配色對比,始終保持按鈕與背景的高對比度和可讀性。
UI 設計的 10 個細節
 
 
 
 
10. 淺色背景不適合添加投影
 
淺色背景的卡片、按鈕、標簽、圖片或者其他元素等,在白色背景中都不適合添加投影。投影使得視覺效果對比模糊,畫面表現不夠干凈、通透,去掉投影反而更加清晰自然。
UI 設計的 10 個細節
 
 
 
 
小結
 
以上案例屬于 120+ 案例中隨機挑選的 10 個作為示意,該系列案例也會持續更新。希望大家可以從這些案例中獲得一些設計經驗,助力設計輸出,能夠做出更好的設計作品。經驗屬于個人職場和教學中的沉淀,如有不足歡迎留言補充。


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

如何從產品角度發起交互設計?

杰睿

本文從產品角度出發,深入探討了如何發起交互設計。通過明確產品目標與用戶需求、進行用戶研究、構建信息架構、設計流程與界面、進行原型測試以及持續優化等關鍵步驟,闡述了如何打造出滿足用戶期望、提升用戶體驗并實現產品目標的交互設計。
 
一、引言
 
在當今數字化的時代,產品的成功不僅僅取決于其功能的強大,更在于能否為用戶提供流暢、愉悅且富有價值的交互體驗。從產品角度發起交互設計,意味著將用戶置于核心,以實現產品的商業目標和用戶需求的完美融合。
如何從產品角度發起交互設計?
 
 
二、明確產品目標與用戶需求
 
(一)定義產品目標
產品目標是交互設計的起點,它決定了設計的方向和重點。產品經理需要與團隊共同明確產品的定位、市場需求以及預期的商業成果。例如,是旨在提高用戶活躍度,還是增加用戶轉化率,或者是提升品牌形象。
如何從產品角度發起交互設計?
 
 
 
(二)挖掘用戶需求
通過市場調研、用戶反饋、競品分析等手段,深入了解目標用戶的行為習慣、痛點和期望。這不僅包括對用戶顯性需求的捕捉,還包括對潛在需求的挖掘。
如何從產品角度發起交互設計?
 
 
 
三、進行用戶研究
 
(一)用戶畫像創建
基于收集到的數據,構建詳細的用戶畫像,包括用戶的年齡、性別、職業、教育背景、使用場景等特征,以便更精準地理解用戶的行為和需求。
如何從產品角度發起交互設計?
 
 
 
(二)用戶場景分析
模擬用戶在不同場景下與產品的交互過程,發現可能存在的問題和優化點。
舉例說明:
我們要知道,地鐵周邊美食,這是一個解決方案。真正的需求是什么?一個字一個字地找需求,地鐵=快速方便出行,美食=和朋友一起吃飯/自己一人吃飯。這是一個和線下場景很相關的項目,我們要把不同目的核心用戶的主要使用場景寫出來。經過分析,我們得出了用戶會選擇我們產品,且產品未來可能存在的各種場景A、B、C、D、E。如下圖所示:
如何從產品角度發起交互設計?
 
 
如果按照目標人群所在場景分類,進行細分,則為下圖:
如何從產品角度發起交互設計?
 
 
乘地鐵去地鐵站和附近地鐵站區別:前為用戶會乘坐地鐵去目的地尋找美食;后為用戶不用地鐵/吃完后使用地鐵,地鐵邊美食沒有其他美食團購產品有競爭力。
上班族和普通大眾區別:上班族工作日使用固定地鐵站上下班,時間可能緊急,快速獲取食物;普通找美食吃的大眾不使用固定地鐵站,目的是通過地鐵快速到達某目的地,就近享受目的地美食。
朋友們和個人區別:朋友們一起吃飯,容易出現喝多、吃過點等異常行為,并且在選擇地鐵旁吃飯地點時需要考慮朋友們家的位置就近選目的地。個人均不需要考慮以上,較為自由。
 
市場定位
經過領域場景的分析,我們知道了真場景都是用戶有目的乘坐地鐵去到某地鐵站出站口尋找美食的。那么我們對這么一群大眾進行用戶人口統計學類的細分:
如何從產品角度發起交互設計?
 
 
  • 上圖為前期定位的目標大眾用戶群,依靠地鐵的工具屬性,我們得出了具體的兩個影響因素:時間+美食熱愛程度。同時我們把直接競品和間接競品一同進行用戶群比較??梢钥吹胶痛竺缊F有相同和不同維度,這就是產品最初冷啟動時期的差異化!也就是我們的前、中期場景的主要目標用戶類型。
  • 紅色部分即種子用戶群,以這些群體為冷啟動階段,可以更快的向四周擴張。因為他們有使用地鐵的時間屬性,同時有較高的美食熱愛程度,有利于帶動其他時間+熱愛程度的用戶加入產品,實現快速并有質量的拉新、活躍的目標。
  • 低端直接競品即用戶群工具屬性明顯,只是搜地鐵站,選擇美食的用戶,無明顯其他行為;高端競品即注重社交、ugc為起點,逼格高的搜尋美食工具。這部分開始很難,工作量巨大,且較脫離大眾主流群體。
 
結合上圖和要做的場景,我們得出了產品具體目標用戶:乘坐地鐵快速到達并尋找目的地美食的大眾用戶(上班族休息日,大學生,個人或一起),要求在地鐵站附近便能方便享受目的地美食。且對美食有一定熱愛程度。
 
(三)用戶測試
邀請真實用戶進行產品試用,觀察他們的操作行為,收集反饋意見,為后續的設計提供依據。
1、需求接受
需求很有可能是在線上接到的,并不是面對面交流傳遞的,并且還會遇到很多坑,例如需求本身不具體,或者自己理解有偏差,因此在接到需求后,最好和交互、產品等同事進行面對面的交流和溝通。
詳細了解測試目的和關鍵點,確定用戶配比。
最好是讓交互帶著跑一下整個程序(半成品demo也好,交互稿也行),這樣能在頭腦中快速形成操作流程的認知,并把相應關鍵點對應上去。同時把大致的用戶配比情況敲定一下,后續就可以直接招募用戶了。
了解demo的完成進度,相應確定具體測試時間。
交互、視覺等完成demo的時間具有太多不確定因素,因此我們需要及時了解整個demo的完成進度,在盡可能快的情況下保險安排測試時間,如果邀請的是外部用戶,結果用戶到了而demo還沒出來,那也是夠了。
2、方案撰寫和確定
讓交互稿幫助自己。在完成測試方案撰寫的過程中demo還未誕生,具體程序細節記憶又很模糊,不好寫測試方案,怎么辦?不要慌,去看交互稿吧。
及時溝通。在方案撰寫過程中,如果有一些疑問,例如在看交互稿的時候還不是很理解某個具體操作過程,或者自己對產品有疑問的也可以跟交互等溝通,因為自己會遇到的問題,很有可能在測試用用戶也會遇到,這樣子用戶如果問到了,就可以相應作出解釋。
核實確定方案。完成方案后,可以在公司溝通交流工具上和交互及產品等同事再確認一下,是否有什么地方遺漏或有不妥之處。
3、用戶招募
這是一個大多數人都頭疼的一個過程,希望看完了以下幾點,可以稍微緩解一下大家的癥狀。再次確定測試時間。
方案定下來后,再跟交互確認測試時間,了解是否有變動和調整,盡量避免用戶來了demo或者測試環境還不ok的情況。
 
撰寫招募文案。需要把用戶要求、測試日期和地點、報酬、大致的測試時長、用戶需要在測試中做什么,以及報名方式等表達清楚。有以下幾點可以注意一下,方便我們自己招募:
  • 詳細列出測試安排的時間段。例如10:30-11:15、13:30-14:15,讓用戶自己挑選合適的時間段,這樣就不用事后再協調不同用戶測試時間了;
  • 優先人力、信息管理、行政等崗位同事。盡量避免相關產品人員、設計崗等同事。
  • 制作簡單的招募海報,并檢查??梢允孪葘?ldquo;海報”用word或者ppt做好,然后保存成圖片格式,記得檢查核實一下是否有錯。因為在公司IM群上直接黏貼確實方便,但是其排版往往不利于閱讀,導致用戶會遺漏重要信息。而制作成圖片格式,可以更好地去避免這個問題,同時還可以顯得整個招募過程比較正式,突出了對用戶的尊重,也能在一定程度上體現我們用研工作的規范性。
 
多渠道投放招募海報。內部用戶可以嘗試先在公司IM群組上招募,之前招募樣本量比較小,因此很快可以招到,其他途徑暫時未嘗試,公司論壇應該也可以,不過隱約感覺效率會比較低。外部用戶可以在朋友圈試試,效果還不錯,大家都很熱情幫忙轉發,群眾的力量大無窮。也可以相應去搜索一些QQ群,加入并發布招募信息。另外還有一些社交論壇什么的,都可以嘗試一下。方法很多,針對具體招募情況,大家就盡情發揮吧~
 
用戶多了留到下次用。海報發出去后,有時也會出乎意料用戶數量超過預期了,這是好事,不要擔心,也不要急著拒絕,平和的跟對方說明情況,強調下次還會有測試,把用戶相應信息了解一下做個記錄,下次招募的時候可以直接先聯系這幾名用戶。當然前提是你真的有下次測試需求,如果沒有那還是老老實實說明情況。
 
確保自己和用戶能彼此聯系上。跟用戶強調測試時間和地點,尤其是外部用戶,如果招募和正式測試隔了幾天,最好在測試前一天再通知一下。給出自己的聯系電話,同時詢問用戶的聯系電話。
 
第一個用戶盡量安排公司內部同事。很多時候demo的完成情況會出現意外,到了測試時間demo還不能用,內部用戶可以方便取消或者更換。另外,在第一次測試前誰都不確定用戶會有什么反應,第一個測試是可以起到試水效果,而外部用戶成本高,用來試水太奢侈。
4、測試準備
 
材料準備。需要準備的內容有:量表、報酬簽收表、記錄筆記本、錄音筆、會議室借用,以及記錄表格,如果是外部用戶過來,相應準備一杯水,人家大老遠過來也不容易。
 
測試內容準備。其實每次訪談用戶自己都會挺緊張的,不知道用戶是不是也很緊張(PS:好想當一回用戶,體驗一下被訪的感覺)。為了消除這種緊張,同時也是為了更好的完成訪談,可以有嘗試以下幾點:
  • 盡可能多的去了解所需測試的產品。有時候demo出來的晚,下午要測試,demo中午才出來,自己都沒玩過,測試還怎么搞?之前也說了,那就使勁去看交互稿吧,雖然比不上實際操作來的真實,但是也能有不小幫助,但也要給自己留足熟悉demo的時間。
  • 按照模塊來列提綱。其實相當于組塊策略,把同一個模塊的問題放到一起更方便記憶,并且也在訪談中也方便自己和其他同事發現遺漏點。但模塊不要太大,如果太大了就相應拆分一下。例如,在考拉新版測試的時候,有“首頁”、“活動”、“購物車”等測試,但是光是首頁內容也很多,作為一個模塊還是太大了,可以拆分成“首頁整體感知”、“商品詳情”等幾個方面來整理提綱。
  • 根據任務演練提綱。有了提綱后,按照任務大致過一下所有列出來的問題,這個過程會打亂按照模塊列好的提綱,有一次這樣的排練,在測試的時候更不容易漏掉題目,而且也相當于模擬了一下測試,自己心里會更踏實一點,在實際測試過程中也能有更好的應對。
 
相關人員通知。通知交互和產品的同事具體測試時間和地點,邀請他們一起參與。不建議交互和產品只是后期測試查閱報告,如果他們參與到測試中,能更近距離和用戶接觸,并能更加深刻感受到產品存在的問題,也能更好的推動產品的改進。
5、正式測試
主持人需要注意的點:
  • 劃分我們和產品的關系。在測試之前跟用戶說明清楚,我們并不是產品的設計者和開發者,我們只是受產品方委托來進行測試,以免用戶不好意思當面如實評價產品。
  • 強調測試的是產品,而不是用戶。要跟用戶說明產品尚處于不完善階段,因此邀請用戶過來進行測試,幫助發現問題和改進產品設計,但請注意不是為了評價產品。
  • 注意訪談技巧。這個就不用多說了。
  • 盡可能深入的去挖掘用戶的需求。不要停留在用戶話述表面,更進一步去追問,用戶為什么會這么說或這么問,例如,很多時候在測試中會碰到用戶說“哦,原來這個按鈕是xx功能,我還以為是xx功能“,這個時候可以再推進一步,了解用戶為什么會這么認為。
  • 給其他在場的同時發言的機會。主持人如果覺得自己訪談的差不多了,可以詢問一下記錄者以及交互、產品等同事,了解他們是否還有問題需要補充。
  • 記得量表評分和報酬簽收。長時間的測試和訪談后容易忘記量表評分和報酬簽收,可以把這兩份東西放在顯眼的地方,另外可以讓記錄的同事打個招呼,幫忙提醒自己。
 
記錄人員需要注意的點:
  • 仔細觀察用戶行為并記錄。記錄不僅僅是用戶的觀點、想法等,更重要的是記錄用戶的實際行為。
  • 按照模塊記錄。記錄者可以按照測試方案中的模塊來相應記錄用戶的行為和言語表述。
  • 查漏補缺。主持人可能會遺漏一些點,記錄者作為旁觀者需要提醒主持人遺漏了什么,或者自己有什么新的內容需要補充。
 
6、測試結束歡送用戶。對用戶表示感謝,并開門送一下用戶,對于外部用戶,最好能送到大樓外面可以看見出口的地方。
測試后及時討論。這個是重點!
在每一名用戶測試后及時和交互、產品等同事快速過一下主要發現的問題點,這樣做有以下優點:
  • 有效達成共識,確定解決方案。剛訪談結束印象最深刻,因此能快速有效達成對主要問題的共識,并討論確定相應的解決方案。
  • 體現敏捷優勢。確定了一些比較嚴重的問題后,交互和產品的同事就可以相應去改進產品設計,做到了邊測邊改,加快迭代速度。
  • 幫助優化訪談提綱,和測試用戶安排。有些問題在事先撰寫方案的時候可能沒涉及到,在討論后可以補充進去,而有些問題確定后則不需要再測。另外,也可以通過討論對事先安排的測試用戶進行相應調整,例如增刪用戶,或者調整新老用戶測試順序等。
  •  
    事后幫助我們自己快速撰寫方案。通過討論確定了關鍵問題,并且,交互和產品的同事也相應清楚了,因此在最后可以快速形成報告。
再次感謝用戶。所有用戶測試結束后,可以花幾分鐘時間簡單感謝一下用戶。
 
7、報告撰寫
針對不同大小項目的用戶測試,在完成報告撰寫過程中有兩種具體方式:
  • 小測試項目簡單快速撰寫報告。對于那些1-2天的小測試項目,由于在每次測試后都有討論,已對主要問題達成共識,因此在報告撰寫的時候就可以快速地將主要的問題和風險點呈現出來。
  • 大測試項目每天總結并反饋主要問題。大的測試項目持續時間比較久,針對每天的測試及討論,簡單總結一下主要發現的問題,并反饋給相關人員,如果到了最后再總結,容易遺忘掉一些內容,并且這樣子也方便自己最后撰寫報告。
 
四、構建信息架構
思考信息架構有三個核心關鍵詞:用戶角色、產品價值、使用場景。
1、明確用戶角色
用戶角色清晰揭示用戶目標,幫助我們把握關鍵需求、關鍵任務、關鍵流程,看到產品哪些是主要的事,哪些是次要的事。我們應該盡可能豐富、形象化我們的用戶角色,讓它在設計決策過程中發揮作用,設計出更符合用戶場景的產品。
2、了解產品的目標價值
作為產品的設計師一定要理解產品的價值,知道用戶想要什么,把最重要的優先級提到最高,盡量移除無關緊要的信息,或降低其他優先級的權重,以免對用戶造成干擾。
3、提煉產品的使用場景
要了解產品的業務流程,比如目標用戶是誰、什么場景、如何使用,要把產品業務流程上的節點一個一個梳理出來,還要考慮這個產品對用戶的價值是什么,不要僅僅考慮界面的元素規范、設計細節等等,要知道產品的目標價值體系。
4、信息架構優先級
基于三個核心點(用戶角色、產品價值、使用場景)分析,把目標用戶人群核心價值的功能點業務流程梳理出來,分清主次關系,切忌功能堆砌,具體方法可以把所有功能業務邏輯的主線列出來,然后根據業務的優先級做評級,分清楚這些功能哪些是主要的,哪些是次要的,然后通過數字做排序,這樣我們就知道哪些功能設計需要明顯,哪些功能設計需要低調。
5、信息歸類及整合
從整體上思考信息類產品的分類及整合,比如用戶資料相關的產品會有用戶信息、資料、等邏輯,這樣就要把所有跟用戶相關的信息都歸在同一個分類菜單下,不要讓他們分散在各個頁面中。也就是所謂的一級菜單、二級產品的處理邏輯。
6、要定期審視與迭代
隨著產品規模與復雜度的提升,要隨時關注信息架構是否滿足當前的產品框架,不要等需要時候再去孤注一擲的全盤優化,這樣會讓項目陷入被動的局面,可以逐漸增強,循序漸進的優化,從小的細節對信息架構進行調整,提升產品的易用性。
 
六、進行原型測試
1、制作原型
使用快速原型工具制作可交互的原型,以便更直觀地展示設計方案。
 
(二)內部測試
團隊內部進行初步測試,檢查功能的完整性和流程的合理性。
 
(三)用戶測試
邀請外部用戶進行測試,收集他們的意見和建議,發現潛在的問題和改進空間。
 
七、持續優化
 
(一)數據分析
通過收集和分析用戶的使用數據,了解用戶的行為路徑和偏好,為優化提供數據支持。
 
(二)用戶反饋處理
及時響應用戶的反饋,將有價值的建議融入到后續的優化工作中。
 
(三)迭代更新
根據數據分析和用戶反饋,不斷對交互設計進行迭代更新,以適應市場和用戶需求的變化。
 
八、結論
 
從產品角度發起交互設計是一個綜合性的過程,需要充分考慮產品目標、用戶需求、信息架構、流程界面、測試優化等多個方面。只有以用戶為中心,不斷追求卓越的用戶體驗,才能打造出具有競爭力的產品,在激烈的市場競爭中脫穎而出。
 
在未來的產品開發中,隨著技術的不斷進步和用戶需求的不斷變化,交互設計也將面臨新的挑戰和機遇。產品團隊應保持敏銳的洞察力和創新精神,持續探索和優化交互設計,為用戶創造更多的價值。
 


作者:Charlotte的嘻醬
鏈接:https://www.zcool.com.cn/article/ZMTYyNzM1Mg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

用戶體驗一致性思考

杰睿

前言
在團隊內部,我們已確立了一套設計規范,在日常項目中使用設計規范輸出變的高效、統一。然而,在實際操作中,不可避免地會遇到一些特殊情況:某些客戶提出的個性化需求并不完全契合既定的設計規范,這些促使我們不得不在保持設計一致性的基礎上進行靈活調整。因此,深入反思并優化一致性原則的應用策略顯得尤為重要。我們需要探索如何在堅守設計規范核心精神的同時,靈活應對多變的需求,確保設計既保持統一和諧,又能滿足特定場景下的獨特需求,從而實現用戶體驗與品牌價值的雙重提升。
 
用戶體驗一致性思考
 
 
用戶體驗一致性思考
 
 
在UI/UX設計中,雅各布·尼爾森的十條可用性原則中,一致性(Consistency and standards)位列第四。這一原則強調在界面和交互設計上需要遵循既定的規則,無論是在應用內部還是跨平臺之間。
背后的心理學原理——重復定律,強調了信息重復對于鞏固記憶的重要性。正如赫爾曼·艾賓浩斯通過“遺忘曲線”所揭示的,信息的有效保留離不開重復接觸。一致性的應用正是這一原理的生動實踐,通過不斷重復統一的設計元素與模式,強化用戶對產品的認知與記憶,從而提升整體的用戶滿意度與忠誠度。
艾賓浩斯遺忘曲線
艾賓浩斯遺忘曲線
 
用戶體驗一致性思考
 
 
用戶側
1、用戶學習曲線:
一致的UI/UX設計可以降低用戶的學習曲線。當用戶在應用程序或網站中遇到一致的元素、布局和交互方式時,他們可以快速理解并準確預測如何與界面進行交互。這減少了用戶的混淆和困惑,提高了他們的效率和滿意度。
2、提升可用性:
一致性使用戶界面更加易于使用。當用戶在不同的頁面或功能之間找到相似的設計元素和交互模式時,他們可以輕松地將已有的知識和經驗應用于新的情境中。這種一致性幫助用戶快速完成任務,減少錯誤和迷失,提供更好的導航和流暢的體驗。
3、品牌認可度:
一致的UI/UX設計有助于樹立品牌形象和增強品牌認可度。通過在不同的渠道和平臺上保持一致的設計元素、標識和視覺風格,品牌可以建立起獨特而可識別的形象。用戶在不同的觸點上都能感受到品牌的一致性,從而增加品牌的信任和忠誠度。
4、用戶滿意度:
一致性直接影響用戶的滿意度。當用戶在使用應用程序或網站時感受到一致的設計和交互方式時,他們會感到更加舒適和自信。一致性傳遞了專業和質量的信號,讓用戶感到被關注和重視。這種積極的用戶體驗有助于提升用戶滿意度,并促使他們持續使用和推薦你的產品或服務。
 
用戶體驗一致性思考
 
 
產研側
1. 降低設計成本,提高開發效率
無論是設計還是開發,復用已有的組件資源,保持界面的一致性可以有效地減少設計的投入,避免不必要的設計分歧點。
而在開發階段,可以避免重復造輪子,提高開發的效率,保證落地效果,也可以減少上線前設計走查、測試的工作量。
2. 形成一致的設計風格
根據原子設計理論,通過原子組件的一致性,可以構建出統一的界面框架、布局,形成統一風格和用戶交互認知,從而更好地保證用戶體驗質量。
 
用戶體驗一致性思考
 
 
色彩
色彩作為一種兼具物理屬性與感官享受的復雜現象,其本質在于光波在人體視網膜上的特定波長被反射或吸收后,所引發的視覺感知結果。在設計領域,色彩的選擇與運用不僅是視覺藝術的展現,更是品牌身份與個性的直接體現。諸如餓了么標志性的藍色、美團鮮明的黃色、以及京東熱情的紅色等,這些品牌專屬色彩不僅構成了品牌識別系統的重要組成部分,還通過其高度的一致性,在視覺層面上構建起強烈的品牌認知,營造出統一和諧的視覺體驗。
色彩的一致性策略在品牌塑造中發揮著不可估量的作用,它能夠有效增強品牌的記憶度與辨識度,深化品牌形象在消費者心中的烙印,進而提升產品的市場吸引力和用戶忠誠度。同時,這種策略還促進了設計元素間的和諧共存,包括按鈕、圖標、字體、標簽、背景、以及關鍵視覺元素如Banner等,均能在統一的色彩體系下實現視覺上的連貫與流暢,極大地提升了產品的可用性、無障礙性,以及用戶在使用過程中的整體滿意度與交互體驗。
 
用戶體驗一致性思考
 
 
字體
字體作為設計中不可或缺的核心要素,其獨特性在于能夠精準地塑造文字的視覺形象,涵蓋形狀、尺寸、粗細、字間距等多維度特征。這些特征共同構建了一種獨特的文字風格,不僅承載著信息的傳遞功能,更在無形中引導著用戶的視覺流程,影響著信息的接收與理解深度。因此,在設計過程中,合理選擇與應用字體顯得尤為關鍵。
 
字體類型的多樣性,如有襯線字體與無襯線字體的對比,不僅體現了風格上的差異,還隱含了不同的閱讀體驗與情感表達。字體的粗細變化(如細體、常規、粗體等)更是能夠強調文本的重要性層級,增強信息的層次感與可讀性。此外,字重的調整也是塑造視覺焦點、引導視線流動的有效手段,對于提升設計的整體美觀度和信息傳達效率具有不可小覷的作用。
 
然而,在實際的開發與實現過程中,若不加節制地使用多種字體,不僅會顯著增加頁面的加載時間,影響用戶體驗的流暢性,還可能因風格不統一而導致頁面顯得雜亂無章,破壞整體設計的和諧感。因此,制定一套統一、規范的字體使用策略顯得尤為重要。這不僅有助于提升開發效率,減少后期更新迭代的復雜度,還能有效避免資源浪費,確保設計作品在視覺上的一致性與專業性。
 
用戶體驗一致性思考
 
 
圖標
 
圖標作為用戶界面設計中至關重要的元素,風格直接影響到用戶的使用體驗與對產品的整體印象。圖標以其簡潔、直觀且富有表現力的特點,在快速傳達信息、引導用戶操作方面發揮著不可替代的作用。在設計中,圖標的設計與應用更是需要精心考量,以確保其既能夠準確傳達信息,又能夠與整體設計風格保持一致,從而營造出專業、和諧且易于使用的界面環境。
 
設計中視覺上保持統一包括圖標的大小、形狀、色彩以及設計風格等多個方面,能夠增強用戶的認知連貫性,降低學習成本,提升使用效率。相反,如果圖標風格混雜,不僅會讓界面顯得雜亂無章,還會給用戶帶來困惑和不安,進而影響其對產品專業性和安全性的信任。
用戶體驗一致性思考
 
 
按鈕
按鈕設計應統一于項目風格,無論是圓形、矩形、圓角矩形還是特定形狀,保持一致性是關鍵。統一的按鈕樣式不僅彰顯專業性,還能增強用戶信任,確保體驗連貫。過多變化的按鈕樣式會擾亂用戶界面,降低操作直觀性,甚至讓用戶誤以為自己已離開應用環境。因此,精心設計的統一按鈕樣式對提升用戶體驗至關重要。
 
排版
設計中的排版一致性對于構建高效、用戶友好的界面至關重要。一致的排版不僅能夠讓用戶快速適應和理解界面的整體結構,大幅降低學習成本,還能在用戶心中激發強烈的歸屬感和安全感。這種熟悉感使得內容更加易讀,用戶能夠自然地依照既定的視覺動線流暢地瀏覽頁面,迅速定位并獲取所需信息,從而顯著提升信息獲取的效率。因此,在設計過程中,注重并維護排版的一致性,是提升用戶體驗和界面有效性的重要策略之一。
 
 
用戶體驗一致性思考
 
 
 
操作流程的一致性
標準化流程:確保用戶在執行相似任務時,如購買商品、搜索信息或提交表單等,能夠遵循相同的操作流程。這有助于用戶快速適應并高效完成任務。
邏輯清晰:操作流程的每一步都應符合用戶的認知習慣和行為邏輯,避免讓用戶感到困惑或不知所措。
用戶體驗一致性思考
 
 
交互元素的一致性
按鈕和控件:確保按鈕、輸入框、下拉菜單等交互元素的樣式、位置和操作方式在整個應用或網站中保持一致。例如,所有按鈕都應具有相同的視覺風格和觸發機制。
導航和菜單:導航欄和菜單的設計也應保持一致,使用戶能夠輕松地在不同頁面或功能之間切換。
 
用戶體驗一致性思考
 
 
反饋機制的一致性
操作反饋:當用戶執行某個操作時,應用或網站應提供一致且及時的反饋,如加載動畫、成功提示或錯誤消息等。這有助于用戶了解操作結果并采取相應的行動。
狀態提示:對于長時間運行的操作或需要用戶等待的場景,應提供明確的狀態提示(如進度條),以減輕用戶的不確定感和焦慮感。
 
 
 
 
 
 
在任何維度上,一致性不應成為設計的唯一導向。設計,這一融合了藝術與科學的復雜領域,要求我們在用戶體驗的細膩雕琢、功能需求的精準滿足、美學價值的深刻體現及技術可行性的嚴格考量間游走。
 
“一致性”作為設計策略,其核心使命在于優化用戶路徑,降低認知門檻,確保用戶在多元界面中穿梭時仍能感受到連貫與和諧。當我們在與設計團隊(包括工程師、產品經理等)溝通時,僅僅提及“一致性”可能并不足以說明其必要性和價值。我們需要更深入地闡述為什么需要保持一致性,以及它如何具體幫助減少用戶困惑、提高用戶滿意度和忠誠度。
 
同時,我們應清醒認識到,“一致性”并不是萬能的。在某些情況下,為了追求極致的用戶體驗或解決特定的設計問題,可能需要打破傳統的一致性規則。因此,設計師需要在保持一致性和創新之間找到平衡點,根據具體情況靈活調整設計方案。
 
實際落地執行時,要根據產品定位、用戶場景,結合業務功能來確定設計方案,不能為了一致而一致。
當我們遇到一致性問題時,還是需要從以下3個方面深入思考,做出準確合理的設計決策。
用戶體驗一致性思考
 
 
真實項目
真實項目
 
在SaaS產品設計中,特別是面向B/G端(企業用戶)時,滿足不同用戶角色(如普通用戶與高權限領導)的需求是至關重要的。
管理端布局設計
普通簡潔明了:為普通用戶設計的管理界面應簡潔直觀,聚焦于日常操作,如數據查看、統計和下載。
功能分區:通過清晰的導航欄或側邊欄將功能區域劃分開,如“數據概覽”、“報表下載”、“任務管理”等,便于用戶快速定位所需功能。
操作便捷:確保常用操作(如搜索、篩選、排序)易于觸達,減少用戶點擊次數和頁面跳轉。
 
首頁版心定寬設計
固定寬度:為首頁設定一個合適的固定寬度(如1200px、1440px等),以保證內容在大多數屏幕上都能保持一致的閱讀體驗。
信息模塊化:將首頁內容劃分為多個卡片,每個卡片承載一個獨立的信息單元(如數據報表、通知公告、項目進展等)。
視覺層次:通過顏色、大小、陰影等設計元素區分卡片的重要性,引導用戶視線,提高信息獲取效率。
交互性:為卡片添加交互元素,如點擊展開、滑動查看更多等,增加用戶參與度和頁面活躍度。
 
用戶體驗一致性思考
 
 
位置差異性分析
根據「認知負荷>視覺負荷>動作負荷」理論,在頁面中我們首先要讓用戶能夠找到按鈕,然后完成操作。
相對于彈窗,頁面的空間更大,邊界感偏弱,用戶的視覺重心更容易停留在左側表單內容區域。所以按鈕應該緊隨搜索條件,便于用戶快速發現按鈕。
區域用戶已經形成下意識操作習慣,雖然區別于規范,只能打破,遵循客戶需求
用戶體驗一致性思考
 
 
一致性是規則
“一致性”作為規則或手段,服務于提升用戶體驗的原則。規則與原則一致時,促進業務共識與用戶價值;沖突時,原則優先。用戶體驗原則指導下的一致性,要超越表面控件統一,更在于產品決策與價值取向的一致。必要時,為更好的用戶體驗,可在規則上讓步以實現原則統一。打破規則需慎重權衡,確保用戶便利足以彌補理解成本,需長期全局考量。規則非僵化教條,而是引導我們謹慎創新的框架。
 
一致性的底線
無論從哪個角度,一致性存在的必要性都是毋庸置疑的。
對于關鍵的設計元素,如專有名詞和顏色體系,保持一致性至關重要。這不僅有助于維護品牌形象,還能減少用戶的困惑。
特定設計語言在特定場景下的變體應用,雖然可能帶來一定的視覺新鮮感或針對性優化,但往往需要謹慎評估其潛在風險。一旦變體打破了整體設計的一致性,可能會破壞用戶對品牌的熟悉感和信任感,甚至引發誤解。因此,在追求設計創新的同時,必須確保這種創新是基于一致性的原則之上,以維持品牌的整體性和用戶的良好體驗。
 
擁抱復雜性
一致性確實不應成為設計師的避風港或限制創新的枷鎖,而應是基于對業務深刻理解和多樣化設計能力之上的價值選擇。設計師的核心任務始終是滿足用戶的多樣化需求和偏好,這需要他們細致入微地觀察、理解并解決每個用戶的獨特問題。
 
在追求一致性的同時,設計師應保持“第一性思考”的能力,即回歸問題的本質,從用戶需求出發進行創新設計。多樣性頁面的產出,不僅體現了設計師的創造力和靈活性,也是提升用戶體驗、增強產品吸引力的關鍵。
 
一致性與創新設計并非相互排斥,而是相輔相成的關系。真正的一致性不應導致單調或拒絕創新,而應是在遵循品牌或產品核心價值的前提下,鼓勵設計師在細節和體驗上不斷探索和突破。當設計師感到被既定規則束縛時,應勇于質疑并重新評估當前的規范,確保所謂的“一致性”不是刻板的偽命題,而是真正符合用戶需求和品牌發展的價值導向。
 
因此,設計師應時刻保持開放的心態和敏銳的洞察力,不斷探索和嘗試新的設計方法和理念,以更加靈活和創新的方式實現一致性與用戶需求的完美融合。
 
用戶體驗一致性思考
 
 
重要的設計原則
「一致性」作為設計領域中的一項基礎性原則,其重要性不言而喻。它不僅為設計過程提供了穩固的基石,還顯著促進了開發效率與產品體驗的全面升級。在設計實踐中,一致性確保了界面元素的統一性和連貫性,使得用戶能夠迅速熟悉并掌握產品的使用方式,降低了學習成本,增強了操作的直觀性和便捷性。
靈活變通使用
一致性原則并非一成不變的強制規定,而是需要根據產品的具體定位和市場環境進行靈活變通的應用。不同的產品可能面向不同的用戶群體,擁有獨特的品牌調性和功能需求,因此在追求一致性的同時,也需充分考慮這些因素,確保設計既符合品牌特色,又能滿足用戶的實際需求。
 
提升用戶體驗是價值所在
一致性的真正價值在于其能夠顯著提升用戶體驗。通過遵循用戶的認知和習慣,設計師能夠創造出更加自然、流暢的操作流程,使用戶在享受產品功能的同時,也能感受到品牌所傳遞的舒適與和諧。因此,在追求設計一致性的過程中,我們始終應以人為本,將用戶的體驗和感受放在首位。建設有兼容性和長期價值的的一致性框架,在一致性中做到有用戶價值的設計,是設計師應該不斷探索的命題。

作者:cheny米魚
鏈接:https://www.zcool.com.cn/article/ZMTYzNTAzNg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

設計方法論 I 超全面的頁面分割設計指南

杰睿

 
設計方法論 I 超全面的頁面分割設計指南
 
當你打開一個頁面,首先映入眼簾的是豐富多樣的內容和信息。如何在有限的空間內,既保證內容的完整性,又讓用戶能夠輕松理解和瀏覽,這背后的奧秘就在于頁面分割。今天,我們就來一起
探討頁面分割的藝術與技巧,看看它是如何為你的設計增添魅力,提升用戶體驗的。
 
在設計中,頁面分割不僅僅是一種技術手段,更是一種藝術表現。它如同一位細心的畫師,巧妙地運用線條、色彩、空白等元素,將頁面內容劃分為一個個清晰、有序的區域。
通過這些分割,用戶能夠更快速地找到所需信息,更輕松地理解頁面內容,從而享受到更加愉悅的閱讀體驗。
頁面分割的魅力在于其多樣性和靈活性。不同的頁面可以采用不同的分割方式,如線條分割、卡片分割、留白分割等,以滿足不同的設計需求和用戶習慣。同時,頁面分割也需要根據內容的實際情況進行合理調整,既要保證信息的完整性,又要避免過度分割帶來的混亂感。
 
在本文中,我們將一起探討頁面分割的原則、技巧和應用實例。我們將學習如何運用不同的分割方式來優化頁面布局,提升用戶體驗。同時,我們還將分享一些成功的頁面分割案例,以激發你的設計靈感,為你的界面設計注入新的活力。
 
分享目錄:
一、分割的常見樣式
二、線性分割
三、卡片分割
四、留白分割
五、總結
設計方法論 I 超全面的頁面分割設計指南
 
 
線性分割:通過使用線條來劃分頁面的不同區域,以達到組織內容、引導用戶視線和提升整體美觀度的目的。這種分割方式簡單明了,能夠清晰地展現出頁面內容的層次和結構。
 
卡片分割:卡片式設計是一種流行的界面分割方法,通過將內容劃分為獨立的卡片或區塊,使用戶能夠更清晰地理解信息。每個卡片通常包含相關的內容,如文本、圖片或按鈕,以便用戶快速瀏覽和交互。
 
留白分割:主要通過增加間距的方式,利用人的視知覺原理(接近法則:人的大腦會傾向于把彼此靠近的元素視為一組),自然地將信息進行分組。這種留白的方式能夠為頁面增加呼吸感,降低視覺噪音,使設計看起來更簡潔。
設計方法論 I 超全面的頁面分割設計指南
 
 
近年來,設計趨勢從“卡片式設計”轉向了“去線化設計”,即傾向于使用留白分割而非過多的線條分割,以實現更為簡潔清晰的界面效果。設計師在選擇分割方式時,應優先考慮留白分割,其次是線性分割,最后是卡片分割。這個選擇順序反映了設計界的一般原則,即在不影響信息傳達的前提下,盡可能保持設計的簡潔性。
設計方法論 I 超全面的頁面分割設計指南
 
 
線性分割的定義:
線性分割設計是一種在視覺設計中使用的技巧,它使用線條、邊框或細線等元素來劃分、區分或連接頁面上的不同內容區域。這種設計手法主要用于提高頁面內容的可讀性和組織性,幫助用戶更好地理解和瀏覽頁面信息。
 
線性分割設計具有以下優勢:
 
1.劃分區域:線性分割可以將頁面劃分為不同的區域或模塊,使得每個區域的內容更加清晰、有序。這有助于用戶快速定位和瀏覽所需的信息,提高閱讀效率。
 
2.區分內容:線性分割可以用來區分不同類型的內容,如文本、圖片、圖表等。通過線性分割,可以將這些內容進行分組或歸類,使得頁面更加整潔、有序。
 
3.引導視線:線性分割可以引導用戶的視線,幫助他們更好地理解頁面內容。通過合理的線性分割設計,可以突出顯示重要的信息或元素,引導用戶關注到關鍵內容。
 
4.增強層次感:線性分割可以增強頁面的層次感,使得頁面內容更加豐富、有深度。通過不同樣式的線性分割,可以區分不同的信息層級,幫助用戶更好地理解頁面結構和內容關系。
 
使用原則:在使用分割線時,我們應遵循一些原則,以確保其有效地幫助用戶理解頁面的組成,同時避免過度使用帶來的視覺干擾。
 
1.分割線應當微妙而不過于顯眼。
它們在布局中應該容易被用戶注意到,但又不應成為焦點,以免分散用戶的注意力。
 
2.分割線應被視為次要的元素。
只有在留白等其他設計手法無法有效起到分割作用時,才考慮使用分割線。它們應當是布局中的輔助工具,而不是主導元素。
 
3.謹慎使用分割線。
過度使用分割線可能會導致頁面顯得混亂和復雜。相反,我們應該用分割線來創建信息分組,而不是簡單地分割每一個條目。通過審慎而恰當地使用分割線,我們可以有效地提升頁面的可讀性和用戶體驗。
圖片來源于參考文章
圖片來源于參考文章
 
線性分割三種類型:
通欄分割線、內嵌分割線和中間分割線。
 
1.通欄分割線(Full-bleed Dividers):通欄分割線通常橫跨整個頁面寬度,用于分隔彼此完全獨立的內容區域。這種分割線在視覺上非常顯著,能夠清晰地劃分出不同的內容區塊,使用戶能夠迅速區分不同部分的信息。通欄分割線通常用于區分文章、產品列表、服務介紹等獨立的內容區域。
 
2.內嵌分割線(Inset Dividers):內嵌分割線通常位于內容區域內部,用于分隔有錨點(如頭像、圖標等)的相關內容。這些錨點可以是圖片、符號或小的圖形元素,它們與分割線一起,幫助用戶更好地理解和區分內容。內嵌分割線常用于列表、卡片式布局、時間線等場景中,用于展示有關聯但不同類別的信息。
 
3.中間分割線(Middle Dividers):中間分割線位于兩個內容區域之間,用于分隔無錨點的相關內容。這種分割線通常比通欄分割線更細,更注重于在視覺上劃分空間,而不是強調內容的獨立性。中間分割線常用于文本段落之間、列表項之間或不同功能區域之間,以提供清晰的結構和層次。
設計方法論 I 超全面的頁面分割設計指南
 
 
在大多數情況下,當信息層級較為簡單(即信息層級≤2)時,使用分割線進行信息分割是一種有效的方法。然而,實際上,如果留白間距足夠大,我們也可以使用留白來達到類似的效果。通過增大留白間距,我們可以創造出清晰的視覺區域劃分,使得信息之間的界限更加明確。
 
與分割線相比,足夠大的留白間距可以避免多余的線性元素干擾,讓整體視覺效果更加清爽。這樣的設計選擇有助于提升用戶的閱讀體驗,使用戶更加輕松地理解和消化信息。
 
因此,在信息層級較簡單的情況下,我們可以靈活地選擇使用分割線或留白來進行信息分割。通過調整留白間距,我們可以達到與分割線相似的效果,同時保持整體設計的簡潔和清晰。
設計方法論 I 超全面的頁面分割設計指南
 
 
為了提升屏效,我們希望在一屏內展示盡可能多的信息。在這種情況下,分割線的設計顯得尤為重要,因為它們能夠有效地劃分信息區域,使內容更加清晰、易于理解。
 
通過使用分割線,我們可以將較多的信息條理化,使得用戶能夠更快速地找到所需的內容。與沒有分割線的布局相比,使用分割線能夠顯著提高信息的可讀性和可理解性。
 
在相同的信息布局下,分割線能夠將信息區域明確地劃分開來,防止信息之間產生混淆或交叉。這種劃分不僅使得每個信息塊更加獨立,而且提高了信息之間的對比度,使用戶能夠更輕松地識別和區分不同的信息。
 
因此,當我們的目標是提高屏效并展示大量信息時,分割線的設計是一個關鍵要素。通過合理地使用分割線,我們可以確保信息布局更加清晰、有序,從而提高用戶的閱讀效率和滿意度。(如下圖)
設計方法論 I 超全面的頁面分割設計指南
 
 
線性分割在移動端頁面設計中的應用場景廣泛,尤其是在需要清晰劃分信息模塊時。如微信的聊天列表中,線性分割被用來區分不同的消息條目。每條消息之間通過一條細線進行分隔,使得每條消息清晰可辨,方便用戶快速瀏覽和定位到特定的消息。
 
線性分割還常用在各類App的信息提示中,如果有多條消息需要展示,線性分割可以用來
區分不同的消息組。例如招商銀行APP中,當用戶收到多條未讀消息時,每條消息之間可以通過線性分割進行區分,使得每條消息清晰可辨,方便用戶逐一查看和處理。
 
在APP需要用戶填寫信息和設置的表單頁面中,線性分割可以用來區分不同的輸入字段或信息區域。這有助于用戶更清晰地了解需要填寫的信息,提高表單的填寫效率和準確性,比如站酷的設置頁面(如下圖)
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
卡片分割的定義:卡片分割設計主要通過將內容或功能區域劃分成獨立的“卡片”來進行信息展示和組織。每個卡片通常包含相關的內容或功能,并且與其他卡片通過一定的間距或線性分隔進行區分。
 
卡片分割設計具有以下優勢:
 
1.內容封裝:卡片分割設計將相關內容或功能封裝在一個獨立的卡片內,使得每個卡片成為一個獨立的信息單元。這有助于保持頁面內容的清晰和整潔,方便用戶瀏覽和理解。
 
2.明確邊界:每個卡片通常具有明確的邊界,通過邊框、陰影或間距等元素來區分不同的卡片。這種邊界的存在使得每個卡片在視覺上相對獨立,方便用戶進行區分和識別。
 
3.靈活布局:卡片分割設計具有很高的靈活性,可以根據需要自由調整卡片的大小、位置和排列方式。這使得設計師可以根據不同的設計需求和用戶習慣來靈活調整卡片的布局,以達到最佳的視覺效果。
 
4.強調重點:通過不同的視覺處理手法,如改變卡片的顏色、大小或樣式等,可以突出顯示重要的卡片或內容。這有助于吸引用戶的注意力,引導他們關注到關鍵信息。
 
卡片的基本構成:卡片是一個獨立的主題性容器,旨在將內容和操作組合在一起。它可以包含多種元素,如容器、縮略圖、標題、副標題、富媒體、輔助文字、按鈕和圖標按鈕等。這些元素并非必須全部存在,而是根據具體需求進行選擇和配置。無論選擇哪些元素,它們都會以易于掃描和操作的形式整齊地放置在卡片上。這種設計使得卡片成為一個靈活且高效的信息展示工具,適用于各種場景和應用。
設計方法論 I 超全面的頁面分割設計指南
 
 
卡片分割常見的類型:卡片分割可分為、通欄卡片和非通欄卡片
 
1、通欄卡片:其特點是卡片占據整個頁面寬度,沒有左右邊距。通欄卡片的設計可以提高布局的靈活性,使得頁面內容更加寬敞和大氣。同時,通欄卡片也可以更好地突出展示單條內容,引導用戶的視線,提高閱讀效率。
 
2.非通欄卡片:與通欄卡片相比,它會在卡片的左右兩側留有邊距,不完全占據整個頁面寬度。這種設計方式可以使得頁面內容更加有層次感和組織性,同時也有利于突出顯示某些關鍵信息。
設計方法論 I 超全面的頁面分割設計指南
 
 
通欄卡片
通欄卡片相較于非通欄卡片,其設計特點在于去除了左右兩端的留白,僅保留上下邊距,從而提供了更大的展示空間。這種設計使得卡片內的內容能夠占據整個頁面寬度,進一步增強了內容的視覺沖擊力。在通欄卡片中,卡片與背景的關系通常通過一條背景色塊來抽象表現,這種簡潔的處理方式避免了過多的視覺元素干擾,使得頁面整體看起來更加整潔和統一。
 
通欄卡片可以被視為在極簡列表式和傳統卡片式設計之間的一種折中選擇。它繼承了卡片式的分層方式和強交互性,使得用戶能夠輕松地瀏覽和交互頁面內容。如下圖微博“關注”、微信“發現”頁面。
設計方法論 I 超全面的頁面分割設計指南
 
 
非通欄卡片
非通欄卡片通常采用帶圓角的設計形式,這種設計不僅賦予卡片一種柔和、圓潤的視覺效果,還增強了用戶的視覺舒適度。結合陰影效果以及四周的邊距,非通欄卡片巧妙地形成頁面留白,使得整體設計層次感更加豐富。
 
通過巧妙的投影設計以及前后顏色的精準設定,非通欄卡片成功地讓內容與背景之間產生視覺空間感,進一步強化了內容的立體感和層次感。這種設計技巧不僅提升了卡片的視覺吸引力,還使得用戶在瀏覽頁面時能夠更加輕松地區分和聚焦關鍵信息。
 
在頁面設計中,非通欄卡片的應用范圍十分廣泛。無論是用于展示文章、產品、圖片還是其他類型的內容,非通欄卡片都能夠通過其獨特的視覺效果和設計元素,為用戶帶來更加舒適、美觀的視覺體驗。同時,非通欄卡片還具有良好的適應性和靈活性,可以根據不同的設計需求和用戶習慣進行定制和調整,滿足不同場景下的應用需求。如下圖夸克“夸克日報”、APP Store“首頁”
設計方法論 I 超全面的頁面分割設計指南
 
 
選擇使用通欄分割線還是卡片分割,主要取決于你的設計目標和內容需求。以下是三個參考建議,幫助你做出更好的選擇:
 
1.當內容已有自然分割線時:如果你的主題內容本身就已經有明確的分割線,比如列表項、段落分隔等,那么采用非通欄分割會是一個好選擇??ㄆ梢郧逦亟缍總€內容塊,使主題信息層次更加分明,提高用戶的閱讀效率。
 
2.當內容類型多樣且占據較大空間時:如果單個主題內部包含了多種類型的內容,如文字、圖片、視頻等,且這些內容在垂直方向上占據了較大的空間(例如,內容長度超過屏幕高度的一半),使用非通欄分割會更加合適??ㄆ軌蛴行У厝Χ▋热莘秶?,為用戶提供一個明確的視覺邊界,幫助他們更好地理解和消化信息。
 
3.當需要增強橫向空間感時:如果你希望擴展頁面的橫向空間,或者暗示用戶可以橫向滑動頁面查看更多內容,那么非通欄卡片會是更好的選擇。非通欄卡片的設計能夠利用橫向內容連續性原則,幫助用戶建立頁面可以橫向滑動的意識,從而提升頁面的互動性和用戶體驗。如下圖知乎“發現”、站酷“推薦”。
設計方法論 I 超全面的頁面分割設計指南
 
 
卡片分割更適合圖文混排
卡片分割設計以其獨特的布局方式,成為圖文混排中的理想選擇。它能夠巧妙地將不同大小、媒介的內容統一呈現在一個界面中,實現了內容的多樣性與統一性的結合。這種設計不僅讓單屏區域能夠顯示更多內容,還通過合理的空間劃分,確保了文字和圖片之間的和諧共存,既維持了視覺的一致性,又巧妙地平衡了文字和圖片的視覺強度。因此,在需要同時呈現多種內容和媒介的場景中,卡片分割無疑是一種高效且美觀的解決方案。如下圖知乎“想法”、站酷“首頁”
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
留白分割的定義:留白分割是目前設計的主流趨勢,越來越多的產品在使用留白分割設計。留白分割主要通過增加間距的方式,利用人的視知覺原理(接近法則:人的大腦會傾向于把彼此靠近的元素視為一組),將信息進行自然的視覺分組。
 
留白分割具有以下優勢:
 
1.突出重點信息:通過增加間距,可以將關鍵信息與其他內容區分開來,使用戶更容易注意到。
 
2.提高可讀性:適當的留白可以使文字或圖形元素之間的界限更清晰,減少視覺干擾,從而提高用戶的閱讀效率。
 
3.增強設計感:留白可以為設計增加呼吸感,避免元素過于擁擠,使整體布局更加和諧、美觀。
 
當元素之間的間距保持均勻時,整個視覺呈現會顯得平衡且協調,大腦默認為一個整體。然而,一旦元素的橫向和縱向間距發生變化,我們的大腦會基于接近性法則,本能地將距離較近的元素視為一個整體或群組,這就是留白分割。(如下圖)
設計方法論 I 超全面的頁面分割設計指南
 
 
留白分割在
有規律且卡片樣式較多的頁面中表現尤為突出,在有大量卡片樣式的頁面中,每個卡片通常都包含一定的信息。通過留白分割,可以清晰地劃分每個卡片的信息區域,使用戶更容易區分和閱讀每個卡片的內容,增加呼吸感,避免元素過于擁擠,從而提高整體的可讀性。例如下圖中主流的音樂類App
設計方法論 I 超全面的頁面分割設計指南
 
 
相反,如果在沒有規律且頁面內容較多的情況使用留白分割,則會使頁面雜亂無章。比如下圖咸魚的“廣場”界面feed流中,圖片從1~9張都有的情況下,使用留白分割,頁面就會變得雜亂,影響視覺效果。而脈脈則采用了卡片式分割樣式,頁面模塊則相對清晰很多。
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
在我們界面設計中,我們應充分考慮信息條目的復雜度。當信息較為簡單時,利用留白分割,能夠創造出清爽且不受干擾的視覺體驗。但隨著信息復雜度的增加,留白分割可能不足以清晰地展現信息層次,此時,引入線性分割是一個有效策略,它能提升屏幕的利用效率,使信息條理更加清晰。
 
當信息復雜度進一步升級,例如已經運用了線性分割或涉及更多操作時,我們需要進一步強化信息條目之間的邊界感。這時,卡片分割是一個理想的選擇,它不僅能增強信息的視覺層次,還能提升條目的可操作性。
 
重要的是,選擇信息分割方式時,我們要明確:分割本身不是目的,而是為了構建清晰的版面邏輯
,通過悅目的信息秩序來更好地突出內容,實現最佳的信息傳達效果。因此,在決策時,除了考慮上述細節因素,還需全面評估整體版面效果和信息傳達效率。感謝閱讀,希望對您有用。
設計方法論 I 超全面的頁面分割設計指南

作者:工頭新一
鏈接:https://www.zcool.com.cn/article/ZMTYxMDk2NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

從碎片到系統:設計師必備的知識庫搭建指南

杰睿

瓷片區是我們設計師在平時的APP設計中經常遇到的設計需求,雖然只是界面中一塊較小的區域,設計看似簡單,但它涵蓋了用戶研究、設計心理、UI設計等多個設計知識點。瓷片區對于產品的推廣、品牌的傳播等也具有著重要的作用。我通過工作中的一些設計心得進行總結沉淀形成此篇設計指南,從多個維度探討剖析瓷片區的設計方法,希望能夠協助設計師更好的規劃設計產品,增強用戶的滿意度和粘性,為用戶帶來更為舒適流暢的實用體驗。文章若有不妥之處,還望共同交流指正。
 
前言
深度剖析|瓷片區設計指南
 
 
此篇文章通過講解關于瓷片區的一些認知以及設計手法的設計指南,來幫助大家更好的理解瓷片區設計的重要性和應用方法。作為產品設計過程中的考慮因素和規則不是一成不變的,希望在未來的設計中能夠有更多的方法和技巧指引設計師們完成更好更優秀的設計作品。
深度剖析|瓷片區設計指南
 
 
深度剖析|瓷片區設計指南
 
 
瓷片區是APP應用設計中經常出現的一款引導型組件模塊,主要在首頁主推內容區進行展示,和Banner區、金剛區并行三大運營板塊,其權重較Banner區和金剛區略低,一般放在兩者之下。瓷片區從外觀上看就像是一塊塊瓷片一樣組合“貼”在頁面中,構成一組排列在一起的運營廣告位,故統稱為“瓷片區”。例如京東商城、美團、攜程服務、個人中心等產品都含有瓷片區。
瓷片區可以在一個頁面區域內劃分出不同的組合,且每個區域內會包含產品主體視覺元素(圖片)、標題、介紹文案、標簽和背景等信息。瓷片區和banner作用較相似,但相較Banner區和金剛區使用更加靈活,應用場景較多。
深度剖析|瓷片區設計指南
 
 
深度剖析|瓷片區設計指南
 
 
瓷片區本質上就是運營內容區,它更接近于一個功能模塊的外部固定廣告位。它的展示內容雖然會隨著時間場景變化,但是代表的功能模塊是保持不變的,每個瓷片就是這個功能模塊的窗口,引導用戶進入對應功能模塊中。
瓷片區不僅較多在電商場景應用中,還可能出現在其他所有應用類型中。例如旅游、金融、娛樂生活等多類產品,但在工具類產品中卻不太適用。
1.金融類
金融產品如銀行應用、投資平臺等,往往包含復雜的服務和功能。此類APP中的瓷片區可用于展示金融產品、投資理財建議等。通過專業的圖表、數據和解析,運用圖形化的方式簡潔明了地傳達信息,幫助用戶幫助用戶快速理解產品特點,更好地了解市場動態,從而做出更明智的投資決策。
2.
生活服務類
在生活服務類APP中,瓷片區可以展示各類服務入口,如美食、旅游、休閑娛樂等。通過直觀的布局、明確的分類以及醒目的圖片,吸引用戶進行探索和預訂,幫助用戶快速找到所需服務,提升用戶體驗。同時根據用戶的瀏覽記錄和購買歷史,推薦相關的商品或服務?;蛘吒鶕脩舻牡乩砦恢煤蜁r間信息,推薦附近的餐廳、景點等,通過個性化的推薦方式能夠提升用戶的滿意度和粘性。
3.新聞資訊類
新聞資訊類APP中的瓷片區可用于展示熱門新聞、重要事件或專題報道。通過及時更新內容,瓷片區可以幫助用戶快速獲取最新信息,同時提高用戶對APP的依賴度和使用頻率。
4.虛擬類
對于軟件、游戲或數字內容等虛擬產品,瓷片區能夠通過創意插畫或圖形,增加產品的調性和趣味性,提升用戶體驗。
5.設計類
設計相關的應用或平臺使用瓷片區也可以展示設計作品、設計理念或者設計工具等,通過視覺藝術吸引目標用戶群體。
6.電商或商城類
在電商類APP中,瓷片區常被用于展示熱門商品、促銷活動等,通過精美的高質量產品圖片展示和吸引人的文案,直接影響用戶的點擊率和購買意愿,從而促成交易。
深度剖析|瓷片區設計指南
 
 
深度剖析|瓷片區設計指南
 
 
深度剖析|瓷片區設計指南
 
 
瓷片區類似于
一種產品服務展示,是主要負責流量導流功能,吸引用戶注意力,幫助業務推廣產品。瓷片區一般都位于用戶最容易點擊的區域,方便引導用戶點擊進入,使用戶更容易尋找自己所需產品。在現如今的產品設計中,瓷片區具有著十分重要的作用和意義。
1.流量引導與轉化
瓷片區是APP設計中不可或缺的組件,它是流量的入口和轉化點。通過精心設計的瓷片區,可以有效地吸引用戶的注意力,引導他們點擊并深入了解相關的內容或功能。這有助于提升用戶的參與度,同時增加APP內特定內容或服務的曝光率,從而促進流量的轉化。
2.引導用戶注意力
瓷片區通過展示商品圖、代言人等視覺元素,有效吸引用戶的注意力,起到引導用戶點擊和進一步探索的作用。
3.個性化推薦與用戶體驗
瓷片區通常也具備個性化推薦的功能,可以根據用戶的興趣和行為習慣,展示符合他們需求的內容。這種個性化的推薦方式不僅可以提高用戶的滿意度,還能增強用戶對APP應用的黏性。同時,通過優化瓷片區的交互設計和視覺呈現,可以提升用戶的使用體驗,使其更加便捷、舒適地瀏覽和選擇內容。
4.提升轉化率
由于瓷片區能夠集中展示多個促銷信息或功能模塊,它通常具有較高的轉化率,這對于提升用戶的購買行為或參與度是非常有利的。
5.增加產品留存率
良好的瓷片區設計能夠提升用戶的使用體驗,從而提高整個產品的留存率。
6.業務推廣與品牌展示
瓷片區是進行業務推廣和品牌展示的重要場所。設計瓷片區往往會考慮到美觀性和藝術性,這有助于提升產品的整體視覺效果,增強用戶對品牌的良好印象。通過出色的視覺展示核心產品或服務,幫助企業有效地傳達品牌形象和價值,吸引潛在用戶的關注。同時,結合特定的營銷活動或促銷策略,瓷片區還可以提升用戶的購買意愿,促進業務的發展。
7.數據收集與優化
瓷片區的設計和實施還涉及到大量的數據收集和分析工作。通過對用戶點擊、瀏覽等行為的追蹤和分析,可以了解用戶的偏好和需求,為后續的優化工作提供數據支持。這有助于APP不斷改進和完善瓷片區的功能和表現,提升整體的用戶體驗和效果。
深度剖析|瓷片區設計指南
 
 
在眾多產品中,通過瓷片區的設計能增加對商品、功能的曝光,使用戶群更愿意去購買或了解感興趣的商品、功能。設計師根據瓷片區導流入口-落地頁-轉化率設計,通過整個流程中收集數據,提升優化設計體驗,實現設計價值。
深度剖析|瓷片區設計指南
 
 
瓷片區是在一個APP中將一塊矩形區域內劃分出不同的矩形組合,每個二級矩形內一般會包含標題、介紹文字、主體視覺元素、標簽等信息,通過擺放推廣相關的內容吸引用戶點擊進入。
1.瓷片區是具有營銷性的功能區域
瓷片區在設計層面上是具體的運營模塊,而不是一種單純的設計形式。瓷片區是對于存在的產品進行流量擴充,是提高產品點擊率,是產品存在后方便調整流量使用。下圖中遮照區域是產品的核心功能區,不是簡單的營銷入口,不能被刪除,否則會影響用戶使用。
深度剖析|瓷片區設計指南
 
 
2.瓷片區是靜態固定的區域模塊
APP軟件中常出現功能列表頁,它是后臺獲取數據的入口,是一種整齊排列,一層層疊加的片區,可以以一個單獨模塊的形式出現,不是像瓷片區類似貼瓷磚組合呈現。在沒有產品展示的情況下瓷片區可以顯示空狀態,區域整體拼接結構不變,以靜態固定狀態顯示。下圖中頁面本身為功能列表,模塊性質本身不屬于營銷性質。
深度剖析|瓷片區設計指南
 
 
3.瓷片區不是金剛區
瓷片區不是設計形式,它的拼接表現形式不是只限定于瓷片區可以用,在任何其他位置和模塊都可以采用這種樣式進行設計。瓷片區的功能權重較金剛區略低,金剛區較多的為產品核心功能入口,而瓷片區多為運營活動的營銷導流入口。
深度剖析|瓷片區設計指南
 
 
4.瓷片區不是快速入口
我們經常會看到一些快速入口會像瓷片區一樣做成卡片拼貼的樣式,但不管樣式如何改變,瓷片區和快速入口在內容承載上有著本質的區別。
瓷片區有較強的誘導性,通過展示的信息元素、圖片,如商品圖片、產品代言人,來
誘發用戶關注并點擊,在刪除后不會影響產品的正常使用??焖偃肟谒饕獞獙Φ氖?/div>
用戶的主動行為,通過把功能入口密集的羅列出來方便用戶進行查找和點擊。它主要以展示主題入口相關圖形為主,可以是圖標也可以是圖片、圖形 ,如果刪除會影響產品使用。
深度剖析|瓷片區設計指南
 
 
深度剖析|瓷片區設計指南
 
 
深度剖析|瓷片區設計指南
 
 
在瓷片區設計中,一般常見的類型分為3種:實物照片類、插畫類、淘寶電商類
1.實物照片類
優點:識別度高,不需要明確的文案標注,圖片代入感強,帶有圖片本身屬性的名稱和樣貌、可復用性強,設計效率較高。
缺點:對圖片素材要求高,圖片顯示有細節。
場景:對實物圖需求較大的應用產品類型,如外賣、家居、服裝、旅游等產品使用較多。
深度剖析|瓷片區設計指南
 
 
2.插畫類
優點:可高度描述瓷片區的運營意義,精美的插畫有助于提升細膩性,產品的細節品質和趣味,插畫本身色彩明度低飽和度高,圖形表現活躍,風格可控。
缺點:偏抽象的產品,沒有合適的實圖可替代,此類產品多以插畫的形式去表現。矢量插畫類頁面對周圍環境,所表現的內容需要進行一對一繪制,需要高度的概括主題的圖形。由于針對屬性比較強,所以難以復用。同時圖形構圖繪制時間較長,時間成本較高,繪制時需要特別注意對關鍵信息的提煉以及識別度。
場景:對設計風格有明顯要求,如金融、理財、教育、生活等產品。
深度剖析|瓷片區設計指南
 
 
3.淘寶電商類
優點:根據用戶反饋數據提供高頻輸送內容,與瀏覽數據時時對應,符合用戶心智,轉化率更高。
缺點:通過大數據真實反饋內容推動產品營銷,每個產品單獨以個性化形式展示,其他商家產品難以復制,具有技術實現難度。
場景:對設計千變萬化,定制多樣,常用產品為電商類等。
深度剖析|瓷片區設計指南
 
 
深度剖析|瓷片區設計指南
 
 
在進行瓷片區設計時,我們往往需要投入更多的精力進行細致化設計。而瓷片區究竟是由哪些元素組成呢?
背景、圖片、文字是瓷片區主要構成元素,其中也可以運用插畫、圖標、標簽、裝飾等進行搭配使用,作為設計延展元素。背景、圖片、文字在瓷片區一般必須出現,他們是對產品展現、描述或對營銷目標表達的關鍵因素,插畫、圖標、標簽、裝飾等可根據設計風格、飽滿度、產品需求上加以使用,豐富視覺,突出特殊標識。
深度剖析|瓷片區設計指南
 
 
深度剖析|瓷片區設計指南
 
 
瓷片區是一個需要視覺比較突出的組件,擁有較強的視覺感才能起到引導用戶點擊的效果。如何設計好瓷片區,從了解瓷片區各個元素設計開始。
1.框架布局
要了解瓷片區的設計方法,要先了解瓷片區的布局。在整個產品組件區域內,需要有
效分配空間給不同的瓷片。首先在前期設計中,要優先確定瓷片區框架的四周內邊距,然后再根據要放置的瓷片數量和重要性進行合理分配,一般可將模塊拆分出 2*2、3*2、4*2、4*1的基本網格系統。
深度剖析|瓷片區設計指南
 
 
如果各個模塊的重要性不同,可以將多個小瓷片按照縱向或橫向排列合并為一個大瓷片,或將大瓷片拆分成多個小瓷片,以瓷片區域的大小來形成視覺權重的區分。
深度剖析|瓷片區設計指南
 
 
布局的結構的劃分是整個瓷片區設計的主體,除了以上常用的最基本構圖方法外,還有很多不同的瓷片分布方式,要通過不斷的積累實驗發揮自身創新能力,設計出更豐富的瓷片區展示形式。
2.元素排版
單個瓷片區內的元素一般由背景、文字、圖片/圖標/標簽/裝飾構成。常見的排版方式一般有左右排版、上下排版、對角線排版、Z字型排版這四種通用的排版形式。
(1)左右排版
一般在配圖為圖片、圖標時適用,一般一行顯示一塊或兩塊瓷片。
深度剖析|瓷片區設計指南
 
 
(2)上下排版
采用上文下圖的形式,一般在界面的功能入口較多時適用,一般一行顯示不少于3塊瓷片。這種元素排版,在營銷型展示上一般為上圖下文,偏功能型的展示則為上文下圖。
深度剖析|瓷片區設計指南
 
 
(3)對角線排版
文字和圖片呈對角線布局,一般一行顯示兩到三塊瓷片,此種布局可顯示較多文字信息。
深度剖析|瓷片區設計指南
 
 
(4)Z字型排版
文字、圖片和標簽成Z字型排布,文字可跨度到圖片區域,一般一行顯示兩到三片瓷片,此布局也可顯示較多文字。
深度剖析|瓷片區設計指南
 
 
根據業務需求,在不同場合可以選擇一種以上布局排版組合使用,使得版面更加豐富,排版上也能夠有所變化,突出優先級,增加設計美感,做出更符合產品需求的設計效果。
3.文字使用
文字部分是瓷片區重要的組成內容,應該簡明清楚,準確傳達核心信息。文字與圖片的合理擺放能夠使得信息層次清晰易讀。
(1)文字的大小
文字是瓷片區重要的組成部分,一般從文字尺寸上可分為標題、副文本兩種大小,副標題、標簽、價格可統稱為副文本,他們的尺寸基本一致的。由于受瓷片區內文本量尺寸限制,可選擇的文字大小范圍較小,所以一般會定義兩三種規格的字段使用。在APP端主標題文字字號建議在30-34px,副文本文字建議在24-26px,而其他說明性副文本文字不能小于20px。
深度剖析|瓷片區設計指南
 
 
(2)文字的位置
在瓷片區內,文字放置的位置在左側、上側和左上側,如果根據視覺排版需要也可以把文字放在右側、下側等,排版上沒有固定要求。同時,文字排版還需要保證跨瓷片對齊。雖然在不同瓷片區中不同的對齊方式可以增加視覺變化,如果一個瓷片一個樣子,容易造成雜亂不統一,在設計中還需盡量保證跨瓷片文字對齊。
深度剖析|瓷片區設計指南
 
 
(3)文字的層級
瓷片區主標題和其他副文本文字設計要做好層級區分,可以通過文字大小、粗細、顏色等體現主次關系,尤其要注意文字顏色的使用問題,主標題相較于其他副文本文字顏色要更清晰更突出。副文本作為主標題的輔助和延續,不能喧賓奪主,主次關系混亂。而標簽的文字也要符合層級劃分,根據產品屬性和調性,按需求設計符合的標簽文字樣式。
深度剖析|瓷片區設計指南
 
 
(4)文字的分類
瓷片區文字一般可分為非標簽類文字和標簽類文字。非標簽類文字是主標題加基礎副文本構成。
深度剖析|瓷片區設計指南
 
 
標簽類文字可分為主副文字兩個板塊,標簽為彩色標簽或透明色標簽,結合業務產品屬性和需要突出的文案,分別對應不同的標簽。主要文案一般位于瓷片區域的左上角和上部垂直居中的位置,副文案一般位于左下角、右側或下部視覺較弱的位置。
深度剖析|瓷片區設計指南
 
 
4.圖片應用
圖片是瓷片區的核心元素,需要選擇高質量的實物實景圖或者創意插圖,確保圖片清晰、美觀且能夠真實反映產品特點。
(1)實物、實景圖片
瓷片區中的產品圖片大多為商品實物圖或實景圖,是用戶購買的真實實物產品或地區實景,具有較強的代入感,圖片要有高質量的標準,整體品質精美,畫面清晰美觀,摳圖干凈舒適,在多張圖片使用的情況下,還需要保證圖片視覺感受風格大小一致,這樣才能吸引用戶的點擊。
深度剖析|瓷片區設計指南
 
 
(2)插畫圖
瓷片的圖片如果偏抽象、沒有合適的實物圖或者設計要求的原因,圖片也可以矢量的插畫或圖標形式替代,例如部分瓷片運營位需要賦予更多的視覺展示性功能,就可以為其單獨進行插畫或圖標設計,用表意的圖形增添產品調性和趣味性。
深度剖析|瓷片區設計指南
 
 
5.背景
瓷片的背景主要為了
充實模塊,營造氛圍,一般在背景色彩形式上常使用高明度低飽和的純色或者選用漸變色為主。
(1)純色背景
可選取跟圖片或插圖主色調鄰近色彩進行設計,保證模塊主體突出,減少背景視覺影響。
深度剖析|瓷片區設計指南
 
 
(2)漸變色背景
可同色系漸變,選取同種顏色,飽和度發生變化。相鄰色系漸變選取相鄰色相和飽和度變化,也可選定淺色或向白色過渡,不論采用何種背景都不應干擾主體元素的突出。
深度剖析|瓷片區設計指南
 
 
(3)淺灰色背景
一種近似乳白色,和底板顏色有細微差別即可,期望用戶能夠看到模塊化的層級處理而起到襯托作用。
深度剖析|瓷片區設計指南
 
 
(4)白色背景
視覺上展現沒有顏色或者只存在部分線框,畫面整潔干凈屬于百搭背景,在產品中使用較為普及。
深度剖析|瓷片區設計指南
 
 
(5)全景配圖背景
配圖覆蓋整個瓷片區域,較多的適用于外賣類、旅游類、家裝類產品,使用戶快速記憶了解產品,點擊進入形成流量轉化,提高用戶轉化率,核心成交率。
全景配圖圖片素材要求高質量,圖片一般要選取1000*1000px以上分辨率圖片,滿足多個終端顯示效果。圖片要求色調明亮,飽和度高,圖片色彩視覺感受和諧。畫面主體約占面積1/2,要保留留白區域,背景簡潔呼吸感強,有空間感。全景配圖因為圖片整體色彩元素呈現豐富,背景復雜,一般可以添加蒙層提高文案閱讀和標識性。
深度剖析|瓷片區設計指南
 
 
(6)局部配圖背景
這時瓷片區會一分為三,三分之二的位置放置文案,配圖約占據三分之一區域位置,這種排布適用于大多數產品,使得產品左右和諧平衡。而這類圖片素材和插圖要求高質量,色調明亮,飽和度高。插圖圖標既要滿足品牌色及延展,插圖圖標樣式風格也要保持一致,繪制注意提煉文案信息,圖文表意一致,概括性強,統一圖片或插圖的高度和視覺面積。
深度剖析|瓷片區設計指南
 
 
6.裝飾點綴
在設計瓷片區時還可以加入裝飾點綴,這是為了烘托模塊氛圍,讓畫面更豐富飽滿,給用戶帶來不一樣的視覺感受。
深度剖析|瓷片區設計指南
 
 
深度剖析|瓷片區設計指南
 
 
寫在最后
當我們在開始設計瓷片區時,首先需要明確瓷片區的目標和功能,一定要考慮當前產品與展示的內容是否匹配,包括用戶目標的受重點是否需要瓷片區,這有助于確保設計方案與業務需求一致。
其次要注重細節,在設計時需要注意配圖的質量、尺寸和視覺面積的統一性,圖片之間的差異性以及關鍵文案信息的提煉。
在瓷片區的設計時還應與產品應用的整體風格和品牌形象保持一致,以增強用戶對品牌的認知。瓷片區的設計不僅要考慮美觀,還要考慮如何有效地傳達信息和提升用戶體驗,考慮用戶的操作習慣和視覺習慣,確保界面的直觀性和易用性。
最后完成設計后要進行用戶測試和收集反饋,根據用戶的實際使用情況進行優化。
瓷片區設計是一個既考驗創意又注重細節的過程,在廣泛的應用場景中,我們需要根據不同的產品類型、用戶需求和業務目標進行靈活應用,創建出既美觀又實用的瓷片區。通過合理規劃和設計瓷片區,可以有效提升產品的用戶體驗和商業價值。
感謝閱讀,希望這篇文章能對大家有所啟發,創作更有價值和影響力的設計作品。


作者:七色熒火
鏈接:https://www.zcool.com.cn/article/ZMTYxMzQ4MA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

交互設計的核心:用戶體驗與創新思維的融合

杰睿

在數字化時代,交互設計(Interaction Design)已成為產品成功的關鍵因素之一。無論是移動應用、網站還是智能設備,優秀的交互設計都能為用戶帶來流暢、直觀的體驗。今天,我想和大家探討交互設計的核心要素,以及如何通過創新思維提升用戶體驗。

1. 以用戶為中心的設計理念

交互設計的核心是“以用戶為中心”。設計師需要深入理解用戶的需求、行為和痛點,通過用戶研究、原型測試等方法,確保設計能夠真正解決用戶問題。例如,簡潔的導航、清晰的反饋和一致的操作邏輯,都是提升用戶體驗的基礎。

2. 創新與功能的平衡

在追求創新的同時,設計師需要確保功能的實用性和易用性。過度復雜的設計可能會讓用戶感到困惑,而過于保守的設計則可能缺乏吸引力。如何在創新與功能之間找到平衡,是每個交互設計師面臨的挑戰。

3. 情感化設計的力量

交互設計不僅僅是功能的實現,更是情感的傳遞。通過色彩、動畫、音效等元素,設計師可以創造更具吸引力和情感共鳴的體驗。例如,微交互(Micro-interactions)的巧妙運用,能夠增強用戶的參與感和滿意度。

4. 跨平臺與多設備的一致性

隨著用戶使用設備的多樣化,跨平臺設計變得越來越重要。設計師需要確保在不同設備和平臺上,用戶都能獲得一致且無縫的體驗。這不僅需要技術上的支持,更需要設計思維的全局觀。

5. 數據驅動的設計優化

通過數據分析,設計師可以了解用戶行為,發現設計中的不足,并持續優化產品。A/B測試、熱圖分析等工具,能夠幫助設計師做出更科學的決策,提升產品的整體表現。

31.png

結語

交互設計是一門融合藝術與科學的學科,它需要設計師不斷學習、實踐和創新。無論是新手還是資深設計師,我們都應保持對用戶需求的敏感,以及對技術趨勢的關注。期待大家在評論區分享自己的見解和經驗,一起探討交互設計的未來!


希望能激發大家的討論和思考!如果你有更多想法或案例,歡迎留言交流

 

 

日歷

鏈接

個人資料

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

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
欧美体内she精视频| 日本午夜精品久久久| 国产精品久久久久无码av| 国产精品视频免费在线| 国产精品国产自产拍在线| 亚洲高清av在线| 色婷婷在线播放| 日韩精品免费看| 人人爽久久涩噜噜噜网站| 欧美色图一区二区三区| 国产欧美在线视频| 久久这里只有精品99| 日韩一区二区免费在线电影| 亚洲精品黄色| 国产在线激情| 亚洲xxx视频| 免费高清在线观看| 国产无遮挡裸体免费久久| 国产成人精品免费看| 亚洲精品456在线播放狼人| 精品中文字幕一区二区小辣椒| 激情欧美日韩一区二区| 国产一区一一区高清不卡| 久久久加勒比| 91高清视频在线免费观看| 91精品日本| 91免费的视频在线播放| 欧美男男青年gay1069videost| 黄色片免费在线观看| 国产福利电影一区二区三区| 99免费在线观看视频| 国产91精品不卡视频| 中文精品一区二区| 狠狠做深爱婷婷综合一区| 日韩精品视频三区| 日韩伦理一区二区三区av在线| 国产一区二区三区高清播放| 日韩成人高清在线| 国产精品一区二区三区四区在线观看| 久久亚洲精品中文字幕| 草莓视频成人appios| 亚洲婷婷国产精品电影人久久| 亚洲精品乱码久久久久久蜜桃91| 欧美一级淫片007| 国产在线视频精品一区| 欧美日韩在线播放一区| 日本动漫理论片在线观看网站| 久久精品国产亚洲精品| 国产日韩三区| 国产精品jizz在线观看麻豆| 椎名由奈av一区二区三区| 亚洲午夜久久久久中文字幕久| 亚洲国产精品精华素| 日韩欧美一区二区三区四区五区| 国产精品第三页| 久久久久久久av| 自拍偷拍亚洲区| 欧美不卡三区| 亚洲无av在线中文字幕| 国产丝袜一区二区三区免费视频| 欧美精品一二| 欧美亚洲色图校园春色| 日本视频在线观看| 欧美大荫蒂xxx| 91精品国产91久久久| 中文字幕中文字幕在线中高清免费版| 日韩中文理论片| 欧美成人国产va精品日本一级| 国产欧美日韩视频一区二区| 亚洲女同ⅹxx女同tv| 亚洲欧美色婷婷| 91成人在线精品视频| 久久精品国产精品青草色艺| 久久精品亚洲欧美日韩精品中文字幕| 91成人免费网站| 91久久久免费一区二区| 成人精品亚洲人成在线| 久久久水蜜桃| 亚洲精品永久免费精品| 国产日韩中文在线中文字幕| 欧美成人一区二区三区片免费| 欧美人体视频| 国产精品久久久久久久久免费丝袜| 99久久99久久精品国产片桃花| 亚洲电影网站| 久久久久国产精品麻豆| 国产精品成人一区二区艾草| 久久精品福利视频| 国产精品毛片久久久久久| 蜜桃成人av| 亚洲欧洲偷拍精品| 亚洲最色的网站| 久久久人成影片一区二区三区| 亚洲第一精品久久忘忧草社区| 亚洲精品97久久| 国产精品电影一区二区| 亚洲午夜电影| 久久久久久久一| 国产不卡视频在线| 国产一区二区你懂的| 国产综合动作在线观看| 亚洲老女人视频免费| 日本一区二区高清| 日韩中文在线不卡| 日本最新高清不卡中文字幕| 国产精品99久久久| 蜜桃一区av| 免费毛片在线不卡| 国产精品高潮呻吟久久| 色域天天综合网| 91搞黄在线观看| 精品国产露脸精彩对白| 国产伦精品一区二区三区免费优势| 久久久久成人精品免费播放动漫| 在线观看日韩专区| 五月天丁香久久| 日韩成人伦理| 亚洲最大成人在线| 中文字幕日韩欧美在线视频| 欧美96一区二区免费视频| 成人免费视频视频在线观看免费| 欧美精品激情blacked18| 日韩美女免费观看| 亚洲福利视频免费观看| 久久国产日韩欧美精品| 日韩一区免费观看| 久久91超碰青草是什么| 成人免费淫片视频软件| 亚洲3区在线| 日韩中文字幕视频| 99久久精品费精品国产| 国产伦精品一区二区三区精品视频| 欧美videos粗暴| 日韩二区三区在线| 亚洲欧美日韩国产综合| 精品国产成人系列| 欧美大胆a视频| 日韩精品电影一区亚洲| 欧美精品一区二区久久久| 顶级网黄在线播放| 欧美大香线蕉线伊人久久| 影音先锋在线视频| 欧洲亚洲一区| 久久久之久亚州精品露出| 国产精品女主播一区二区三区| 国产美女性感在线观看懂色av| 成人免费直播live| 久久国产精品亚洲| 性感女国产在线| 亚洲成人在线视频播放| 美女在线一区二区| 亚洲成av人片一区二区梦乃| 精品一区二区精品| 亚洲欧洲国产精品久久| 蜜乳av一区二区三区| 91亚洲精品一区二区乱码| av日韩国产| 欧美电影在线观看一区| 国产精品午夜电影| 无人区乱码一区二区三区| 欧美日韩国产麻豆| 丁香一区二区| 国产精品久久久久久久午夜| 欧美精品日韩少妇|