欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

首頁

B端中后臺UI設計規范定義 & 實踐經驗總結

杰睿

在B端產品設計中,中后臺UI設計規范的建立對于提升設計效率、保證用戶體驗一致性以及優化開發流程至關重要。本文從設計規范的意義、原子設計理論、后臺設計系統搭建以及Design Token應用實踐四個方面,詳細總結了B端中后臺設計的要點和方法,供大家參考學習。

今天從以下4個方面,結合7年B端設計工作經驗,為大家分享原子設計理論和中后臺設計系統搭建的應用實踐。

01 搭建設計規范的意義

分別站在整個產品設計研發流程中各個角色的不同角度,在工作中可能會有以下“抱怨時刻”:

由此,體現出搭建設計規范的作用和意義:

① 產品側

?個產品不同分?多個團隊完成的時候,可以保證產品團隊使?同?份設計規范快速完成產品原型設計。保證可復?模塊的交互體驗的?致性。

② 設計側

通過設計規范去解決?部分需求,極?提?效率解放雙?,讓設計師能去做?些更發揮創意和想象?的設計。

③ 開發側

形成開發資產,可以提升研發效率,降低維護成本。開發?程師?需再重復開發同?個組件,只需要去組件庫?調?即可,配合業務邏輯,?效完成界?開發,做到開箱即?。

④ 測試側

標準化的設計規范,是測試?員最喜歡看到的。例如,設計規范規定彈窗 footer 區按鈕組居右,那么測試?員只要測到不居右,就可以給產品提優化建議了。

02 原子設計理論

設計規范中具像化的環節是設計組件化,最早可以追溯到?業?命時期,福特創造的流?線?產?式。福特將汽?分解成零部件,再把零部件模塊化組裝,這?創舉極?的提?了?產效率。

根據資料顯示,T型?是世界第?款?量使?通?零部件,并進??規模流?線裝配的汽?。這種?式極?地提?了T型??產效率,降低了?產成本。

1914年,福特已經可以做到93分鐘?產?輛汽?,?同期其他所有汽??商的?產能?總和也不及于此。

到了1920年代,T型?的價格甚?降到300美元?輛(問世之初T型?的售價僅需850美元,?同期的競爭對?則通常為2000-3000美元?輛)。

原子設計理論最初來源于化學領域,這一點從名字可以聽出來。在化學中,所有的物體都是由原?構成,原?組合構成分?,分?組合構成有機物,最終形成了宇宙萬物。

2013年前端?程師 Brad Forst將此理論運?在界?設計中,形成?套設計系統,包含 5 個層?:原?、分?、組織、模板、??。當公司的業務產品逐漸擴?時,我們就需要制定?套完整的設計系統,提升設計和開發的協作效率,統?所有設計師的輸出物。

總之,將設計拆分成?些基本元素,例如?個按鈕、?個彈窗,再根據業務需求、產品邏輯重新組裝,形成最終的產品,這就是原?設計理論(組件化設計),區別于整體設計制造的?種新的?作流程。

03 后臺設計系統搭建

① 設計系統搭建—原子

原?是物質的基礎組成部分,是構成設計系統的最基礎元素。

在界?中以「元素」的形式存在,例如:顏?、?字、圖標、分割線、間距、圓?、陰影等。

色彩體系

中后臺產品的?彩體系主要分為3類:品牌?、功能?、中性?。

  • 品牌色:大型公司往往都會有專屬色號的品牌色,比如阿里橙色、美團黃色和騰訊藍色,以體現產品特性、傳播理念。在界面中主要體現在關鍵行動點、選中狀態、重要信息和插畫元素等。
  • 功能色:旨在表示某種狀態提示,這類顏色往往是深入人心的,比如綠色代表成功,紅色代表失敗等等。
  • 中性色:還有一種是不需要傳遞顏色代表的特殊含義的,稱為中性色,即黑白灰。

B端網站體現理性和效率特性,往往會使中性色占據九成以上,應用在背景、邊框、文本和分割線。下圖為顏色定義示例(考慮暗色模式)。

文字體系

B端產品的?字系統設計?標:增強閱讀體驗、提升信息獲取效率,字體是體系化界?設計中最基本的構成之?。

字體的??、字重、?彩區分體現界?信息的層級關系。

  • 整體思路:在同?個系統的 UI 設計中先建?體系化的設計思路,對主、次、輔助、標題、展示等類別的字體做統?的規劃,再落地到具體場景中進?微調,最終確定建?體系化的設計思路,有助于強化字體落地的?致性。
  • 少即是多:在視覺展現上能夠?盡量少的樣式去實現設計?的。避免毫?意義的使??量字階、顏?、字重強調視覺重點或對?關系,提?字體應?的性價?,減少不必要的樣式浪費。
  • 拉開對?:在需要拉開差距的時候可以嘗試在字階表中跳躍地選擇字體??,會令字階之間產??種微妙的韻律感。

下圖為字階應用規范示意:

陰影、圓角、線條

陰影:在B端界?中,有些特殊的元素會使?到陰影,從陰影中我們可以看出物體距離平?的?度,距離平?越?的物體陰影越?;

圓角:從直?到圓?給?帶來從嚴謹冰冷到柔和親切的?理感受,在B端界? 中,常?2-8px圓?;

線條:分割模塊及輔助定位。

② 后臺設計系統搭建—分子

在界?中,分?是按照規律組合起來的元素,如:按鈕、搜索框、選擇器等。

以按鈕為例,?字、?塊、圖標和間距這些抽象的原?產?關聯組合成分?:圖標、?字傳達含義;顏?、圓?傳遞特性;間距、尺?定義規范。

③ 后臺設計系統搭建—組織

分?+原?組合成更復雜和可拓展的組織(區塊組件),如搜索區、卡?列表區、表單區、數據統計區等。

④ 后臺設計系統搭建—模板

由原?+分?+組織構成的更復雜更具拓展性的模塊,構成了典型??模板,如列表?、詳情?、異常?、Dashboard等。模板在設計系統中承載的作?就是保證設計?案在原型各階段的?致性,專注??底層架構,并?具體??。

⑤ 后臺設計系統搭建—頁面

帶業務邏輯的場景案例,如標注場景、權限管理、詳情設置等,將??模板填充真實的?字、圖?后形成??,即帶交互邏輯的?保真原型圖,真實內容使設計系統有了“?命” 。

04 Design Token應用實踐

雖然通過設計規范可以對產研流程提效,但在開發還原中還是會經常遇到?些棘?的問題。

開發還原準確度難以保證,走查幾輪還有有細節問題沒有修復;

領導要求開發暗色模式,或者客戶要求換一套主題色,找到替換的工作量巨大;

設計一處變更,涉及多個頁面模塊,維護工作量大。

為了解決和優化上述的問題,Design Token 應運??。它可以解決產品設計和開發過程中的細節、變更和?格?致性的問題,有效提?產研團隊設計質量和協作效率。

① Design Token介紹

“Token”原本的意思是“令牌,指令”,與 Design 連在?起指“設計變量”。在?程邏輯中?于?戶身份與服務器端進?驗證,?在設計體系中,Design Token 則可以簡單理解為封裝的視覺樣式參數。它通過規定樣式參數,并通過?套符合設計師、?程師理解的統?的命名規則,為這些樣式參數的定義名稱。

Design Token優勢

設計語義更易理解:幫助設計師和開發建?統?語?,設計?案更加?致。從下到上的Design Token命名思路。

主題?膚?鍵替換:主題?膚的替換可以?在兩個維度,?是淺?模式和暗?模式的替換,?是不同品牌?之間的替換。我們可以將不同主題的同?個場景下的顏?使?同?個 Token 命名,達到?鍵換膚的效果適配不同客戶?案。

設計變更?效維護:替代傳統?作流?鍵替換效果。例如修改二級文本的顏色,傳統工作流需要先修改設計規范,修改設計稿,然后輸出給開發,開發逐一更新代碼,完成后提交給設計師進行走查驗收。而當使用Token之后,只需要更新Token參數,就可以直接導出JSON給開發,一鍵自動更新。提高效率不止一點點。

設計效果精準還原:代碼編輯器?動化提示顏?選擇,如不正確則產?報錯。

總結一下使用Token開發的優勢:

  • 設計語言 更易理解
  • 主題皮膚 一鍵替換
  • 設計變更 高效維護
  • 設計成果 精準還原

② Design Token應用流程

第一步:提煉token元素;

第二步:定義命名規則;

第三步:整理Design Token資產表;

第四步:開發與應用。

接下來具體說說如何為Design Token命名,命名方式目前并沒有絕對統一的要求,不過有一定的邏輯規則,可以由設計師找前端開發一起商量出一個都能通俗易懂便于理解的命名規則,

舉個例子:

1.Token名稱由大到小排序,中間用“-”分隔;

2.Token前綴可自定義添加公司簡稱,如“–el-xx” 、“–ant-xx”、“–td-xx”。

為了更好的統一規范,應用Token,建議成熟的互聯網公司設計團隊搭建自己的低代碼平臺。一鍵更換主題,盡在指尖。

最后

以上就是從四個方面歸納的B端設計規范定義和總結,希望對你有所幫助!

本文由人人都是產品經理作者【Clippp】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

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

如何提升UI設計的高級感

杰睿

編輯導語:我們平常會使用很多APP,久而久之我們會發現一些APP的設計非常的相似;一個有新意、精致的APP界面可以讓用戶產生很深的影響,對產品的形象也有一定的幫助;本文作者分享了關于如何提升UI設計的高級感的方法,我們一起來看一下。

在互聯網產品日趨成熟的今天,你會發現所有的App越來越像,似乎是同一套模版設計出來的產品;而這種普適化的設計會導致同質化嚴重,使得設計不精致,產品沒有氣質和品牌感。

一個App設計是否精致,是否富有設計感,在于它的細節,這就意味著我們在進行設計的時候,要從細微之處著手,從多方面去鉆研如何創造出打動人心的UI設計。

本文總結了12個簡單直觀的提升設計感的小細節,一起來學習。

一、使用顏色深淺構建層次結構

在對UI 文本進行樣式控制的時候,最常見的錯誤莫過于過度依賴字體大小差異來營造對比;單純使用字體大小對比,所營造的對比并不夠,嘗試結合色彩和字重來營造更好的對比效果。

每種顏色都有一個視覺權重,這有助于在內容中建立層次結構;通過使用顏色的深淺,為元素賦予不同的重要性。

如果可以的話,你甚至可以采用兩到三種顏色:

  • 主要內容使用深灰色(諸如標題,但是不要用純黑);
  • 次要內容使用灰色(比如商品介紹);
  • 輔助性內容采用淺灰色(比如發布日期);

類似的,在UI設計的時候,通常兩種不同的字重足以營造出優秀的層次感:

  • 大多數的文本采用正常的字重(400到500,具體取決于字體);
  • 對于需要強調的文字采用較重的字重(600到700,具體取決于字體);

▲主標題字重為600,其他標綠點的文字字重都為400

應當盡量不要讓正文部分字重低于400,因為這一部分字體本身尺寸已經較小,低于400會使得可讀性不佳。

如果你依然需要降低字重,那么不妨讓字體色彩更淺一點,或者替換成其他識別度較強、字重相對較小的字體。

灰色文字在無彩/彩色背景下要分開處理:

不要在有色背景上使用灰色的文本,在白色背景下,將黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不錯的淡化其視覺效果的做法。

但是在彩色背景下,想要降低和背景色之間的對比,通常有兩種方法:

一是降低白色文本的不透明度;二是讓文本逐步接近背景色,而不是改為灰色。

▲左圖設計師職位信息為白色文字降低不透明度,右圖為和背景同色相高明度的顏色

其次當涉及長篇內容時,大面積的深色粗體字會給人一種沉重感,而且很跳躍;通過選擇類似深灰色(#4F4F4F)這樣的顏色可以很容易地解決這個問題,使文字更容易被識別。

二、統一色調

選擇一種基礎色,再調整色調和顏色深淺來增加均衡;設計時避免用過多的顏色。如果項目允許,只需使用固定的色板,通過調整基礎色的飽和度和明度,利用這種簡單的方式為設計增加一致性。

三、干凈的陰影

陰影是UI設計中最常見的視覺表現手法,它可以增加元素的深度,使其從背景中脫穎而出,引起用戶的注意力,同時也能增強畫面的視覺層次感。

相比于采用大范圍的擴散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,更自然,它模擬了最常見的光源特征,光線從上往下照下來所營造的陰影效果。

這種輕柔的陰影呈現出的干凈,增加了畫面的精致;如果陰影的范圍太小或顏色太深,位置也沒有偏移,而是聚集在元素的四周,就會讓畫面更加扁平,讓視覺變得厚重,呈現出不精致的畫面感。

陰影不一定是黑色的,還有一種擴算陰影是模擬元素本身的顏色投射在背景上,由于陰影與元素的色調一致,因此呈現出十分融洽的畫面感。

在UI設計中,這種手法不宜過多使用,否則呈現出的各種色彩搭配會讓人眼花繚亂。

四、個性的圖標設計

合格的設計師能夠繪制風格統一的圖標,而優秀的設計師能夠創造風格獨特的圖標。

我們能否在追求大小一致,圓角一致,線寬一致和配色一致的同時,為它的視覺表現力加入更多的創意呢?例如下面這組圖標設計,無論是在圖形上的創新,還是顏色搭配上都呈現出無與倫比的創意。

標簽欄作為一個App的全局導航起著至關重要的作用,它的設計影響著整個產品的視覺風格。

通常,大多數App都是使用iOS規范的設計樣式(默認灰色,選中填充品牌色),這樣的設計太普通,太常見了;要想讓標簽欄圖標設計精致和富有個性,可以豐富每一個選中態圖標的視覺表現,例如給圖標加上背景和表情,即顯得生動有趣,又增加了用戶的好感,給人留下深刻的印象。

3D立體圖標設計是近幾年來的流行趨勢,看上去十分精致、華麗,但是看久了會讓人產生輕微的視覺疲勞,同時因其復雜的結構會增加用戶的認知成本,一般在外賣美食類應用中比較常見。

五、Tab的設計感

Tab是App設計中最常見的控件之一,它源自Material Design的設計規范;現在很多iOS產品當中也開始使用這種導航欄樣式來進行設計,而原本屬于iOS規范當中的分段選擇器變得不那么常見了。

在視覺表現形式上,Tab和標簽欄同樣也分為選中態和未選態,它的設計較為簡單,通常是使用一組文字標簽,通過顏色或在標簽下加上小長條來區分兩者的狀態;因為它簡單,卻越難設計出彩,要發揮極大的設計想象力,跳脫出設計規范的限制,才能找到完美的方案。

例如蝦米音樂的Tab選中態是一段音頻波線,再配合文字的大小對比,一個富有設計感又符合產品特征的Tabs就被創造出來了。

我們還可以從品牌基因中獲取靈感,品牌作為用戶熟知的形象是個絕佳的來源。

從品牌形象中提取具有獨特氣質的視覺富豪作為Tab選中態的小長條,這樣就建立起視覺上的聯系,讓用戶產生由內而外的一致感受;例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設計上,既讓界面視覺獨一無二,又進一步強化了用戶對品牌形象的認知。

六、無框設計 去繁從簡

在UI設計中,有許多的裝飾元素,如卡片的邊框、列表的分割線等,雖然邊框,分割線是分隔兩個元素的好辦法,但是它不是唯一的方法;使用過多會讓整個布局的設計感降低,或多或少都會干擾用戶瀏覽的視線,讓信息內容失去注意力,因此可以減少不必要的裝飾元素。

我們可以通過以下幾個方法來劃分元素的視覺層次,讓畫面變得干凈,整齊:

1)使用陰影

