欧美日韩国产女主播|久久青春操无码日韩va国产va|国语自产自偷拍|少妇视频一区在线精品 亚洲中文字幕无码vs色欲_在线观看视频免费国产成人_精品无码久久中文字幕_日韩AV中文字幕网址

首頁

【設(shè)計法則】如何精進你的設(shè)計知識體系之—古騰堡原則！

清陽 設(shè)計思維

“在設(shè)計的道路上，若暫時看不清遠方，不妨先俯身夯實腳下。蘭亭妙微堅信，真正的專業(yè)并非靈光一閃的偶然，而是源于嚴謹知識體系的必然。我們主張讓每一個像素的落點都有理可依，讓每一次交互的流轉(zhuǎn)都有據(jù)可引。只有用邏輯筑起設(shè)計的基石，才能讓作品在紛繁的視覺中站得穩(wěn)、立得住，讓人不僅看見美，更能看見背后的價值。”

一、什么是古騰堡原則

古騰堡原則是由14世紀西方活字印刷術(shù)發(fā)明人約翰·古騰堡提出，早在20世紀50年代在設(shè)計報紙的過程中，提出了一項原則，認為人的閱讀方式應(yīng)該是遵循某種習慣進行的，像讀書一樣，由左到右，從上到下。

經(jīng)過研究，他最終得出了被后人熟知的「古騰堡原則」，古騰堡你可能覺得既難懂還陌生，它還有另外一個名字：對角線平衡法則。

這個原則的支撐點為「閱讀重心」，由人們一直以來的閱讀習慣形成。將頁面的設(shè)計與閱讀的重心相協(xié)調(diào)，能幫助讀者梳理閱讀的邏輯。據(jù)研究發(fā)現(xiàn)，這么做能提高讀者閱讀的節(jié)奏和理解能力。

古騰堡原則指人的閱讀方式遵循從左到右的眼動規(guī)律，且畫面顯示的東西都分成四個象限：

1、第一視覺區(qū)（Primary Optical Area）：處于左上方，讀者首先注意到的位置。

無論用戶在搜索內(nèi)容、主動閱讀或者快速瀏覽，這都是用戶閱讀的第一落點區(qū)域。因此在這個區(qū)域我們應(yīng)放置一級內(nèi)容或者核心功能。

2、最終視覺區(qū)（Final Optical Area）：處于右下方，視覺流程的終點。

這個區(qū)域是用戶瀏覽行為的最終落點區(qū)域，當用戶瀏覽到這個部分時需要采取措施，我們可以在這里插入按鈕或者行動點。這也就能解釋為什么按鈕都會在右下角出現(xiàn)。當用戶的瀏覽行為結(jié)束后，可以進行操作反饋。

3、強休息區(qū)（Strong Follow Area）：處于右上方，較少被注意到。

在這個階段，我們不應(yīng)該去設(shè)置一個重要的行動點，一方面用戶容易忽視，另一方面，當用戶瀏覽完中心區(qū)域的內(nèi)容后，再返回到強休息區(qū)操作，視線會有個折回過程，用戶體驗并不太理想。

4、弱休息區(qū)（Weak Follow Area）：處于左下方，最少被注意到。

用戶對這塊的注意程度最弱，因此也用來放置最弱的信息提示。

二、古騰堡原則在設(shè)計中的應(yīng)用

遵循古騰堡法則，界面中的左上和右下是用戶視覺最為重點關(guān)注的位置，設(shè)計師應(yīng)該把界面的關(guān)鍵元素放在主視區(qū)，最終視覺區(qū)可以放按鈕，休息區(qū)可以用來放一些相對次要的內(nèi)容，如輔助圖形、文字信息。

比如我們常用的頁面彈窗、各種文件和合同文件等等就是采用這種原則進行設(shè)計的。

1、古騰堡原則在web端界面布局設(shè)計

我們可以根據(jù)一般的用戶視覺習慣，來放信息權(quán)重不同的內(nèi)容。

第一視覺區(qū)是用戶瀏覽網(wǎng)頁的起始點，最終視覺區(qū)是結(jié)束離開網(wǎng)頁的終點。整體是根據(jù)人們從上到下、從左至右有規(guī)律的閱讀習慣設(shè)計的。

我們可以看到人人都是產(chǎn)品經(jīng)理網(wǎng)站信息結(jié)構(gòu)的布局

1、根據(jù)起點第一視覺區(qū)的特性把LOGO和導航放在左上角，推薦的文章也以圖片的形式放在這里進行曝光；

2、弱休息區(qū)則放一些最新推薦的文章，吸引用戶不斷往下翻；

3、高閑置區(qū)則放文章內(nèi)容之外的驚喜推送內(nèi)容；

4、最終視覺區(qū)則是提供給用戶相關(guān)推薦課程或者想要加入的社區(qū)入口，也是常見的放置廣告的地方。

2、古騰堡原則在移動端頁面布局設(shè)計

古騰堡圖表應(yīng)用最典型的例子就是商品詳情頁，在界面的頂部展示商品圖片、名稱、價格、快遞和優(yōu)惠等用戶主要關(guān)心的信息；右上和左下通常是分享、客服和收藏等次要信息；右下角則放置最終促成用戶交易的購買按鈕。

3. 圖文類信息

結(jié)合古騰堡的視線強弱分析，我們可以得知左側(cè)的首要視覺點一定是強視覺區(qū)，但是有時候簡單的圖片+文字的排列也會有很多設(shè)計思考。

比如：第一個圖今日頭條的布局，光看它的配圖我們根本猜不出來整體條目所表達的內(nèi)容，所以頭條的圖片元素傳達信息的效率遠不如文字，所以第一視覺區(qū)會留給文字信息；

而第二圖中美團列表也圖片所傳達的信息效率更直觀，會一眼告訴用戶我這家是西餐還是中餐，是早點還是正餐，所以在美團的條目中圖片會被放在第一視覺區(qū)。

這兩種布局的目的都是讓用戶可以快速瀏覽，不讓用戶在接收信息時受阻造成體驗打斷。

此處還可以延伸一下，如上圖第三個圖，頭條的視頻條目也是先文字后視頻，為什么呢？

按理說視頻的傳達信息效率要遠大于配圖，猜想一下，頭條的設(shè)計是想將視頻作為終端休息區(qū)進行視覺強化，第一，可以強化信息種類的分類讓用戶更好辨識，第二，讓視頻條目傳達信息效率更快且滿足整體使用APP時一致性的用戶心智，讓用戶能快速上手并且順暢體驗瀏覽。

三、古騰堡原則在按鈕設(shè)計中的應(yīng)用

我們還可以依據(jù)古騰堡原則來解讀關(guān)于按鈕位置背后所呈現(xiàn)的設(shè)計思路。

1、標題和操作按鈕

我們都知道引導用戶操作的頁面中，一般頁面按鈕都在界面底部是因為離手近，方便操作，但不僅僅如此還因為瀏覽是用戶的第一行為，他們的視線會根據(jù)頁面元素進行移動，最終停留在底部結(jié)尾的地方。

根據(jù)古騰堡原則，將標題和內(nèi)容放在頂部即第一視覺區(qū)，引導用戶瀏覽所有內(nèi)容后注意到底部的按鈕作為終端休息區(qū)，這樣的擺放即符合用戶由上到下的閱讀習慣又達到了產(chǎn)品預(yù)期的目標。

2、底部垂直雙按鈕

按鈕的水平布局和垂直布局：

垂直布局下，用戶瀏覽時的眼動路徑單純向下，這種由上自下的瀏覽效率是最高的。

水平布局時，用戶由左至右的瀏覽效率要明顯低于垂直布局，但也同時避免了垂直布局下過快的決策造成風險。

這和表單布局方向類似，那些想要讓用戶快速瀏覽并完成的表單往往采用了垂直布局，而需要用戶仔細閱讀、認真填寫的表單往往使用了水平布局。

如果產(chǎn)品希望用戶對每個按鈕都有足夠的關(guān)注度，垂直擺放是最佳選擇，且【重要按鈕應(yīng)該放在頁面最底部】，雖然垂直雙按鈕在樣式上做了區(qū)分，但用戶同樣會停留一段時間將按鈕的內(nèi)容進行對比思考。

那么，按照古騰堡原則，重要的按鈕應(yīng)該放在頁面最底部，但是現(xiàn)實我們看到的垂直擺放按鈕的主次反而是相反的，主要的CTA 按鈕往往被放置在了上方？

觀察上圖，有沒有發(fā)現(xiàn)淺色按鈕很容易被忽略掉，這樣就違背了產(chǎn)品要保證每一個按鈕都要有足夠關(guān)注度的目的，所以我們要違背古騰堡原則來滿足業(yè)務(wù)需求，正如我們所看到的微信授權(quán)頁面一樣。

為了保證「允許」與「拒絕」這兩個獨立的按鈕能夠被用戶足夠的重視，并且其中的任意一個按鈕不會被輕易的忽略掉，這里將「允許」按鈕顏色加重設(shè)定為主按鈕，并且放在「拒絕」按鈕之上，讓眼睛原本垂直向下的運動軌跡產(chǎn)生回流的變化。

