一、高效信息抓取：讓系統(tǒng)替用戶 “讀” 與 “填”

• 釘釘代辦：自動識別文本中的時(shí)間，一鍵完成日程設(shè)置

  

• 微信圖片文字識別：指尖滑動即可選中、復(fù)制、轉(zhuǎn)發(fā)，告別手動打字

  

• 閑魚 × 淘寶：訂單數(shù)據(jù)互通，一鍵同步已購商品，自動給出估價(jià)

  

• 支付寶綁卡：拍照識別卡號與開戶行，免去逐位輸入

  

二、避免重復(fù)閱讀與操作：跳過無效流程

• 愛奇藝劇集：一鍵跳過片頭，支持整劇默認(rèn)跳過

  

• 微信朋友圈：重返時(shí)一鍵 “跳到未看位置”，不重復(fù)瀏覽

  

• 微信群未讀：標(biāo)記未讀條數(shù)，點(diǎn)擊直達(dá)最新消息位置

  

三、降低出錯概率：提前預(yù)判，減少返工

• 美團(tuán)配送：惡劣天氣先派單給騎手，再通知商家，避免無人配送

  

• 高德地圖：提前預(yù)警擁堵路段，給用戶決策時(shí)間

  

• 微信紅包 / 轉(zhuǎn)賬：超時(shí)提醒，一鍵定位對應(yīng)聊天，防止遺漏

  

• 美團(tuán)單車：App 內(nèi)關(guān)鎖，杜絕忘鎖、折返鎖車

  

   

四、用選擇代替輸入：少打字、多點(diǎn)選

• 餓了么備注：歷史備注一鍵選用，不用重復(fù)編輯
• 攜程拼音：姓名一鍵轉(zhuǎn)拼音，多音字自動提供選項(xiàng)

  

• 京東評價(jià)：預(yù)設(shè)評價(jià)標(biāo)簽，快速完成評分

  

• 微信零錢通：“全部轉(zhuǎn)入” 快捷按鈕，不用輸入金額

  

五、提供下一步路徑：連貫操作，不用折返

• 高德地圖：查路線后，直接顯示單車 / 地鐵掃碼入口
• 支付寶出行：地鐵支付成功，一鍵喚起網(wǎng)約車

  

• 螞蟻森林：“找能量” 直達(dá)可收取好友界面，高效偷取

  

• 得到 / 大眾點(diǎn)評：截屏自動彈出分享按鈕，一步分享

一、全文速覽圖

“Good design is durable.” 迪特 · 拉姆斯的設(shè)計(jì)十誡提到，好的設(shè)計(jì)應(yīng)該是歷久彌新、不會輕易過時(shí)的。

在 20 世紀(jì)，大多數(shù)日常用品都經(jīng)歷過顛覆式的變革、簡化或技術(shù)迭代，比如電話、筆、黑膠唱片機(jī)等。然而有少數(shù)物品，它們已問世超過百年，形態(tài)與結(jié)構(gòu)卻跟設(shè)計(jì)之初別無二致，且還能較好地滿足當(dāng)下的需要。這些產(chǎn)品是如何誕生的？為什么他們能在時(shí)間的長河中維持恒定不變？蘭亭妙微UI設(shè)計(jì)公司與您一起來學(xué)習(xí)。

二、這些百年產(chǎn)品的誕生

1. QWERTY鍵盤布局  1874年

1941 年，世界上第一臺電子計(jì)算機(jī)誕生；1968 年，第一只鼠標(biāo)原型問世。然而，與它們共同構(gòu)成人機(jī)交互基礎(chǔ)的 QWERTY 鍵盤，其布局早在 1874 年就已獲得大規(guī)模應(yīng)用。

如今我們已有語音、觸摸屏、甚至是腦機(jī)接口等多種輸入方式，卻還是高度依賴著與 150 年前首批打字機(jī)外觀相似的鍵盤。

QWERTY鍵盤的發(fā)明

1868 年，肖爾斯（Christopher Latham Sholes）和他的同事們將他們的第一臺打字機(jī)運(yùn)往芝加哥，首位客戶是芝加哥波特電報(bào)學(xué)院的校長愛德華（Edward Payson Porter）。這臺打字機(jī)有 28 個琴鍵式按鍵，外形似鋼琴，與波特學(xué)院使用的休斯·菲爾普斯印字電報(bào)機(jī)相似。其鍵盤按字母表順序排列：A 至 N 從左向右排布，O 至 Z 則從右向左延伸。

在會見了多名客戶后，根據(jù)反饋，肖爾斯與其同事對鍵盤的構(gòu)造與布局進(jìn)行了多次改進(jìn)。最終在 1872 年，《科學(xué)美國人》在頭版以大幅版畫形式報(bào)道了這臺打字機(jī)，畫面中清晰展示了其鍵帽結(jié)構(gòu)，此時(shí)的打字機(jī)已配備 42 個按鍵，包含大寫字母、數(shù)字 2 至 9，以及連字符、逗號、句號、問號等常用標(biāo)點(diǎn)符號。

1874 年，肖爾斯發(fā)明的打字機(jī)由槍械制造商雷明頓公司（E. Remington and Sons）推向市場，并逐漸演變成為鍵盤的行業(yè)標(biāo)準(zhǔn)。其按鍵布局已與今天我們普遍使用的 QWERTY 鍵盤幾乎完全相同，是當(dāng)今世界上應(yīng)用最廣泛的鍵盤布局。盡管不同國家會因語言習(xí)慣在鍵位安排上做些微調(diào)，但整體結(jié)構(gòu)仍遵循著這一經(jīng)典設(shè)計(jì)。

撲朔迷離的鍵盤布局起源

這其中耐人尋味的是，肖爾斯是如何想出這種鍵盤排列方式的。

因其印刷行業(yè)的背景及報(bào)紙出版商的經(jīng)歷，肖爾斯應(yīng)當(dāng)熟悉排字工根據(jù)使用頻率排列字盤的做法。有一種廣為流傳的理論認(rèn)為 QWERTY 鍵盤的布局是為了限制打字者的速度：其核心原則是將高頻使用的字母分隔開（盡管像 E 和 R 仍被放在一起），以此減少打字時(shí)連動桿的相互碰撞而導(dǎo)致的故障。換而言之，這是一種以暫時(shí)性的輸入效率，換取機(jī)械運(yùn)行的長期可靠性的妥協(xié)。

然而，京都大學(xué)的研究人員³提出，QWERTY 鍵盤布局的誕生可能與早期核心用戶——電報(bào)員的工作習(xí)慣密切相關(guān)。研究中以 E、S 、Z 這三個字母在鍵盤上的布局為例來闡明這個觀點(diǎn)。

當(dāng)時(shí)，美國電報(bào)員需要把聽到的摩爾斯電碼實(shí)時(shí)轉(zhuǎn)譯成字母。在美國使用的電碼中，字母 Z 與常用組合 SE 的編碼恰好相同，均為“···  ·”（滴滴滴  滴）。當(dāng)聽到這樣的電碼序列，尤其是在缺乏上下文的單詞的開頭時(shí)，接收者無法立即判斷是 Z 還是 SE，只能根據(jù)后續(xù)聽到的電碼來綜合判斷。這種不確定性會嚴(yán)重影響輸入效率：在傳統(tǒng)的 A-Z 順序鍵盤上，若電報(bào)員開始輸入 Z，之后發(fā)現(xiàn)應(yīng)為 SE，手指就不得不在相距較遠(yuǎn)的鍵位之間移動并修改。

而 QWERTY 鍵盤布局的調(diào)整是，把 Z、SE 這兩組容易引起混淆的字母安排在了彼此相鄰的位置。這樣一來，即使電報(bào)員在聽到“滴滴滴  滴”時(shí)無法立刻判斷，手指也能在緊鄰的區(qū)域中快速選擇或更正，而不必在全鍵盤上尋找。或許正是這類針對電報(bào)場景的優(yōu)化，最終塑造了我們今天所熟知的 QWERTY 鍵盤格局。