陰影同樣可以營造出邊界感,而且相比邊框分割線更加微妙,并不會顯得突兀,不會分散用戶的注意力,讓內容更聚焦。

2)使用不同的背景色來區分

通常,相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分;所以,你所需要做的就是在不同的區塊采用不同的背景色,并且嘗試刪除分割線,因為你根本不需要它。

3)增加額外的留白

創建元素之間的分離效果,并不一定要通過線框來表現,只要增加留白,讓它們分隔開就行了,通過留白和間距來實現元素分組是UI設計中的常用手法。

七、統一設計元素

在App中的每一個界面都有許多元素,那些同類的元素應保持統一的設計樣式。

通常個人中心的標簽欄圖標是一個人形剪影,它代表著用戶,因此可以在展示用戶頭像和用戶形象的界面中延續使用。

如果圖形擁有獨特的外觀,如橢圓矩形,也可以作為視覺符號的一種,延續到其他界面中,成為圖形或按鈕的外觀;這樣,整個界面就被統一的設計元素聯系起來了,給用戶始終如一的一致感。

八、符合產品氣質的字體

選擇符合產品氣質的字體,可以與產品的定位相吻合,傳遞給用戶正確的情感意識。

雖然默認字體可以滿足大多數App 的設計需求,但會出現一個問題就是——系統字體的普適性并沒有什么特色,在一些特定的情境下就顯得收效甚微;例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺,換成系統字體后,整體感覺在氣勢上就變弱了很多。

九、第三方圖標風格統一

大多數App都支持三方登陸,他可以減輕用戶注冊的時間成本。

通常是在注冊登陸頁的底部展示第三方圖標入口,這也是設計師最常忽略的內容,往往是直接將第三方圖標調整一致大小和擺放整齊位置,沒有針對它們再設計;一個設計精致的App不應漏過任何的細節,我們可以以自家App的圖標風格為依據,對第三方圖標進行優化設計。

十、圖片中尋找色彩

App中優美的圖文設計,能帶給用戶如沐春風的視覺享受,它非常重要。我們經常看到文字疊加在圖片背景上的設計樣式;為了減少復雜圖片背景對文字的干擾,通常的做法是疊加半透明度的黑色蒙版,讓白色文字清晰可見,但這不是最優的辦法。

我們可以從圖片中提取主色調用于疊加背景的填充色,這樣就使文字、色塊和圖片融入到一起了,畫面變得高級和富有設計感。

十一、提高圖片質量

圖片的質量影響著整個App的格調和用戶的情緒,高品質的圖片給人愉悅的視覺享受,產生美好的聯想;而低品質的圖片會瞬間拉低App的質感。

在App設計中,一張漂亮的圖片從收集到上線,需要經過裁剪,調色等過程才能被使用;即使是普通的商品圖片,我們將它摳圖后調整成統一大小,再加上干凈的背景,就能立刻提升商品的美感,界面視覺也會變得美觀、整潔。

十二、卡片式設計

現在的UI界面設計中,卡片式設計已經是一種非常常見的設計形式,它有利于信息分層和整合,劃分出更加清晰的組織結構,實現復雜內容的簡化處理,提高空間利用率;同時卡片式設計通常很依賴視覺元素,很強的視覺元素正是卡片式設計的一種優勢,也是提升設計品質感的良方。

 

作者:Fyin印跡;公眾號:印跡拾光

本文由 @Fyin印跡 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

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

探索未來設計趨勢:引領設計潮流的Bento UI設計風格

杰睿

Bento UI其實流行已經有一段時間了,但是近一兩年來才展現出發展的勢頭,Bento UI的體驗和用戶友好性在設計中的價值不斷被認識與驗證。本文就Bento UI設計風格進行分析總結,希望能給你一些啟發。

Bento UI的流行已經有一段時間,但直到最近一兩年,它才真正展現出強勁的發展勢頭。這是因為設計師們逐漸認識到,Bento UI的體驗和用戶友好性在設計中的價值。

關于Bento UI的起源存在一些爭議,就像許多設計趨勢一樣。有人認為Bento UI的成功應歸功于蘋果公司,因為蘋果在其UI元素中采用了類似的風格。另一些人則指出,微軟的Metro UI實際上就是Bento UI的一種體現。不管它的來源如何,毋庸置疑,Bento UI正變得越來越受歡迎。隨著其使用量的增加,它作為一種UI風格的可靠性也在不斷得到驗證。

一、什么是Bento UI ?

Bento UI 的靈感來自便當盒(一種精心布置且視覺上吸引人的日本料理)概念,提供了令人耳目一新的設計。它不僅僅是一個設計框架,而是一種兼顧用戶需求和視覺吸引力的整體理念。這篇文章讓我帶你深入研究一下 Bento UI 如何實現實用性與美觀的相互融合。

二、Bento UI設計有什么優點 ?

Bento UI設計的優點多種多樣,它將實用性和美學完美融合,為用戶帶來出色的體驗。

1. 強調模塊化和可重用性: Bento UI將界面元素拆分為模塊化的組件,使得設計師可以輕松地組合、調整和重用這些組件,從而提高了設計效率和一致性。

2. 簡潔而美觀的外觀: Bento UI注重簡約、現代和美學的結合,帶來干凈、清晰且視覺吸引人的界面。這有助于提升用戶的第一印象,增加用戶停留時間和參與度。

3. 良好的用戶體驗: Bento UI注重用戶導向,通過清晰的布局、直觀的導航和有趣的交互元素,為用戶創造出愉悅和流暢的瀏覽體驗。

4. 強化品牌形象: Bento UI可以根據品牌的風格和價值觀進行定制,從而增強品牌在用戶心中的形象和認知。一致的設計元素有助于塑造品牌的獨特性。

5. 強調交互和動畫: Bento UI強調微交互和動畫效果,為用戶創造出更加生動和有趣的互動體驗。這不僅吸引用戶的注意,還增強了用戶的參與感。

6. 提升移動設備體驗: Bento UI通常是響應式的,可以自適應不同的屏幕尺寸和設備類型。這為移動用戶提供了更好的體驗,無論是在手機、平板還是桌面電腦上。

三、我該如何在我的項目中使用Bento UI?

要設計出成功的Bento UI,首先需要理解其核心原則。簡約、模塊化和活力交互是Bento UI的靈魂。簡約的設計風格能夠使界面更加清晰明了,而模塊化的組件則讓設計師能夠靈活構建頁面,快速滿足不同需求。活力交互,包括動畫效果和微交互,能夠增強用戶與界面的互動感,提升用戶體驗。

1. 構建清晰的布局

在Bento UI中,清晰的布局是至關重要的。界面元素應該有明確的排列,避免過于擁擠和混亂。通過合理的分區和對齊,可以將信息有序地呈現給用戶,使其能夠快速獲取所需信息。此外,清晰的布局還能夠增強用戶的舒適感,使其更樂意與界面互動。

2. 運用鮮明的顏色和圖標

Bento UI倡導使用鮮明的顏色和獨特的圖標設計。色彩可以傳達情感和品牌特點,因此選擇適合項目風格的顏色是至關重要的。同時,圖標作為界面的視覺元素,能夠直觀地傳達信息,提高用戶的使用效率。確保顏色和圖標的使用既美觀又有意義,能夠為用戶帶來更好的視覺體驗。

3. 創造有趣的交互效果

Bento UI的動畫效果和微交互是設計中的亮點之一。動畫可以增強用戶與界面的互動感,使用戶感受到界面的活力。微交互則能夠提供反饋,引導用戶完成操作。設計師可以巧妙地運用過渡效果、淡入淡出和其他動畫元素,使界面變得更加生動有趣。

4. 保持一致性和用戶友好性

在整個設計過程中,保持一致性和用戶友好性至關重要。界面的風格、字體和元素應該保持統一,以確保用戶在瀏覽不同頁面時能夠感受到一致的視覺效果。另外,界面的導航和操作也應該簡單明了,讓用戶能夠輕松找到所需內容。

一些案例:

iPhone 14 Pro介紹頁面中,您將看到以這種方式呈現的高級功能介紹,并通??過多種視覺處理來保持有趣。雖然有不同的視覺處理,但由于使用大小和漸變文本有效地引導用戶的眼睛,內容不會相互沖突。

Bolt對每個圖塊使用了更加一致的視覺方法,以使內容更易于瀏覽。這對于傳達功能并引導他們在最后查看更多內容非常有用!

Linear的設計師也采用了Bento UI的設計風格,我個人很喜歡他們這樣的設計。

Iconwerk使用Bento UI風格來展示他們最好的圖標設計。每個內容框都保持得非常小,這樣當它們全部放在一起時,就不會感到擁擠。
Traf使用Bento UI以時尚的深色主題設計來布局他的作品集作品。

四、我應該為我的項目使用Bento UI嗎?

是否選擇應用Bento UI取決于您的項目需求和目標。如果您追求引人入勝的界面、活力的交互和用戶友好性,Bento UI可能是一個理想的選擇。特別是對于品牌展示、產品推廣和互動性強的網頁,Bento UI能夠為您的項目增添獨特的魅力和吸引力。然而,設計師應該根據項目特點,靈活運用Bento UI的元素,以確保最終的設計能夠滿足用戶需求并達到預期效果。

但是Bento UI并非適用于所有項目。它最適合于擁有簡潔層次結構的項目,因此,如果您的項目層次結構較為復雜,Bento UI可能并不適合。不過,如果您的項目存在復雜層次結構,或許是時候改變這一現狀了。

Bento UI的設計和感覺極具現代氛圍,我預測它將在未來一段時間內持續受歡迎。隨著蘋果等專業設計團隊的使用還有諸如Vision Pro等新技術的出現,它甚至可能發展成我們目前尚未能夠預見的新形態。

結語

Bento UI是一種引人注目的設計風格,簡約美學、動感交互和模塊化創造力為設計帶來了新的可能性。作為一種新興的設計趨勢,Bento UI正在成為越來越多設計師和品牌的選擇。

通過將Bento UI的理念融入設計中,我們能夠為用戶創造出令人難忘的體驗,將品牌價值傳達得更加生動而深刻,從而實現更好的用戶參與和品牌傳播效果。

本文由 @收手的阿祖 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

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

淺談移動端UI設計適配

杰睿

互聯網時代,我們所看到的屏幕有許多的尺寸,如果設計師為每個尺寸都單獨進行設計,那將是一個大工程。那如果減少設計的工作量呢?讓我們來跟著作者學習一下移動端UI設計的適配吧~

在互聯網時代,產品形態是多種多樣的,就手機行業而言,設計師需要面對的屏幕尺寸至少也有一兩百種,我們不可能為每一種屏幕尺寸單獨進行,巨大的工作量是我們無法承受的。

需要一些方法或者說是手段,幫助我們縮減巨大的工作量,這些方法手段的集合就是——UI設計適配。UI設計適配幫助設計師只需要維護幾種尺寸的設計稿,就可以兼容市面上絕大多數的屏幕尺寸,達到不同屏幕尺寸下,視覺效果接近一致的目的。

本篇文章我們主要關注移動端應用的UI設計適配,將從以下幾點來介紹:

  1. UI設計適配是什么
  2. 為什么需要UI設計適配
  3. UI設計適配的一些基礎概念
  4. 如何進行UI設計適配

那么下面,我們進入正式內容。

一、UI設計適配是什么?

UI設計適配是指將同一款應用或網頁的用戶界面針對不同的設備、分辨率、屏幕尺寸、操作系統等因素進行調整,以確保用戶界面的一致性和可用性。

這段定義包含了一些專業名詞,還是讓人有點難理解,如果我們隱藏那些專業名詞,用圖形化的方式去解釋這個定義,如圖1.1,左邊是一個16:9屏幕尺寸的設計稿,我們需要將它轉變為一個1:1屏幕尺寸的設計稿。你要如何處理?

《UX入門》第十六講:淺談移動端UI設計適配

在開始設計前,就需要考慮可能存在屏幕尺寸和比例差異較大情況,就如同圖1.1,應當如何適配;設計中,就會考慮得更細致,頂部輪播Banner是固定的寬度,還是根據不同的屏幕尺寸寬度自適應寬度,圖1.1是選擇了固定寬度;而在設計之后,有可能開發時會發現,如果只有兩個Banner圖,沒法像設計稿中展示3個Banner圖,這時又需要你思考要如何處理。

以上,我們談到這三個場景中你思考和處理問題的過程,就是在進行UI設計適配。

由此看出,適配是UI設計中的過程,卻不是一個具體的環節,不像是標注切圖是固定的流程。它融入在整個UI設計的過程中。在設計前,設計中,設計后都可能會考慮UI設計適配問題。

二、為什么需要UI設計適配?

為了用戶體驗的一致性。

這里的「一致性」主要關注的是視覺表現層是否一致。如圖1.2,是「vivo瀏覽器」在「vivoX Fold 2」機型上,內屏與外屏的首頁截圖。整個頁面在布局結構,控件類型和元素尺寸以及間距都是基本一致的。

《UX入門》第十六講:淺談移動端UI設計適配

用戶體驗中,視覺表現層的一致性是基礎中的基礎。保證了「一致性」,就會有效地降低用戶的使用成本,即使用戶更換了不同的設備,也不會有使用的困難。UI設計適配則是達成這一目標的重要方法之一。

不過,也請大家注意,這里說的「有幾乎相同的用戶體驗」是限定在屏幕尺寸接近的電子設備上。比如說,我們不能要求一個屏幕尺寸7英寸的手機應用和一臺27英寸的PC電腦客戶端,視覺表現層基本一致,即便他們的是同一個應用,也會因為交互方式和操作系統的不同而天差地別。

三、UI設計適配的一些基礎概念

用戶界面不是物理實體,需要一些物理實體去承載它。

本小節我們將重點解釋一些你需要知道與適配息息相關的概念。總的來說,對于適配我們需要著重理解三個參數——邏輯(像素)分辨率,物理(像素)分辨率和倍率,以及他們之間的相互關系。

了解這些概念,是為了幫助我們面對一些適配問題時,能明白為什么會產生這樣的問題,針對問題尋找合適的解決方案就會更加從容

舉一個簡單的例子,如圖2.1,左右兩個尺寸不同屏幕,都有著完全一致的元素。要達到這樣的效果,「邏輯分辨率」,「物理分辨率」和「倍率」 發揮了關鍵作用。

《UX入門》第十六講:淺談移動端UI設計適配

1. 屏幕比例

屏幕比例很好理解,既設備屏幕尺寸的寬高比值。在2016年之前,業內主流的手機屏幕比例都是16:9;但在這一年命運的齒輪開始轉動,小米公司的發布了,對手機行業影響深遠的機型——小米MIX一代,屏幕比例是17:9,由此手機屏幕開啟了全面屏設計時代。時至今日,手機屏幕比例已經完全轉向了18:9,19:9,20:9等等,手機的屏幕高度在不斷地增加。

那么這個比例的變化,是否對我們適配內容有影響呢?

影響是存在的,只是影響并不大,而且僅在一些特定場景下有影響。