“拒絕”按鈕能讓用戶注意到，這樣便起到了防錯性，缺點是會對用戶造成流程上較強的打斷性，適用于需要用戶思慮、審核信息的場景。

所以，這也提示我在設(shè)計中要思考：設(shè)計原則雖是設(shè)計的基礎(chǔ)，并非一成不變，要合理權(quán)衡設(shè)計原則與產(chǎn)品目標之間的關(guān)系。

3、水平按鈕主次

水平擺放的按鈕，最典型的就是電商類型的詳情頁，【加入購物車】和【立即購買】按鈕。

結(jié)合古騰堡原則的視覺重點說明，右下角視為視覺終端區(qū)域，即視覺最終停留的位置，所以他們將與轉(zhuǎn)化率相關(guān)的【立即購買】按鈕放在了界面的右下角，讓用戶更容易關(guān)注到。

再比如：比較常見的「確認」和「取消」彈窗樣式，通常是在需要讓用戶確認某種操作行為時出現(xiàn)，有可能是提交表單、確定信息、頁面操作引導等等，目的是讓用戶最快地看到主要操作內(nèi)容，為用戶提高操作效率。

這些按鈕的差異不僅僅是位置，還包含按鈕的樣式、顏色、尺寸等等維度都存在著明顯差異。比如上圖的，頁面引導按鈕，支付寶的轉(zhuǎn)入轉(zhuǎn)出按鈕位置，都是一樣的邏輯，也是我們在設(shè)計中的一些設(shè)計支持業(yè)務(wù)轉(zhuǎn)化的一種方式。

為什么要這樣設(shè)定水平按鈕主次關(guān)系？

平常我們所看到的彈窗，推薦按鈕都是在右側(cè)，那么將推薦按鈕放在左側(cè)會怎么樣？如下圖所示：

當我們在設(shè)計表單中的組合按鈕時，比如：取消與確認、提現(xiàn)與充值。根據(jù)古騰堡法則，用戶使用界面時從第一視覺落點區(qū)是主視覺區(qū)(Primary Optical Area)，最終停留在結(jié)尾的終點區(qū)(Terminal Area)。

不難看出推薦按鈕放在右側(cè)后，眼睛的運動軌跡會在水平方向軸上來回的往復運動，無形中增加了用戶選擇時長。

水平多按鈕同樣存在著反面應(yīng)用

當業(yè)務(wù)需求需要用戶產(chǎn)生視覺回流，或者想要讓用戶習慣性的點擊右下角終點位置，比如常見的卸載軟件提示彈窗。

相比橫排按鈕，用戶點擊主操作按鈕時會更加順暢，有利于業(yè)務(wù)的轉(zhuǎn)化，對于用戶體驗流程的打斷也會比豎向按鈕相對弱些，適用于能幫助用戶快速完成流程的場景，具體使用哪種布局要權(quán)衡體驗、用戶與業(yè)務(wù)目標之間的統(tǒng)籌關(guān)系。

4、右上角按鈕位置

根據(jù)古騰堡原則，右上角區(qū)域?qū)儆趶娦菹^(qū)，用戶對這塊的注意程度最低。

既然如此，為什么頁面的“發(fā)布”、“編輯”等按鈕都在右上角呢？

頂部按鈕的設(shè)計，關(guān)鍵還在于可編輯內(nèi)容區(qū)域，而不是按鈕本身，頂部按鈕更適用于「編輯頁面」，頂部按鈕尺寸較小，它所占空間有限，因此在操作上相對來說不便于點擊，需要用戶謹慎操作。

而底部按鈕的核心在于按鈕本身，而不是內(nèi)容。底部按鈕更適合全局最終的確定，提交等操作按鈕。

四、應(yīng)用古騰堡原則需要注意點

1、雖然古騰堡圖所揭示的閱讀規(guī)律是普遍適用的，但是只在信息均勻分布的頁面證明古騰堡原則的閱讀規(guī)律。

若是為了突破常規(guī)或達到一種強烈的沖擊，古登堡圖所揭示的視覺規(guī)律經(jīng)常被設(shè)計師所顛覆。常用的顛覆方法為采用特別醒目的形象，或者大小顏色更為鮮明搶眼的元素置于閑置區(qū)，從而改變玩家的閱讀順序。

上圖banner中，右側(cè)的3D內(nèi)容第一吸引用戶眼球，而后才會看到左邊的文字，視覺流程如紅色箭頭，這就是突破古騰堡常規(guī)設(shè)計原則的常見設(shè)計。

2、語言本身的閱讀順序可能也會產(chǎn)生一定的影響，例如阿拉伯語從右至左的文字順序可能并不符合古騰堡原則的閱讀規(guī)律。

3、用戶已熟悉，并養(yǎng)成獨特閱讀習慣的頁面也不一定遵循此規(guī)律，比如用戶自動跳過輪播廣告的【輪播圖盲視區(qū)】現(xiàn)象。

五、總結(jié)

古騰堡圖貫穿于界面設(shè)計的每個角落，只要謹記閱讀引力的順序：從上到下，從左到右，綜合閱讀流來排布視覺層級，即能做出合理的設(shè)計。

但設(shè)計師也不能局限于古騰堡圖的規(guī)律中，要善用規(guī)律并結(jié)合其他設(shè)計知識做出更加完美的設(shè)計。

應(yīng)用建議：

  • 原則是設(shè)計的基礎(chǔ)，并非一成不變，需要結(jié)合設(shè)計原則與產(chǎn)品目標之間的關(guān)系進行合理運用；
  • 不需要死遵循原則，比如焦點模式下用戶將首先查看頁面上最主要的元素（視覺重量最大的元素或區(qū)域）。順序?qū)⑷Q于這些焦點的相對權(quán)重以及指示下一步要看的任何視覺提示。
  • 想要讓用戶進行某種操作時，正常情況下主要按鈕放在右側(cè)，操作流程暢通，提高效率，需要用戶確認思考的場景下，主要按鈕可放在左側(cè)，達到反復確認的目的。
  • 創(chuàng)建層次結(jié)構(gòu)和流程會顛覆視覺動線的模型。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍藍設(shè)計）www.bjlzjm.com.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

 

image.png

評論(0) 瀏覽(13)

5 種用戶瀏覽模式全解：用科學眼動邏輯優(yōu)化頁面布局

清陽 設(shè)計思維

眾所周知，我們大部分用戶群體的閱讀習慣是從左到右、從上至下，這與西方文化基本一致。下文將從瀏覽模式、瀏覽路徑、頁面布局三個維度展開分析，結(jié)合研究成果與實踐經(jīng)驗，優(yōu)化頁面布局，提升用戶閱讀效率與體驗。
 
早在 2006 年，尼爾森團隊發(fā)表《眼睛軌跡的研究》報告，提出了廣為人知的F 型瀏覽模式。除該模式外，經(jīng)資料梳理，用戶瀏覽網(wǎng)頁時還存在多種典型模式，以下為詳細總結(jié)（蘭亭妙微 ui 設(shè)計公司）。
 

一、F 型瀏覽模式：長文本頁面的主流軌跡

image.png

F 型是用戶瀏覽長篇內(nèi)容的核心模式，眼球以掃描為主，而非深度閱讀，眼動熱圖呈現(xiàn)清晰的字母 F 形態(tài)。
 
  1. 頂部水平掃視：先聚焦內(nèi)容區(qū)上半部分，形成 F 的頂欄；
  2. 次段短距掃視：向下滑動后，二次水平掃描范圍更短，構(gòu)成 F 的下橫線；
  3. 左側(cè)垂直掃描：最后沿頁面左側(cè)快速瀏覽，形成 F 的豎桿。
 
該模式適配 PC 端、手機端所有文本型頁面，手機端因屏幕更小，F(xiàn) 型軌跡更緊湊。
 

F 型布局設(shè)計要點

 
  1. 頭兩段內(nèi)容是核心，直接決定用戶是否繼續(xù)停留；
  2. 關(guān)鍵詞前置，放在標題、副標題和段落開頭；
  3. 左側(cè)優(yōu)先放置關(guān)鍵信息，契合用戶垂直掃描習慣。
 

二、Z 型瀏覽模式：輕信息頁面的最優(yōu)選擇

image.png

Z 型軌跡遵循從左到右、從上到下的古騰堡原則，眼動路徑形成字母 Z，適合無大段文本的展示型頁面。
 
用戶視線會自然落在 Z 的起點（左上）和終點（右下），這兩個位置是放置核心信息、行動按鈕的黃金區(qū)域。
 

Z 型布局設(shè)計要點

 
  1. 重要信息放在左上、右下視覺落點；
  2. 簡化中間區(qū)域內(nèi)容，避免干擾視線流動；
  3. 適合落地頁、首頁、海報型頁面設(shè)計。
 

三、專注瀏覽模式：深度閱讀的特殊場景

image.png

專注模式是逐字精讀狀態(tài)，用戶會投入大量時間閱讀全文，不會遺漏信息。
 