雖然原因至今尚無定論，且無論是為了避免機(jī)械故障還是適配摩爾斯電碼的輸入習(xí)慣，都跟當(dāng)下的使用場景有所不同，但至今為止也沒有任何一種其他布局方式來取代它。

2. 回形針 1901年

19 世紀(jì)，木漿制漿技術(shù)與工業(yè)造紙廠的出現(xiàn)讓廉價(jià)紙張得以廣泛流通。面對隨之產(chǎn)生的大量零散紙張，人們開始使用手邊常見的別針來加以固定——這被視為回形針的前身。盡管別針價(jià)格低廉、使用方便且用后即棄，但其缺點(diǎn)也十分明顯：不僅容易生銹，還會刺穿紙張，留下難看的銹跡與孔洞。

最早的回形針專利記錄來自挪威人約翰·瓦勒（Johan Vaaler），他在 1901 年提交了申請。專利摘要中寫道，這是一種“由彈簧材料彎曲成矩形、三角形或其他形狀的環(huán)，金屬絲兩端形成并排且方向相反的部件或舌片”。相比別針，回形針不需要通過刺穿紙面來固定紙張，并排的金屬絲結(jié)構(gòu)也提供了更多的固定方式。

1899 年，威廉·米德爾布魯克（William D. Middlebrook）獲得了回形針制造機(jī)械的設(shè)計(jì)專利，隨后他將專利賣給了一家辦公用品制造商，該公司將其注冊為“寶石回形針”（Gem clip）。其有著標(biāo)志性的雙橢圓形環(huán)圈設(shè)計(jì)，通常采用鍍鎳或彩色塑料包裹的材質(zhì)，不僅有效防銹，也兼顧外觀的美感。

相比約翰·瓦勒的設(shè)計(jì)，寶石回形針將紙張與回形針接觸的位置處理得更圓潤，減少了刺破紙張的風(fēng)險(xiǎn)。螺旋狀的鋼絲具有一定的柔韌性，可輕松張開以便放入紙張，同時(shí)又有足夠的彈性來夾緊文件。

幾年后，喬治·W·麥吉爾（George W McGill）對寶石回形針做出了改良，進(jìn)一步增大了內(nèi)環(huán)的弧度，使其更明顯地上翹。相比初代寶石回形針平緩的環(huán)圈末端，這種上揚(yáng)的開口形成了更清晰的“示能”——直觀地提示用戶“此處可拉開并插入紙張”。在結(jié)構(gòu)上，它也實(shí)現(xiàn)了更省力的開合體驗(yàn)。正是這一改良版本，逐漸演變成了今天最常見、最廣泛使用的回形針。

回形針作為“固定文件”的工具這一認(rèn)知，也自然而然地從現(xiàn)實(shí)世界延伸到了數(shù)字世界。在圖形用戶界面中，當(dāng)我們想要將文件添加至郵件或文檔時(shí)，常常能看到那枚熟悉的回形針圖標(biāo)。

3. 螺旋蚊香 1902年

中國最早的蚊香可追溯至宋代，一本記錄民間生產(chǎn)技術(shù)的古籍《格物粗談》中記載：“端午時(shí)，收貯浮萍，陰干，加雄黃，作紙纏香，燒之，能祛蚊蟲”。這段記載中所述的制品可視為早期形態(tài)的“蚊香”，其外形類似于帶芯的線香。換而言之，最初的蚊香是直的。

蚊香的螺旋形演變可以追溯到 19 世紀(jì)末的日本。當(dāng)時(shí)，人們將除蟲菊粉與鋸末混合燃燒用于驅(qū)蚊。日本企業(yè)家上山英一郎（うえやま えいいちろう）生產(chǎn)了一種混合了淀粉和除蟲菊的香，雖然驅(qū)蚊效果良好，但存在明顯缺陷：不僅燃燒時(shí)間短，不到四十分鐘便燃盡，而且與普通線香一樣質(zhì)地較脆，遇風(fēng)易折。

1895 年，上山英一郎正致力于尋找延長蚊香燃燒時(shí)間的方法。期間，他的妻子在倉庫中偶然看見一條盤踞的蛇，由此獲得靈感，建議他將蚊香制成螺旋形狀。這一設(shè)計(jì)在工程上極為巧妙：螺旋結(jié)構(gòu)以最小的面積延展了蚊香長度（相比線狀蚊香延長約 4 倍），也設(shè)置了一個單點(diǎn)、穩(wěn)定、緩慢的燃燒路徑，讓蚊香既不會熄滅也不會因?yàn)橄銞l過寬而燃燒太快。1902 年，可持續(xù)燃燒約七小時(shí)的螺旋狀蚊香問世，并被命名為“金鳥蚊香”，其有著標(biāo)志性的深綠色外觀與印有紅色公雞頭的包裝設(shè)計(jì)。

如今我們使用的螺旋盤香，基本都是采用了這個結(jié)構(gòu)，在保證單盤燃燒時(shí)間 7-8 小時(shí)的前提下，既能節(jié)省包裝空間，又能在運(yùn)輸中互相支撐，防止斷裂。

4. 拉鏈  1911年

在拉鏈發(fā)明之前，人們用以拉緊衣物的工具繁多，包括系帶、紐扣、別針、搭扣、腰帶與松緊帶等。紐扣是其中歷史最久、使用最廣的一種，但其使用效率較低，解開與扣上均需時(shí)間，且在耐用性上存在不足，時(shí)有脫落之虞。

19 世紀(jì)末，在追求“效率”的工業(yè)時(shí)代背景下，拉鏈應(yīng)運(yùn)而生。發(fā)明家惠特科姆（Whitcomb Judson）想解決傳統(tǒng)的系帶式高幫靴穿脫過于繁瑣這個問題，在芝加哥世界博覽會上展示了名為鉤鎖（clasp locker）的裝置，它的核心目標(biāo)很明確：用一次滑動，替代逐個系扣的繁瑣過程，節(jié)省時(shí)間。但當(dāng)時(shí)這種拉鏈依賴手工制作，成本較高，且質(zhì)量不夠穩(wěn)定，最終因?yàn)榻Y(jié)構(gòu)缺陷及成本問題退出了市場。

1912 年，森貝克（Gideon Sundback）取得了突破性進(jìn)展，他將惠特科姆發(fā)明的易崩開的鉤環(huán)結(jié)構(gòu)改成了穩(wěn)定咬合的齒牙結(jié)構(gòu)，實(shí)現(xiàn)凹凸完全咬合，使拉鏈閉合更牢固，開合也更加順滑流暢。一百多年過去，如今金屬拉鏈仍然在沿用這種工藝制造。

1923 年，百路馳（B.F. Goodrich）公司將森貝克設(shè)計(jì)的拉鏈用于一款女式橡膠靴，因其開合時(shí)會發(fā)出“滋滋”的摩擦聲，公司便形象地將其命名為 “ZIPPER”。這個朗朗上口的名字隨后逐漸被大眾廣泛采用，“拉鏈”也因此得名并沿用至今。

拉鏈與紐扣的爭端

在時(shí)尚界，關(guān)于在服裝上用拉鏈或是紐扣還引起過一場關(guān)乎功能、形式甚至是倫理上的論戰(zhàn)。

從效率上而言，拉鏈無疑更勝一籌，其便利性也更符合我們現(xiàn)代快節(jié)奏生活的需要。紐扣的使用需要一定的技巧，而且會增加衣物的厚度，對于如今流行的緊身牛仔褲來說，紐扣可能使面料更容易鼓起或撕裂；而拉鏈則能通過“收緊并向上拉”的方式來解決這個問題。

但是，拉鏈更容易損壞和卡住，更難修理。它們也存在一定的安全隱患：在戰(zhàn)場上，軍服就曾發(fā)生過因拉鏈卡死耽誤急救而導(dǎo)致傷亡的事件；反之，紐扣在意外拉扯下更易整體脫落而非卡死。

紐扣的另一個好處在于美觀：隨著時(shí)間的推移，紐扣與衣服的摩擦?xí)纬瑟?dú)特的色落與磨損痕跡，對于牛仔愛好者來說是一個理想的特性。

