vivo小游戲的改版揭示了輕量化產品的設計本質——從點擊量到用戶時長的指標躍遷。本文深度拆解其首頁分發邏輯重構與去低幼化視覺升級，揭秘如何通過動態專題矩陣、情感化設計和品牌色系統，同時實現商業價值提升與品牌心智進化。

小游戲業務的核心特點是“輕量化啟動，依賴時長變現”。

在產品形態方面，“點擊即玩”是重要特征，其試錯成本極低，用戶可快速、反復嘗試多款游戲，使用時長比點擊更能代表深入程度。在營收方面，對于依賴廣告變現的游戲，時長直接影響廣告曝光次數；對于內購游戲，時長則意味著付費窗口期的延長。“停留”比“點擊”更能創造商業價值。

依據以上兩個原因，小游戲業務成功的關鍵指標并非傳統的分發效率（點擊量），而是用戶游戲總時長。這是小游戲設計改版的第一個核心目標。

<圖：業務目標>

除此之外，在存量競爭時代，設計不僅僅是“做得好用”，更需要“做得準確”——準確理解業務，準確洞察用戶，準確傳遞品牌心智。

“小游戲”，在很多用戶的印象中，往往是“休閑、輕松、可愛，甚至樣式上帶點低幼感”的存在，這造就了其固有的用戶心智。

實際上，【vivo小游戲】希望服務的用戶是豐富、全面的，所以矛盾便浮出水面——亟待扭轉“低幼感知”，這就是小游戲設計改版的第二個主要目標。

在以上兩個背景之下，本次改版目標如下：

目標一（來自業務目標）：提升游戲時長，讓分發更精準，幫助用戶“玩進去，愿意留下”。

目標二（來自用戶心智）：去除低幼感知，重塑“年輕、放松、品質”的產品形象。

<圖：本次設計改版的兩個目標>

這不僅僅是一次界面優化，更是一次以設計驅動產品品牌升級的系統性設計。下文將從三個維度，分享我們的設計推導與落地過程。

第一部分：提時長——優化分發路徑，從“廣撒網”到“精準陪伴”

重構首頁分發邏輯，使其服務于“提升時長”的目標。對首頁三大核心模塊——“用戶愛玩”、“平臺推薦”、“隨機游戲”——進行了數據洞察和體驗重塑。

<圖：首頁改版的三個重要模塊>

1. 聚焦核心：強化“用戶愛玩”的心智，而非盲目曝光

數據顯示，“最近愛玩”模塊貢獻了極高的總游戲時長。這證明，用戶主動沉淀的偏好列表，是游戲啟動的最強驅動力。

新的洞察隨之而來：絕大多數的用戶，其“最近愛玩”的游戲只有1-2款。舊版首頁將4款游戲“平鋪”外顯，反而稀釋了用戶的注意力，導致分發的目標不清晰。

針對這一現象，我們的A/B Test結論是：滿足需求，比增加曝光更重要。新版設計強化了“用戶愛玩”的模塊心智，使其成為用戶返回時的“第一眼”核心，讓用戶能最快回到那個“TA真正想玩的游戲”，而不是在多個似是而非的選擇中猶豫，從而直接鎖定并延長核心游戲時長。

<圖：左圖為老方案，右圖為新方案>

2. 給出理由：重構“平臺推薦”，讓選擇變得容易

“平臺推薦”是發現新游戲的主陣地。我們放棄了“一招鮮”的模式，轉而構建了一套專題矩陣，針對不同游戲和用戶意圖，設計差異化的推薦理由：小編推薦專題：從“系統”到“有溫度的個體”建立了“安利官”角色，把真實的小編推向用戶。用真人頭像、親切口吻和官方認證，打造“有溫度、有信任感”的真人推薦。情感化與專業性的結合，極大地拉近了與用戶的距離。

<圖：小編推薦>

<圖：小編推薦>

場景化專題：從“游戲是什么”到“我此刻需要什么”將游戲分發融入用戶生活場景。例如，“早上好：提神醒腦”、“下午好：堅強摸魚人”、“晚上好：放松一下”。通過時間、情緒、狀態的匹配，讓游戲推薦更具說服力和即時價值。