我們以「vivo i視頻」影視頁面為例(圖2.2),高度的變化帶來了縱向空間的延展,需要展示更多的內容,對設計適配的影響是比較小的。受影響的一些特定場景,我們將會在之后「適配的手段」小節中詳細說明。

《UX入門》第十六講:淺談移動端UI設計適配

2. 邏輯分辨率,物理分辨率和倍率

分辨率一詞,人們在日常生活中是一個比較常見的概念。比較常說的——720p,1080p,2k,4k等等,都是在說分辨率。

這些參數對應在UI設計中,指的是物理分辨率。物理分辨率是用來衡量屏幕中的像素數量,相同的屏幕尺寸和一定的觀看距離下,分辨率越高,畫面越清晰,反之則是會模糊。

物理分辨率是一個物理世界存在的具象概念,而邏輯分辨率則是一個抽象概念,對應存在于軟件的代碼層面。可以理解為代碼層面有一塊虛擬的屏幕,邏輯分辨率就是衡量這塊虛擬屏幕的像素數量,同樣這里的「像素」也是不存在的抽象概念。

邏輯分辨率也是由一組參數表達的,并且我們是可以知道這個值是多少的,如圖2.3,節選自蘋果的《人機交互指南》,其中詳細地列舉了iPhone,iPad和iPod的邏輯分辨率和物理分辨率。

《UX入門》第十六講:淺談移動端UI設計適配

我們選擇其中一條來解釋邏輯分辨率,物理分辨率和倍率之間的關系。如圖2.3,簡單說來就是——邏輯分辨率乘以倍率就是物理分辨率。

《UX入門》第十六講:淺談移動端UI設計適配

在這個公式中多了兩個單位——“pt”和“px”,px很好理解就是我們設計中所用的像素單位,而pt則是開發代碼中尺寸單位,“pt”來源于印刷行業的術語,翻譯過來是“點”。圖2.3中的“@2x”和“@3x”就是系統默認倍率,我們會常常稱之為一倍圖,二倍圖,三倍圖以此類推。

“@1x”是比較久遠的手機設備,目前已經基本不在設計的考慮范疇了。在一倍圖的情況下,此時的1pt剛好等于1px,這樣就可以減少開發工程師和設計師之間溝通成本。因為假設你的設計稿是使用的三倍圖,那么換算的公式則是1pt=3px,如果和開發溝通時不說明具體的單位,你說12,開發工程師可能就會理解成12pt,但是實際想表達的是12px,這樣最后的效果就會是有較大的誤差。所以在很多設計團隊,針對iOS設備設計時,仍然使用一倍圖作為設計稿尺寸,從而打通了開發工程師與設計師之間的溝通壁壘。不會因為單位不統一,造成結果的誤差。

那么來到Android這邊,道理是一樣的,只是在參數和概念名詞會有些不同。如圖2.5,標黃色的部分是我們目前使用的較多的屏幕尺寸(可能高度數值略有不同)。

《UX入門》第十六講:淺談移動端UI設計適配

首先,Android的倍率是用英文命名的,如mdpi等,但是習慣上我們還是稱之為一倍圖等;其次,“dp”是Android系統中邏輯像素的單位,等同于iOS中的“pt”。

Android系統和iOS系統的邏輯分辨率的參數值是相近的,這也是很多設計團隊只會基于iOS進行設計,Android開發工程師直接使用基于iOS的設計稿進行開發。因為差別不大,只要在適配時候使用相同邏輯,就可以少設計一次相同頁面,也是為了降低設計成本。

以上內容也就說明,我們在本節開頭的例子(圖2.1),為什么不同的尺寸的屏幕,為什么能保持相同的元素布局,因為兩個物理分辨率不同的屏幕都是,基于一個相同邏輯分辨率,等比放大得到的(圖2.6)。

《UX入門》第十六講:淺談移動端UI設計適配

四、UI設計適配的手段

這一小節,我們將介紹適配不同的尺寸屏幕的具體手段——固定尺寸與自適應尺寸。

1. 固定尺寸

先說簡單的,固定尺寸。固定代表著是一個絕對值,固定不變的。

固定尺寸主要是分為兩個場景,一是元素的固定尺寸,這個元素主要是指圖標,按鈕,部分的卡片容器(如Banner)和一些系統控件(如布爾開關,單選多選等)。如圖3.1,vivo賬號的登錄頁面中的登錄按鈕,在折疊屏內屏與外屏不同屏幕尺寸下,按鈕的尺寸依然是相同的

《UX入門》第十六講:淺談移動端UI設計適配

二是元素間的固定間距,主要是指元素與元素間的間距固定和元素與屏幕邊緣的邊距固定。固定的間距有助于相似元素成為一組,符合格式塔原理。比如圖標與文字,卡片列表等。

《UX入門》第十六講:淺談移動端UI設計適配

在手機系統中的設置頁面,如圖3.2,將有關聯性類目使用較小的固定間距排列,不同類別的則是使用分割線和更大的固定間距排列,這些固定間距不會因為機型,屏幕尺寸的不同而發生改變。

《UX入門》第十六講:淺談移動端UI設計適配

2. 自適應尺寸

自適應尺寸也細分為三個場景:元素等比適應,元素間間距自適應和元素彈性自適應。元素等比適應

以寬高的某一邊適配屏幕的寬高,剩余的一邊跟隨比例等比適配。這里主要指圖片,視頻的適配為主。因為這些元素的比例必須是固定的,所以我們只能去等比縮放(如圖3.2)。

《UX入門》第十六講:淺談移動端UI設計適配

通常來說我們都是以寬度去適配,但是這些年短視頻App的火熱,需要為用戶營造沉浸式的觀看體驗。豎版的視頻往往是以高度適配,那么會帶來一個問題,寬度有可能會超出屏幕寬度,超出的部分就會被裁切,但是為了給用戶更好的沉浸式觀看體驗,會選擇裁切視頻。

《UX入門》第十六講:淺談移動端UI設計適配

當然你可能會有疑惑,那如果用戶上傳了一個橫版比例的視頻或圖片,如果按照寬度適配,裁切的內容是不是太多了,而且畫面的清晰度也會降低很多?

沒錯,這里我們就需要在不同的場景下,使用不同的適配策略。所以就會針對橫版內容,就是以寬度適配,豎版以高度適配。

《UX入門》第十六講:淺談移動端UI設計適配

元素間間距自適應

間距自適應的適配手段,是以百分比數值計算適應元素與元素之間的間距,元素與屏幕邊緣的間距。以百分比計算間距,那么就需要一個基數,這個基數往往是以屏幕分辨率的寬度和高度為基數。

這個方法主要是針對元素較少的頁面,也就是我們在「基本概念」小節中說到的不同的屏幕高度變化帶來的影響。最典型的是手機的鎖屏場景,還有狀態結果頁面的展示(圖3.7)。

《UX入門》第十六講:淺談移動端UI設計適配

如圖3.8,還是vivo賬號的登錄頁,在折疊屏內屏與外屏,可以很明顯看到按鈕距離底部的間距是不同的,這里就是用百分比的間距。

《UX入門》第十六講:淺談移動端UI設計適配

元素彈性自適應

彈性自適應,是指控制元素的外邊距與內間距,同向尺寸彈性自適應。彈性的意思是有多少的空白區域就填充滿。如圖3.9,當右側多一個按鈕時,就需要左側元素彈性的適應填充剩余的空白區域。

《UX入門》第十六講:淺談移動端UI設計適配

同時我們會有一個衍生的適配手段——矩形等分適配,是指將屏幕(或區域)進行平均分割成相同寬度(或高度)的矩形(分割的矩形之間可以有固定間距,固定間距可為0px),而不同的元素在矩形中居中放置。

《UX入門》第十六講:淺談移動端UI設計適配

矩形等分主要會是標簽欄,宮格式布局和圖片視頻的瀑布流形式,花瓣網就是其中之一,比較方便適應網頁寬度的不斷改變。移動端中,目前這一方法我們會常用在折疊屏的適配中。如圖3.11,排行榜模塊在內屏是以雙列展示,而在內屏中則是因為寬度增加,需要內容填充頁面,而變成了三列。

《UX入門》第十六講:淺談移動端UI設計適配

以上就是主要的UI設計適配手段,總結一下:

  • 設計適配的手段分為兩大類——固定尺寸和自適應尺寸
  • 固定尺寸針對元素自身尺寸和元素間尺寸,都是確定的固定值
  • 自適應尺寸細分為——元素尺寸等比適應,元素間間距自適應和元素彈性自適應,相對應的自適應的方法都是比值的計算,是一個相對值

我們也只是列舉幾個典型場景,實際業務場景是復雜的,需要注意多種手段相互配合使用。

以上就是關于移動端UI設計適配的全部內容了。

感謝你的閱讀,希望對你的設計工作有所幫助。

作者:宋丹強

本文由人人都是產品經理合作媒體 @VMIC UED 授權發布,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

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

交互思維與產品設計思維、體驗設計思維、視覺設計思維的融合

杰睿

在前面的文章中,我們定義了交互思維和流程、目標,接下來我們分享交互設計思維與我們常說的產品思維、體驗思維等的融合。

一、交互思維與產品設計思維的融合

在現代產品開發中,交互思維產品設計思維的融合已經成為提升用戶體驗的關鍵。兩者看似獨立,卻可以在實際設計過程中形成互補,打造出更加契合用戶需求的產品。本文將從兩者的特點、融合的價值,以及實際應用場景中如何落地等角度出發,深入探討它們的結合。

1. 交互思維與產品設計思維的區別

交互思維:聚焦人與界面的連接
交互思維的核心在于用戶與產品的互動體驗。它關注的是:

  • 效率:用戶是否能快速找到功能并完成操作?
  • 體驗:操作過程是否流暢、愉悅?
  • 反饋:用戶的操作是否能即時獲得明確反饋?

交互思維傾向于優化用戶的操作路徑,將復雜的技術邏輯隱藏在背后,讓用戶感受到簡單和直觀。

例子:在淘寶購物車中,“全選”功能按鈕被設計在靠近商品列表的頂部,方便用戶快速選中所有商品;而刪除操作則以批量和單選兩種方式提供,提升操作靈活性。

產品設計思維:關注用戶價值與商業目標

產品設計思維則是更全局的,它關注的是產品能否滿足用戶需求并實現商業價值。核心問題包括:

  • 需求洞察:用戶真正需要什么?
  • 功能取舍:哪些功能是核心,哪些功能是輔助?
  • 商業目標:如何在滿足用戶需求的同時,實現盈利或增長目標?

產品設計思維更偏向戰略層面,要求對市場、用戶和商業有全局的理解,并制定產品的發展方向。

例子:微信從“即時通訊”入手,以簡單的聊天功能切入市場,但通過持續擴展支付、朋友圈、公眾號等模塊,構建了一個完善的生態系統。

2. 交互思維與產品設計思維的融合點

兩種思維的結合,能夠更好地兼顧用戶體驗和商業價值。以下是幾種主要的融合方式:

1)以用戶為中心,兼顧商業目標

交互思維: 設計流暢、直觀的操作流程,提升用戶體驗。

產品設計思維: 在流暢體驗的基礎上,引導用戶完成關鍵行為(如購買、注冊等),實現商業目標。

案例:美團外賣的下單流程

  • 交互層面:在選餐、結算、支付的每一步,用戶體驗都清晰、順滑,沒有任何卡頓。
  • 產品設計層面:通過優惠券推送、推薦菜品等設計,提升訂單金額和用戶粘性。

2)用戶需求與技術限制的平衡

交互思維: 關注用戶直觀感受,簡化復雜操作,讓用戶專注于目標任務。

產品設計思維: 在技術和資源限制內,找到實現用戶需求的最佳方案。

案例:滴滴出行的“一鍵叫車”功能

  • 交互層面:用戶只需輸入目的地,一鍵發單,系統會自動分配司機。
  • 產品層面:背后整合了定位技術、調度算法、司機匹配邏輯等復雜功能,但這些復雜性被完全隱藏,用戶只需看到簡潔的界面和高效的結果。

3)數據驅動與用戶體驗的結合

交互思維: 基于用戶行為數據優化界面和流程,提升操作效率。

產品設計思維: 基于數據分析判斷用戶需求的優先級,調整產品功能布局。

案例:淘寶推薦算法與界面設計

淘寶的個性化推薦系統通過AI分析用戶瀏覽和購買行為,推薦相關商品。交互設計確保推薦商品的展示方式簡潔、直觀,不打擾用戶正常瀏覽,增強購物體驗的同時提升成交轉化率。

4)感性設計與理性分析的結合

交互思維: 關注情感體驗,設計讓用戶愉悅的互動。

產品設計思維: 從用戶行為和反饋中提煉需求,找到情感體驗的落地點。

案例:支付寶的“年度賬單”功能

  • 交互層面:炫酷的動效和圖表展示,給用戶帶來儀式感和滿足感。
  • 產品層面:通過賬單展示增強用戶的消費行為意識,并潛移默化地推廣其理財功能。

3. 交互思維與產品設計思維融合的關鍵原則

  • 優先關注用戶需求:兩者融合的首要任務是以用戶需求為核心,所有設計決策都應服務于用戶的目標和體驗。
  • 注重全局與細節的平衡:產品設計思維關注全局策略,而交互思維則深入到細節優化。兩者需緊密配合,既要設計好產品的整體框架,也要關注用戶的每一次點擊和滑動。
  • 數據與創意并重:以數據為基礎驗證產品方向,以創意設計激發用戶的情感共鳴,實現理性與感性的結合。

4. 未來展望:AI與交互/產品思維的深度融合

隨著AI技術的深入發展,交互思維與產品設計思維的融合將進一步進化:

  • 智能推薦與場景化設計: AI可以通過用戶數據精準預測需求,設計更貼合場景的互動。
  • 個性化界面: 產品的界面和交互將更加動態,根據用戶習慣實時調整。
  • 自動化與人性化的平衡: 利用AI簡化操作的同時,保留關鍵環節的人性化設計,讓用戶感到關懷與尊重。

案例展望:

在未來的外賣App中,AI不僅能推薦菜品,還能根據天氣、飲食偏好提供動態優惠,讓用戶感到“被理解”。同時,界面交互會變得更加智能,比如直接通過語音完成點餐和支付。

二、交互思維與用戶體驗設計思維的融合

在數字產品開發中,交互思維用戶體驗設計思維(UX Design Thinking)常常交織在一起,共同塑造出令人滿意的產品體驗。兩者的融合不僅能提升產品的使用效率,還能激發用戶的情感共鳴,最終實現用戶目標與商業價值的雙贏。

1. 交互思維與用戶體驗設計思維的核心概念

1)交互思維:聚焦人與界面的高效互動

交互思維主要關注用戶與產品之間的操作過程,旨在通過直觀的界面設計高效的交互方式,幫助用戶輕松完成任務。其核心要素包括:

  • 清晰性: 讓用戶知道該怎么操作。
  • 反饋性: 用戶的每一次操作都能獲得及時的反饋。
  • 效率性: 操作路徑最短、操作負擔最小。

2)用戶體驗設計思維:以用戶為中心的全局視角

用戶體驗設計思維是以用戶需求用戶感受為核心的一種方法論,涉及產品從設計到使用的整個生命周期。其重點在于:

  • 需求洞察: 通過調研理解用戶真正的需求。
  • 情感連接: 不僅滿足功能需求,還要讓用戶感到愉悅、舒適。
  • 全流程體驗: 關注用戶從進入產品到離開的每一個接觸點。