僅在任務(wù)驅(qū)動、強興趣導向時出現(xiàn)，比如學習資料、工作文檔、深度干貨文章等場景。
 

設(shè)計適配建議

 
  1. 減少干擾元素，保持排版簡潔舒適；
  2. 保證文字清晰度、行間距與可讀性；
  3. 無需刻意引導視線，聚焦內(nèi)容本身即可。
 

四、斑點瀏覽模式：關(guān)鍵詞驅(qū)動的碎片化瀏覽

image.png

用戶只關(guān)注加粗、變色、高亮的關(guān)鍵詞，或自身感興趣的信息，眼動熱圖呈現(xiàn)零散斑點狀。
 
這是用戶快速篩選信息的常見方式，核心是只看重點、跳過無關(guān)內(nèi)容。
 

設(shè)計適配建議

 
  1. 核心信息用加粗、對比色突出；
  2. 控制高亮元素數(shù)量，避免視覺混亂；
  3. 關(guān)鍵數(shù)據(jù)、利益點單獨標注。
 

五、分層蛋糕瀏覽模式：標題導向的高效掃描

image.png

當頁面有清晰的標題、副標題、分級加粗時，用戶會只看突出層級，快速略過正文，眼動軌跡像分層蛋糕的紋路。
 
這是僅次于專注模式的高效信息獲取方式，也是用戶最常用的快速閱讀邏輯。
 

設(shè)計適配建議

 
  1. 建立清晰層級：主標題→副標題→重點句→正文；
  2. 用標題提煉核心，讓用戶 3 秒讀懂內(nèi)容；
  3. 重點內(nèi)容加粗，弱化冗余文字。
 
 

關(guān)鍵排版結(jié)論：圖片與布局的適配邏輯

 
  1. 信息型圖片：對齊排版、Z 型排版差異極小，都能吸引用戶關(guān)注；

    image.png

  2. 裝飾型圖片：優(yōu)先用左對齊排版，用戶可自動忽略，不干擾文字閱讀；Z 型排版會增加圖片曝光，但易分散視線；

    image.png

  3. 首圖至關(guān)重要：決定用戶對后續(xù)圖片的價值判斷，避免頂部放無意義裝飾圖；
  4. 用戶瀏覽習慣：看完頁面底部會回滑查看，建議添加「回到頂部」功能。
image.png
 

最終總結(jié)

  1. 長文本用F 型，展示頁用Z 型，多種模式可嵌套使用；
  2. 信息圖優(yōu)于裝飾圖，無意義圖片會被用戶自動忽略；
  3. 核心信息放視覺熱點區(qū)，層級清晰、關(guān)鍵詞前置是通用原則；
  4. 適配用戶回滑習慣，優(yōu)化頁面上下交互體驗。

蘭亭妙微（藍藍設(shè)計）www.bjlzjm.com.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

 

image.png

 

評論(0) 瀏覽(5)

如何做好B端產(chǎn)品的競品分析？

清陽 設(shè)計思維

競品分析作為日常工作中常用的基礎(chǔ)能力，在 C 端和 B 端兩種截然不同的產(chǎn)品形態(tài)下需要面對的難點也是不盡相同的。那么作為面向企業(yè)、公司的 B 端產(chǎn)品，在做競品分析時的流程以及側(cè)重方向上都有哪些特點呢？蘭亭妙微UI設(shè)計公司將從產(chǎn)品差異等幾個方向為大家分享一下自己的思考和總結(jié)，以期能夠提供參考和建議。

“競品分析”我們從字面上理解，就是對現(xiàn)有的以及潛在的競爭產(chǎn)品的優(yōu)劣進行分析和總結(jié)。用以了解市場行情及自身產(chǎn)品的定位，發(fā)現(xiàn)新的市場機會，探索產(chǎn)品迭代的有效策略。在正式介紹 B 端競品分析的經(jīng)驗和思路之前，想先簡單介紹一下 C 端產(chǎn)品和 B 端產(chǎn)品的差異點，也能更好的理解 B 端產(chǎn)品的特性。

一、先搞懂：B 端 vs C 端 核心差異

image.png
B 端產(chǎn)品面向企業(yè) / 組織，強調(diào)效率、流程、合規(guī)；C 端面向個人用戶，強調(diào)體驗、流量、轉(zhuǎn)化。兩者做競品分析的思路完全不同。
 
表格
 
 
 
對比維度 B 端產(chǎn)品 C 端產(chǎn)品
用戶 企業(yè)客戶、組織角色（管理者 / 員工） 海量個人用戶
場景 辦公場景、工作流程、時間固定 生活場景、碎片化、強私人屬性
設(shè)計 重流程、效率、穩(wěn)定性 重體驗、細節(jié)、拉新留存
競品 公開度低、同質(zhì)化低、難體驗 公開易找、同質(zhì)化高、易體驗
盈利 定制化報價、按年 / 模塊收費 明碼標價、會員 / 廣告 / 電商
 
B 端競品分析兩大難點：
 
  1. 競品難找、信息不透明
  2. 產(chǎn)品難試用、核心功能不開放
 
 

二、第一步：明確分析目的 + 搭建分析框架

image.png

做競品分析前，先定目標，避免盲目對比。
 

1. 分析目的（二選一為主）

 
  • 戰(zhàn)略層：對比市場定位、定價、客戶群、產(chǎn)品矩陣、服務(wù)模式
  • 功能層：找產(chǎn)品優(yōu)缺點、看流程合理性、輔助迭代規(guī)劃
 

2. 必收集的背景信息

image.png

  • 公司背景：成立時間、規(guī)模、行業(yè)案例
  • 技術(shù)背景：核心技術(shù)、迭代節(jié)奏、生態(tài)合作
  • 客戶與場景：目標行業(yè)、使用角色、核心痛點
 
 

三、第二步：B 端競品怎么找、怎么篩？

 

1. 四類必選競品

image.png

  1. 初代產(chǎn)品：看行業(yè)起源，理解原始需求
  2. 直接競品：核心對標，全面拆解
  3. 間接競品：局部功能可借鑒的產(chǎn)品
  4. 頭部競品：行業(yè)標桿，看成熟方案
 

2. 小眾領(lǐng)域：先發(fā)散→再收斂

 
  • 發(fā)散：提煉核心關(guān)鍵詞（如體驗管理→CEM、體驗監(jiān)測、客戶洞察、數(shù)據(jù)采集）
  • 收斂：用官網(wǎng)信息篩選，剔除定位不符的 “偽競品”
 

3. 信息渠道

 
  • 行業(yè)報告、行業(yè)峰會 / 論壇
  • 搜索引擎、垂直媒體
  • 廠商官網(wǎng)、客戶案例、銷售資料
 
 

四、第三步：B 端產(chǎn)品難體驗？這 4 種方法最實用

 
B 端多為半公開 / 非公開系統(tǒng)，不能直接注冊試用，用以下方式突破：
 

1. 半公開產(chǎn)品（可對外售賣）

image.png

  • 看官網(wǎng)：快速了解定位、功能、客戶、案例
  • 申請試用 / 付費：最真實體驗流程與交互
  • 角色扮演咨詢：假裝客戶問銷售，獲取報價、交付、實施細節(jié)
 

2. 非公開產(chǎn)品（內(nèi)部系統(tǒng) / 定制系統(tǒng)）

image.png

  • 人脈借賬號：親自操作體驗
  • 操作錄屏 / 影子計劃：錄屏回放完整流程
  • 用戶訪談：訪談使用者 / 客服，了解真實痛點
  • 流程記錄：梳理操作路徑，還原體驗地圖
 
 

五、第四步：分析總結(jié) + 輸出可落地結(jié)論

image.png

  1. 按框架對齊信息：功能、流程、體驗、定價、客戶、服務(wù)逐項對比
  2. 提煉優(yōu)劣勢：哪些可直接借鑒、哪些要避開
  3. 結(jié)合自身落地：不照搬競品，匹配公司資源、產(chǎn)品定位、團隊能力
  4. 長期跟蹤：B 端迭代慢，需持續(xù)關(guān)注競品更新

image.png

 

六、極簡工作流程（直接照做）

定目標 → 2. 搭框架 → 3. 找競品 → 4. 巧體驗 → 5. 對比分析 → 6. 輸出結(jié)論與迭代建議

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍藍設(shè)計）www.bjlzjm.com.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

 

image.png

 

評論(0) 瀏覽(8)

B 端表單設(shè)計（上）優(yōu)化版｜清晰、好讀、可直接落地

清陽 設(shè)計思維

在B端產(chǎn)品設(shè)計中，表單作為核心數(shù)據(jù)錄入與交互載體，其設(shè)計的合理性直接影響產(chǎn)品效率與用戶體驗，蘭亭妙微ui設(shè)計公司在長期服務(wù)B端客戶的過程中發(fā)現(xiàn)，許多產(chǎn)品因表單設(shè)計不規(guī)范、邏輯混亂，導致用戶填寫效率低、錯誤率高，甚至放棄操作?；诖?，結(jié)合蘭亭妙微ui設(shè)計團隊的實戰(zhàn)經(jīng)驗，我們保留核心干貨，修正設(shè)計誤區(qū)，梳理清晰邏輯，打造一份可直接落地、適合設(shè)計師快速查閱的B端表單設(shè)計指南，助力更多產(chǎn)品打造高效、易用的表單體驗。
 