<圖：場景化推薦>

高品質專題：從“文字說”到“視覺證明”針對精品或內購游戲，我們用更大尺寸的卡片、更具沉浸感的圖文或視頻預覽，來直觀呈現游戲的“品質感”，將“高質量”這一抽象概念具體化。

<圖：左圖為老方案，右圖為新方案>

玩法專題：用IP強化“類別識別”在“男生愛玩”、“掛機輕松玩”等玩法標簽下，將專題內最具代表性的頭部游戲IP（如“太空行動”、“一波超人”）進行視覺放大，強化用戶對專題游戲類型的“一眼識別”。

<圖：玩法專題>

魅力信息前置：從“默默無名”到“熱度可見”將“XX萬人在玩”這類強吸引力信息，從傳統的文字區剝離，設計為高識別度的半透明標簽，與游戲Icon強綁定。通過調整色彩、字重，使其在不遮擋Icon主視覺的同時，成為輔助用戶決策的“魅力因子”，有效提升了點擊意愿。

3. 留有余地：優化“隨機游戲”，提供“多一次機會”

我們注意到，有相當一部分用戶是在首頁“逛了好幾屏”后仍未找到目標，此時我們猜想“隨機一下”可能是他們留下的最后機會。

強化了其“提供一次驚喜、一種可能性”的心智，為探索型用戶保留了一個“輕量級出口”，這背后是對用戶分層和場景的細致體察。

<圖：隨機玩>

設計思考：分發設計的精髓在于“對癥下藥”。我們不再追求統一的曝光策略，而是將首頁視為一個動態的、有層次的決策場。“用戶愛玩”是確定性滿足，“平臺推薦”是引導性探索，“隨機游戲”是可能性兜底。

設計的價值在于，為每一種用戶路徑，都鋪就了最合適的體驗軌道，最終合力指向“停留與探索”的核心目標。

第二部分：去低幼——重塑視覺語言，從“繽紛低幼”到“放松高級”

“去低幼化”不僅是風格的轉換，更是品牌心智的重塑。為此，我們建立了一套完整的研究與執行方法。

1. 拆解“低幼感”：從感性描述到理性標準

“低幼”是一個感性評價。為了找到解法，我們首先要將其“可視化”。

對比了市面上的兒童教育產品，并結合對自身舊版設計的審視，提煉出三個維度的“低幼”視覺特征：

1. 色彩：高明度、高純度色彩被大面積、平均化地使用，色相過多且對比強烈，形成“繽紛喧鬧”的觀感。
2. 圖形：表達過于具象，細節復雜，視覺元素堆砌，呈現出“卡通卡片”式的質感。
3. IP形象：IP設計（如吉祥物）偏向可愛、低齡化，缺少成人世界的“人設”感，且使用頻率過高、場景過泛。

這三點，共同構成了我們需要打破的舊有特征。

<圖：關于低幼感知來源的研究>

2. 定義新氣質：從“喧囂”到“輕松、年輕、快捷”

有了要規避的視覺特征，同時，要確立新方向。結合產品特性和目標用戶，我們定義了vivo秒玩小游戲應有的產品調性：

• 年輕有趣：是年輕人愛用的，能帶來驚喜感的。
• 輕松休閑：能隨時玩、不用學，是“放松”的載體。
• 快捷高效：點擊即玩，響應迅速。

<圖：從情緒板到色彩定義>

3. 系統化升級：從色彩到體驗的全鏈路煥新

色彩體系重構

定義品牌色：我們摒棄了“大雜燴”式的色彩，定義了“活力黃”與“輕松綠”作為品牌主色，分別承載“生命力、有趣”與“放松、自然”的情緒。并嚴格設定了60%背景色、30%白色卡片、10%品牌色的色彩使用比例，建立清晰的視覺層次。

<圖：品牌色>

分層處理原則：

• 氛圍層（背景/裝飾）：采用“低純度/高透明/大面積”的用色原則，大量使用漸變、暈染，弱化色彩視覺重量，只為襯托氛圍，絕不搶奪信息。
• 內容層（信息主體）：用大面積的白色卡片清晰呈現游戲Icon，保證內容的“高還原、高識別、高點擊感”。
• 操作層（高優信息/行動點）：在小面積、關鍵的操作區域（如按鈕、標簽）使用“高飽和/高明度”的品牌色，實現“小面積、高體感”的提亮效果，精準引導用戶操作。