簡單類比:

交互思維像是一位專注于修路的工程師,確保路徑筆直流暢;而用戶體驗設計思維更像是一位城市規劃師,考慮如何讓整個城市的交通系統高效且宜居。

2. 交互思維與用戶體驗設計思維的融合點

1)從細節到全局,滿足用戶操作與體驗的雙重需求

交互思維注重細節,優化每一個交互動作;而用戶體驗設計思維關注全局,確保整個使用流程的流暢性和一致性。兩者結合能讓用戶在每個環節都感到舒適且順暢。

案例:微信的語音消息功能

  • 交互思維: 長按錄音鍵時,提供實時的錄音狀態提示;松手后,自動發送語音,減少用戶額外的操作。
  • 用戶體驗思維: 通過語音功能,解決了用戶在手忙或不方便打字時的溝通需求,增強場景適配性和易用性。

2)情感設計與功能設計的結合

交互思維解決“怎么用”的問題,用戶體驗設計思維則深入到“為什么用”和“用后感受如何”。情感設計是兩者融合的一個關鍵點,既提升用戶滿意度,又增強產品粘性。

案例:支付寶的完成支付動畫

  • 交互思維: 支付完成時的動態反饋,讓用戶明確支付已完成。
  • 用戶體驗思維: 支付后展示“支付成功”字樣并配以動畫,不僅提供信息,還讓用戶感到完成任務的愉悅。

3)用戶需求與設計約束的平衡

交互思維幫助優化操作路徑,而用戶體驗設計思維則考慮設計的合理性和場景適配性。在技術和資源的限制下,兩者需要共同探索最佳方案。

案例:滴滴出行的路線規劃與確認

  • 交互思維: 用戶輸入起點和終點后,系統快速規劃出最佳路線,并提供簡單確認按鈕。
  • 用戶體驗思維: 考慮用戶可能存在對價格敏感的需求,提供多種車型選擇,同時展示每種選擇的價格和預估時間。

4)數據驅動與用戶感知的結合

數據分析是用戶體驗設計思維的重要部分,而交互思維則利用這些數據優化每一次用戶操作。兩者的結合能實現功能的個性化和體驗的精準化。

案例:淘寶的商品推薦系統

  • 交互思維: 推薦商品以卡片形式展示,用戶可以快速滑動瀏覽、添加購物車或直接購買。
  • 用戶體驗思維: 推薦邏輯基于用戶的瀏覽和購買行為,推送最相關的商品,減少用戶決策時間,提升購物體驗。

3. 交互思維與用戶體驗設計思維的融合策略

  • 以用戶為核心,構建全流程體驗:兩者的融合應始終圍繞用戶需求展開。在每一個用戶接觸點上,既要確保交互的流暢性,也要關注用戶的情感感受。
  • 簡化操作路徑,優化信息傳達:用戶體驗設計需要通過交互設計,減少用戶完成任務的步驟,同時以視覺化、圖形化的方式傳遞信息,讓用戶一目了然。
  • 動態優化,保持體驗的一致性:基于數據分析,實時調整交互設計和體驗設計,確保用戶在產品生命周期內始終獲得一致且優秀的體驗。

4. 實踐案例:抖音的交互與體驗設計

抖音作為短視頻平臺,在交互與用戶體驗設計的結合上表現得尤為出色:

  • 交互思維: 用戶只需上下滑動即可瀏覽視頻,操作簡單直觀;同時每次滑動都有即時的視覺反饋,增強流暢感。
  • 用戶體驗思維: 推薦算法通過用戶興趣分析,持續推送個性化視頻內容,提升用戶粘性;視頻結束時還配有引導互動的按鈕(如點贊、評論),鼓勵用戶參與互動。

5. 未來展望:AI技術推動交互與用戶體驗的升級

隨著AI的普及,交互思維與用戶體驗設計思維的融合將進入新的階段:

  • 智能交互: 通過語音、手勢等自然交互方式,進一步簡化操作。
  • 個性化體驗: AI根據用戶行為預測需求,動態調整界面和推薦內容。
  • 情感化設計: AI捕捉用戶情緒,提供更貼心的交互反饋和情感關懷。

案例展望:智能客服系統

未來的智能客服不僅能準確理解用戶問題,還能根據情緒識別調整對話語氣,同時提供即時解決方案與友好的互動體驗。

三、交互思維與界面設計思維的融合

交互思維界面設計思維的融合,是現代產品設計中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現,彼此互補,共同打造出功能性與美觀性兼具的產品體驗。本文將從兩者的概念、融合的價值以及實際案例中剖析如何實現這種深度結合。

1. 交互思維與界面設計思維的核心概念

1)交互思維:聚焦操作路徑與用戶效率

交互思維的核心在于優化用戶操作的每一步,降低操作復雜度,提升使用效率。

其關注的主要問題包括:

  • 用戶如何完成某項任務?
  • 操作的反饋是否清晰?
  • 整體路徑是否流暢高效?

特點:邏輯性強,重在用戶的操作行為,強調功能可達性和可用性。

2)界面設計思維:聚焦視覺呈現與情感體驗

界面設計思維則以視覺表現為中心,關注界面的美感和信息傳達的有效性。其關注點包括:

  • 信息是否清晰易讀?
  • 視覺元素是否吸引人且統一?
  • 是否通過視覺傳遞了情感和品牌理念?

特點:更注重感性表達,強調用戶的情感體驗和對產品的第一印象。

簡單類比:

交互思維像是設計產品的操作說明書,確保邏輯清晰易懂;而界面設計思維則為產品包裝,讓它看起來有吸引力且直觀。

2. 交互思維與界面設計思維的融合價值

  • 兼顧功能性與美觀性:用戶既需要能夠快速完成任務,也希望在使用過程中感到愉悅。交互思維和界面設計思維的結合,可以讓產品在邏輯清晰的基礎上,通過視覺傳達提供更佳體驗。
  • 提升用戶認知效率:交互邏輯清晰但界面復雜,會增加用戶認知成本;界面美觀卻缺乏交互合理性,會讓操作變得困難。融合兩者可以提升用戶對信息的識別和理解效率。
  • 構建品牌感與用戶粘性:交互設計讓用戶留下“好用”的印象,而界面設計則通過視覺元素讓用戶感到“好看”。這種結合不僅能滿足短期功能需求,還能通過美學設計強化品牌認知,提升用戶長期粘性。

3. 交互思維與界面設計思維的融合方式

1)信息分層與視覺引導的結合

交互思維: 根據用戶操作邏輯,對信息進行層級劃分,優先展示關鍵信息,隱藏次要內容。

界面設計思維: 通過顏色、字體大小、對比等視覺元素,強化信息的層級感和用戶的關注點。

案例:支付寶首頁的布局

交互層面: 核心功能(如轉賬、收付款)被放置在顯眼的首屏區域,次要功能(如理財推薦)隱藏在二級頁面。

界面層面: 不同模塊的背景顏色和按鈕樣式有明顯區分,用戶一眼就能找到核心功能。

2)動效與反饋設計的結合

交互思維: 動效作為用戶操作的反饋機制,提示操作結果或狀態變化。

界面設計思維: 動效的風格和節奏與界面整體視覺風格保持一致,增強整體體驗的連貫性。

案例:抖音的點贊動效

交互層面: 用戶雙擊屏幕后,出現心形動畫,明確提示“點贊成功”。

界面層面: 動效的色彩與抖音的品牌風格一致,給用戶帶來視覺和情感上的滿足感。

3)視覺布局與操作路徑的優化

交互思維: 確保核心操作路徑最短,減少用戶不必要的點擊和跳轉。

界面設計思維: 通過對頁面布局的優化,讓用戶在操作路徑中感到界面簡潔且層次分明。

案例:京東購物車的設計

交互層面: 重要操作(如全選、去結算)被放置在用戶觸手可及的位置,減少多余步驟。

界面層面: 清晰的分組、直觀的價格信息展示,讓用戶輕松理解購物車內容。

4)情感設計與功能優化的結合

交互思維: 通過優化功能滿足用戶需求,讓操作過程簡單高效。

界面設計思維: 在視覺設計中融入情感化元素,讓用戶感到愉悅或被關懷。

案例:網易云音樂的“聽歌識曲”功能

交互層面: 用戶只需點擊一個按鈕,系統即可快速識別歌曲,操作簡單高效。

界面層面: 啟動時有動態音波效果,識別成功后展示專輯封面和歌詞,增強情感連接。

4. 交互思維與界面設計思維融合的關鍵原則

  • 優先滿足用戶需求:任何設計決策的出發點都應是用戶需求,確保用戶能夠快速完成目標任務。
  • 強調一致性與連貫性:界面視覺風格和交互邏輯需要保持一致,避免用戶因切換頁面或操作而感到困惑。
  • 數據驅動優化設計:通過用戶行為數據分析,發現交互邏輯和界面設計中的問題點,并不斷優化。
  • 保持創新但不偏離預期:界面美觀或交互新穎可以吸引用戶,但要確保設計符合用戶的心理模型和習慣,避免過度創新導致理解困難。

5. 實踐案例:微信的朋友圈功能

微信的朋友圈功能是交互思維與界面設計思維結合的經典案例:

交互設計:

用戶可以通過簡單的下滑操作瀏覽動態,上滑時加載更多內容,操作自然流暢。

點贊和評論的交互邏輯簡單,長按可以刪除自己的評論,符合用戶直覺。

界面設計:

動態展示以卡片形式分隔,保持視覺整潔。

文本和圖片的排版統一,評論區域的縮進樣式使信息層級清晰。

總結

交互思維與產品思維、體驗思維、視覺設計思維的融合,是用戶體驗優化的基礎。在實際設計中,我們既需要從全局出發,規劃產品戰略,也需要關注用戶的每一步操作細節。

通過兩者的互相補充,我們能設計出既符合用戶需求,又實現商業價值的產品,更精準地滿足用戶需求,讓產品不僅好用,還能打動人心。為用戶和企業帶來雙贏的結果。

未來,隨著技術的進步和用戶需求的多樣化,這種融合將持續推動數字產品體驗的升級,成為提升產品競爭力的核心動力。

本文由 @ DesignLink 原創發布于人人都是產品經理。未經作者許可,禁止轉載

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

交互思維與產品設計思維、體驗設計思維、視覺設計思維的融合

杰睿

在前面的文章中,我們定義了交互思維和流程、目標,接下來我們分享交互設計思維與我們常說的產品思維、體驗思維等的融合。

一、交互思維與產品設計思維的融合

在現代產品開發中,交互思維產品設計思維的融合已經成為提升用戶體驗的關鍵。兩者看似獨立,卻可以在實際設計過程中形成互補,打造出更加契合用戶需求的產品。本文將從兩者的特點、融合的價值,以及實際應用場景中如何落地等角度出發,深入探討它們的結合。

1. 交互思維與產品設計思維的區別

交互思維:聚焦人與界面的連接
交互思維的核心在于用戶與產品的互動體驗。它關注的是:

  • 效率:用戶是否能快速找到功能并完成操作?
  • 體驗:操作過程是否流暢、愉悅?
  • 反饋:用戶的操作是否能即時獲得明確反饋?

交互思維傾向于優化用戶的操作路徑,將復雜的技術邏輯隱藏在背后,讓用戶感受到簡單和直觀。

例子:在淘寶購物車中,“全選”功能按鈕被設計在靠近商品列表的頂部,方便用戶快速選中所有商品;而刪除操作則以批量和單選兩種方式提供,提升操作靈活性。

產品設計思維:關注用戶價值與商業目標

產品設計思維則是更全局的,它關注的是產品能否滿足用戶需求并實現商業價值。核心問題包括:

  • 需求洞察:用戶真正需要什么?
  • 功能取舍:哪些功能是核心,哪些功能是輔助?
  • 商業目標:如何在滿足用戶需求的同時,實現盈利或增長目標?

產品設計思維更偏向戰略層面,要求對市場、用戶和商業有全局的理解,并制定產品的發展方向。

例子:微信從“即時通訊”入手,以簡單的聊天功能切入市場,但通過持續擴展支付、朋友圈、公眾號等模塊,構建了一個完善的生態系統。

2. 交互思維與產品設計思維的融合點

兩種思維的結合,能夠更好地兼顧用戶體驗和商業價值。以下是幾種主要的融合方式:

1)以用戶為中心,兼顧商業目標

交互思維: 設計流暢、直觀的操作流程,提升用戶體驗。

產品設計思維: 在流暢體驗的基礎上,引導用戶完成關鍵行為(如購買、注冊等),實現商業目標。

案例:美團外賣的下單流程

  • 交互層面:在選餐、結算、支付的每一步,用戶體驗都清晰、順滑,沒有任何卡頓。
  • 產品設計層面:通過優惠券推送、推薦菜品等設計,提升訂單金額和用戶粘性。

2)用戶需求與技術限制的平衡

交互思維: 關注用戶直觀感受,簡化復雜操作,讓用戶專注于目標任務。

產品設計思維: 在技術和資源限制內,找到實現用戶需求的最佳方案。

案例:滴滴出行的“一鍵叫車”功能

  • 交互層面:用戶只需輸入目的地,一鍵發單,系統會自動分配司機。
  • 產品層面:背后整合了定位技術、調度算法、司機匹配邏輯等復雜功能,但這些復雜性被完全隱藏,用戶只需看到簡潔的界面和高效的結果。

3)數據驅動與用戶體驗的結合

交互思維: 基于用戶行為數據優化界面和流程,提升操作效率。

產品設計思維: 基于數據分析判斷用戶需求的優先級,調整產品功能布局。

案例:淘寶推薦算法與界面設計

淘寶的個性化推薦系統通過AI分析用戶瀏覽和購買行為,推薦相關商品。交互設計確保推薦商品的展示方式簡潔、直觀,不打擾用戶正常瀏覽,增強購物體驗的同時提升成交轉化率。

4)感性設計與理性分析的結合

交互思維: 關注情感體驗,設計讓用戶愉悅的互動。

產品設計思維: 從用戶行為和反饋中提煉需求,找到情感體驗的落地點。

案例:支付寶的“年度賬單”功能

  • 交互層面:炫酷的動效和圖表展示,給用戶帶來儀式感和滿足感。
  • 產品層面:通過賬單展示增強用戶的消費行為意識,并潛移默化地推廣其理財功能。

3. 交互思維與產品設計思維融合的關鍵原則

  • 優先關注用戶需求:兩者融合的首要任務是以用戶需求為核心,所有設計決策都應服務于用戶的目標和體驗。
  • 注重全局與細節的平衡:產品設計思維關注全局策略,而交互思維則深入到細節優化。兩者需緊密配合,既要設計好產品的整體框架,也要關注用戶的每一次點擊和滑動。
  • 數據與創意并重:以數據為基礎驗證產品方向,以創意設計激發用戶的情感共鳴,實現理性與感性的結合。

4. 未來展望:AI與交互/產品思維的深度融合

隨著AI技術的深入發展,交互思維與產品設計思維的融合將進一步進化:

  • 智能推薦與場景化設計: AI可以通過用戶數據精準預測需求,設計更貼合場景的互動。
  • 個性化界面: 產品的界面和交互將更加動態,根據用戶習慣實時調整。
  • 自動化與人性化的平衡: 利用AI簡化操作的同時,保留關鍵環節的人性化設計,讓用戶感到關懷與尊重。