一、開篇：B端表單到底是什么？

表單是B端產(chǎn)品核心數(shù)據(jù)錄入載體，本質(zhì)是把線下紙質(zhì)單據(jù)搬到線上，適配電腦/移動端操作習慣。核心目標：降低填寫成本、減少錯誤、提升效率、提高完成率。

image.png

二、表單三大設(shè)計原則

  1. 表意明確：用對組件：日期用DatePicker、數(shù)字用InputNumber，不混用、不誤導。
  2. 簡潔高效：信息獲取快、錄入操作快；視覺清爽，不堆砌。
  3. 安全容錯：操作前：清晰提示輸入規(guī)則；操作中：實時校驗、自動糾錯；操作后：草稿保存、二次確認防誤操作。

三、表單基礎(chǔ)構(gòu)成（必掌握）

基礎(chǔ)表單 = 標簽 + 表單域 + 提示信息 + 操作按鈕；高階表單 = 基礎(chǔ) + 校驗提示/幫助提示/占位符/動態(tài)增減。

image.png

1. 標簽布局（4種，效率排序）

效率：頂對齊 ＞ 右對齊 ＞ 左對齊 ＞ 內(nèi)部標簽
  • 頂對齊標簽：速度最快（50ms定位）、瀏覽填寫雙快、省橫向、占縱向。? 適用：追求快速填寫、標簽長短不一、延展性要求高。

    image.png

  • 右對齊標簽：填寫快、省縱向、閱讀稍慢。? 適用：要屏效+要速度，標簽長度差異小。image.png
  • 左對齊標簽：閱讀穩(wěn)、填寫慢、省縱向。? 適用：復雜/敏感信息、需要用戶仔細核對（如注冊）。

    image.png

  • 內(nèi)部標簽：省空間、輸入后消失易遺忘。? 適用：移動端極簡表單（≤2項），不建議PC端大量使用。

     

2. 必填/選填標記規(guī)則（統(tǒng)一最關(guān)鍵）

image.png

  • 全必填：可統(tǒng)一不標，保持全局一致即可
  • 必+選混合：只標必填* 或 只標選填，二選一并貫穿全站
  • 星號位置：建議放標簽左側(cè)，一眼掃完必填項

3. 表單域（輸入核心）

image.png

包含：輸入框、選擇器、時間選擇器、數(shù)值選擇器、上傳。
設(shè)計要點：
  • 寬度與輸入內(nèi)容匹配：長度暗示輸入量（建議用80/120/160/240/400這5檔）
  • 提供合理默認值：減少選擇負擔，提升填寫速度
  • 提示文案：有用、具體，不寫“正確但無用”的話

4. 操作按鈕

image.png

  • 彈窗表單：按鈕底部居右（確認在最右）
  • 頁面長表單：按鈕居中（減少操作距離）
  • 閱讀順序：右上角/右下角 → 從右往左；表單內(nèi) → 從左往右

四、表單4種布局類型

  1. 基礎(chǔ)表單：表單項≤7個、結(jié)構(gòu)簡單，直接單列/雙列排布。

    image.png

  2. 錨點定位表單：內(nèi)容極多、縱向超長、各組強關(guān)聯(lián)，用錨點快速跳轉(zhuǎn)。

    image.png

  3. 標簽頁（Tab）表單：內(nèi)容多、各組無強關(guān)聯(lián)，用Tab分組隔離。

    image.png

  4. 分步（Steps）表單：有先后邏輯順序，給用戶進度預(yù)期。

    image.png

五、表單5種交互形式（按內(nèi)容量排序）

內(nèi)容由少到多：氣泡卡片 → 原位編輯 → 彈窗 → 抽屜 → 頁面跳轉(zhuǎn)
  1. 氣泡卡片 Popover：輕描述、輕操作，不打斷流程。

    image.png

  2. 原位編輯：展示即編輯，回車保存，極簡錄入。

    image.png

  3. 彈窗 Modal：不離開當前頁，承載簡單表單。

    image.png

  4. 抽屜 Drawer：側(cè)邊滑入，可多層，適合中量內(nèi)容。

    image.png

  5. 頁面跳轉(zhuǎn)：最通用，適合復雜、長表單，必打斷當前流程。image.png

    蘭亭妙微（藍藍設(shè)計）www.bjlzjm.com.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

     

    image.png

評論(0) 瀏覽(17)

Web 表單設(shè)計的冷知識

濤濤 B端ui設(shè)計文章及欣賞

表單是用戶與產(chǎn)品進行數(shù)據(jù)交換的核心界面，是實現(xiàn)用戶注冊、登錄、信息提交、交易支付等關(guān)鍵行為的必經(jīng)之路。一個優(yōu)秀的表單設(shè)計，不僅能提升用戶體驗，更能直接影響產(chǎn)品的轉(zhuǎn)化率與用戶留存。蘭亭妙微設(shè)計在為眾多 B 端、C 端產(chǎn)品提供 UI 設(shè)計服務(wù)的過程中，發(fā)現(xiàn)許多看似簡單的表單背后，隱藏著大量容易被忽視的設(shè)計細節(jié)與用戶心理規(guī)律。本文將從用戶體驗與設(shè)計心理學的角度，揭示 Web 表單設(shè)計中那些你可能不知道的 “冷知識”，幫助設(shè)計師打造更高效、更友好的表單界面。

評論(0) 瀏覽(15)

構(gòu)圖在 UI 設(shè)計中的應(yīng)用

濤濤 設(shè)計管理與成長

構(gòu)圖是 UI 設(shè)計的核心骨架，在有限的界面畫面中，將視覺元素、功能模塊、文字信息進行科學布局與有序安排，讓每一個設(shè)計元素都處于最佳視覺位置，既能精準傳遞產(chǎn)品主題與信息層級，又能營造舒適的視覺體驗，最終實現(xiàn)設(shè)計美感與用戶體驗的雙重統(tǒng)一。蘭亭妙微設(shè)計深耕 UI 設(shè)計領(lǐng)域多年，服務(wù)過多個行業(yè)頭部產(chǎn)品，在千萬級、億量級產(chǎn)品界面設(shè)計中積累了豐富的構(gòu)圖實戰(zhàn)經(jīng)驗，本次將從底層設(shè)計邏輯與認知心理學角度，拆解構(gòu)圖在 UI 設(shè)計中的實際應(yīng)用方法，與行業(yè)同仁共同探討學習。

評論(0) 瀏覽(10)

B端數(shù)據(jù)可視化設(shè)計，14個章節(jié)帶你掌握表單設(shè)計（下）

清陽 設(shè)計思維

表單是 B 端產(chǎn)品核心信息載體，優(yōu)秀的表單設(shè)計能直接提升填寫效率、降低錯誤率、減少業(yè)務(wù)成本，是 B 端體驗與數(shù)據(jù)流轉(zhuǎn)的關(guān)鍵環(huán)節(jié)。蘭亭妙微ui設(shè)計公司在上篇基礎(chǔ)上，用 14 個可落地章節(jié)，幫你掌握高易用性表單設(shè)計。

一、先明確：好表單的 5 個核心價值

 
  1. 提升體驗：降低填寫困惑，讓操作更輕松順暢
  2. 降低錯率：清晰指引 + 實時校驗，保障數(shù)據(jù)準確
  3. 提高效率：簡化操作、減少重復輸入，節(jié)省時間
  4. 提升完成率：降低填寫門檻，減少用戶中途放棄
  5. 降本增效：減少數(shù)據(jù)糾錯與溝通成本，賦能業(yè)務(wù)
 
 

二、14 個表單設(shè)計核心方法（可直接落地）

 

1. 信息降噪：只留關(guān)鍵，簡化內(nèi)容

image.png

  • 極簡處理：必填項占絕大多數(shù)時，隱藏選填提示符，減少視覺干擾
  • 折疊非必填：用「展示更多」收起次要字段，只保留核心必填項
  • 選填項保留意義：給愿意補充信息的用戶選擇權(quán)，降低填寫壓力，靈活收集額外數(shù)據(jù)
 

2. 標簽與指引：清晰易懂，不產(chǎn)生歧義

image.png

  • 標簽簡短直白，不使用專業(yè)黑話
  • 填寫規(guī)則前置提示，比如格式、長度、范圍
  • 復雜字段加小問號提示，hover 顯示說明，不占主視覺
 

3. 長表單：分步 / 分頁，緩解填寫壓力

image.png

適合注冊、認證、發(fā)布等流程型長表單：
 
  • 分步填寫：按業(yè)務(wù)邏輯拆步驟，配清晰步驟導航
  • 分頁填寫：左側(cè)固定導航，用戶可快速跳轉(zhuǎn)模塊
  • 小缺陷：用戶無法一次性看到全部字段，需做好進度提示
 