<圖：分層處理原則>

注入“情緒價值”：

• 從功能到情感“放松感”融入：在“最近愛玩”等模塊，引入海島沙灘、漂浮云朵等動態視覺元素，將“玩游戲”包裝成一種“放松”的體驗，給予用戶情感上的暗示與安撫。
• “趣味、驚喜感”傳達：在“隨機游戲”模塊，利用骰子旋轉動畫強化“隨機、有趣”的心智；在品宣位置，用海量游戲圖標交疊微動效，直觀傳遞“海量游戲、應有盡有”的豐富感。

<圖：“海島”微動效>

<圖：隨機玩>

傳承品牌基因：我們沒有割裂歷史，而是巧妙延續了品牌核心符號“閃電”。

新版設計中，“閃電”圖形以“斜切線”的形式，融入魅力信息標簽、專題卡片頭圖等細節，在去低幼的同時，保留了用戶對品牌的核心認知，完成了視覺語言的平滑演進。

<圖：老版本頁面示例>

<圖：新版本頁面示例>

設計思考：去低幼化不等于“高冷化”或“同質化”。我們的解法是建立系統性的設計語言。它不是對某個元素的修修補補，而是從底層色彩邏輯、視覺層次、情感傳達、品牌符號多個維度進行的一體化重構，最終在視覺上完成了從“兒童樂園”到“年輕人休閑客廳”的轉變。

總結：不止于“改版”的設計價值

回顧整個項目，這不僅僅是一次界面優化。我們將其視作一個通過設計系統性地解決商業和品牌問題的范本。復盤整個過程，我們有幾點深刻的心得，這幾條心得從我們剛剛入行到目前都適用，感受愈發深刻：

1、理解產品是在做什么：設計必須服務于商業本質。深刻理解“小游戲靠時長盈利”這一核心，才讓我們敢于將“提升分發效率”的慣性思維，轉向“提升用戶停留與沉浸”的差異路徑，這是所有設計決策的“北極星”。

2、抓住重點：資源永遠是有限的。通過數據分析，我們精準地識別出“最近愛玩”模塊是提升大盤時長的關鍵。集中優勢資源，在關鍵模塊上做深做透，才能帶來數據層面的最大回報。

3、以用戶需求為導向：用戶的核心需求是“找到我想玩/可能愛玩的游戲”，而不是“看到更多游戲”。設計要做的，是提供“理由”和“路徑”，幫助用戶高效決策，而不是制造“信息過載”。對“最近愛玩”模塊的聚焦，正是這一思維的體現。

4、任何時候都不要忘記有趣。在追求“去低幼化”的過程中，我們并沒有走向另一個極端——“嚴肅與無趣”。相反，我們將“放松”、“驚喜”、“有趣”這些屬于游戲產品的核心情感價值，通過動態效果、場景化文案、情感化設計重新注入體驗。

我們交付的不僅是一個“更好看、更好用”的首頁，更是一個“更清晰、更高級、更具吸引力”的vivo小游戲品牌。

注：插圖中全部實例均為設計稿，非線上截圖。游戲icon、名稱、在玩人數等基礎信息非線上信息。

轉載：人人都是產品經理

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

作為一個 B 端設計師，我們究竟要如何理解組件？

當接觸到一個新組件時，通常會陷入到迷茫。一方面是組件過于的熟悉，我們在日常的工作當中會頻繁接觸到大量的組件內容（畢竟是組件設計師...）另一方面則是新的組件不斷涌入，我們作為設計師一時之間不知道如何進行分析，今天我們就來聊聊 B 端設計師與組件之間的“愛恨情仇”。

先來簡單說說什么是組件？

我認為組件就是組成用戶界面的基本元素，也是前端在開發過程當中，抽象出來可以復用的模塊。對于定義大家不必過于糾結，最主要還是要了解其使用，比如在下方頁面當中，會包含有哪一些組件？