還有一部分來自復(fù)古派的道德質(zhì)疑，批評者稱拉鏈簡化衣物穿脫的特性會助長輕率行為，敗壞社會風(fēng)氣。因此，盡管拉鏈技術(shù)早已成熟，直到 1947 年李維斯才將其應(yīng)用于牛仔褲上。

最終在 1937 年，拉鏈在這場論戰(zhàn)中擊敗紐扣，鞏固了其在服裝設(shè)計(jì)中的地位。如今，這個一百多年前的發(fā)明無處不在，被廣泛應(yīng)用于服裝、行李箱和無數(shù)其他物品中，YKK（全球市場份額第一的拉鏈制造商）每年生產(chǎn)的拉鏈足以繞地球 50 圈。

三、何以百年不變

面對技術(shù)的百年巨變，為何這些產(chǎn)品能不被淘汰，甚至其基本形態(tài)都與百年前最初發(fā)明時(shí)大體相同？值得肯定的是，他們的設(shè)計(jì)的確超越了同期其他產(chǎn)品，呈現(xiàn)出一些寶貴的特質(zhì)。

簡單精妙的結(jié)構(gòu)

例如經(jīng)典的寶石回形針，其雙橢圓形結(jié)構(gòu)在同期的其他設(shè)計(jì)中脫穎而出，以簡潔優(yōu)雅的形態(tài)高效實(shí)現(xiàn)了“不傷紙”這一核心需求；而螺旋形的蚊香設(shè)計(jì)，既延長了燃燒時(shí)間，又通過嚴(yán)絲合縫的嵌套，兼顧了節(jié)省包裝空間和運(yùn)輸穩(wěn)固性。

易用性

拉鏈和回形針是典型的無意識設(shè)計(jì)，它們形態(tài)與功能高度統(tǒng)一、無需學(xué)習(xí)曲線。即使是年幼的孩童，也能憑直覺學(xué)會使用拉鏈：20 世紀(jì) 30 年代拉鏈推廣初期，拉鏈款童裝就常常以“幫助幼兒學(xué)會自己穿衣，培養(yǎng)自理能力”作為賣點(diǎn)。

易工業(yè)化、標(biāo)準(zhǔn)化

回形針只需彎曲三次并剪斷即可制成，易于自動化生產(chǎn)；螺旋形蚊香可通過鋼制模具一次沖壓成型，一臺機(jī)器每分鐘可生產(chǎn)數(shù)百盤蚊香，整個過程可高度標(biāo)準(zhǔn)化。規(guī)模化生產(chǎn)有效降低了成本，使其在市場上更容易取得價(jià)格優(yōu)勢，進(jìn)而推動廣泛普及。

然而，歷經(jīng)百年技術(shù)發(fā)展與社會變遷，新生需求與問題層出不窮。這些經(jīng)典產(chǎn)品，是否真的一如誕生之初那般，顯得全然不過時(shí)？或許，讓它們保持不變的還有更深層的原因。

四、已是最優(yōu)解，還是懶于改變？

去年 11 月的香港大埔火災(zāi)事故造成了重大人員傷亡，令人痛心。在對這場事故的追責(zé)中，首當(dāng)其沖地便是香港建筑行業(yè)的竹棚工程。許多人指出，竹材燃點(diǎn)僅為 265°C，遠(yuǎn)低于鋼材，可能加劇火勢蔓延。此外，竹棚的結(jié)構(gòu)強(qiáng)度也相對不足——過去香港曾多次發(fā)生棚架坍塌事故。以香港的經(jīng)濟(jì)發(fā)展水平，完全有能力推動行業(yè)向鋼材升級。但網(wǎng)絡(luò)上仍有許多支持者聲稱：竹棚搭建技藝自清朝便出現(xiàn)在香港，已有上百年歷史，具有文化傳承價(jià)值‌，也是長久以來的行業(yè)慣例。

同樣的，歷史上也有其他證據(jù)表明 QWERTY 鍵盤并非最佳的鍵盤布局，比如美國心理學(xué)家發(fā)明的德沃拉克鍵盤布局（Dvorak keyboard layout）：這一布局基于字母使用頻率和手的生理結(jié)構(gòu)設(shè)計(jì)，擁有打字更快、更易學(xué)習(xí)和降低疲勞的特點(diǎn)。二戰(zhàn)時(shí)一項(xiàng)研究表明，德沃拉克布局的打字員速度要比 QWERTY 布局打字員快 74%。即使是 QWERTY 鍵盤的發(fā)明人——肖爾斯本人也沒那么篤定：盡管他很早就將設(shè)計(jì)賣給了雷明頓公司，但他終其一生都在不斷改進(jìn)布局，并創(chuàng)造出各種替代方案，在他去世的前一年，他還為自己的 XPMCH 鍵盤申請了專利。

螺旋蚊香的使用體驗(yàn)也沒那么理想：其嵌套結(jié)構(gòu)導(dǎo)致在拆分時(shí)比較困難，一不小心可能直接掰斷，且必須依賴專用底座才能使用。這本質(zhì)上是一種便利工業(yè)化生產(chǎn)而非優(yōu)化用戶體驗(yàn)的設(shè)計(jì)。然而，即使有了電蚊香這種更方便、健康、安全的替代品，螺旋蚊香仍憑借低廉的成本、成熟的產(chǎn)業(yè)鏈以及簡易的倉儲運(yùn)輸要求，在市場中占據(jù)著一席之地。

在歷史較短的互聯(lián)網(wǎng)領(lǐng)域也有類似的案例——比如搜索引擎結(jié)果頁的布局與交互模式。自 2000 年代初谷歌確立“頂部搜索框 + 藍(lán)色鏈接標(biāo)題 + 簡短摘要”的模式以來，其核心框架在近二十年間保持高度一致，并成為行業(yè)標(biāo)準(zhǔn)，不管是在網(wǎng)頁端還是移動端。然而在移動端上，固定于屏幕頂部的輸入框常位于手指的自然操作范圍之外，用戶需特意伸展才能觸及，體驗(yàn)不夠便捷。而“標(biāo)題用藍(lán)色表示超鏈接” 這個設(shè)計(jì)也稍顯過時(shí)，在用戶已基本認(rèn)知“搜索結(jié)果標(biāo)題可點(diǎn)擊”的今天，整屏的藍(lán)色可能帶來不必要的視覺干擾，增加閱讀負(fù)擔(dān)。

回望這些產(chǎn)品或設(shè)計(jì)，其“不變”與其說是源于解決問題的完美，不如說是因?yàn)樗鼈冊缭绱_立了“行業(yè)標(biāo)準(zhǔn)”，獲得了先發(fā)優(yōu)勢，培養(yǎng)了牢固的用戶習(xí)慣，進(jìn)而形成了強(qiáng)大的路徑依賴。一旦從用戶到產(chǎn)業(yè)鏈的“慣性”形成，任何改變都將面臨難以估量的轉(zhuǎn)換成本。正因如此，即便它們存在一定的缺陷，市場往往也會接受，畢竟這是性價(jià)比相對較高的策略。

總結(jié)

一些產(chǎn)品能歷經(jīng)百年而保持不變，固然有其設(shè)計(jì)上的優(yōu)越性，但更值得深思的是不變的背后隱藏著的路徑依賴與行業(yè)慣性的強(qiáng)大力量。百年的不變或許只是暫時(shí)的，可能是顛覆性的技術(shù)尚未誕生，或是缺少一個推動行業(yè)變革的契機(jī)。

歸根結(jié)底，設(shè)計(jì)無法時(shí)刻去尋求那個完美的終極方案，而是在多重約束條件下尋找平衡——既要權(quán)衡用戶習(xí)慣與使用體驗(yàn)，又要兼顧商業(yè)成本、行業(yè)發(fā)展情況與規(guī)模化需求，甚至還要回應(yīng)文化傳承與社會倫理的爭議。同時(shí)，作為設(shè)計(jì)師也需要保持對行業(yè)規(guī)范與慣例的審視與批判意識，警惕將“長期不變”等同于“無可優(yōu)化”，在考慮用戶習(xí)慣轉(zhuǎn)換成本的前提下，積極探索更適配當(dāng)下需求的創(chuàng)新方案。

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

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