4. 動態(tài)驗證：實時反饋，即時糾錯

image.png

  • 輸入失焦后立即校驗，不等到提交才報錯
  • 錯誤提示就近展示，明確錯誤原因 + 修改建議
  • 避免提交后批量修改，大幅降低用戶挫敗感
 

5. 默認值 + 自動填充：減少手動輸入

image.png

  • 高頻選項設(shè)默認值，比如常用城市、狀態(tài)
  • 復用歷史數(shù)據(jù)，自動填入重復信息
  • 關(guān)聯(lián)字段自動聯(lián)動，比如地址→郵編、身份證→生日
 

6. 智能輔助：讓表單 “會思考”

image.png

  1. 上下文自動填充：手機號→姓名、身份證→生日 / 性別
  2. 條件邏輯顯隱：選 “是” 展開對應(yīng)字段，選 “否” 直接隱藏
  3. OCR 智能識別：身份證、發(fā)票、營業(yè)執(zhí)照上傳后自動提取信息填入
 

7. 響應(yīng)式適配：多端一致，不崩不亂

image.png

B 端表單必做適配，避免前端自由適配導致體驗差：
 
  • 固定適配：字段寬度固定，兼容客戶最低屏幕分辨率
  • 間距適配：左右邊距固定，組件自適應(yīng)寬度（適合彈窗 / 抽屜，不建議長表單）
  • 移動端：單獨設(shè)計，用系統(tǒng)原生輸入組件，不直接套用 PC 端
 

8. 字段簡潔：用最少文字講清含義

image.png

  • 標簽短、準、無歧義，不堆砌長文案
  • 合并冗余字段，不拆分語義完整的信息
 

9. 長數(shù)字不拆分：一個輸入框搞定

image.png

手機號、身份證、銀行卡、訂單號等禁止拆成多框：
 
  • 減少點擊切換，支持一鍵復制粘貼
  • 避免分段輸入帶來的操作繁瑣與誤操作
 

10. 防錯糾錯：從源頭減少錯誤

image.png

  • 格式限制：數(shù)字框僅輸數(shù)字，限制長度（手機號 11 位、身份證 18 位）
  • 專用輸入：車牌號用專屬鍵盤，屏蔽 I/O 等易混淆字符
  • 范圍置灰：時間選擇器禁用無效日期，堵死錯誤操作路徑
 

11. 就地編輯：在哪看就在哪改image.png

 
遵循交互之父阿蘭?庫珀原則：需要在哪里輸出，就在哪里輸入
 
  • 列表少量編輯：直接在行內(nèi)修改，不跳轉(zhuǎn)、不彈窗
  • 保持注意力連貫，提升操作效率
 

12. 三重保存：杜絕數(shù)據(jù)丟失

 

表單保存是 B 端底線，分三類實現(xiàn)：

image.png

  1. 延遲草稿：間隙 / 定時自動保存，無打擾后臺運行
  2. 隨機草稿：高頻自動保存，保留歷史版本，支持回退
  3. 條件草稿：觸發(fā)式保存，異常關(guān)閉可恢復
  4. 提示保存：未保存跳轉(zhuǎn) / 離開時，彈窗確認，防止誤操作
 

13. 所見即所得：實時預(yù)覽最終效果

image.png

  • 表單編輯區(qū) + 預(yù)覽區(qū)聯(lián)動，即時看到展示效果
  • CMS、物料配置、富文本等場景必加預(yù)覽
  • 支持多端（PC / 移動端 / 小程序）效果切換查看
 

14. 重視用戶反饋：讓業(yè)務(wù)專家?guī)湍銉?yōu)化

image.png

  • B 端用戶是一線業(yè)務(wù)專家，最懂真實痛點
  • 做用戶測試、收集操作反饋，持續(xù)迭代
  • 案例：貸款審核從 “逐個審” 優(yōu)化為 “批量審”，效率大幅提升
 
 

三、總結(jié)

 
表單是 B 端數(shù)據(jù)流轉(zhuǎn)核心樞紐，14 個設(shè)計要點圍繞簡潔、清晰、高效、防錯、容錯展開，從視覺降噪到智能輔助，從實時校驗到多重保存，完整構(gòu)建以用戶為中心的表單體系。掌握這套方法，你的表單設(shè)計將從 “能用” 升級為 “好用”，真正為業(yè)務(wù)提效賦能。

蘭亭妙微（藍藍設(shè)計）www.bjlzjm.com.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

 

image.png

評論(0) 瀏覽(14)

為什么很多大廠主按鈕不用主題色？原來還有這5個設(shè)計方法！

清陽 交互設(shè)計及用戶體驗

我發(fā)現(xiàn)很多人設(shè)計主按鈕，只會用主題色。而蘭亭妙微 ui 設(shè)計公司在服務(wù)大量企業(yè)級產(chǎn)品過程中發(fā)現(xiàn)，很多大廠設(shè)計的主按鈕，并不統(tǒng)一用主題色。

注意，這里講的不是作為陪襯的次按鈕，而是一個頁面上最顯眼的主按鈕 CTA (Call to Action) 按鈕。

 

image.png

一、背景對比色：極致醒目，適配多色背景

image.png

核心邏輯：采用與背景色強對比的黑白基礎(chǔ)色，讓按鈕在色彩豐富的界面中脫穎而出，解決主題色因畫面元素干擾而辨識度不足的問題。

image.png

大廠案例：閑魚主題色為黃色，搜索按鈕選用黑色；YouTube 極少使用紅色主題色，主按鈕以黑色為主，而在黑底廣告卡片上則切換為白色；Spotify 綠色主題色之外，大量主按鈕采用白色。這類設(shè)計的共性是黑白與背景形成反向?qū)Ρ?/strong>，白色背景配黑按鈕，黑色背景配白按鈕。

image.png

image.png

image.png

實測驗證：美國電商平臺 Etsy 曾對商品詳情頁 “加入購物車” 按鈕做黃 / 黑配色 A/B 測試，最終選擇黑色方案，數(shù)據(jù)證明其視覺吸引與點擊轉(zhuǎn)化效果更優(yōu)。
 

image.png

image.png

適用場景：頁面包含大量圖片、視頻、彩色元素，需要主按鈕快速抓住用戶注意力的場景，如首頁搜索、內(nèi)容播放頁核心操作、電商商品頁轉(zhuǎn)化按鈕。
 

二、背景相似色：低調(diào)適配，避免過度搶眼

image.png

核心邏輯：使用半透明色、淺灰色等與背景色調(diào)相近的色彩，讓按鈕融入界面的同時保持可識別性，適用于 “需作為主按鈕，但無需過度醒目” 的交互需求。
 
大廠案例：酷狗短視頻廣告的 “看全集” 按鈕為半透明樣式；喜馬拉雅播放頁按鈕均采用半透明設(shè)計；閑魚幫助與客服頁底部主按鈕用淺灰色；金融 App Revolut 的按鈕也以半透明為主。

image.png

image.png

image.png

 

設(shè)計考量：這類場景的背景往往色彩鮮艷（如視頻、彩色廣告圖），疊加主題色易顯雜亂，而強對比色又會過度吸引注意力，甚至干擾用戶核心操作。例如未成年模式的 “不再提醒” 按鈕，若設(shè)計得過于醒目，可能導致有實際需求的用戶誤觸。
 

image.png

適用場景：背景色彩多變的視頻 / 廣告界面、輔助性核心操作、需避免用戶誤觸的功能按鈕。
 

三、環(huán)境色：隨境變色，實現(xiàn)視覺和諧

image.png

image.png

image.png

核心邏輯：讓主按鈕色彩跟隨界面環(huán)境（如廣告 banner、內(nèi)容卡片）動態(tài)變化，貼合環(huán)境色調(diào)的同時保證識別性，讓整體視覺更協(xié)調(diào)。
 
大廠案例：美圖秀秀首頁主按鈕會隨廣告 banner 的色彩同步調(diào)整；YouTube 部分廣告卡片的按鈕，色彩會根據(jù)卡片內(nèi)容進行適配。
 
設(shè)計要點：該方法對技術(shù)實現(xiàn)有一定要求，需保證按鈕色彩與環(huán)境的適配性 —— 既不能與環(huán)境色融合導致識別困難，也不能對比過強破壞整體美感，核心是 “和諧中突出交互”。
 
適用場景：首頁廣告 banner 旁的核心操作按鈕、個性化內(nèi)容卡片的交互按鈕、注重視覺美感的創(chuàng)意類 App 界面。
 

四、模塊色：色彩定類，助力快速識別

image.png

image.png

image.png

核心邏輯：根據(jù)產(chǎn)品功能模塊的固定屬性賦予專屬色彩，讓用戶通過色彩快速關(guān)聯(lián)按鈕功能，形成視覺記憶，替代主題色的單一標識作用。
 
大廠案例