A. 輸入框 開關 上傳 按鈕 文本提示

B. 輸入框 開關 上傳 按鈕 氣泡卡片

C. 輸入框 開關 圖片預覽 按鈕 文本提示

這就是我們要了解關于一個組件的判斷流程，我認為會有三步：形式、交互、場景。

一、形式決定功能

其實我們在去辨別新一個組件的時候，會優先關注組件的「樣子」，進而來進行辨別。

比如下方的兩個組件，我們其實很快速就能判斷出一個是 單選框，一個是多選框。因為在我們潛意識當中單選為圓形、多選則為方形，因此對于一個組件的第一印象則會和它的形式相關。

但很多時候，隨著業務的變化，我們也會給組件更多含義。比如在下方三個新建按鈕當中，因為他們的形式不同，所對應的含義也并不相同。

通過形式上，我們可以理解為：

• 第一個新建按鈕，
• 第二個新建按鈕：
• 第三個新建按鈕：

再舉一個例子，比如在這三個選擇組件當中，正是由于其組件形式的變化，導致它們在使用上也會存在較大差別~

當然，正是因為它們樣子的改變，組件的使用含義也會產生變化。

二、明確交互狀態

知道它的樣子還不夠，我們還要了解它究竟應該如何操作，因此就需要明確對應的交互狀態。

比如同樣給到大家兩個組件，請你去辨別這兩個組件分別是什么？

其實我們很難進行細致的辨認，因為這兩個組件在形式上基本相同。但我們一旦將其動起來，你就會發現不同，左側的是一個按鈕，而右側則為鏈接。

其實我們在辨別交互狀態時，通常會存在兩種辨別維度：常規交互與業務交互。

常規交互是指在網頁端當中的基礎交互，比如 Hover、點擊，這種情況大多數設計師經常接觸，因此我們就不花太多時間放在這上面。

第二種交互類型是業務交互，它主要出現在特定的頁面上。比如在圖表中的下鉆、過濾、聯動、縮放等等；在表格就會有 凍結、拖拽、選中 等交互，這些內容都是我們在涉及特定頁面時需要關注的。

所以我們再去理解一個組件的時候，也需要去考慮這個組件所關聯的交互狀態，這樣才能夠對于這個組件有個更為全面的認識。

三、作用對比

作用對比則是去思考這個組件與其他作用類似的組件之間究竟會存在什么差別？

因為每一個組件都會有它存在的意義，我們可以通過橫向單維度的對比，了解到這個組件它所對應的特點。

這個我們來舉一個完整的例子，帶大家感受一下~

舉一個例子

比如最近在行業當中，出現一種新的組件叫做：螞蟻線

剛開始在騰訊云的官網看到了螞蟻線，但其實我對他真的一無所知。于是乎，我開始了組件調研。

從形式開始，你會發現“螞蟻線”是位于文本下方，通過虛線的方式呈現。

通過這種形式，我們能夠拓展一些其他的類似樣式。

比如在飛書當中，當你寫一個錯別字的時候，飛書會提供默認的下劃線提示你修改錯誤。但這個下劃線是一個實線，并且會以黃色作為標注，這就是形式上的差異。

其次，在交互上，在整個頁面中，當你將鼠標懸停在虛線上時，這個提示會告訴你這里有信息可以進行預覽。通過這樣，我們就能大致明白“螞蟻線”的含義：它出現在文本下方，使用虛線的方式提示用戶這里有更多的信息。用戶通過將鼠標懸停在虛線區域的文本上，便可以查看更多內容。

最后，在對組件進行對比時，思考與“螞蟻線”具有相同作用的組件，我想到有兩個：Tooltips和Popover。并簡單整理它們在日常頁面的使用，一共會包含三種相同的情況下的交互形式。同時，明確分析緯度以信息凸顯程度進行對比，進而能夠將這三個組件進行區分。

并且在頁面中，交互的形式也會有所不同。因此我們簡單整理，會有三種相對應的對比方式。并明確它們，以信息干擾程度作為標準，來進行單維度的劃分。進而就能得到“螞蟻線”組件的一個整體的用途。

關于組件，確實由于時間有限，給大家分享到這里。