一、閑魚：AI發(fā)布提效

閑魚發(fā)閑置功能接入AI，只需上傳商品圖片就可以直接生成描述文案，極大幫助用戶簡化發(fā)布流程

1. 零門檻發(fā)布，降低發(fā)布時(shí)間成本

解決非專業(yè)用戶 “不會寫文案、不懂專業(yè)術(shù)語” 的痛點(diǎn)，自動提取商品特征，組合成規(guī)范文案；相比傳統(tǒng)發(fā)布流程的耗時(shí)編輯文案、核對信息，更高效快捷。

2. 優(yōu)化內(nèi)容，提升交易轉(zhuǎn)化

自動生成符合當(dāng)前市場熱點(diǎn)的文案表述，更能多文風(fēng)轉(zhuǎn)換，一鍵轉(zhuǎn)為趣味的 “抽象文學(xué)”“黛玉文學(xué)”等，提升內(nèi)容點(diǎn)擊率。

二、支付寶：廣告位游戲化包裝

支付寶的首頁Banner通過游戲化的包裝，快速吸引注意力，驅(qū)動用戶主動點(diǎn)擊探索，高效地為活動頁面引流。

1. 互動機(jī)制強(qiáng)化用戶參與感

采用懸念式互動設(shè)計(jì)，button以 “猜猜是什么” 這類問答形式，激發(fā)用戶好奇心，通過游戲化場景的營造，降低參與門檻，驅(qū)動用戶主動點(diǎn)擊探索。

2. 場景氛圍營造提升吸引力

在以功能入口為主的首頁，該模塊具有游戲化趣味性的氛圍營造，從視覺上差異化的呈現(xiàn)，相比傳統(tǒng)的靜態(tài)廣告位，更能有效抓住用戶眼球，高效地為活動頁面引流。

三、去哪兒：退票時(shí)挽留場景設(shè)計(jì)

當(dāng)有中轉(zhuǎn)單的用戶在點(diǎn)擊退票時(shí)，用挽留浮層及時(shí)給用戶彈出更優(yōu)的解決方案，并在方案中量化利益點(diǎn)，同時(shí)保證原有票的安全感。整體通過 “先抓痛點(diǎn)→再給解決方案→最后引導(dǎo)操作” 的路徑，優(yōu)化了用戶出行體驗(yàn)。

1. 量化利益點(diǎn)

除了直達(dá)更方便之外，直達(dá)還有更省時(shí)間、金錢，保底票免費(fèi)退等更多的利益點(diǎn)

2. 有兜底有安全感

用當(dāng)前的中轉(zhuǎn)作為保底，先搶票，搶到了還能再退票。讓用戶安心下單，在未搶到心儀票的時(shí)候能有中轉(zhuǎn)的替補(bǔ)票，可以緩解用戶的焦慮情緒，有兜底的保障安全感

四、療愈類App Endel：引導(dǎo)充值會員的動畫

通過一個巧妙的互動行為“搖動手機(jī)”，降低用戶對會員充值廣告的反感。

1. 提升用戶參與感與趣味性

“搖一搖”互動將被動觀看廣告轉(zhuǎn)變?yōu)橹鲃訁⑴c，用戶通過簡單的物理動作即可觸發(fā)折扣，這種即時(shí)反饋機(jī)制增強(qiáng)了趣味性，降低了傳統(tǒng)廣告的侵入感。

2. 降低付費(fèi)決策的心理門檻

通過互動行為展示折扣，巧妙地將付費(fèi)流程包裝成一種“獎勵”而非強(qiáng)制推銷。用戶感受到的是“主動獲取優(yōu)惠”的成就感，而非被廣告打擾的抵觸情緒，從而更愿意接受付費(fèi)選項(xiàng)。

五、小宇宙：創(chuàng)新列表設(shè)計(jì)

通過擬物化的卡牌堆疊形態(tài)，將傳統(tǒng)的平面信息流轉(zhuǎn)變?yōu)榫哂锌臻g縱深感和探索趣味的交互式敘事焦點(diǎn)

1. 視覺層次突破傳統(tǒng)束縛

通過卡片堆疊、傾斜，在二維屏幕上創(chuàng)造出三維空間感。不對稱的布局打破了傳統(tǒng)設(shè)計(jì)的呆板，賦予界面動感與活力，能有效抓住用戶視線，對抗“橫幅盲視效應(yīng)”

2. 建立擬物化的趣味交互

模擬物理世界卡牌的操作體驗(yàn)，配合流暢的滑動動畫，讓用戶產(chǎn)生"翻閱卡片"的愉悅感，這種情感化設(shè)計(jì)能顯著提升用戶的操作滿足感和停留時(shí)長

3. 內(nèi)容暗示激發(fā)探索行為

堆疊效果露出部分內(nèi)容作為預(yù)覽，能有效刺激用戶的好奇心，主動進(jìn)行滑動探索，提升內(nèi)容消費(fèi)深度

六、QQ音樂：個人中心下拉觸發(fā)金幣中心

該設(shè)計(jì)通過 “貼合用戶習(xí)慣的交互 + 強(qiáng)引導(dǎo) + 積分激勵” 的組合策略，實(shí)現(xiàn)簽到轉(zhuǎn)化與用戶留存

1. 交互設(shè)計(jì)貼合用戶固有習(xí)慣

采用下拉觸發(fā)模式，無需額外學(xué)習(xí)成本，降低用戶參與簽到的操作門檻，提升即時(shí)轉(zhuǎn)化效率

2. 視覺設(shè)計(jì)強(qiáng)化引導(dǎo)與目標(biāo)感知

以金幣掉落清晰的視覺元素突出金幣中心入口，讓用戶快速捕捉核心功能，減少尋找成本，縮短 “看到 - 參與” 的路徑

3. 激勵設(shè)計(jì)構(gòu)建留存閉環(huán)

用 “金幣” 作為即時(shí)激勵，滿足用戶即時(shí)反饋的心理需求，驅(qū)動次日復(fù)訪，同時(shí)聯(lián)動積分體系，將單次簽到轉(zhuǎn)化為長期行為

最后要說的話

本期的設(shè)計(jì)分享就到這里啦。

文章中的案例與思考來自于UED同學(xué)的日常分享。

后續(xù)我們將持續(xù)深度體驗(yàn)產(chǎn)品，挖掘更多值得分享、學(xué)習(xí)的設(shè)計(jì)案例。努力將其中的方法理論應(yīng)用到后續(xù)的產(chǎn)品設(shè)計(jì)中。

愿我們的努力為你帶來更好的體驗(yàn)。下次見。

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

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

前言

一、先搞懂：篩選是什么？為什么要用？

1. 篩選的定義

2. 篩選 vs 搜索（核心區(qū)別）

• 篩選：系統(tǒng)提供條件，用戶被動選擇 → 縮小范圍
• 搜索：用戶主動輸入明確關(guān)鍵詞 → 精準(zhǔn)查找

3. 什么時(shí)候必須加篩選？

1. 系統(tǒng)定義篩選（一級篩選）
    

   

   大方向快速切換，如：訂單（待支付 / 待發(fā)貨）、優(yōu)惠券（未使用 / 已過期）。
2. 用戶自定義篩選（二級 / 精細(xì)化篩選）
    
   在一級結(jié)果里進(jìn)一步精準(zhǔn)，如：價(jià)格、品牌、發(fā)貨地、評分等。

二、5 種最常用篩選樣式（直接對應(yīng)場景）

1. Tab 篩選

• 形態(tài)：橫向 / 縱向常駐展示
• 優(yōu)點(diǎn)：一目了然、隨時(shí)切換、無學(xué)習(xí)成本
• 場景：內(nèi)容大類劃分（新聞頻道、視頻分類、商品一級類目）
• 缺點(diǎn)：結(jié)果偏模糊，需搭配二次篩選