image.png

  1. 行業(yè)通用模塊色：國內(nèi) App 的會員模塊普遍使用金色，即便品牌主題色不同，酷狗（藍色）、微信讀書（藍色）、攜程（藍色）的會員相關(guān)按鈕均為金色；營銷 / 優(yōu)惠券模塊多采用橙紅色，閑魚（黃色）、QQ 音樂（綠色）、餓了么（藍色）的優(yōu)惠券按鈕均沿用這一配色。image.png
  2. 產(chǎn)品專屬模塊色：獵聘 App 用橙色代表求職者模塊、藍色代表招聘方模塊，通過色彩劃分不同身份的功能入口。
     
    設(shè)計價值：對老用戶而言，無需看清按鈕文字，僅通過色彩就能快速判斷功能，大幅提升交互效率；對新用戶而言，固定的模塊色彩能快速建立功能認知。
     
    適用場景：產(chǎn)品有明確功能模塊劃分的場景，如會員體系、營銷活動、身份選擇、功能分類等。
 

五、狀態(tài)色：色彩表意，規(guī)避操作誤觸

image.png

image.png

核心邏輯：利用用戶的色彩認知習慣，將按鈕與操作狀態(tài)綁定，用色彩傳遞 “可操作 / 不可操作”“正向 / 負向” 的信息，通過色彩提示規(guī)避誤觸。
 
大廠案例

image.png

  1. 基礎(chǔ)操作狀態(tài)：所有手機的來電顯示界面，均用綠色代表 “接聽（正向操作）”、紅色代表 “拒絕（負向操作）”，貼合大眾的色彩認知習慣。
  2. 電商操作狀態(tài)：淘寶直播間商品列表，橙色按鈕代表 “可立即搶購”，藍色按鈕代表 “不可搶購可預(yù)約”，用色彩明確區(qū)分商品操作狀態(tài)。
  3. 風險操作提示：刪除、取消等負面 / 風險操作的按鈕多采用紅色，通過醒目的色彩提示用戶謹慎操作。
     
    設(shè)計原則：遵循用戶的普遍色彩認知，不隨意顛覆固有習慣（如避免用綠色代表刪除、紅色代表確認），讓色彩成為操作狀態(tài)的 “視覺提示牌”。
     
    適用場景：有明確操作狀態(tài)區(qū)分的場景、包含風險 / 負面操作的界面、需要用戶快速判斷操作可行性的交互入口。
 

主按鈕放棄主題色的核心原因與適用場景總結(jié)

 

核心設(shè)計邏輯

 
大廠主按鈕不用主題色，本質(zhì)是從 “品牌視覺統(tǒng)一” 轉(zhuǎn)向 “交互體驗優(yōu)先”，當主題色無法適配界面場景、滿足交互需求時，選擇更貼合實際的色彩方案，具體原因可歸納為 5 點：
 
  1. 界面色彩過于豐富，主題色的醒目度不足；
  2. 環(huán)境色彩多變，主題色難以與整體視覺和諧；
  3. 主按鈕為輔助性操作，無需過度搶眼；
  4. 需通過色彩劃分模塊，幫助用戶快速理解功能；
  5. 需通過色彩傳遞操作狀態(tài)，避免用戶誤觸。
 

通用設(shè)計建議

 
當遇到以下 3 種情況時，可直接放棄主題色設(shè)計主按鈕：
 
  1. 按鈕周圍的色彩鮮艷、元素豐富，主題色易被淹沒；
  2. 產(chǎn)品有明確的功能模塊劃分，需要色彩建立視覺記憶；
  3. 按鈕為輔助性核心操作，或包含風險操作，無需 / 不宜過度醒目。
 
主按鈕的色彩設(shè)計，最終的核心不是 “是否使用主題色”，而是 “色彩是否服務(wù)于交互”。品牌主題色可作為視覺基礎(chǔ)，但在實際設(shè)計中，需結(jié)合界面場景、用戶需求、操作邏輯靈活調(diào)整，讓色彩既貼合產(chǎn)品視覺體系，又能真正引導用戶高效交互。

蘭亭妙微（藍藍設(shè)計）www.bjlzjm.com.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

 

image.png

評論(0) 瀏覽(35)

長文干貨！如何從零開始構(gòu)建「用戶行為分析」？

清陽 用戶研究

一、用戶行為分析：如何開始搭建

體驗或交互設(shè)計師知曉用戶行為分析有什么用？

答：我們所處的行業(yè)下，各類產(chǎn)品變得成熟精細，大家開始拼細節(jié)卷服務(wù)，市場競爭激烈。對于產(chǎn)品的各種優(yōu)化改版也就開始變得謹慎，往往需要經(jīng)過用戶研究或是數(shù)據(jù)分析等工作來驗證或決策，不再是由設(shè)計師或產(chǎn)品經(jīng)理憑借過往經(jīng)驗辦事或?qū)烁偲氛粘耍『糜脩粜袨榉治鼍褪怯脩舳床熘芯哂写硇缘囊豁棧?/p>

體驗或交互設(shè)計師為什么要掌握這些呢？

答：回歸到用戶體驗相關(guān)設(shè)計，本身就是一項細致活兒，處處需要用戶研究或數(shù)據(jù)洞察來輔助設(shè)計工作，了解其相關(guān)甚至熟悉搭建分析，從職能發(fā)展趨勢來看，可能是遲早的事；

所以即使你目前用不上用戶行為分析相關(guān)，也不要急著關(guān)掉文章，先簡單了解一下吧，說不定你會有興趣呢，說不定不久后剛好用上呢？

 

 

二、用戶行為分析能干啥

用戶行為分析是數(shù)據(jù)分析的一個重要領(lǐng)域，特別是在數(shù)字化服務(wù)行業(yè)中，主要目的是通過深入研究用戶群體的流量動向以及操作行為特征等，來了解用戶與產(chǎn)品間的關(guān)系、效果、趨勢，以幫助我們優(yōu)化產(chǎn)品設(shè)計、提升用戶體驗并驅(qū)動業(yè)務(wù)決策。

說人話就是：

監(jiān)測用戶在產(chǎn)品上做出了哪些行為、是否符合預(yù)期、有什么特征、問題在哪里，然后看看產(chǎn)品上需要做些什么調(diào)整或迎合用戶的特征偏好來決策啥的。

三、用戶行為分析有啥優(yōu)勢

具備一定的客觀性與真實性

被動采集的行為數(shù)據(jù)有時候比用戶口述反饋的信息要更真實有效，一方面更加直接，另一方面也少了些用戶心理設(shè)防（霍桑效應(yīng)）；

image.png

具備一定的代表性與準確性

由于是群體性的大數(shù)據(jù)，所以更有代表性，并且是即時的數(shù)據(jù)記錄，不容易記混記錯，準確性也更好；

image.png

具備可持續(xù)性與可追溯性

通過數(shù)字化技術(shù)實現(xiàn)，可以伴隨產(chǎn)品發(fā)展持續(xù)的采集數(shù)據(jù)，可以較為方便的調(diào)取過往數(shù)據(jù)進行比對追溯分析；

image.png

具備一定的 AI 不可代替性

用戶行為的背后依舊是人文心理等方面的內(nèi)容分析或業(yè)務(wù)場景化決策，往往離不開人工的加持介入；

image.png

四、實施構(gòu)建的流程

以下是對用戶行為分析的工作流圖解，由于不同企業(yè)的訴求有差異，以下工作流僅代表大部分用作交流；

image.png

五、關(guān)鍵節(jié)點拆解說明

此次主要聊聊基礎(chǔ)的上手運用與注意事項，不涉及過深或難以理解的部分，如果說用戶行為分析可以到達高等數(shù)學的程度，那么此次就講講加減乘除好了，師父領(lǐng)進門，修行靠個人，各位看客請上座！

image.png

1. 目標需求拆解

① 什么時候開始？

首先你的產(chǎn)品得有流量，然后得有一個關(guān)乎到用戶行為的目標，例如想看看用戶流量分布、了解功能使用頻率、任務(wù)執(zhí)行的漏斗關(guān)系、用戶行為偏好、用戶數(shù)據(jù)畫像構(gòu)建等，這個時候就可以考慮開始了，不然就可能南轅北轍費力不討好。

image.png

② 界定一個范圍？

首先構(gòu)建一套完善的用戶行為分析系統(tǒng)并持續(xù)的維護與應(yīng)用并不是一個輕松的事情，所以最好是針對性構(gòu)建+多迭代，不要上來就想著做全盤搭建，表面的工作或問題往往可能只是浮冰，逐步的深入后問題會越來越多，個人深有體會！

image.png

③ 由上而下，找準路線？

通過業(yè)務(wù)目標向下拆解，一般上層目標無非是商業(yè)轉(zhuǎn)化、用戶活躍留存、任務(wù)通過率這些，向下拆解則是通過業(yè)務(wù)目標去鎖定核心的業(yè)務(wù)場景或任務(wù)線路，這些核心的頁面、場景或是任務(wù)線路，就是你前期可以界定的一個范圍，后續(xù)的重點工作則是將核心功能的入口或路徑窮舉出來，避免數(shù)據(jù)對不上或找不到異常源頭的情況。

在我的認知里，用戶行為分析建設(shè)不是一錘子買賣，步伐走小一點，基礎(chǔ)搭好一些，以后的迭代建設(shè)或維護也會輕松許多；