案例展望:

在未來的外賣App中,AI不僅能推薦菜品,還能根據天氣、飲食偏好提供動態優惠,讓用戶感到“被理解”。同時,界面交互會變得更加智能,比如直接通過語音完成點餐和支付。

二、交互思維與用戶體驗設計思維的融合

在數字產品開發中,交互思維用戶體驗設計思維(UX Design Thinking)常常交織在一起,共同塑造出令人滿意的產品體驗。兩者的融合不僅能提升產品的使用效率,還能激發用戶的情感共鳴,最終實現用戶目標與商業價值的雙贏。

1. 交互思維與用戶體驗設計思維的核心概念

1)交互思維:聚焦人與界面的高效互動

交互思維主要關注用戶與產品之間的操作過程,旨在通過直觀的界面設計高效的交互方式,幫助用戶輕松完成任務。其核心要素包括:

  • 清晰性: 讓用戶知道該怎么操作。
  • 反饋性: 用戶的每一次操作都能獲得及時的反饋。
  • 效率性: 操作路徑最短、操作負擔最小。

2)用戶體驗設計思維:以用戶為中心的全局視角

用戶體驗設計思維是以用戶需求用戶感受為核心的一種方法論,涉及產品從設計到使用的整個生命周期。其重點在于:

  • 需求洞察: 通過調研理解用戶真正的需求。
  • 情感連接: 不僅滿足功能需求,還要讓用戶感到愉悅、舒適。
  • 全流程體驗: 關注用戶從進入產品到離開的每一個接觸點。

簡單類比:

交互思維像是一位專注于修路的工程師,確保路徑筆直流暢;而用戶體驗設計思維更像是一位城市規劃師,考慮如何讓整個城市的交通系統高效且宜居。

2. 交互思維與用戶體驗設計思維的融合點

1)從細節到全局,滿足用戶操作與體驗的雙重需求

交互思維注重細節,優化每一個交互動作;而用戶體驗設計思維關注全局,確保整個使用流程的流暢性和一致性。兩者結合能讓用戶在每個環節都感到舒適且順暢。

案例:微信的語音消息功能

  • 交互思維: 長按錄音鍵時,提供實時的錄音狀態提示;松手后,自動發送語音,減少用戶額外的操作。
  • 用戶體驗思維: 通過語音功能,解決了用戶在手忙或不方便打字時的溝通需求,增強場景適配性和易用性。

2)情感設計與功能設計的結合

交互思維解決“怎么用”的問題,用戶體驗設計思維則深入到“為什么用”和“用后感受如何”。情感設計是兩者融合的一個關鍵點,既提升用戶滿意度,又增強產品粘性。

案例:支付寶的完成支付動畫

  • 交互思維: 支付完成時的動態反饋,讓用戶明確支付已完成。
  • 用戶體驗思維: 支付后展示“支付成功”字樣并配以動畫,不僅提供信息,還讓用戶感到完成任務的愉悅。

3)用戶需求與設計約束的平衡

交互思維幫助優化操作路徑,而用戶體驗設計思維則考慮設計的合理性和場景適配性。在技術和資源的限制下,兩者需要共同探索最佳方案。

案例:滴滴出行的路線規劃與確認

  • 交互思維: 用戶輸入起點和終點后,系統快速規劃出最佳路線,并提供簡單確認按鈕。
  • 用戶體驗思維: 考慮用戶可能存在對價格敏感的需求,提供多種車型選擇,同時展示每種選擇的價格和預估時間。

4)數據驅動與用戶感知的結合

數據分析是用戶體驗設計思維的重要部分,而交互思維則利用這些數據優化每一次用戶操作。兩者的結合能實現功能的個性化和體驗的精準化。

案例:淘寶的商品推薦系統

  • 交互思維: 推薦商品以卡片形式展示,用戶可以快速滑動瀏覽、添加購物車或直接購買。
  • 用戶體驗思維: 推薦邏輯基于用戶的瀏覽和購買行為,推送最相關的商品,減少用戶決策時間,提升購物體驗。

3. 交互思維與用戶體驗設計思維的融合策略

  • 以用戶為核心,構建全流程體驗:兩者的融合應始終圍繞用戶需求展開。在每一個用戶接觸點上,既要確保交互的流暢性,也要關注用戶的情感感受。
  • 簡化操作路徑,優化信息傳達:用戶體驗設計需要通過交互設計,減少用戶完成任務的步驟,同時以視覺化、圖形化的方式傳遞信息,讓用戶一目了然。
  • 動態優化,保持體驗的一致性:基于數據分析,實時調整交互設計和體驗設計,確保用戶在產品生命周期內始終獲得一致且優秀的體驗。

4. 實踐案例:抖音的交互與體驗設計

抖音作為短視頻平臺,在交互與用戶體驗設計的結合上表現得尤為出色:

  • 交互思維: 用戶只需上下滑動即可瀏覽視頻,操作簡單直觀;同時每次滑動都有即時的視覺反饋,增強流暢感。
  • 用戶體驗思維: 推薦算法通過用戶興趣分析,持續推送個性化視頻內容,提升用戶粘性;視頻結束時還配有引導互動的按鈕(如點贊、評論),鼓勵用戶參與互動。

5. 未來展望:AI技術推動交互與用戶體驗的升級

隨著AI的普及,交互思維與用戶體驗設計思維的融合將進入新的階段:

  • 智能交互: 通過語音、手勢等自然交互方式,進一步簡化操作。
  • 個性化體驗: AI根據用戶行為預測需求,動態調整界面和推薦內容。
  • 情感化設計: AI捕捉用戶情緒,提供更貼心的交互反饋和情感關懷。

案例展望:智能客服系統

未來的智能客服不僅能準確理解用戶問題,還能根據情緒識別調整對話語氣,同時提供即時解決方案與友好的互動體驗。

三、交互思維與界面設計思維的融合

交互思維界面設計思維的融合,是現代產品設計中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現,彼此互補,共同打造出功能性與美觀性兼具的產品體驗。本文將從兩者的概念、融合的價值以及實際案例中剖析如何實現這種深度結合。

1. 交互思維與界面設計思維的核心概念

1)交互思維:聚焦操作路徑與用戶效率

交互思維的核心在于優化用戶操作的每一步,降低操作復雜度,提升使用效率。

其關注的主要問題包括:

  • 用戶如何完成某項任務?
  • 操作的反饋是否清晰?
  • 整體路徑是否流暢高效?

特點:邏輯性強,重在用戶的操作行為,強調功能可達性和可用性。

2)界面設計思維:聚焦視覺呈現與情感體驗

界面設計思維則以視覺表現為中心,關注界面的美感和信息傳達的有效性。其關注點包括:

  • 信息是否清晰易讀?
  • 視覺元素是否吸引人且統一?
  • 是否通過視覺傳遞了情感和品牌理念?

特點:更注重感性表達,強調用戶的情感體驗和對產品的第一印象。

簡單類比:

交互思維像是設計產品的操作說明書,確保邏輯清晰易懂;而界面設計思維則為產品包裝,讓它看起來有吸引力且直觀。

2. 交互思維與界面設計思維的融合價值

  • 兼顧功能性與美觀性:用戶既需要能夠快速完成任務,也希望在使用過程中感到愉悅。交互思維和界面設計思維的結合,可以讓產品在邏輯清晰的基礎上,通過視覺傳達提供更佳體驗。
  • 提升用戶認知效率:交互邏輯清晰但界面復雜,會增加用戶認知成本;界面美觀卻缺乏交互合理性,會讓操作變得困難。融合兩者可以提升用戶對信息的識別和理解效率。
  • 構建品牌感與用戶粘性:交互設計讓用戶留下“好用”的印象,而界面設計則通過視覺元素讓用戶感到“好看”。這種結合不僅能滿足短期功能需求,還能通過美學設計強化品牌認知,提升用戶長期粘性。

3. 交互思維與界面設計思維的融合方式

1)信息分層與視覺引導的結合

交互思維: 根據用戶操作邏輯,對信息進行層級劃分,優先展示關鍵信息,隱藏次要內容。

界面設計思維: 通過顏色、字體大小、對比等視覺元素,強化信息的層級感和用戶的關注點。

案例:支付寶首頁的布局

交互層面: 核心功能(如轉賬、收付款)被放置在顯眼的首屏區域,次要功能(如理財推薦)隱藏在二級頁面。

界面層面: 不同模塊的背景顏色和按鈕樣式有明顯區分,用戶一眼就能找到核心功能。

2)動效與反饋設計的結合

交互思維: 動效作為用戶操作的反饋機制,提示操作結果或狀態變化。

界面設計思維: 動效的風格和節奏與界面整體視覺風格保持一致,增強整體體驗的連貫性。

案例:抖音的點贊動效

交互層面: 用戶雙擊屏幕后,出現心形動畫,明確提示“點贊成功”。

界面層面: 動效的色彩與抖音的品牌風格一致,給用戶帶來視覺和情感上的滿足感。

3)視覺布局與操作路徑的優化

交互思維: 確保核心操作路徑最短,減少用戶不必要的點擊和跳轉。

界面設計思維: 通過對頁面布局的優化,讓用戶在操作路徑中感到界面簡潔且層次分明。

案例:京東購物車的設計

交互層面: 重要操作(如全選、去結算)被放置在用戶觸手可及的位置,減少多余步驟。

界面層面: 清晰的分組、直觀的價格信息展示,讓用戶輕松理解購物車內容。

4)情感設計與功能優化的結合

交互思維: 通過優化功能滿足用戶需求,讓操作過程簡單高效。

界面設計思維: 在視覺設計中融入情感化元素,讓用戶感到愉悅或被關懷。

案例:網易云音樂的“聽歌識曲”功能

交互層面: 用戶只需點擊一個按鈕,系統即可快速識別歌曲,操作簡單高效。

界面層面: 啟動時有動態音波效果,識別成功后展示專輯封面和歌詞,增強情感連接。

4. 交互思維與界面設計思維融合的關鍵原則

  • 優先滿足用戶需求:任何設計決策的出發點都應是用戶需求,確保用戶能夠快速完成目標任務。
  • 強調一致性與連貫性:界面視覺風格和交互邏輯需要保持一致,避免用戶因切換頁面或操作而感到困惑。
  • 數據驅動優化設計:通過用戶行為數據分析,發現交互邏輯和界面設計中的問題點,并不斷優化。
  • 保持創新但不偏離預期:界面美觀或交互新穎可以吸引用戶,但要確保設計符合用戶的心理模型和習慣,避免過度創新導致理解困難。

5. 實踐案例:微信的朋友圈功能

微信的朋友圈功能是交互思維與界面設計思維結合的經典案例:

交互設計:

用戶可以通過簡單的下滑操作瀏覽動態,上滑時加載更多內容,操作自然流暢。

點贊和評論的交互邏輯簡單,長按可以刪除自己的評論,符合用戶直覺。

界面設計:

動態展示以卡片形式分隔,保持視覺整潔。

文本和圖片的排版統一,評論區域的縮進樣式使信息層級清晰。

總結

交互思維與產品思維、體驗思維、視覺設計思維的融合,是用戶體驗優化的基礎。在實際設計中,我們既需要從全局出發,規劃產品戰略,也需要關注用戶的每一步操作細節。

通過兩者的互相補充,我們能設計出既符合用戶需求,又實現商業價值的產品,更精準地滿足用戶需求,讓產品不僅好用,還能打動人心。為用戶和企業帶來雙贏的結果。

未來,隨著技術的進步和用戶需求的多樣化,這種融合將持續推動數字產品體驗的升級,成為提升產品競爭力的核心動力。

本文由 @ DesignLink 原創發布于人人都是產品經理。未經作者許可,禁止轉載

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

常見的「浮標」按鈕,原來有這么多設計細節!

杰睿

在現代移動應用設計中,「浮標」按鈕(Floating Action Button)已成為一種常見的交互元素,它不僅提供便捷的功能入口,還能增強用戶體驗。然而,設計一個有效的浮標按鈕并非易事,需要綜合考慮功能定位、視覺效果、交互設計以及技術實現等多個方面。

今天分享的是「浮標設計」。結合設計原則與“智能伴學助手”項目應用浮標實踐展開。

文章目錄如下:

一、背景

在教育類移動端中接入了大模型AI智能應用,為保證這個應用入口可長期保持并隨時可見,提高使用率,為用戶提供便利。筆者通過“智能伴學助手”浮標實踐應用,對后續制作浮標在界面設計中思考與探索。  浮標的本質與價值

① 空間維度突破  

作為界面中的「第三層空間」,浮標通過視覺懸浮感打破平面限制 (如iOS的3D視差效果);在信息過載時代,提供「隨時在場」的核心功能入口 (如美團外賣的懸浮購物車,左右動效:進縮)。

▲「第三層空間」并「隨時在場」,也是很好的廣告位和優惠營銷,一些浮標的“小巧思”。

② 認知心理學應用

利用格式塔原則中的「閉合性」設計半透明遮罩,暗示可交互區域;通過菲茨定律優化點擊熱區,圓形浮標直徑建議≥48dp (Android規范)。  

二、浮標設計

就項目中“智能伴學助手”為例,一個教育類的應用入口,結合功能定位、用戶體驗與技術實現浮標在界面中的作用。

通常浮標是一個懸浮的按鈕或圖標,用于快速訪問某些功能,從多個維度探索其在移動端界面中的合理呈現方式:

① 功能定位與場景適配

浮標的設計規范:比如尺寸、顏色、位置。通用的設計規范,教學工具類App的界面設計,可能涉及圖標和布局。

1)尺寸與網格系統

? 圖標尺寸需適配不同屏幕分辨率,常見規范包括128x128px、96x96px、64x64px等,需根據界面層級選擇合適尺寸。

? 尺寸一般用1:1比較好或者成倍數,先做大再導出所需要的不同大小比例。

? 使用網格系統 (如微軟Fluent的24px基礎網格) 確保視覺一致性,留出安全邊距(如2px內邊距)避免元素溢出。

2)造型與風格

? 遵循簡約易懂原則,優先采用象形圖或表意符號增強識別性。

? 保持系列圖標風格統一,包括線條粗細 (建議1.5px)、圓角弧度 (微軟Fluent定義大/中/小三級圓角) 及視覺平衡。

3)適配性

? 導出格式需與開發協作,推薦PNG序列或SVGA文件以兼顧清晰度與性能。

? 自適應考慮不同平臺的顯示情況。

核心功能聚合:語言學習工具類界面將高頻功能 (如首頁入口、作業評論、學習提問) 通過浮標動態整合,支持長按展開二級菜單或滑動切換功能模式,吸附于屏幕邊緣。

根據學習階段智能變化:

  • 課前(預習):浮標展示課程試學入口或學習目標設定;
  • 課中(口語輸):提供實時筆記懸浮窗或標記工具;
  • 課后(點評):將課后作業及鞏固語言習得情況的評價和自我精進。

(外語語言口語學習一般模式:盲聽,然后根據自己的話復述,理解語言并有效使用語言)

▲ 首頁入口、作業評論、學習提問通過浮標智能解答點評,通過二級頁面展開細則

② 視覺與交互設計

以”智能伴學助手“為例,浮標主色是藍色,企業主題色也是藍色,而”智能伴學助手“浮標使用背景一般也以藍色為主,App主題色也是藍色,多場景使用適配藍色背景的靜態浮標,又要使浮標可以在背景中脫穎而出,在其過程中嘗試藍+藍搭配的存在局限性,本身藍色系較統一。