2. 彈窗式篩選

• 形態(tài)：入口隱藏，點(diǎn)擊蒙層彈出
• 優(yōu)點(diǎn)：省空間、多維度平鋪、不占頁面
• 場景：電商列表、外賣、出行等高頻精細(xì)化篩選
• 適用：條件不多、操作快

3. 折疊式篩選

• 形態(tài)：入口隱藏，點(diǎn)擊展開、常駐頁面
• 優(yōu)點(diǎn)：比 Tab 省空間，比彈窗更可控
• 場景：中度篩選需求，需反復(fù)調(diào)整條件

4. 高級篩選（新頁面）

• 形態(tài)：跳轉(zhuǎn)到獨(dú)立頁面
• 優(yōu)點(diǎn)：無干擾、可放大量細(xì)顆粒條件
• 場景：汽車、房產(chǎn)、招聘、復(fù)雜 B 端篩選
• 適用：條件多、層級深、需專注操作

5. 篩選 + 排序組合（移動端標(biāo)配）

• 形態(tài)：篩選按鈕 + 綜合 / 價(jià)格 / 銷量等排序
• 優(yōu)點(diǎn)：一步完成 “縮小范圍 + 重新排列”
• 場景：幾乎所有商品 / 內(nèi)容列表
• 代表：美團(tuán)、餓了么、淘寶、京東

三、3 個篩選維度（決定怎么布局）

1. 單維度篩選

• 一次只選一個條件，觸發(fā)即生效
• 標(biāo)簽簡短（≤5 字）、語義清晰
• 場景：訂單狀態(tài)、內(nèi)容分類

2. 多維度篩選

• 支持單選 / 多選 / 區(qū)間 / 滑塊
• 需配：確定 + 重置按鈕
• 移動端建議：一級維度≤9 個，多余整合到二級

3. 多等級篩選

• 層級：一級分類 → 二級屬性 → 三級參數(shù)
• 移動端最多 3 級，避免迷路
• 適合：類目復(fù)雜的電商、后臺系統(tǒng)

四、篩選設(shè)計(jì) 3 大核心準(zhǔn)則（必遵守）

1. 以用戶效率為目標(biāo)

• 不知道要什么的用戶：靠分類 + 篩選引導(dǎo)
• 知道要什么的用戶：靠精準(zhǔn)條件快速鎖定
• 最終目標(biāo)：降低時(shí)間成本，提升轉(zhuǎn)化與留存

2. 按產(chǎn)品類型定制條件

• 電商：品牌、價(jià)格、銷量、評分、服務(wù)
• 新聞 / 內(nèi)容：熱度、時(shí)間、偏好、標(biāo)簽
• 工具 / B 端：狀態(tài)、時(shí)間區(qū)間、負(fù)責(zé)人、關(guān)鍵字

3. 按使用頻率排優(yōu)先級

• 買手機(jī)：品牌→內(nèi)存→容量→價(jià)格
• 買日用品：價(jià)格→銷量→（品牌放高級）

五、總結(jié)（一句話記住）

• 簡單分類 → Tab
• 常規(guī)精篩 → 彈窗
• 復(fù)雜深篩 → 高級頁面
• 列表標(biāo)配 → 篩選 + 排序

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

一、先懂?dāng)?shù)據(jù)：列表設(shè)計(jì)的 3 個核心要素

1. 屬性字段：明確要展示的信息點(diǎn)

• 設(shè)計(jì)前要梳理全字段，不遺漏關(guān)鍵信息
• 給字段劃分權(quán)重與分類，優(yōu)先突出核心信息，次要信息弱化或隱藏

2. 字段值：確定信息的展示形式

• 明確字段值的限制：文本長度、圖片尺寸、狀態(tài)類型
• 統(tǒng)一轉(zhuǎn)化規(guī)則：比如 VIP 等級用金銀銅圖標(biāo)替代文字，提升視覺效率

3. 字段狀態(tài)：適配不同場景的顯示邏輯

• 場景示例：外賣列表的配送標(biāo)簽（快送 / 專送 / 自配）、配送時(shí)間樣式差異
• 設(shè)計(jì)全覆蓋：正常態(tài)、高亮態(tài)、禁用態(tài)、空態(tài)，確保所有場景適配

二、再定框架：列表頁的標(biāo)準(zhǔn)結(jié)構(gòu) + 2 種布局

列表頁標(biāo)準(zhǔn)框架

• 運(yùn)營模塊控制篇幅，避免擠壓列表首屏展示
• 可在列表中插入運(yùn)營廣告、內(nèi)容推薦，平衡信息與轉(zhuǎn)化

移動端 2 種核心列表布局

1. 單列列表：一行一個數(shù)據(jù)項(xiàng)

• 引導(dǎo)型：核心目的是跳轉(zhuǎn)詳情，比如商品、酒店、外賣列表，突出封面與核心信息
• 展示型：直接呈現(xiàn)完整內(nèi)容，無需跳轉(zhuǎn)，比如朋友圈、消息列表

2. 多列列表：一行多個數(shù)據(jù)項(xiàng)

• 等高布局：每條數(shù)據(jù)高度統(tǒng)一、對齊規(guī)整，適合字段統(tǒng)一、差異小的場景（如電商商品、圖集）
• 瀑布流布局：數(shù)據(jù)高度自適應(yīng)，靈活度高，適合內(nèi)容長短不一、視覺差異化大的場景（如筆記、穿搭、短視頻封面）

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

一、狀態(tài)可視反饋原則

• 百度網(wǎng)盤下載文件時(shí)，實(shí)時(shí)展示下載進(jìn)度、傳輸速率、剩余時(shí)間，精準(zhǔn)緩解用戶等待焦慮。
• 360 安全衛(wèi)士殺毒過程中，同步呈現(xiàn)查殺進(jìn)度與完成倒計(jì)時(shí)，給予用戶明確的操作掌控感。

二、現(xiàn)實(shí)世界隱喻原則

• 360 安全衛(wèi)士、騰訊電腦管家、嗨格式視頻轉(zhuǎn)換器的功能圖標(biāo)，均采用大眾熟知的圖形設(shè)計(jì)，精準(zhǔn)匹配業(yè)務(wù)場景，美觀且易識別。

三、操作可撤銷回退原則

• 微信支持 3 分鐘內(nèi)撤回消息，QQ 郵箱提供郵件撤回功能，避免誤發(fā)送帶來的困擾。
• 虎課網(wǎng)支持用戶隨時(shí)修改頭像與個人信息，賦予用戶自主調(diào)整操作的權(quán)利。

四、全流程一致原則

• 飛書在聯(lián)系人、郵箱、日程、消息等所有場景，采用統(tǒng)一的空狀態(tài)頁面設(shè)計(jì)，產(chǎn)品整體感極強(qiáng)，使用體驗(yàn)流暢舒適。

五、事前防錯原則

• EV 錄屏刪除視頻時(shí)，觸發(fā)二次確認(rèn)彈窗，有效防止文件誤刪。
• 天翼云電腦專家將學(xué)習(xí)模式按鈕設(shè)為彩色（可用）、置灰（不可用）兩種狀態(tài)，直觀區(qū)分功能可用性。

六、減輕用戶記憶原則

• 花瓣、千圖、嗶哩嗶哩的搜索欄，自動保存歷史搜索記錄，用戶無需重復(fù)輸入，一鍵選擇即可快速搜索。

七、靈活易用適配原則

• 騰訊電腦管家內(nèi)置 12 種個性皮膚，支持一鍵換膚，滿足用戶的審美與個性化需求。

八、簡約去繁設(shè)計(jì)原則

• 聯(lián)通應(yīng)用商店僅在鼠標(biāo)懸停應(yīng)用圖標(biāo)時(shí)顯示安裝按鈕，動態(tài)簡化頁面信息，視覺更清爽。
• 飛書通過任務(wù)緊急度配色 + 圖標(biāo)歸類，將復(fù)雜的任務(wù)頁面梳理得清晰簡潔，降低信息理解難度。