概括一下就是，不要追求全面，靠攏業(yè)務(wù)價值，關(guān)聯(lián)上指標或者核心業(yè)務(wù)場景即可。

之前網(wǎng)上看到有大佬給了一個建設(shè)思路，這里搬來大家參考一下；

image.png

2. 帶你認識不一樣的埋點

數(shù)據(jù)埋點技術(shù)已經(jīng)很成熟了，甚至有很多第三方的埋點+分析的服務(wù)，以及采集用戶行為數(shù)據(jù)的不僅僅只有埋點技術(shù)方案，哪怕你做一個錄屏技術(shù)都可以，只不過從數(shù)字化產(chǎn)品視角出發(fā)，埋點技術(shù)更有性價比，以及符合用戶隱私權(quán)益，所以這里專門講一下“埋點”這個老技術(shù)，熟悉的大佬們可以跳過埋點這部分。

① 埋點是什么

數(shù)字化應(yīng)用大多有個特征，就是需要用戶進行界面交互，有交互就有行為動作發(fā)生，而數(shù)據(jù)埋點就是將用戶在界面交互時產(chǎn)生的各種類型的監(jiān)控日志上報到產(chǎn)品后臺去，這樣業(yè)務(wù)團隊就可以知道到用戶在不同頁面或業(yè)務(wù)場景下操作了什么，去往過哪些頁面，當結(jié)合業(yè)務(wù)后臺的訂單等數(shù)據(jù)時，就可以還原出更加清晰的用戶行為全貌。

通常這些埋點會分為“頁面訪問(PV、UV)、區(qū)塊曝光(區(qū)域、時長)、按鈕操作(動作、狀態(tài))”三大類型，并攜帶交互元素和操作者的各類特征信息參數(shù)，便于我們知曉更多的場景細節(jié)與用戶情況，例如知曉這個「免費試用」按鈕是對應(yīng)了那個產(chǎn)品？點擊的用戶是否已開通這個產(chǎn)品？這個用戶是否為付費用戶？是否個人還是商家類型？用戶從哪個渠道進來的等，而且這些植入在產(chǎn)品代碼中的埋點可以不間斷持續(xù)的采集和配套產(chǎn)品迭代進行維護，可以幫助業(yè)務(wù)團隊獲取大量有效數(shù)據(jù)用作業(yè)務(wù)分析決策。

image.png

② 什么時候派上用場

這些數(shù)據(jù)埋點主要是為業(yè)務(wù)目標的洞察分析服務(wù)，也就是說業(yè)務(wù)目標中需要采集用戶行為數(shù)據(jù)時，埋點就要派上用場了，相比傳統(tǒng)的業(yè)務(wù)日志，埋點可以收集到更加全面的界面交互的行為數(shù)據(jù)，能夠簡易的還原出一套線上用戶的使用情景，而不僅限于一些業(yè)務(wù)后臺就能統(tǒng)計出的轉(zhuǎn)化率或基礎(chǔ)數(shù)據(jù)等；

image.png

并且埋點數(shù)據(jù)可以與業(yè)務(wù)數(shù)據(jù)分開存儲運維，這意味著埋點數(shù)據(jù)可以更迅速的根據(jù)設(shè)定的指標公式統(tǒng)計出期望的數(shù)據(jù)或視圖，并且不會干擾業(yè)務(wù)訪問的性能質(zhì)量，因此產(chǎn)品迭代后的新老數(shù)據(jù)對比、營銷活動的效果評估、用戶行為的特征偏好識別等，數(shù)據(jù)埋點都以可以派上用場的。

③ 怎么提埋點需求？

首先埋點需求沒有固定的文檔格式，其次不同埋點服務(wù)平臺的要求也有差異，就移動端來講，很多服務(wù)商已經(jīng)支持可視化埋點、全埋點、無埋點服務(wù)，可以實現(xiàn)自動識別交互元素并進行埋點操作，大大減少了開發(fā)工作量，那么再聊回埋點需求怎么提。

核心結(jié)論就是由上而下，通過業(yè)務(wù)目標或核心指標進行拆解，然后關(guān)聯(lián)到核心的任務(wù)流程上，對于一個頁面或一套流程沒有必要進行全篇埋點，技巧我概括為以下幾點；

image.png

埋點需求的主要內(nèi)容基本包含以下，根據(jù)業(yè)務(wù)或埋點平臺的差異，可以自行調(diào)整；

image.png

④ 業(yè)務(wù)擴參怎么一回事兒

擴參即擴展參數(shù)，指在當前用戶界面中可以請求到的業(yè)務(wù)數(shù)據(jù)，并將這些業(yè)務(wù)數(shù)據(jù)綁定到埋點日志中一并上報給埋點數(shù)據(jù)后臺，通常為一些用戶屬性參數(shù)、業(yè)務(wù)屬性參數(shù)、設(shè)備屬性參數(shù)、網(wǎng)絡(luò)環(huán)境參數(shù)，這樣我們就可以通過這些額外的參數(shù)進行數(shù)據(jù)分析或是過濾，舉個典型案例；

image.png

3. 數(shù)據(jù)治理是做什么

① 為什么要治理？

簡單說就是提升數(shù)據(jù)質(zhì)量與準確性，在龐大的一套數(shù)據(jù)中，我們需要弄清楚數(shù)據(jù)之間的映射關(guān)系，即不同的數(shù)據(jù)參數(shù)代表了什么元素什么動作什么含義，數(shù)據(jù)是否有缺漏或冗余、報錯漏報亂報、是否有無效的臟數(shù)據(jù)（例如內(nèi)部的測試數(shù)據(jù)或腳本爬蟲等帶來的數(shù)據(jù)），如果我們不去將這些數(shù)據(jù)進行治理，則統(tǒng)計出的數(shù)據(jù)指標特征或趨勢都將不可靠，無法被商業(yè)應(yīng)用。

簡單講就是元數(shù)據(jù)沒治理準確，得到的數(shù)據(jù)指標也就失去了實用價值。

image.png

② 怎么去治理？

本質(zhì)是查缺補漏將無效的數(shù)據(jù)過濾掉或糾錯，再把數(shù)據(jù)涵義映射成具體的指標或描述，用作進一步的指標計算與分析，如果數(shù)據(jù)又多又雜，你會發(fā)覺這一步要你老命，例如埋點就需要逐個查詢原始埋點的位置、觸發(fā)條件、埋點用途、埋點含義甚至與關(guān)聯(lián)業(yè)務(wù)數(shù)據(jù)的關(guān)系校對等。

不過還好，一般來講這些工作都是數(shù)據(jù)建模（BI）相關(guān)人員去負責的，作為應(yīng)用層的我們，更多的是能夠根據(jù)業(yè)務(wù)目標提出埋點需求、提出指標與數(shù)據(jù)報表需求，以及通過數(shù)據(jù)核算或查看數(shù)據(jù)趨勢等手段找出異常讓 BI 修復，所以這里就不展開埋點數(shù)據(jù)治理的方法了。

③ 數(shù)據(jù)維護不易

就埋點監(jiān)控用戶行為的方式來講，除了平時的治理與報表問題修復，每次迭代改版還要做好相關(guān)埋點信息的管理與維護更新，保證不出錯，不影響關(guān)聯(lián)指標，甚至是線上用戶偏好的推薦算法等應(yīng)用，特別是數(shù)據(jù)規(guī)模越來越大后，又密切關(guān)聯(lián)著業(yè)務(wù)決策時，數(shù)據(jù)更不容出錯，且要求準確。

六、三大分析內(nèi)容產(chǎn)出

1. 內(nèi)容產(chǎn)出的先后

在用戶行為分析內(nèi)容構(gòu)建的過程中，除非是有特定場景特定訴求，通常個人認為都是先出指標、再完善行為鏈路、再逐步豐滿用戶畫像的一個過程，原因如下；

  1. 通常先接到的都是一些核心指標，例如轉(zhuǎn)化率、留存率、活躍度等，同時這些指標也是上層最先關(guān)注到的；
  2. 接著就是完善不同場景或任務(wù)路徑相關(guān)，幫助洞察微觀視角下的體驗障礙或用戶偏好等，產(chǎn)出流量統(tǒng)計、流程漏斗等，起到業(yè)務(wù)體驗的洞察改善決策作用；
  3. 用戶畫像的數(shù)據(jù)本身就沒那么好收集，并且是一個逐步完善和被業(yè)務(wù)決策應(yīng)用的過程，所以一開始不會直接奔著用戶畫像構(gòu)建開始；

2. 基礎(chǔ)指標構(gòu)建

所謂指標可以理解成是產(chǎn)品某項業(yè)務(wù)的成績，例如我是賣包子的，那么我的指標大概率就是每天賣出去多少包子、利潤有多少、哪款包子銷量高，根據(jù)這些信息我就可以知道我平時應(yīng)該準備多少包子、哪些品類的包子需要多做一些、我靠賣包子能賺多少錢。

image.png

① 指標構(gòu)建的原理