在同為藍色后,產生不同「空間」,通過將界面元素分層(如前景圖標與背景圖像),營造深度感。在浮標進行描邊隔層,現在很多表情包就是這種模式操作。

微信小程序的移動學習平臺設計,強調了用戶需求分析、界面簡潔和交互設計,這可能對浮標的功能定位有幫助。智能伴學助手來浮標快速訪問。

在不同背景下的浮標呈現視覺形式,只要點擊即可進入應用。

思考與探索:

  • 浮標需要特色,用戶在使用過程中視覺明顯,提高交互。
  • 浮標既顯眼又不干擾學習,所以需要平衡可見性和沉浸感。
  • 浮標可以移動,用戶可以根據需要調整位置,避免遮擋內容。
  • 現浮標是靜態的,如何嘗試動態浮標,與用戶有更好的交互體驗,參與感。
  • 顏色和動效方面,冷色調營造學習氛圍,浮標可以用品牌色,如藍色或綠色,加上微動效吸引注意。樣式用了藍色圓形浮標,可能適合教育類應用,賦予科技感設計。
  • 不同狀態或者不同頁面下的浮標呈現方式不同,但成一系列,增加趣味性。

▲ 白色背景或者透明背景下的浮標呈現,在不同頁面呈現一“系列”

▲ 藍色背景下或者在統一色系下浮標視覺”糊“,可用白邊的形式將背景和浮標的”空間“區分開

思考與探索:配色方案

1)主色選擇

明亮色系:如紅色、橙色、黃色等,能快速吸引用戶注意,適用于促銷活動入口。

品牌色融合:在特殊場景中融入品牌LOGO或主色,代表企業形象和IP,增強品牌認知。

2)色彩心理學應用

藍色:傳遞信任感,適合金融或工具類應用。

黑金/黑黃組合:營造神秘或高端感,常見于娛樂或奢侈品領域。

紫色+粉紅:適用于美容、女性向產品,傳遞溫柔與創意。

控制色彩平衡,用戶色彩感官可適應。

3)對比與背景

使用中性色(如米色、白色)作為背景,提升信息可讀性。

避免沖突色搭配(如藍色用于食品類浮標易抑制食欲)。

思考與探索:個性化推薦和交互設計,可以結合AI預測用戶行為,動態調整浮標的出現時機,比如在需要提醒作業時顯示。主色選用品牌色(如教育藍/科技紫)強化識別性。

▲ 如何設計浮標會更好?

創新交互模式思考探索:

1)壓力感知交互  

? 安卓壓感屏實現「輕按預覽/重按觸發」分層交互(如華為懸浮球壓感菜單);配合觸覺反饋(Haptic Engine)增強操作確認感。

2)動態語義變形

生物擬態動畫:

? 呼吸感懸浮:模擬水母游動節奏(振幅0.5-1.2px,頻率0.8Hz)  ;

? 點擊時觸發粒子擴散動畫(模擬知識傳遞意象);

? 拖拽時產生彈性形變(阻尼系數0.6-0.8),邊緣碰撞后回彈。

根據場景智能改變形態:  

? 閱讀類App中展開為「書簽浮標+進度條」復合控件  ;

? 音樂播放器浮標可拉伸成波形可視化界面。

通過多模態反饋,聽覺,視覺,觸覺多種情感交互。

3) 空間布局策略

? 默認位置:置于屏幕右下側(符合右手持機習慣),預留10%邊距防止誤觸;

? 智能避讓:通過內容識別算法,在視頻播放或文本輸入時自動偏移避開核心內容區域;

? AR場景中的空間投影浮標(如IKEA Place家具預覽浮窗)。

▲ 位置多為屏幕右下側

③ 技術實現優化

1)跨端一致性

? 使用React等框架封裝可復用浮標組件,通過響應式設計適配不同設備尺寸(如折疊屏展開態需重新計算定位錨點);

? 采用SVGA格式實現高性能動效,控制幀率在30fps以內以降低功耗。

2)AI驅動個性化

? 基于LSTM模型預測用戶行為: 檢測到長時間未操作時,浮標縮小并展示激勵標語; 識別到錯題高峰時段,主動彈出知識點講解入口;

? 支持語音指令交互(如“浮標移到左上角”)。

④ 無障礙與倫理考量

1)包容性設計

? 為色弱用戶提供高對比度模式 (浮標輪廓增加動態描邊,對比度≥4.5:1);

? 支持頭部追蹤控制浮標移動 (iOS Switch Control技術適配)。

2)防沉迷機制 (適合未成年類App)

? 連續使用1小時后,浮標漸變灰色并觸發休息提醒;

? 家長端可遠程設置浮標功能禁用時段。(未成年學習類工具考慮優化)

⑤ 創新方向探索

1)多模態融合

? AR場景中浮標投射為3D虛擬助手,支持手勢交互與空間定位;

? 結合眼動追蹤技術,實現注視區域自動呼出上下文菜單。

2)情感化表達

? 根據學習成就解鎖浮標皮膚 (如連續打卡7天變為獎杯形態);

? 錯誤率過高時,浮標呈現“鼓勵模式” (配色變暖+微震動反饋)。

學習類智能伴學助手的浮標既能作為高效的功能樞紐,又可成為情感化學習伴侶。實際落地時建議結合A/B測試持續優化,例如對比分析「固定浮標」與「場景自適應浮標」的點擊轉化率差異。

三、結語

浮標不應僅是功能載體,更應成為:  

? 空間敘事者:通過動態變化講述產品故事;

? 情感連接器:建立用戶與數字世界的溫度觸點;

? 場景預言家:預判需求并提供恰到好處的服務。

設計師需在「顯性價值」與「隱形干擾」間找到精妙平衡,讓浮標成為提升體驗的優雅解決方案而非視覺負擔。未來可探索腦機接口的意念控制浮標、量子動畫渲染等突破性方向。

技術實現上,探究代碼示例展示了如何控制浮標的移動,確保不超出屏幕,這可以作為技術參考應用實際案例中。同時性能優化方面,使用SVGA格式或減少幀數,可能對動效設計有幫助。

浮標設計需要結合功能定位、用戶行為、視覺設計、交互體驗和技術實現,可多進行參考不同案例,搜索現有項目,對比借鑒然后對新型B端界面有所創新,確保既實用又不干擾用戶。

還可以利用Ai創新思維,設計師可以更快速、高效地生成多種設計方案,結合項目開發滿足消費者對個性化、時尚化的需求。

本文由人人都是產品經理作者【Clippp】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

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

2025 B端設計趨勢之動效

杰睿

在數字化時代,B端產品的用戶體驗設計正變得愈發重要。動效設計作為提升交互體驗和效率的關鍵手段,正在成為B端設計中不可或缺的一部分。本文將深入探討2025年B端設計中動效的趨勢,從動效的歷史演變、物理世界中的靈感汲取,到釘釘設計系統中的實踐應用,幫助我們理解動效如何從簡單的視覺裝飾轉變為提升產品效率和用戶體驗的核心工具。

回溯互聯網的發展進程,從桌面端的撥號上網,到5G移動互聯網,再至人工智能的助力,科技領域正在經歷著翻天覆地的變革。

未來的數字世界,在沉浸感、參與度、個性化等維度對體驗會提出更進階的要求;與此同時,B端企業對于高效、簡便、用戶友好的界面需求與日俱增。

在2025年的當下,B端設計師唯有持續學習,適應新技術與新趨勢,緊密圍繞客戶的業務價值展開設計,進一步注重實用性、包容性以及可定制化,方可為企業客戶塑造出卓越的產品與服務。

因此,我們結合釘釘近10年的B端產品設計經驗,鑒于未來B端設計趨勢將展現出多元化、智能化和人性化的特質,從B端產品個性化、風格與質感、界面版式、品牌物料、圖標、動態交互等多維度設計展開深度研究,與大家一道探討B端設計的本質和趨勢,期望在真正駕馭B端產品設計的這條道路上,帶來些許有益的啟迪。對交互等多維度設計展開深度研究,與大家一道探討B端設計的本質和趨勢,期望在真正駕馭B端產品設計的這條道路上,帶來些許有益的啟迪。

今天要和大家聊聊 B 端產品的動效設計趨勢。我們將回顧動效的發展軌跡,從歷史演變到設計哲學,探索如何從物理世界汲取靈感,并分享釘釘在動效設計中的思考與實踐。

一、回顧動效設計的演變歷程

動效設計在互聯網的發展歷程中經歷了多次變革。從最初簡單的過渡動畫,到如今復雜而精細的交互體驗,動效的演進不僅是技術發展的產物,也映射了用戶體驗設計理念的不斷深化。

1990s-2000s:簡單的進度展示

在互聯網的早期,受限于帶寬和硬件性能,動效的應用較為基礎,主要用于加載進度條和頁面過渡,核心目的是向用戶提供反饋,減少操作過程中的不確定性。典型案例是 Windows 98 時代的加載進度條和網頁上的緩沖動畫。這些動效雖然簡單,卻在當時發揮了重要作用——幫助用戶理解系統狀態,降低等待焦慮。

2005-2012:Flash 技術引領網頁動畫

進入 2000 年代中期,Flash 技術的普及讓網頁動畫迎來了黃金時代。Flash 賦予了設計師更大的自由度,使得網頁可以呈現更豐富的動態效果,動效不再局限于狀態反饋,而開始深度參與交互體驗。這一時期,動效的作用從提示系統狀態進化為增強用戶沉浸感,例如按鈕懸停時的動態反饋,炫酷的頁面切換過渡,以及交互式動畫(如鼠標跟隨效果、小游戲動畫等)。

不過,Flash 的動效過度依賴插件,影響性能,并且在移動端難以兼容。2010 年代,隨著 HTML5 和 CSS3 的發展,Flash 逐漸被取代,動效設計進入新階段。

2012-至今:物理規律的引入與美學平衡

隨著移動互聯網興起,尤其是 Material Design,iOS,以及 Fluent Design 等動效規范的推出,動效設計進入了全新的階段。這個階段的核心理念是基于物理規律的自然動效,強調動效不僅僅是裝飾,而是信息層級傳遞、引導用戶操作的重要工具。

Material Design:強調物理隱喻與流暢性

  • 點擊按鈕時的波紋擴散,讓操作反饋更自然
  • 元素的加速、減速運動,使界面更富有生命感
  • 卡片式界面層級動畫,通過漸變、位移等方式構建層級感,使導航更加清晰

Fluent Design:深度融合光影與層次感

  • 通過陰影和模糊等方式,增強界面的深度和透視層次
  • 交互時光效隨用戶操作產生微妙變化,提升體驗的直覺性
  • 內容隨焦點流動,利用動效引導用戶注意力,使信息呈現更具邏輯性

由此可見,動效不再只是視覺上的炫技,而是成為提升可用性、降低認知負荷的重要工具。合理的動效可以提升用戶的操作流暢度,讓界面變得更自然、更具生命力。

二、從物理世界中捕捉動效的美感

在自然界里,每一次風吹樹葉的擺動、每一滴水滴入湖面的擴散,都遵循著物理規律,展現出流暢且和諧的運動軌跡。這些自然現象不僅帶來視覺上的愉悅,也蘊含著深層次的運動邏輯,為數字動效設計提供了源源不斷的靈感。動效的流暢性、節奏感、反饋感,本質上都是對物理世界美學的映射。

例如,波紋擴散是我們常見的自然現象。當一顆石子落入湖面,波紋自中心向外擴散,起初迅速,隨后逐漸放緩,最終消失。這個過程中的漸進減速特性為數字動效設計提供了極佳的靈感。在數字界面中,我們可以通過緩慢擴散的動畫來模擬水面波紋的效果,形成一種溫和的反饋感。

再比如,現實世界中的物體在運動時通常會表現出加速與減速的特性。以地球上的自由落體為例,物體從高空下落時,初始速度較慢,但隨著重力作用,它不斷加速。這種非勻速運動,在動效設計中被轉化為緩動曲線(Easing Curves),使得用戶在界面交互時感受到更加自然的動態變化。

而彈跳和反彈又是另一個物理世界中常見的運動方式。想象一顆籃球從地面反彈起來,起初速度快,隨后逐漸放緩,最終停止。這種逐漸衰減的回彈,正是彈性動效的靈感來源。在界面交互中,彈性動效可以模擬物體的重量和材質,提升操作的真實感。

三、釘釘設計系統里的動效哲學

當牛頓凝視落下的蘋果,他發現了萬有引力的奧秘;而當釘釘的設計團隊觀察一張任務卡片的拖拽軌跡時,我們探尋的是數字世界的運動法則。在物理規律與交互邏輯的交匯處,釘釘的動效設計體系逐漸凝練出一套方法論——讓每個像素的運動既符合自然規律,又服務于生產效率。

在 B 端產品中,動效遠不止是視覺與交互的簡單結合,更是提升可用性和降低認知成本的關鍵手段。它不僅承擔著引導用戶操作、傳遞信息層級、降低認知負荷的功能,還通過增強操作確定性,幫助用戶更高效地完成任務。換句話說,我們正以理性與直覺,重塑效率美學。

原則:平衡的藝術

釘釘的設計框架始終圍繞視覺感官和用戶體驗兩個核心維度展開,追崇理性與感性的精密協作:

1. 視覺感官:流暢

  • 連貫性:組件狀態的切換應如同翻動書頁般自然,確保界面過渡流暢、節奏統一,讓數字世界保持有序
  • 自然性:模仿現實世界的運動方式,使動效遵循慣性、彈性、摩擦等物理規律,減少割裂感,讓用戶的感知更直覺
  • 不碰撞:就像城市道路的規劃,動效的路徑需經過精心設計,避免界面元素相撞或相互干擾,確保用戶注意力不被分散

2. 用戶體驗:高效

  • 助交互:在復雜的信息架構中,動效可以作為層級引導,幫助用戶理解界面之間的主次關系
  • 不干擾:平衡產品界面中的動效存在感,避免過度裝飾或喧賓奪主。最理想的動效,是讓用戶幾乎察覺不到它的存在,卻能享受它帶來的流暢體驗
  • 明確性:每一個動效都有其清晰的目的,或是為了引導用戶操作,或是為了強化任務的完成感

時間梯度:數字節拍器

企業級應用中,物體的運動時間需要把控得恰到好處。研究表明,人類對 100ms 以下的變化幾乎無感,而超過 1s 的等待則會讓用戶產生不耐煩的情緒。因此,釘釘的動效體系嚴格遵循以下節奏,通過順應人類大腦的認知規律,確保每一次動效都恰到好處,帶來舒適的體驗:

  • 最短動效時長設定為 100ms,并以 100ms 遞增,確保節奏穩定
  • 不同動效的時間設定,取決于物體的大小、路徑長短以及動畫復雜度

速度:像素的重力場

現實世界中的物體運動受到重力、摩擦力等因素影響,呈現加速與減速的動態變化。釘釘的動效體系也采用緩動曲線(Easing),以模擬真實世界的運動節奏。當數字界面掙脫線性勻速的機械感,便擁有了令人愉悅的「生命感」。

空間:界面的立體語法

在二維屏幕上構建三維認知,需要更精密的「空間修辭學」。釘釘的動效體系確保每一次位移都符合用戶的直覺,并運用空間層次感,讓信息更易理解。