九、清晰容錯提示原則

• 聯(lián)想電腦管家客服頁面異常時(shí)，給出清晰的文字提示 + 趣味插畫，既說明問題又安撫情緒。
• 聯(lián)想電腦商鋪應(yīng)用無法查看消息時(shí)，直接告知原因并提供解決方向，引導(dǎo)用戶快速處理。

十、便捷幫助支持原則

• 菜鳥裹裹郵寄頁支持地址智能識別填充，一鍵完成信息錄入，大幅提升操作便捷度。
• 酷我音樂在設(shè)置中內(nèi)置幫助入口，用戶可快速反饋問題、獲取官方協(xié)助。

總結(jié)

小米作為國內(nèi)生態(tài)系統(tǒng)最為完善的手機(jī)品牌之一，它的商城設(shè)計(jì)也是一直被學(xué)習(xí)的案例。“品牌電商”和“高端化”，是小米商城設(shè)計(jì)的兩大主題。蘭亭妙微ui設(shè)計(jì)公司對小米商城APP的首頁設(shè)計(jì)進(jìn)行了分析，希望對你有幫助。

一、提煉設(shè)計(jì)語言

根據(jù)最新的產(chǎn)品定位，能提煉出兩個重要的信息，即“品牌電商”和“高端化”，若想把這兩點(diǎn)落實(shí)到產(chǎn)品設(shè)計(jì)當(dāng)中，首先就是對這兩個關(guān)鍵詞有充分且客觀的認(rèn)識。

1. 什么是品牌電商？

京東、淘寶、拼多多是不是品牌電商？肯定不是，他們屬于綜合類電商，他們銷售各種品牌的產(chǎn)品，品牌電商的特征是，只針對一個品牌或集團(tuán)旗下多個品牌（集團(tuán)為品牌）的產(chǎn)品進(jìn)行銷售。

綜合類電商：追求性價(jià)比，更多的是滿足消費(fèi)者物質(zhì)層面的需求，購買動機(jī)是功能、賣點(diǎn)、價(jià)值等利益點(diǎn)。

綜合類電商在設(shè)計(jì)上，貼近用戶的心智訴求，就應(yīng)該注重產(chǎn)品的利益點(diǎn)露出，頁面設(shè)計(jì)上強(qiáng)調(diào)熱鬧的氛圍，這樣才能進(jìn)一步刺激用戶的消費(fèi)欲望。

品牌電商：品牌電商應(yīng)注重品牌的調(diào)性，賦能品牌，用戶追求品牌溢價(jià)，滿足精神層面的需求，購買動機(jī)注重品質(zhì)，以及身份的價(jià)值認(rèn)同感，符合自己的社會屬性等。

設(shè)計(jì)上，不應(yīng)過分強(qiáng)調(diào)利益點(diǎn)，不然會降低品牌的品質(zhì)感，品牌電商應(yīng)聚焦商品本身，更多的去解讀產(chǎn)品的價(jià)值和優(yōu)勢，讓用戶感到品牌產(chǎn)品的品質(zhì)。

2. 如何理解高端化？

什么是高端的？那首先得明白什么是低端的，從人類發(fā)展的客觀事實(shí)上來看，或從我們普遍認(rèn)同的價(jià)值觀上來看，落后往往代表低端，先進(jìn)則更能表現(xiàn)高端，下面我們看幾組圖片。

從圖片的對比上來看，粗糙、多色彩、雜亂看起來是低端的，精致、單色、簡潔更多人會認(rèn)同是高端的。

最終通過品牌電商的特點(diǎn)，以及高端化設(shè)計(jì)認(rèn)識，我總結(jié)出4條設(shè)計(jì)語言：

1）回歸產(chǎn)品本身

聚焦產(chǎn)品價(jià)值為核心，回歸本真，營銷信息合理展示。

2）克制的

克制色彩營銷的導(dǎo)向， 復(fù)雜的設(shè)計(jì)，助力品牌高端化。

3）極致的

以用戶語言，打造產(chǎn)品細(xì)節(jié)，打磨用戶體驗(yàn)，做好服務(wù)。

4）有品牌感知的

提取品牌DNA，建立官網(wǎng)心智，打造官方商城優(yōu)勢。

有了設(shè)計(jì)語言的方向指導(dǎo)，那所有的設(shè)計(jì)都要依據(jù)這四條原則進(jìn)行設(shè)計(jì)，接下來看一下案例中如何運(yùn)用設(shè)計(jì)原則。

二、案例解析

下圖是一年前的首頁，最直觀的感受就是，整體看上去色調(diào)很多，圖素的飽和度也較高，根據(jù)我們的設(shè)計(jì)語言，對banner、金剛位、活動腰帶、一拖三（瓷片區(qū)）等、做了一系列的改版，同時(shí)還增加了幾個模塊，接下來我們細(xì)講。

1. banner頭圖改版

banner圖區(qū)域結(jié)合需求，做了非常大膽的嘗試，對頭圖設(shè)定了幾種狀態(tài)，日常狀態(tài)、活動狀態(tài)、新品發(fā)布會狀態(tài)。

日常狀態(tài)：依舊是輪播banner展示，在圖素的設(shè)計(jì)上，對版式和用色做了規(guī)范調(diào)整。

色調(diào)上不再采用高飽和的圖素，板式上去掉了行動按鈕，原因就是結(jié)合設(shè)計(jì)語言“回歸產(chǎn)品本身”這一理念，去營銷化，圖素上的信息就展示關(guān)于產(chǎn)品本身，圖、名稱、賣點(diǎn)、價(jià)格。

這就是一個品牌電商，在日常展示上，應(yīng)該有的一種態(tài)度，吸引用戶的一定是產(chǎn)品本身，而不應(yīng)該是一個利益點(diǎn)。

活動狀態(tài)：當(dāng)有重要的活動或新品時(shí)，會直接把所有banner都下掉，直接把一個加長的活動圖素放上去，業(yè)務(wù)方給起了個名字叫huner，意思就是直接“呼臉上”的意思，邏輯上就是重點(diǎn)強(qiáng)調(diào)。

huner展示

根據(jù)活動的重要程度，huner的高度會不一樣，左圖是與哈利波特聯(lián)名的一款手機(jī)，比較重要，所以更大，右圖是每月一次的F會員日活動，所以相對較小。

關(guān)于活動氛圍，在設(shè)計(jì)上還有一個遞進(jìn)關(guān)系，當(dāng)活動越重要，那huner的底部圓角就會越圓潤，因?yàn)樵綀A潤的設(shè)計(jì)越活躍，越活躍的設(shè)計(jì)活動氛圍就會越熱鬧。

另外有時(shí)我也會做一些動效上去，來重點(diǎn)渲染活動氛圍，下圖所示：

迪士尼聯(lián)名產(chǎn)品發(fā)布會動畫：

雙11活動huner動畫設(shè)計(jì)：

春節(jié)期間年貨節(jié)huner動畫設(shè)計(jì)：

618倒計(jì)時(shí)huner動畫設(shè)計(jì)：

新品發(fā)布會/重大節(jié)日狀態(tài)：這個狀態(tài)會在huner圖中下方增加多個次級活動入口，原因發(fā)布會和重大節(jié)日流量較高，這樣的設(shè)計(jì)形式，流量聚焦，減少路徑，能更好的完成活動目的。

另外在這個樣式的基礎(chǔ)上還有一種形式，huner下方的坑位會去掉產(chǎn)品圖，弱化展示，目的是為了給下方活動腰帶更多的流量。

大促期間各個需求組，都希望在首頁分到更多的流量，在眾多活動中，肯定有主有次之分，放在一起設(shè)計(jì)形式相同就會平均流量，這顯然不是平臺想要的效果，所以解決方案就是，通過設(shè)計(jì)形式來干預(yù)流量的走向。

對于一個多業(yè)務(wù)方的首頁，設(shè)計(jì)上往往還需考量各方利益，不能因?yàn)橐环剑绊懥硪环剑龊脵?quán)重需求分配，平衡利益，這也是設(shè)計(jì)師需要有意識思考的問題。