轉載：人人都是產品經理

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

我們的世界正在快速的數字化，這也是為什么UI界面在近10年來一直都是熱門話題，同時，這也意味著，作為設計師的我們比以往任何時候都要專注打造高素質的UI，以及讓用戶欲罷不能的用戶體驗。我們需要好的UI和優秀的設計。

蘭亭妙微設計公司，一直在追求好設計，優秀的設計，讓人難忘的設計，能夠脫穎而出的設計。我們相信設計是有跡可循的，有成熟的、可考量的標準來衡量，它甚至可以作為我們設計的方向而存在。

從網站到手機，從家用的恒溫控制器到汽車的控制面板，所有的這些UI構成了我們的日常數字體驗。越來越多的屏幕和日漸龐大的數字化內容，使得我們對于優質的UI設計越來越渴望。

雖然好設計的原則是老生常談，但是我們還是要經常總結，結合自己的設計，三省吾身。

1、簡單

優秀的UI界面是隱形的，華麗的裝飾和不必要的元素都已經被剔除，簡單直接的頁面邏輯和直觀必要的元素構成了這樣的UI界面。設計UI的時候，你在添加任何元素的時候，都最好問一下自己“這個功能是否會影響用戶現有的任務？它是否真的必要？”先將你的UI內的元素限定為必須的，專注于核心的用戶體驗。

如何設計一個簡單的UI界面，Maaemo 的產品在這方面就做的很突出。這個挪威餐廳的網站上，你看到的是預訂的表單，其他次重要的內容被隱藏在漢堡菜單當中，避免引起混亂。用戶不用浪費時間去來回瀏覽掃視，直接進入預訂的環節。

2、清晰

清晰應該是所有UI界面都具備的基本屬性。請記住，你的UI界面存在的目的是讓用戶能夠更便捷地同你的系統進行交互，為此，它需要能夠清晰地同用戶進行溝通，如果用戶無法弄明白界面的使用，會因此感到沮喪。

保持清晰的UI界面設計并不難，首先要保證一點：按鈕和操作的標簽文字指向性要明確，保持清晰的信息傳遞，讓用戶能夠快速弄明白交互的指向性。

這個時候，你也別忘了開頭的“簡單”的原則。盡量不要在UI中使用冗長、復雜、難以記住的文本標簽，你的用戶不會花費時間去讀，也不會去欣賞它們，越復雜越“獨特”，就越會影響整體的用戶體驗。

一個詞能解釋清楚的事情，千萬不要用更多的語言去表述。保持簡明能夠讓你的界面更加清晰，節省用戶的閱讀時間，降低認知疲勞。可能精簡出直觀又易于識別的文本很難，但是做好了是很有價值的，對于整體體驗的加分很多。

3、一致

不論是哪個設計師，都會希望自己的設計能給用戶帶來一致的體驗的吧？一致的設計能夠讓用戶對于你的設計模式更快認知、熟悉，并且在此基礎上快速適應整體的體驗。人們渴望規律，追求一致性，也希望在實際操作中驗證自己所“發現”的一致性。

所以，用戶是期望借助自己習得的經驗，來探索更多的內容的，而探索能否有效就得看設計的一致性是否夠好了。在整個UI設計中保持一致的語言、布局和設計規律，整個用戶體驗會顯得更加“通透”。

4、熟悉

用戶體驗設計的一個重要的目標是要讓用戶能夠憑借直覺來操作UI界面。那么，怎么才能讓用戶更加“直覺”地完成交互呢？用戶要能夠自然地理解其中的內容，操作自然就不難了，也就是說，你要讓用戶對你的界面產生“熟悉感”。所以，你要充分利用用戶對于你的設計所熟悉的部分。

當用戶對UI界面抱有熟悉感的時候，通常意味著他們對于這個設計有所了解，甚至知道怎么交互，他們明白操作之后大概會發生什么，也知道哪些事情不應該做。所以，如果你能利用好用戶對于交互和界面模式的熟悉來進行設計的話，能讓你的用戶更快上手操作。