實際上指標的構(gòu)建邏輯可以很簡單，例如 A 占 B 的百分比、ABC 的總和、連續(xù)多天 A 占 B 的變化等，很多加減乘除的算法就能搞定，主要是能拿到真實數(shù)據(jù)，不然我懷疑你在做爛賬......

常見指標：

image.png

3. 行為鏈路分析

用戶行為路徑是一種數(shù)字化的旅行地圖，相比較傳統(tǒng)服務(wù)的旅行地圖，場景會更純粹、意圖更準確、數(shù)據(jù)采集更便捷，主要作用有以下幾點；

  1. 分析用戶在產(chǎn)品中的活動范圍或頁面路徑的關(guān)系，可以幫助了解用戶活躍分布，流量走向等情況；
  2. 識別在任務(wù)或流程漏斗中的卡點或跳失情況，幫助優(yōu)化流程體驗或提升轉(zhuǎn)化率等指標；
  3. 通過用戶的互動方式或路徑特征來進行用戶分類或偏好分析預(yù)測等，用于內(nèi)容推薦算法或精準營銷；

這些行為我們可以大致分為瀏覽、消費、互動三大類，根據(jù)不同的業(yè)務(wù)類型，可以選擇性采集和分析相關(guān)數(shù)據(jù)，例如電商產(chǎn)品就比較關(guān)注用戶的瀏覽與消費行為，常見的有商品瀏覽、添加購物車到下單；

而社交應(yīng)用就更關(guān)注用戶的互動行為，如不同類型的內(nèi)容訪問、評論點贊、關(guān)注收藏分享等；

這些數(shù)據(jù)最終可能由可視化的數(shù)據(jù)報表呈現(xiàn)出來，以便于業(yè)務(wù)團隊快捷的找到數(shù)據(jù)問題或特征，如常見的漏斗圖、桑基圖、雷達圖、樹狀圖、散點圖、決策樹等；

image.png

小話題延展

最近在 UXRen 的一場分享會中，聽羅浩講了體驗營銷的話題，雖然是關(guān)于用戶研究在職能崗位上挖掘新的商業(yè)能力的內(nèi)容，但是其中有一段是關(guān)于如何在旅行地圖中挖掘新的營銷觸點，有一些體會，這里結(jié)合用戶行為鏈路分析簡單聊一下；

背景與問題：

產(chǎn)品功能與業(yè)務(wù)增多，引流渠道多樣化，不同渠道流量的撬動關(guān)鍵是什么，核心場景具備哪些能力，哪些渠道的流量能吃掉，這些流量所處的觸點或場景能支持什么，用戶意圖是什么，產(chǎn)品能力能滿足什么，產(chǎn)品發(fā)展可以支持哪些？如何分流或匹配各類流量的意圖，并提供路徑分發(fā)，這些用戶流量數(shù)據(jù)有何趨勢或特征，是否能與場景或觸點進行根因分析，是否沉淀行為或偏好模型？

行為路徑的重點：

在于觀察不同觸點下的客戶意圖，展開業(yè)務(wù)所能觸及的部分或新的機會，并匹配合適的關(guān)鍵路徑，以提升轉(zhuǎn)化或用戶粘性等，然后做數(shù)據(jù)回歸分析，抓取有效的用戶特征信息，并應(yīng)用到產(chǎn)品的內(nèi)容推薦或外部引流投放信息優(yōu)化上。

流程過程：

觸點展開與機會洞察，觸點場景——意圖識別——結(jié)果匹配（關(guān)鍵路徑）——（根因回歸）畫像更新——算法推薦——廣告優(yōu)化

image.png

這一套下來，是不是感覺有點兒似成相識？后來一想這不就是一套用戶增長的設(shè)計思路嘛。

4. 用戶數(shù)據(jù)畫像

主要是幫助了解和理解用戶，使得我們可以劃分用戶群體和識別偏好特征，最終以提供精準營銷或是洞察用戶訴求來迭代改善產(chǎn)品。

其中偏好特征我們還可以根據(jù)業(yè)務(wù)屬性細分為興趣偏好、行為偏好、消費偏好等，并為不同偏好特征的群體提供個性化的內(nèi)容服務(wù)，例如常見的內(nèi)容標簽標記，通過識別用戶常看內(nèi)容的標簽，來推薦類似的標簽的內(nèi)容或是有潛在興趣的標簽內(nèi)容來抓住用戶的興趣。

image.png

常見畫像指標構(gòu)建

這些指標會通過用戶行為、設(shè)備信息、個人資料的完善來逐步獲取，主要可以了解到用戶的地域分布、年齡與性別分布、設(shè)備與活躍度情況，相應(yīng)的數(shù)據(jù)在業(yè)務(wù)后臺基本上都能夠獲取到，只需要將某個時間分區(qū)的數(shù)據(jù)拉出來，經(jīng)過 Excel 之類的軟件把數(shù)據(jù)加工一下，就能夠獲取到相關(guān)數(shù)據(jù)視圖。

如果將多個數(shù)據(jù)指標結(jié)合起來分析，便可以獲取一些復合型數(shù)據(jù)指標，例如哪些年齡段的用戶群體消費能力更強、活躍度更高、不同教育背景的興趣愛好是否有一定的關(guān)聯(lián)性等等；

image.png

進階畫像指標構(gòu)建

進階的數(shù)據(jù)畫像會完善更多的用戶特征信息，便于業(yè)務(wù)團隊找到用戶群體的特征，做進一步的精細化運營或內(nèi)容推薦，常見的畫像指標如下；

image.png

此外就是在收集用戶數(shù)據(jù)的過程中，保證用戶隱私安全、合法性和安全性。

用戶分層模型應(yīng)用

當我們采集到一定的用戶數(shù)據(jù)后，就可以在數(shù)據(jù)畫像的構(gòu)建階段進一步完成用戶分層工作，這一步是為了將用戶分類，因為不同用戶群的目的是有差異的，例如閑逛、精準采購、參與活動的等等，以提供差異化的服務(wù)做精準營銷、識別用戶群體特征做業(yè)務(wù)策略決策、或是優(yōu)化產(chǎn)品體驗相關(guān)，不過當你的用戶規(guī)模尚小，運營模式簡單，你也不用迫切去進行用戶分層相關(guān)，因為收益不大。

那么通常都有哪些用戶分層模型呢？其實你并不陌生，一些給你列舉了一些；

image.png

七、分析結(jié)論到應(yīng)用

相信你也發(fā)現(xiàn)了，用戶行為分析的構(gòu)建與產(chǎn)出并不只是行為鏈路的數(shù)據(jù)，同時會包攬很多其他的有價值的指標與數(shù)據(jù)，所以不要被用戶行為四個字迷惑，或許你此刻正需要構(gòu)建相關(guān)數(shù)據(jù)。

當你準備構(gòu)建或整理用戶行為分析前，記得目標或問題先行，針對性采集數(shù)據(jù)或建設(shè)指標，在你有了相對準確或清晰易懂的數(shù)據(jù)后，那些數(shù)據(jù)報表或圖表根本難不倒你，說白了無非是將純純的一堆數(shù)據(jù)換了形式展示，如果你數(shù)據(jù)可視化的形式與應(yīng)用不夠了解，你可以看看 AntV 官網(wǎng)的介紹說明了解一下，其實你也不用每個都研究個遍，實用的就那么幾個，酷炫是要代價的，報表搭建平臺支不支持、Excel 支不支持、時間精力夠不夠研發(fā)給你整，都是問題～

AntV 官網(wǎng) ：https://ant-design-charts.antgroup.com/examples

最后

你可能疑問沒有完整的教程手把手教你啊，其實不然，構(gòu)建的前提、流程、要點、建設(shè)方向均在此篇中交代過，當你按照這套流程框架去做，基本上不會有啥大問題，一般來講這些內(nèi)容也夠用，至于選用哪些數(shù)據(jù)埋點平臺、數(shù)據(jù)分析平臺、報表搭建平臺、視自家公司情況而定吧。

也不要擔心在數(shù)據(jù)報表搭建或分析的過程中，你搞不定，是不是你執(zhí)行先不說，多問問百度或平臺客服總能解決，如果就是覺得很難上手，那么大概率是工具你不熟，或者工具不好用

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍藍設(shè)計）www.bjlzjm.com.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

 

image.png

評論(0) 瀏覽(18)

UI 設(shè)計細節(jié)進階 —— 蘭亭妙微設(shè)計的 24 個實用質(zhì)感提升技巧

濤濤 設(shè)計管理與成長

蘭亭妙微設(shè)計深耕 UI/UX 設(shè)計領(lǐng)域十余年，始終認為優(yōu)秀的設(shè)計藏于細節(jié)。很多時候界面設(shè)計完成后總覺質(zhì)感不足、差些火候，并非整體布局出了問題，而是忽略了那些能提升視覺體驗的細微設(shè)計點。資深設(shè)計師與初級設(shè)計師的差距，也正體現(xiàn)在對這些細節(jié)的把控與打磨上。

評論(0) 瀏覽(22)

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bjlzjm.com.cn

存檔