總結(jié)：banner頭圖的改版設(shè)計(jì)，日常輪播不會存在任何營銷信息，保持品牌電商的調(diào)性，活動期間根據(jù)不同級別的活動，給出級別不同設(shè)計(jì)方案，活動過多時(shí)，通過設(shè)計(jì)形式干預(yù)流量的走向。

2. 金剛位優(yōu)化

金剛位做了簡單的優(yōu)化，之前最大的問題是，產(chǎn)品的形狀各異，都是以最大要求尺寸展示，導(dǎo)致最終的視覺呈現(xiàn)常常不統(tǒng)一。

解決方案下圖所示，規(guī)范了較為方正的產(chǎn)品和較長產(chǎn)品，不同的呈現(xiàn)尺寸，讓視覺盡可能看起來統(tǒng)一。

米金商城圖標(biāo)進(jìn)行了改版，采用寫實(shí)效果，降低飽和度，盡可能看起來更貼近真實(shí)，這樣與真實(shí)的產(chǎn)品圖標(biāo)會更加契合。

金剛位中“小米發(fā)布”的入口，有一個重要的改變，之前一直是一個圓角矩形，現(xiàn)在結(jié)合我們的設(shè)計(jì)語言“有品牌感知的”原則，進(jìn)行調(diào)整。

提取小米logo的超橢圓形狀，直接用于圖標(biāo)的呈現(xiàn)，小米發(fā)布是一個重流量的入口，所以一直是一個動效狀態(tài)。

因?yàn)?ldquo;小米發(fā)布”是中間位置，圖標(biāo)尺寸保持最大也不會不和諧，較大的展示面積，能把動效內(nèi)容展示的更清晰。

3. 新品大卡

這個內(nèi)容是新增模塊，非常態(tài)化呈現(xiàn)，每次會隨著發(fā)布會新品發(fā)布出現(xiàn)，比如老板在發(fā)布會上正在介紹一款新品，那小米商城就會隨著發(fā)布會的節(jié)奏，首頁首屏出現(xiàn)一個非常突出的新品大卡。

當(dāng)介紹第二款新品時(shí)，新品大卡就會以banner輪播的形式出現(xiàn)，另外有一點(diǎn)很重要，新品大卡的副文案，一定得是賣點(diǎn)，而不能是利益點(diǎn)。

賣點(diǎn)就是展示這個產(chǎn)品本身的亮點(diǎn)，利益點(diǎn)是這個產(chǎn)品有什么優(yōu)惠，對于剛發(fā)布的新品就直接上利益點(diǎn)，有損新品的價(jià)值感，不符合我們“回歸產(chǎn)品”的設(shè)計(jì)語言。

所以每次業(yè)務(wù)方給出的是利益點(diǎn)，我都會提醒他換成賣點(diǎn)，講明原因，他們通常也是非常認(rèn)可的。

4. 活動腰帶

活動腰帶是重運(yùn)營區(qū)域，所以設(shè)計(jì)形式會常常換樣式，不然用戶容易視覺疲勞，但任何設(shè)計(jì)形式，也都是圍繞設(shè)計(jì)語言開展，下圖所示，新舊活動腰帶對比。

新舊對比很直觀的感受就是，變得冷靜克制了，場景變得寫實(shí)了，減少色相了，降低飽和度和明度了，下面我精選了一些近一年中用過的活動腰帶。

寫實(shí)風(fēng)格的KV能增強(qiáng)商品的品質(zhì)，也更符合目前的產(chǎn)品定位，從數(shù)據(jù)來看對比以前也是增長趨勢。

對于品牌電商來說，能給用戶帶來品質(zhì)感，其實(shí)就等于用戶對平臺增加了信任感，設(shè)計(jì)促進(jìn)了用戶的信任，那就等于設(shè)計(jì)賦能了品牌。

5. 手機(jī)腰帶

手機(jī)腰帶也是新增的模塊，原因很簡單，集團(tuán)的主營業(yè)務(wù)就是手機(jī)，所以手機(jī)要有個專門的模塊展示。

手機(jī)腰帶日常保持冷靜的設(shè)計(jì)調(diào)性，大促期間會增加標(biāo)簽和突出利益點(diǎn)的處理。

另外值得說的一點(diǎn)是，手機(jī)腰帶下面三個手機(jī)做到了“千人千面”，不同標(biāo)簽的用戶會看到不同的手機(jī)推薦。

6. 一拖三（瓷片區(qū)）

這個模塊的改版非常有講頭，這一年中也是經(jīng)歷了多個版本的迭代，首先看一下最初的設(shè)計(jì)稿，其實(shí)是非常符合當(dāng)時(shí)的產(chǎn)品定位，與之前的活動腰帶也非常契合，營銷感較重，主打的就是一個熱鬧。

最初的設(shè)計(jì)沒有問題，符合當(dāng)時(shí)的產(chǎn)品定位，但后來應(yīng)業(yè)務(wù)方的需求，加了一個配置標(biāo)簽的功能。

當(dāng)時(shí)告訴運(yùn)營同學(xué)的是，四個卡片中只能加一個，功能上并沒有限制只能加一個，后來如上圖所示，每個都加，夸張的時(shí)候四個都加。

本來就是多色的色塊，再加上幾個突出的標(biāo)簽，那直接就“花枝招展”了，每個卡片都加標(biāo)簽，就等于沒有突出任何一個。

后來公司提出高端化路線，就快速做了一個用不到開發(fā)的去色的調(diào)整，去掉標(biāo)簽，下圖所示，修改尺寸板式需要開發(fā)介入。

在用去色后樣式的同時(shí)，我也在進(jìn)行需要開發(fā)介入的設(shè)計(jì)迭代優(yōu)化。

首先分享一下我對改版優(yōu)化的設(shè)計(jì)思考，對于改版設(shè)計(jì)拿到需求后，不提倡直接去找參考，應(yīng)該先去調(diào)研改版的目的，了解業(yè)務(wù)方的想法。

然后結(jié)合產(chǎn)品定位，分析目前的設(shè)計(jì)存在哪些問題，深入去思考如何改版才能深入人心，這個環(huán)節(jié)非常重要，不僅能培養(yǎng)獨(dú)立思考能力和意識，而且也是鍛煉設(shè)計(jì)提案能力的重要方法。

拿到需求直接去找參考不僅是一種“懶”的行為，而且非常容易做很多徒勞無功的工作，因?yàn)椴涣私庹嬲母陌婺康模凰伎即嬖诘膯栴}，最后難免就是多次的改稿。

在一拖三的案例中，我總結(jié)了四個問題：

1. 整體看起來非常緊湊；
2. 產(chǎn)品圖片不能完全展示；
3. 大卡片的產(chǎn)品名稱字號過大；
4. 大卡片的文案居中對齊，不符合現(xiàn)在的設(shè)計(jì)原則；

問題一：整體看起來緊湊，其實(shí)也并非緊湊，而是如若有一個寬松和它對比，那它就是緊湊的，我先有個方案，再對應(yīng)給它定義一個問題，當(dāng)然前提是問題與解決方案是客觀成立的。

我堅(jiān)信寬松一定會打敗緊湊，緊湊變寬松會給人一種輕松的清爽感，事實(shí)上也的確如此，最后的寬松方案大家都非常認(rèn)可。

問題二：產(chǎn)品不能完全露出，導(dǎo)致用戶看不到產(chǎn)品全貌，從而會降低點(diǎn)擊的興趣，露出半個產(chǎn)品，這樣對用戶不僅不友好，而且也是對產(chǎn)品不尊重，所以展示出產(chǎn)品的全貌迫在眉睫。

問題三：大卡片的產(chǎn)品名稱字號過大，甚至大過板塊標(biāo)題的字，常態(tài)展示模塊不應(yīng)該出現(xiàn)不冷靜的字號，會顯得不精致。