漢堡圖標就是這樣的典型。現在當用戶看到漢堡圖標的時候，就會明白這代表著菜單。當用戶在界面中找不到預期的功能或者服務的時候，會主動地尋找漢堡圖標，希望能在其中找到需要的東西。

Born Shoes 這個網站也充分利用了這一點，將熟悉的圖標放在熟悉的位置，用戶上手就知道怎么用了。

5、視覺層次

UI界面的視覺層次是非常重要且常常被忽視的一個屬性，它能夠幫助用戶專注重要的內容。如果你想讓界面中每個內容都看起來很重要，那么只會單純地讓信息過載，讓每個元素都分攤用戶的注意力，最終只會讓整個設計顯得混亂不堪。不同尺寸的字體、不同的色彩和不同的控件最終應該是相互搭配，構成層次，有輕重緩急地呈現給用戶，將復雜的結構簡單化，幫助用戶完成任務。

Budnitz Bicycles 的網站就很好地使用色彩營造出視覺層次，吸引用戶關注到網站的特定部分。網站中的按鈕在整個設計中顯得非常顯眼，引導訪客點擊。

6、高效

你的UI界面最終的目標是要帶著用戶完成任務，達成目標，或者去他們要去的頁面。不同的流程要求不同，但是最優秀的UI設計有個共通的特征：高效。提升界面效率最有效的方法是進行任務分析。

熟悉用戶的流程，了解用戶的目標，然后在此基礎上盡量簡化流程，使得用戶能夠便捷快速的達成目標。在此過程中，仔細考慮每個功能細節，規避可能存在的漏洞，幫助用戶快速完成用戶流程。

Mulberry 在他們的活動頁面上提升了用戶效率，幫助用戶更快地挑選節日禮物，降低繁復的搜尋和思考過程。

7、響應

UI界面響應牽涉到體驗的方方面面。首先，UI界面的響應應該是迅速的，它背后的整個系統應該能夠快速反應，否則不夠快速的響應會讓用戶感到沮喪，緩慢的網頁加載過程會令人抓狂。

事實上，如果你的網站沒有在3秒內加載完成，就會開始有訪客因此而流失。根據 Kissmetrics 的統計，超過40%的訪客會在加載速度超過3s之后而離開，而加載時長的增加，更多的用戶會隨之離去。

此外，UI界面的響應是否合理，是否足夠“人性化”。當用戶點擊界面元素的時候，用戶希望知道他們的操作是否成功，而這個時候，合理而快速的界面反饋就顯得很重要了。比如，當用戶點擊一個按鈕，按鈕的狀態變化，又或者界面加載時的加載進度條，都能夠讓用戶明白狀態的改變，以及他們操作的結果。

界面的合理響應讓UI更為富有人性，減少錯誤的發生，并且讓交互進入真正良性的循環。

轉載自優設網

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

響應式的適配對象

響應式是一種網頁前端技術，讓網頁可以根據分辨率、設備的變更，自動調整樣式和布局。

它的誕生起源于移動互聯網興起的熱潮，彼時智能手機訪問網站的需求激增，但多數網站的適配都是面向電腦端的大屏幕，僅有少數網站會額外開發符合移動端顯示需求的版本（自適應）。

響應式的提出，就是為了解決這種問題，通過建立一套約定好的設計、開發方法，用一套代碼自動適配臺式電腦、筆記本、平板、移動端等各種設備，提高網站的兼容性和開發效率。

而學習響應式，首先就要從瀏覽器開始說起。

瀏覽器是一個非常特殊的軟件，比如大家熟知的 Chrome、Safari、Eage 等，我們日常訪問的所有網頁，都需要通過瀏覽器加載并渲染出最終的樣式。

可以把網頁 HTML 文件理解成是一個程序，而瀏覽器就是運行這個程序的系統（環境），也就是說解析網頁依靠的是瀏覽器而不是 Windows、Mac、iOS、Android、Linux 等客戶端系統。

瀏覽器即系統中的系統（類似虛擬機)，不管在任何系統或設備上，只要安裝了瀏覽器，就可以用大體相同的規則、邏輯去加載、渲染出網頁。

但不同設備的屏幕有很大差異，網頁如何識別并匹配這些設備呢？