1. 同級物體

  • 整體運動方向和遞進順序需符合用戶預期
  • 確保物體運動順序符合「左到右、上到下、順時針」的視覺流

2. 從屬物體

  • 核心物體的動效應更突出,而叢屬元素的動效需弱化或捆綁運動
  • 確保物體的運動軌跡不發生碰撞

3. 三維空間

  • 物體在 Z 軸上有位移變化時,尺寸應相應調整,以模擬透視效果
  • 近大遠小的視差效果,可增強層次感,提升信息的空間可讀性

四、無障礙設計思考

在動效設計中,無障礙性不僅關乎技術標準,更關乎用戶的體驗公平性。一個包容的設計體系,應該讓所有用戶——無論其身體或認知能力如何——都能平等地理解和使用產品。無障礙動效的核心,在于減少干擾、提供替代方案,并賦予用戶選擇權,確保每一次交互都是安全、友好的。

避免誘發健康問題:高頻閃爍或快速變化的動畫可能誘發光敏性癲癇等健康問題。因此,在設計時,我們應避免超過3次/秒的快速閃爍,并盡可能減少過度刺激性的動效

提供替代方案:對于依賴屏幕閱讀器的用戶,純視覺動效可能難以感知。我們可以為動效添加文本描述或提供靜態替代方案,確保所有用戶都能理解動效傳達的信息。例如,在釘釘 AI 助理中的加載場景,我們提供「正在為你生成…」的文本標簽,方便屏幕閱讀器用戶理解當前狀態

五、總結

動效設計已成為現代數字產品中不可或缺的組成部分。從簡單的過渡動畫到如今富有交互感和情感觸動的設計,動效已經不再是單純的視覺裝飾,而是推動產品發展、提升用戶體驗的關鍵力量。

真正的好動效,是那種用戶幾乎察覺不到的流暢交互,它能夠讓信息傳遞變得高效、讓操作更加順暢,同時也讓數字產品展現出溫暖的人文氣息。動效,作為產品與用戶之間的一座橋梁,它不僅是界面的點綴,更是效率與體驗的催化劑。

未來,釘釘將繼續探索動效設計的創新與實踐,通過優化交互體驗、提升產品效率,不斷賦能用戶、創造更美好的數字世界。

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

高轉化寶貝詳情頁設計解析:什么才是沉浸式的設計?

杰睿

關鍵字:電商 詳情頁設計 視覺營銷

網絡時代,電商平臺作為主流消費渠道,在消費者心中已占有大部分比例,越來越多的消費者更愿意選擇在線上購物消費,如何讓消費者能夠更快速了解商品,產生購買欲?電商詳情頁起到關鍵性作用,電商詳情頁作為產品說明書,不僅是成交轉化入口,更是品牌傳播的重要途徑。如何設計一款適合產品的詳情頁?主要從兩個方面入手:

電商詳情頁策劃
定位分析
1) 產品:屬性、功能、用途,如圖一(左):產品使用場景配合文字說明能讓消費者一目了然;
2) 價格:決定怎么去做,影響設計風格;
3) 人群定位:消費者路徑、在意點,如圖二(右):對于母嬰產品主打自然、健康。
文案策劃
1)使用用戶化語言(消費者語言)——不要用大白話,用使用互聯網思維,打造既視感文案,如圖三(左):可視化場景搭配文案更直觀表現產品功能及作用。
2)理性傳達——賣點直接表達,如圖四(右):“好空氣,看得見”,賣點簡潔明了。
3)文案使用規范,熟悉廣告法,禁止使用極限詞及違規詞。
拍攝腳本
1)草圖規劃,道具規范,角度光影規劃,模特規則(妝容、動作、表情等),如圖五:前期的策劃為了更好的展現設計效果,需要先繪制草稿,通過草稿展現畫面的布局、角度透視、道具選擇、模特選擇、整體光影規劃等,直觀給到攝影師更好的拍攝方案,同時也可以后期設計執行提供更好的設計依據。

詳情頁執行策略
板式設計
1) 配色策略(色指定):品牌VI色、情感色、主色、輔色、點綴色,如圖六(左):主色調選擇與產品同類色,整體上統一協調,點綴色選擇產品輔色,突出對比強烈;
2) 裝飾性元素:元素風格的一致性,圖形符號要與整體的畫面風格保持一致性;
3) 字體選擇及組合:字號大小對比、疏密對比及組合規范符號,如圖七(右)。

形式感
形式感在生活中無處不在,設計中更要熟練應用,詳情頁作為消費者直觀視覺呈現,為了博取消費者眼球,需要通過不同的形式營造視覺氛圍,設計具有沖擊力的畫面,避免畫面單調。
1) 對齊、疏密對比、破方,如圖八(左):圖文排版,文字組合通過對齊、疏密對比,視覺上節奏感舒適;圖九(右)通過破方改變了原有視覺展現,以另外視覺呈現吸引消費者眼球。
文案與圖標組合
1) 文案形式需要2-3種變化,如圖十(左):主文案與輔助文案通過不同的字體、大小、表現形式的對比,更加突出了“出水芙蓉”主題性文案,符合畫面的表現;
2) 符號與圖形,圖十一(右):文案與圖形的結合,既突出主題文案,又通過簡單的符合表現產品的功能賣點,兩者的結合更好展現了產品賣點,讓消費者更直觀了解產品。
電商詳情頁決定了轉化率,好的詳情頁設計既可以給消費者建立更多的信賴感,又可以成為促使消費者購物下單的催化劑。做好一款詳情頁,前期的策劃及后期的執行都是至關重要的,每一環節都需要考慮,缺一不可。

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

作品就要不斷打磨,這些細節點都要注意了!

杰睿

今天來優化一張作品

今天我們來看一下學員作品并且優化一下!

 

在優化之前,你們能不能看出作品還存在什么問題呢?

 

 

是不是感覺已經是一張完成度很高的作品了,那它能不能更好呢?

 

當然可以!我們來看看如何優化。

 

 

 

第一步 優化構圖

 

原圖的構圖雖然感覺挺有意思,但是并沒有做到位,對于新手來說,這種構圖也是相對比較難的,前期我建議大家可以選擇一些相對不易出錯的構圖方式,比如元素圍繞主體,營造畫面沖擊力的居中構圖。

 

 

1.可以把元素聚集到中心周圍,讓畫面緊湊,飽滿,做出向外沖出的效果。

 

 

 

 

 

2.可以添加兩根前后貫穿空間的光帶,增強沖擊力,讓構圖更有張力!

 

 

這樣的構圖簡單并且容易出效果!

 

 

 

第二步 色彩調整

 

1.飽和度:

原版畫面中這一層次看起來是不是特別重,導致畫面的節奏一下有點亂掉了。而且整體飽和度相對比較高,有點油膩!

 

 

我們要適當降低畫面中部分層次的飽和度,這樣才會使整體更加高級,可以看下優化之后的效果:

 

 

是不是舒服多了。

 

 

 

2.統一色調:

我們做圖的時候主體和環境要有一些呼應,這個飛碟飛碟正面有點太綠了,缺少一些呼應環境的顏色,這樣就會感覺和畫面有些割裂感,可以增加一些環境色,使其統一呼應到一起。

 

 

我們看下前后優化的對比效果:

 

 

這樣就和諧多了!

 

 

 

第三步 優化空間

 

首先我們來看原圖,是不是會覺得畫面中心有一點空,元素都在外部,導致整體不夠飽滿:

 

 

所以我們在優化的時候,把元素平均的分布在畫面的每一個地方,使空間看起來更加的均衡:

 

 

現在元素雖然均衡了,但是并沒有產生前后關系,所以我們讓后面的元素更弱一些,分幾個層次。

如下圖:

 

 

當我們把這樣的元素層次放在畫面里之后,看起來就會更加的精致飽滿,空間感十足:

 

 

 

 

 

第四步 增加畫面趣味性

 

其實增加趣味性的方法有很多,比如我們在這個畫面融入了很多表情,可以讓畫面更加生動。

 

除了這樣的方法,其實一些小小的改動有時候也可以讓畫面變得更加趣味一些。

 

比如:

原版的飛碟太正了,顯得呆呆的,這個時候我們可以把主體歪一下,一下子它就活潑了。

 

 

 

再比如:

有時候元素直接漏出來顯得比較生硬,如果我們利用一層一層的波紋,藏住元素,或許也可以巧妙地增加畫面趣味性:

 

 

 

效果還不錯吧!

 

最后我們加上文字,看看整體優化前后的效果!這是不是要比之前的穩很多呢:

 

 

 

 

 

總結

 

最后,我們再來總結一些知識點吧:

 

1.構圖:構圖的時候就要要注意整體的飽滿度,畫面穩定,元素分得太分散就會不聚焦了。

 

2.顏色的飽和度:主體>元素>背景。

 

3.空間:畫面不能太空,要有節奏的把畫面每一個角落都照顧到,其次我們要在視覺上有前有后,增強縱向空間上的層次感。

 

4.趣味性:增加畫面趣味性除了利用表情以外,還可以用一些微小的變化去實現,比如歪著的可能比正的活潑一點,再比如元素的穿插互動也可以讓畫面增趣不少,大家可以多多嘗試!

 

以上就是今天和大家分享的內容,希望對大家有所幫助!



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

日歷

鏈接

個人資料

藍藍設計的小編 http://www.73404.com.cn

存檔