問題四：大卡片的文字排版為居中，居中排版的優(yōu)點(diǎn)是表現(xiàn)力會更強(qiáng)，缺點(diǎn)是板式結(jié)構(gòu)變得不夠整潔，且不耐看，結(jié)合我們的設(shè)計(jì)語言“克制的”能簡潔絕不會讓它復(fù)雜。

最大的改變是一拖三變成了一拖四，整體看起來不再有緊繃感，雖說增加了模塊的高度，但也增加了一個坑位，這對對應(yīng)的業(yè)務(wù)方來說也是求之不得的好事。

產(chǎn)品圖不在部分露出，每個模塊都是對角排版，文字左對齊，且可以展示更長的產(chǎn)品名稱，整體看起來較為工整，整齊的設(shè)計(jì)，帶來的就是信任感。

接下來我們看一下規(guī)范上的整理，邊距上視覺統(tǒng)一，產(chǎn)品名稱與賣點(diǎn)的間距是賣點(diǎn)與價(jià)格邊距的二分之一，即五分原則。

同時(shí)賣點(diǎn)與價(jià)格的邊距與外邊距相同，在這種小模塊設(shè)計(jì)中，在能把信息層級分清楚的基礎(chǔ)上，UI設(shè)計(jì)間距越少越好，大小相等的東西都會看起來就會更整潔。

產(chǎn)品圖的規(guī)范設(shè)定與前面的金剛位一樣，方正的產(chǎn)品貼合小框大小，較長的產(chǎn)品貼合大框。

最后整體看一下，小米商城首頁一年前后的對比。

總結(jié)：

這次首頁的改版主要就是根據(jù)公司高端化戰(zhàn)略和清晰的產(chǎn)品定位，總結(jié)得出設(shè)計(jì)語言，然后根據(jù)設(shè)計(jì)語言進(jìn)行改版優(yōu)化。

• 首頁banner頭圖，常態(tài)化展示進(jìn)行了去營銷化設(shè)計(jì)，目的就是渲染品牌電商的品質(zhì)調(diào)性，活動期間做了huner的創(chuàng)新型設(shè)計(jì)。
• 金剛位的產(chǎn)品圖，統(tǒng)一了視覺大小的規(guī)范設(shè)計(jì)，優(yōu)化圖標(biāo)，融入公司logo的圖形元素，促進(jìn)品牌官網(wǎng)心智的建立。
• 新品發(fā)布會直播時(shí)，在商城首頁實(shí)時(shí)同步新品信息，通過新品大卡的形式，做到全網(wǎng)購買新品最快途徑。
• 腰帶風(fēng)格改變，走品質(zhì)路線，去繁從簡，不同的級別的活動，有不同的設(shè)計(jì)形式承載。
• 新增手機(jī)腰帶，同時(shí)手機(jī)針對不同特征用戶做了更精準(zhǔn)的投放，做到了“千人千面”。
• 一拖三改為一拖四，卡片信息重新排版，同時(shí)也做了去營銷化設(shè)計(jì)，不再出現(xiàn)標(biāo)簽等營銷信息。

首頁還有會員樓層、省心優(yōu)惠、新品上新三個樓層，依舊在改版中，上線后再與大家分享。

關(guān)于設(shè)計(jì)語言：

這四條設(shè)計(jì)語言，是我一年多以前在改版設(shè)計(jì)產(chǎn)品站（產(chǎn)品詳情頁）時(shí)做的總結(jié)，有些原則在這次的首頁改版并沒有體現(xiàn)，比如“極致的”用戶體驗(yàn)服務(wù)，但在產(chǎn)品站的改版中有非常多的體現(xiàn)。

對于電商產(chǎn)品最重要的兩個板塊就是，首頁和產(chǎn)品站，首頁負(fù)責(zé)準(zhǔn)確的流量分發(fā)，產(chǎn)品站負(fù)責(zé)銷售轉(zhuǎn)化，所以產(chǎn)品站的設(shè)計(jì)也是非常非常有學(xué)問，下一篇文章就是產(chǎn)品站的改版，敬請期待。

三、最后

最后跟大家分享一下，這次改版的重要心得，電商首頁的每個模塊都是一個業(yè)務(wù)方，設(shè)計(jì)上要考慮各方利益，不然你的設(shè)計(jì)很難推動。

設(shè)計(jì)形式可以影響流量的走向，合理運(yùn)用會有非常不錯的效果。

設(shè)計(jì)前的深度思考尤為重要，不僅能培養(yǎng)獨(dú)立思考的意識，也能無形中鍛煉設(shè)計(jì)提案的能力。

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

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

1. 關(guān)注窗口寬度，而非設(shè)備分辨率
    
   用戶可自由縮放瀏覽器，設(shè)計(jì)只適配常用窗口寬度區(qū)間，不糾結(jié)固定屏幕分辨率。

   

2. B 端≠全量響應(yīng)式
    
   B 端頁面信息密集、組件復(fù)雜，全端響應(yīng)式開發(fā)成本極高。優(yōu)先局部適配，不做無意義的全量兼容，移動端場景建議單獨(dú)開發(fā)。
3. 只做 3 類核心適配
    
   B 端響應(yīng)式僅聚焦 3 種場景，其余頁面（表單、詳情頁）可固定寬度：

• 布局寬度自適應(yīng)：模塊結(jié)構(gòu)不變，寬度隨窗口縮放

  

• 多列流式排布：卡片隨寬度自動增減列數(shù)

  

• 組件展收控制：側(cè)邊欄、信息欄達(dá)到斷點(diǎn)自動展開 / 收起

二、4 步定參數(shù)：響應(yīng)式基礎(chǔ)規(guī)范

1. 設(shè)定寬度邊界

• 最小寬度：≥900px（小于此寬度允許橫向滾動）
• 最大寬度：≤2560px（超過此寬度內(nèi)容不再放大）
   
  作用：規(guī)避極端窄屏 / 超寬屏，減少無效適配工作量。

2. 劃分適配區(qū)域

• 上下結(jié)構(gòu)：僅內(nèi)容區(qū)做響應(yīng)式，頂欄不參與

  

• 左右結(jié)構(gòu)：僅右側(cè)內(nèi)容區(qū)適配，側(cè)邊欄排除在外
   
  核心原則：導(dǎo)航類固定組件不參與響應(yīng)式。

3. 柵格系統(tǒng)配置

• 列數(shù)：首選24 列，可選 12/16/20 列
• 列間距：固定 8px/12px/16px（三選一）

  

  柵格僅約束頂級組件，組件內(nèi)元素?zé)o需對齊柵格。

4. 確定斷點(diǎn)（Breakpoint）

• 導(dǎo)航展收：≤1000px 收起，>1000px 展開
• 多列卡片：900-1200px=3 列；1200-1500px=4 列
   
  提示：無適配場景可不設(shè)斷點(diǎn)，避免冗余規(guī)則。

三、3 階段落地：從設(shè)計(jì)到交付

階段 1：分配頂級組件柵格占比

階段 2：制定組件內(nèi)部適配規(guī)則

1. 固定尺寸：圖標(biāo)、按鈕等固定寬高，左 / 右對齊
2. 填充自適應(yīng)：輸入框、篩選欄等撐滿父容器
3. 高度自適應(yīng)：文本區(qū)域自動換行，撐開組件高度
    
   復(fù)雜組件（表格、圖表）需提前同步開發(fā)適配方案。

階段 3：輸出關(guān)鍵頁面響應(yīng)式稿

• 必做頁面：首頁儀表盤、數(shù)據(jù)表格頁、卡片列表頁
   
  作用：讓開發(fā)直觀理解適配邏輯，避免自由發(fā)揮導(dǎo)致體驗(yàn)混亂。

四、避坑總結(jié)

1. 不追求全設(shè)備完美適配，局部響應(yīng)式是 B 端最優(yōu)解
2. 柵格只管頂級布局，組件內(nèi)部用自動布局搞定
3. 寬度邊界、斷點(diǎn)、適配區(qū)域必須提前和開發(fā)對齊
4. 交付核心頁面效果圖，比純文字規(guī)則更高效

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

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