方法主要有兩種，第一種是瀏覽器會識別當前系統和設備，并提供接口讓網頁讀取。而部分網站會準備多種規格的網頁，根據獲取的設備類型推送對應的規格，這種做法叫做自適應模式。

通常自適應只區分桌面端和移動端兩種，較大的門戶、購物、工具類網站，普遍使用自適應模式。因為移動端訪問網頁的需求并不高，所以會對移動端版本做大量的精簡，降低開發、維護成本。

另一種方法，則是讀取瀏覽器視圖區域的分辨率。任何瀏覽器的界面，都包含功能區域和視圖區域兩個部分，功能區域提供相關的軟件菜單、操作按鈕，視圖區域則是顯示網頁界面的區域。隨著設備和屏幕分辨率的變化，瀏覽器的大小也會不同，網頁視圖區域也會跟著縮放。

網頁視圖注定小于整個瀏覽器的軟件窗口，而瀏覽器作為軟件，在系統中的尺寸不等于系統分辨率（或設備分辨率），一方面有系統的全局組件影響，另一方面窗口并不是非得全屏，用戶可以任意調整。

所以響應式網頁就是根據瀏覽器的視圖區域做適配，不管你是在電腦上縮放軟件窗口，還是在不同的設備、系統中打開，本質上都只是顯示區域大小的變更。而在瀏覽器的檢查選項中，模擬不同的設備其實就是縮放出一個指定的視圖窗口出來。

這種依賴關系延伸出一個新的知識點，即網頁顯示的分辨率，和顯示設備的屏幕分辨率，是兩套不同的體系。

這是因為硬件分辨率和系統渲染的分辨率是兩個概念，尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸筆記本，硬件分辨率是 3024 x 1964 (254 ppi)，但在系統的屏幕分辨率選擇中，默認的卻是 1512*982（即原來的 1/2）。

這是因為硬件分辨率太高了，1:1 渲染的話，那么大多數圖標、文字是無法被看清的，所以默認使用了 2x 的規格渲染。但這只是其中一個選項，在 HIDPI 技術的加持下，用戶還可以選擇別的分辨率，比如我會進一步調高到 1800*1169。

在 Windows 系統中同理，雖然有很多高分辨率的屏幕，但是用戶為了看清內容，會在系統中設置 120%、150% 的放大效果，等于為系統分辨率做出變更。

說到底，系統顯示分辨率的規格也是無窮無盡的。但是不管外部的轉換邏輯有多復雜，規格有多少，都和響應式網頁無關，它只需要認準瀏覽器的視圖區域分辨率即可。

所以了解線上案例的響應式布局規則，或者檢查已經開發好的響應式頁面，并不需要切換不同設備查看，只要拖拽縮放瀏覽器的大小（主要是寬度）即可獲得完整的響應效果。

最后總結起來，響應式網頁是面向瀏覽器視圖區域做適配的布局方法，而不是面向系統、屏幕分辨率的適配，這和自適應布局有本質的差異。

在 B 端領域，絕大多數項目都只部分兼容響應式，放棄移動端的適配，即使支持移動端也是使用自適應的混合模式。要面對這些復雜的場景，就月需要理解上面這些基礎的概念，否則設計師就無法真正滿足響應式項目的前期創建和后期交付需要。

轉載：優設

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

蘭亭妙微UI設計公司：你會發現現在的移動端UI界面中極簡風的設計越來越多了。極簡主義設計風之所以能夠如此的受歡迎，很大程度是源自于它對于設計、開發的友好，它不僅讓APP的加載速度更快，讓APP對于不同屏幕的兼容性更加優異。與此同時，越來越多的用戶也開始青睞極簡風的設計，極簡風的UI界面不僅漂亮，而且在可用性上也非常的突出：它易于導航，并且具備強大的視覺表現力。

1、一屏一個任務

降低用戶完成任務之時所需耗費的精力。

你為APP的每一屏都應當承載一個對用戶有用、有價值的交互或者任務，一次完成一個任務，且只能有一個任務，其中應該不包含超過1次的行為召喚（CTA）。這樣的設計能讓用戶更輕松地學習，更便捷地使用，在設計上也更容易添加刪減以及構建。