主站蜘蛛池模板: 日韩精品91亚洲二区在线观看 | 国产乱人伦偷精品视频免下载 | youporn免费视频成人软件 | 四虎免费久久 | 国产乱xxⅹxx国语对白 | 国产精品刺激对白97 | 99久久婷婷国产综合精品电影 | 草草草在线 | 久久99精品久久久秒播 | 特级西西人体444www高清大胆 | 在线免费视频你懂的 | 一个人免费观看视频www中文 | 99视频在线精品免费观看6 | 亚洲a成人片在线观看 | 97久久精品人人澡人人爽古装 | 内射人妻少妇无码一本一道 | 色婷婷一区二区三区四区成人网 | 九九热视频免费观看 | 精品一区二区三区四区视频 | 51成人| av片免费看| 亚洲欧美综合网 | 天天天天天干 | 精品国产黑色丝袜高跟鞋 | 亚洲a人 | 日韩在线高清视频 | 69亚洲乱 | 精品人伦一区二区色婷婷 | 国产成人午夜福利在线播放 | 91久久北条麻妃一区二区三区 | 在线观看国产午夜福利片 | 亚洲中文字幕无码一区二区三区 | 国产h在线观看 | 欧美午夜特黄aaaaaa片 | 免费人成激情视频在线观看冫 | 欧美精品v国产精品 | 色婷婷狠狠久久综合五月 | 肉色丝袜小早川怜子av | 91免费视频观看 | 女国产精品视频一区二区三区 | 亚洲精品萌白酱一区 | 黄色大片儿 | 午夜精品久久久久久久久 | 97久久精品无码一区二区天美 | 久久免费在线 | 99蜜桃臀久久久欧美精品网站 | 夜夜草av| 久久www免费人成一看片 | 麻豆高清视频 | 欧美 国产 综合 欧美 视频 | 国产香蕉尹人视频在线 | hd最新国产人妖ts视频 | 精品国产乱码久久久久久免费 | 欧美精品久久久久久久免费 | 日韩视频网址 | 一级淫片免费看 | wwwav在线播放| 亚洲美女性视频 | 国产制服av | 高清在线一区 | 99国产精品久久久久久 | 亚洲精品乱码久久久久久按摩 | 欧美人禽动交2002 | 国产黄色免费观看 | 国产精品久久久久久在线观看 | 97超碰超碰久久福利超碰 | 国产真实老熟女无套内射 | 成人av亚洲| 国产真实伦在线观看视频 | 天天躁夜夜踩很很踩2022 | 麻豆秘密入口a毛片 | 婷婷综合av| 久久久久麻豆v国产精华液好用吗 | 熟女丰满老熟女熟妇 | 国产精品国产三级国产普通话对白 | 免费av资源在线观看 | 午夜精品久久久久久久99热额 | 一级黄色片在线免费观看 | 夜夜躁狠狠躁日日 | 国产精品国产高清国产av | 日日橹狠狠爱欧美二区免费视频 | 免费无遮挡无码永久视频 | 亚洲人成无码网站在线观看 | 中文国语毛片高清视频 | 成人欧美在线 | av动漫免费观看 | 高辣h文乱乳h文男男双性视频 | 欧美丰满大乳大屁股毛片图片 | 国产精品久久久久久久久久久久午夜 | 国产又色又爽无遮挡免费动态图 | 欧美日韩激情视频在线观看 | 在线免费观看a视频 | 久久国产一区 | 中文字幕乱码中文乱码51精品 | 午夜精品久久久久久久99樱桃 | 国产全肉乱妇杂乱视频1 | 国产私拍大尺度在线视频 | 农村少妇野战做爰全过程 | 免费黄色的网站 | 91中文字幕在线播放 | 国产精品久久久久亚洲影视 | 国产精品自在欧美一区 | 亚洲熟妇中文字幕五十中出 | 欧美性猛交xxxx乱大交蜜桃 | 久久在线免费视频 | 国产一区二区不卡精华液 | 国产免费拔擦拔擦8x高清在线人 | 欧美性日韩 | 中文字幕22页| 97人人插| 日本少妇一区二区 | 午夜视频在线观看国产 | 荡女淫春 在线观看69影院 | 国产精品高清一区二区三区 | 女人爽到高潮潮喷18禁网站 | 国产精品久久久福利 | 久久精品人妻一区二区三区 | 日韩精品一区二区三区四区新区 | 国产欧美日韩a片免费软件 九九久久精品无码专区 | 91在线精品播放 | 无码人妻久久一区二区三区不卡 | 四虎最新网址在线观看 | 色婷婷一区二区三区四区成人网 | 午夜福利在线永久视频 | 国产第一页视频 | a天堂视频在线观看 | 国产精品久久久久免费 | 少妇激三级做爰在线观看 | 天天躁日日躁狠狠的躁天龙影院 | 国产精品久久久久影院老司 | 国产精成人品日日拍夜夜免费 | 日韩欧美色图 | 日本三级网站在线观看 | 日日摸夜夜添狠狠添久久精品成人 | 国产精品免费看 | 亚洲国产成人久久一区二区三区 | 天天色天天色天天色 | 国产suv精品一区二区6 | 大胸美女被吃奶爽死视频 | 亚洲成熟女人毛毛耸耸多 | 国产爽爽久久影院hd | 欧美少妇网 | 怡红院a∨人人爰人人爽 | 成品人片a91观看入口888 | 亚洲日本乱码一区二区三区 | www伊人网| 欧美少妇一区二区 | 911精品 | 美妇av | 欧美日韩首页 | 欧美经典影片视频中文 | 免费黄色在线观看 | 粉嫩91精品久久久久久久99蜜桃 | 日本又紧又色又嫩又爽的视频 | 天干天干天啪啪夜爽爽av小说 | 关晓彤三级在线播放 | 高h全肉老汉嫩草文 | 亚洲男人的天堂在线观看 | 伊人久久大香线蕉综合网站 | av一区二区三区在线观看 | jizz日本大全 | 国产欧美在线观看不卡 | 亚洲一区二区中文字幕 | 成人三级影院 | 日韩成人高清 | 欧洲美熟女乱又伦av | 露脸叫床粗话东北少妇 | 日韩亚洲欧美一区二区三区 | 免费视频亚洲 | 男女性潮高清免费网站 | 中文字幕第三页 | 污网在线观看 | 久久成人综合 | 毛多水多www偷窥小便 | 综合天天色 | 国内少妇毛片视频 | 少妇精品久久久久久久久久 | 欧美三日本三级少妇三99r | 欧美视频第二页 | 风间由美av| 亚洲色欧美另类 | 亚洲精品视频网址 | 无翼乌口工全彩无遮挡h全彩 | 日本不卡视频在线 | 亚洲国内自拍 | 狠狠婷婷综合久久久久久 | 亚洲精品国产嫩草在线观看东京热 | 日产一区三区三区高中清 | 国产精品视频专区 | 久久久激情视频 | 91网站在线看 | 国产一区二区内射最近更新 | 日本公妇乱淫hd | 好男人社区www在线官网 | 日韩欧美亚洲在线 | 久久久久久国产精品美女 | 亚洲一二三四专区 | 亚洲精品资源 | 亚洲色图欧美另类 | 国产精品jizz在线观看美国 | 嫩草社区| 国产女人十八毛片 | 爱吃波客今天最新视频 | 日日噜噜噜噜夜夜爽亚洲精品 | 秋霞福利视频 | 性色av免费观看 | 91精品国产日韩91久久久久久360 | 两男一前一后cao一女 | 国产中文在线播放 | 欧美一区二区三区爽爽爽 | 翔田千里一区二区 | 亚州av一区二区 | 51免费动漫网永久入口 | 日韩激情小视频 | 九色jiuse| 久久亚洲网 | 婷婷中文 | 性xxx4k欧美乱妇 | 欧美精品一级二级三级 | 国产经典久久 | 国产蜜臀97一区二区三区 | 日韩精品视频一区二区三区 | 国产精品无遮挡 | 四月婷婷| 成人性视频sm | 久久精品岛国av一区二区无码 | 好紧好爽午夜视频 | 无码国产一区二区三区四区 | 五月99久久婷婷国产综合亚洲 | 深夜男女福利18免费软件 | 欧美三级a做爰在线观看 | 小蝌蚪av | 少妇人妻偷人精品视频 | 黄色录像毛片 | 久久免费片 | 国产精品无码av不卡 | 日韩中文字幕在线视频 | 奇米7777狠狠狠琪琪视频 | 欧美交换配乱吟粗大在线观看 | 久久av红桃一区二区小说 | 久久99国产精品久久99果冻传媒 | 欧洲a级片 | 无码中文字幕日韩专区 | 日本少妇丰满大bbb的小乳沟 | 蜜臀久久99精品久久久无需会员 | 久久视| 18禁美女裸体免费网站 | 久久亚洲免费 | 两人做人爱费视频午夜 | 国产一区二区在线免费 | 亚洲男人第一av网站 | 国产黄色观看 | 国产精品美女久久久久久久久久久 | 中文字幕com | 美女av网| 国产高清女同学巨大乳在线观看 | 两个奶头被吃高潮视频 | 国产日韩亚洲 | 久久久网址 | 放荡富婆videos√ | 欧美亚洲在线播放 | 久久99精品国产.久久久久 | 嫩草国产 | 自拍三级| 国产精品久久久久久久久久久久冷 | 无码人妻一区二区三区精品视频 | 国产乱女淫av麻豆国产 | 九九热在线视频 | 91久久精品久久国产性色也91 | 五月激情六月婷婷 | 日本精品高清一区二区 | 公么大龟弄得我好舒服秀婷视频 | 天天躁日日躁狠狠躁av中文 | 久久免费看少妇高潮a | 熟女人妻一区二区三区免费看 | 日本无遮羞调教惩罚网站 | 欧美一级做一级爱a做片性 欧美一极片 | 捆绑凌虐一区二区三区 | 在线观看毛片视频 | 国产亚洲精品久久久久久 | re久久 | 四虎影视久久久免费观看 | 亚洲v无码一区二区三区四区观看 | 国产综合内射日韩久 | 舐め犯し波多野结衣在线观看 | 久久久久av无码免费网 | 国产一级二级三级在线 | 无码任你躁久久久久久 | 在线人成免费视频69国产 | 国产一区二区在线影院 | 双腿张开被9个黑人调教影片 | 国产日韩欧美日韩大片 | 综合在线播放 | 国产成人av一区二区三区不卡 | 人人妻人人玩人人澡人人爽 | 亚洲最大精品 | 欧美精品成人在线 | 国产亚洲欧美日韩亚洲中文色 | 最新最近中文字幕 | 国产做爰视频 | 97国产精品一区二区 | 亚洲美女屁股眼交8 | 乱人伦中文视频在线观看 | 欧美日韩一二三区 | 日本不卡一二 | 国产又粗又硬又大爽黄老大爷视频 | 日韩视频在线观看二区 | 欧美aaaa视频 | 日本韩国一级淫片a免费 | 国产又黄又爽刺激片 | 婷婷久久综合九色综合绿巨人 | 免费看的一级视频 | 天天干天天干天天操 | 亚洲热妇无码av在线播放 | www.久久久久久 | 黄色网页免费观看 | 四虎精品在线 | 亚洲欧美国产精品久久久久久久 | 久久久中精品2020中文 | aa级黄色片| 又大又黄又爽视频一区二区 | mm1313亚洲国产精品一区 | 91麻豆精品久久久久蜜臀 | 国产对白乱刺激福利视频 | 人妻精品无码一区二区三区 | 136fldh导航福利视频 | 国产美女久久精品香蕉69 | 青青操av在线 | a国产一区二区免费入口 | 情五月| 亚洲国产成人精品无码区二本 | 亚洲第一网站在线观看 | 一级黄色片大全 | 国产又粗又猛又黄又爽视频 | 久久精品超碰 | 久久久久久九九九九 | 国产产无码乱码精品久久鸭 | 山东少妇露脸刺激对白在线 | 欧美一区二区三区四区视频 | 国产精品久久久久9999高清 | 欧美与黑人午夜性猛交久久久 | 国产成人精品久久二区二区 | 高h辣h情趣道具h黄n男一女 | 国产精品亚洲天堂 | 精品国精品自拍自在线 | 96sao精品视频在线观看 | 亚洲视频大全 | 国产小视频网址 | 欧美精品久久久久 | 亚洲国产精品久久久 | 特大巨黑吊xxxx高潮 | 色噜噜网站 | 国产精品成人免费视频 | 天天鲁一鲁摸一摸爽一爽视频 | 日本黄色精品 | 啪啪的网站| 国产精品久久久久久久av | 91丨九色丨91啦蝌蚪老版 | 久久羞羞视频 | 伊人网在线 | 国产真实交换夫妇视频 | 日韩欧美在线第一页 | 国产午夜激情视频 | 越南少妇做受xxx片 越南性xxxx精品hd | 色嗨嗨av一区二区三区 | 国产精品熟妇一区二区三区四区 | 好吊操视频这里只有精品 | 麻豆精产国品 | 久久久精品久久日韩一区 | 国产精成人| 亚洲爱 | 亚洲精品丝袜久久久久久 | 欧美激情在线一区二区 | 免费精品在线观看 | 99久久久国产精品免费蜜臀 | 99久热在线精品视频观看 | 国产精品国色综合久久 | 国产又黄又硬又湿又黄的播出时间 | 欧美11一13sex性hd | 91国视频 | 日韩和欧美一区二区三区 | 日日摸日日碰夜夜爽亚洲精品蜜乳 | 久久av高潮av | 男女做性无遮挡免费视频 | 噜噜吧噜噜色 | 国产三级韩国三级日本带黄 | 黄色国产在线播放 | 日韩毛片在线播放 | 男女午夜激情视频 | 夜夜高潮夜夜爽精品视频 | 制中文字幕音影 | 国产老太婆免费交性大片 | 欧美国产综合欧美视频 | 亚洲狠狠婷婷综合久久 | 欧美一区免费 | 日韩中文字幕精品视频 | 中文成人无码精品久久久不卡 | 少妇光屁股影院 | 微拍 福利 视频 国产 | 色老大影院 | 欧美激情一区二区在线 | 欧美日韩高清在线播放 | 27美女少妇洗澡偷拍 | 中文字幕爆乳julia女教师 | 国产91富婆露脸刺激对白 | 天天噜日日噜 | 97精品国产97久久久久久免费 | 三男一女吃奶添下面视频 | av片在线观看 | 国产67194| 在线观看老湿视频福利 | 日韩国产成人在线 | 性欧美极品xxxx欧美一区二区 | 亚洲痴女 | 北京富婆泄欲对白 | 国产一区二区三区日韩精品 | 亚洲欧美一级 | 草综合| 亚洲a∨国产av综合av网站 | 精品国产sm最大网站 | 国产亚洲日本精品无码 | 亚洲加勒比无码一区二区 | 91av入口| 九一毛片 | 欧美另类videos | 欧美一级视频一区 | 亚洲欧美精品 | 乌鸦热v2ba在线观看 | 日本在线一区二区 | 91久久精品国产 | 无码av中文字幕免费放 | 理论片在线观看视频 | 国产区图片区小说区亚洲区 | 岛国av无码免费无禁网站 | 黄色片免费视频 | 午夜在线看片 | 秋葵视频在线 | 国产精品天天看 | 国产超碰人人模人人爽人人喊 | 国产精品福利在线 | 美女胸18大禁视频网站 | 午夜少妇性高湖久久久久 | 成人亚洲精品久久久久软件 | 亚洲日韩aⅴ在线视频 | 国产精品亚洲欧美大片在线看 | 黄网在线免费看 | 亚洲麻豆av | 色狠狠av老熟女 | 国产一级特黄视频 | 又色又爽又黄无遮挡的免费视频 | 成人国产精品免费网站 | 亚洲视频导航 | 欧美日韩一区在线观看 | 亚洲视频在线观看免费的欧美视频 | 久久国产二区 | 免费看中国毛片 | 欧美丰满熟妇xxxx性 | 福利片一区二区 | 精品视频一区二区三区四区戚薇 | 国产高清久久 | 国产中文字幕乱人伦在线观看 | 国产日韩欧美中文另类 | 九九九九精品 | av福利在线观看 | 国产熟妇搡bbbb搡bbbb搡 | 亚洲1区在线观看 | 亚洲精品国产乱码久久久1区 | 国产一区二区在线影院 | 成人性毛片| 伊人久久激情 | 性一交一乱一交一精一品 | 亚洲狠狠婷婷综合久久 | 亚洲天天摸日日摸天天欢 | 午夜丰满少妇高清毛片1000部 | 日韩无套| 久久国产精品无码网站 | 国产日韩欧美亚欧在线 | 偷拍av网 | 色偷偷久久 | 天天躁日日躁狠狠的躁天龙影院 | 天海翼一区二区三区免费 | 极品色综合 | 动漫精品专区一区二区三区 | 成人免费av在线 | 亚洲国产成人精品久久久国产成人 | 污污内射久久一区二区欧美日韩 | 狠狠cao日日穞夜夜穞av | 真人与拘做受免费视频 | 久久va| 两个人看的www免费视频中文 | 亚洲视频一区在线观看 | 女人高潮av国产伦理剧 | 精品无人乱码一区二区三区的特点 | 国内精品国产三级国产a久久 | 亚洲日本va中文字幕久久 | 又色又爽又黄的美女裸体网站 | 69视频免费 | 一级特级黄色片 | 国产一级片麻豆 | 无遮挡国产高潮视频免费观看 | 在线观看亚洲专区 | 日韩中文字幕二区 | 天躁夜夜躁狼狠躁 | 国产99久久久国产精品免费高清 | 色哟哟在线视频 | 日本熟妇大乳 | 99久久精品日本一区二区免费 | 久久精品在 | 久久思| 青青草视频免费观看 | 天天躁日日躁狠狠躁精品推荐 | 女人高潮抽搐喷液30分钟视频 | 人成午夜免费视频在线观看 | 精品无码av人在线观看 | 日本亚洲一区 | 噼里啪啦免费观看 | www.久久成人| 亚洲午夜精品a片久久www慈禧 | 久久综合在线 | 亚洲欧美少妇 | 欧美成人精品激情在线视频 | 久久久国产一区二区三区 | 香蕉av777xxx色综合一区 | 亚洲精品一区二区三区香蕉 | 国产成人三级在线播放 | 色一情一乱一伦麻豆 | 中文字幕超清在线免费观看 | 超碰综合 | 欧洲性生活视频 | 欧美精品一区二区三区蜜桃视频 | 无码人妻精品一区二区蜜桃百度 | 国内精品九九久久精品 | 毛色毛片免费观看 | 国产美女mm131爽爽爽免费 | 三级色网 | 精品一区二区三区不卡 | 一线二线三线天堂 | 中文字幕日韩欧美一区二区三区 | 国产乱淫av麻豆国产免费 | 青青草原av | 日韩免费专区 | 国产精品一品二区三区的使用体验 | 久久全国免费视频 | 久久er99热精品一区二区 | 午夜在线精品 | 久久www人成免费产片 | 国产午夜免费视频 | 久久久久免费观看 | 俺也来俺也去俺也射 | 国产日韩一区二区三免费高清 | 国产天天综合 | 99久久免费看视频 | 青草精品国产福利在线视频 | 91麻豆精产国品一二三产区区 | 欧美午夜精品久久久久久孕妇 | 无尽3d精品hentai在线视频 | 韩国毛片基地 | 国产免费黄色网址 | 日韩欧美视频在线播放 | 精品国产精品网麻豆系列 | 啪啪av大全导航福利网址 | 国产高潮视频在线观看 | 精品人妻av一区二区三区 | 91精品视频国产 | 久久久啊啊啊 | 国产在线精品一区二区 | 五月天一区二区三区 | 国产91热爆ts人妖系列 | 999精品影视在线观看不卡网站 | 纯爱无遮挡h肉动漫在线播放 | 99国产精品入口 | 三级av免费看 | 天堂va蜜桃 | 国v精品久久久网 | av在线网址观看 | 国产一区二区三区精品在线观看 | 天堂网中文在线观看 | 自拍一区在线 | 性色av香蕉一区二区 | jizz欧美| 韩国一区二区三区在线观看 | 亚洲国产精品成人久久久 | 精品三级在线 | 亚洲区欧美区综合区自拍区 | 久久久视频在线 | 麻豆av毛片 | 久久久久亚洲精品国产 | 久久久久久一区二区三区四区别墅 | 日本一区二区视频 | 国产精品情侣呻吟对白视频 | 亚洲精品乱码久久久久久黑人 | 国产精品无码永久免费888 | 亚洲va中文字幕无码 | 一本一本久久a久久精品综合麻豆 | 丰满少妇在线观看资源站 | 国产精品久久国产三级国不卡顿 | 国产区一区二区三区 | 国产精品日韩专区 | 日本三级韩国三级欧美三级 | 鲁丝一区二区三区 | 美女131mm久久爽爽免费 | 综合久久激情 | 欧洲一级黄色片 | 亚洲国产在 | 色激情综合 | 真人做爰高潮全过程毛片 | 日本亚洲一区 | 国产一线在线 | 大狠狠大臿蕉香蕉大视频 | 亚洲欧美另类在线图片区 | 亚洲精品无码av中文字幕电影网站 | 亚洲精品在线视频观看 | 精品无码成人片一区二区98 | 播放灌醉水嫩大学生国内精品 | 无码专区人妻系列日韩精品少妇 |