以Uber為例，Uber 清楚地知道用戶的目的是乘坐出租車，所以，應用程序不會一次給用戶太多的信息，會根據地理信息自動檢測用戶的位置，而Uber 提供給用戶的每一個界面的交互都是單個的，用戶只需要選取位置，下單即可。

2、隱形的UI

內容即是界面。

專注于內容，并且盡量刪除不必要的元素，這樣可以縮短用戶集中注意力的時間，用戶將會更快地被引導到他們正在搜尋的內容，而內容本身正是一個隱形的界面。最典型的就是Google 地圖。在重新設計的時候，Google 地圖刪除了所有不必要的面板和按鈕，地圖本身就是最好的界面。

3、呼吸的空間

使用負空間讓重要的內容吸引用戶的注意力。

留白，或者負空間，指的是頁面設計布局中的空白部分，或者空白元素，它們常常被忽略和忽視，雖然許多設計師認為這樣的設計會浪費屏幕的空間，但是留白本身就是設計的基本元素之一。

留白可以提升可讀性和內容的優先級，在頁面布局中也發揮著重要的作用。因此，它可以合理地簡化UI并提升用戶體驗。

4、直觀的導航

導航應該是每個APP當中優先級最高的組成部分。移動端APP中導航應當容易被發現，可訪問的，且盡可能少的占用屏幕空間。由于小屏幕的限制以及內容優先級的需要，移動端導航的可訪問性設計一直是一個挑戰。

標簽欄和導航欄是非常適合用來展現較少的導航選項的，它們非常適合用來展示主要的導航選項，一個簡單的點擊就能流暢地切換到不同的頁面。

5、單手操作

讓你的設計兼容更大的屏幕。

關于用戶如何握持手機，下面的圖為你展現了最常見的三種模式：

通過觀察可以發現，85%的用戶使用單手握持他們的手機，下面的熱圖展示了從2007年一來，各種不同尺寸的iPhone 的拇指操作區域。毫無疑問，隨著屏幕尺寸的增加，拇指能夠觸及的區域的比例正在逐步降低。所以，移動端界面的用戶體驗設計應當進行調整，嘗試讓你的APP 能夠在手機上面能夠單手操作，將導航置于用戶的拇指可以觸及的區域之內。

6、讓APP運行快速

不要讓用戶等待內容呈現

試圖讓程序的響應速度提升起來。許多任務盡量在后臺跑起來，讓前臺的展現速度顯得很快。將一部分操作打包到后臺運行有兩個好處：讓一些等待和加載過程不再展現在用戶面前，并且可以讓許多操作在用戶請求之前就發生。一個很好的例子就是 Instagram 中上傳圖片，當用戶選擇要共享的圖片之時，上傳就已經開始。

7、善用推送通知

在推送信息之前請三思。

每天用戶都會被無數無用的推送通知所轟炸，被分散注意力，這也使得通知常常會顯得頗為惱人。根據調研，超過70%的受訪者表示，令人煩躁的推送信息是促使他們卸載應用的主要原因。

所以，要做好移動端設計，需要用好每一次的信息推送。不要為了吸引用戶而推送消息，這往往會適得其反。你需要將對于用戶有價值的信息推送出去，這樣才合適。

有效的移動端APP信息推送策略是采用多種類型的信息推送機制，推送通知，電子郵件，應用內通知，新聞Feed等。多樣化的信息推送通過合理的協調，創造良好的用戶體驗。

轉載自優設網

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

設計組件庫是提升設計效率和一致性的重要工具，但如何在頻繁迭代和動態調整中高效賦能業務設計交付，一直是行業面臨的挑戰。蘭亭妙微UI設計公司，分享了他們在設計組件庫建設中的新思考和實踐，供大家參考學習。

本文將分享我們對于“什么是好的設計組件”的看法，并給出一種搭建復雜組件的實用思路。我們還會從資產消費的角度，提供一些優化建議。雖然過程中會涉及不少基于Figma軟件的操作細節，但核心思路就像一把“萬能鑰匙”，無論在哪個設計平臺都行之有效，希望這些內容能給廣大設計師們帶來一些新的啟發。

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