“Good design is durable.” 迪特 · 拉姆斯的設計十誡提到，好的設計應該是歷久彌新、不會輕易過時的。
在 20 世紀，大多數日常用品都經歷過顛覆式的變革、簡化或技術迭代，比如電話、筆、黑膠唱片機等。然而有少數物品，它們已問世超過百年，形態與結構卻跟設計之初別無二致，且還能較好地滿足當下的需要。這些產品是如何誕生的？為什么他們能在時間的長河中維持恒定不變？蘭亭妙微UI設計公司與您一起來學習。
1941 年，世界上第一臺電子計算機誕生；1968 年，第一只鼠標原型問世。然而，與它們共同構成人機交互基礎的 QWERTY 鍵盤，其布局早在 1874 年就已獲得大規模應用。
如今我們已有語音、觸摸屏、甚至是腦機接口等多種輸入方式，卻還是高度依賴著與 150 年前首批打字機外觀相似的鍵盤。
QWERTY鍵盤的發明
1868 年，肖爾斯（Christopher Latham Sholes）和他的同事們將他們的第一臺打字機運往芝加哥，首位客戶是芝加哥波特電報學院的校長愛德華（Edward Payson Porter）。這臺打字機有 28 個琴鍵式按鍵，外形似鋼琴，與波特學院使用的休斯·菲爾普斯印字電報機相似。其鍵盤按字母表順序排列：A 至 N 從左向右排布，O 至 Z 則從右向左延伸。
在會見了多名客戶后，根據反饋，肖爾斯與其同事對鍵盤的構造與布局進行了多次改進。最終在 1872 年，《科學美國人》在頭版以大幅版畫形式報道了這臺打字機，畫面中清晰展示了其鍵帽結構，此時的打字機已配備 42 個按鍵，包含大寫字母、數字 2 至 9，以及連字符、逗號、句號、問號等常用標點符號。
1874 年，肖爾斯發明的打字機由槍械制造商雷明頓公司（E. Remington and Sons）推向市場，并逐漸演變成為鍵盤的行業標準。其按鍵布局已與今天我們普遍使用的 QWERTY 鍵盤幾乎完全相同，是當今世界上應用最廣泛的鍵盤布局。盡管不同國家會因語言習慣在鍵位安排上做些微調，但整體結構仍遵循著這一經典設計。
撲朔迷離的鍵盤布局起源
這其中耐人尋味的是，肖爾斯是如何想出這種鍵盤排列方式的。
因其印刷行業的背景及報紙出版商的經歷，肖爾斯應當熟悉排字工根據使用頻率排列字盤的做法。有一種廣為流傳的理論認為 QWERTY 鍵盤的布局是為了限制打字者的速度：其核心原則是將高頻使用的字母分隔開（盡管像 E 和 R 仍被放在一起），以此減少打字時連動桿的相互碰撞而導致的故障。換而言之，這是一種以暫時性的輸入效率，換取機械運行的長期可靠性的妥協。
然而，京都大學的研究人員³提出，QWERTY 鍵盤布局的誕生可能與早期核心用戶——電報員的工作習慣密切相關。研究中以 E、S 、Z 這三個字母在鍵盤上的布局為例來闡明這個觀點。
當時，美國電報員需要把聽到的摩爾斯電碼實時轉譯成字母。在美國使用的電碼中，字母 Z 與常用組合 SE 的編碼恰好相同，均為“··· ·”（滴滴滴 滴）。當聽到這樣的電碼序列，尤其是在缺乏上下文的單詞的開頭時，接收者無法立即判斷是 Z 還是 SE，只能根據后續聽到的電碼來綜合判斷。這種不確定性會嚴重影響輸入效率：在傳統的 A-Z 順序鍵盤上，若電報員開始輸入 Z，之后發現應為 SE，手指就不得不在相距較遠的鍵位之間移動并修改。
而 QWERTY 鍵盤布局的調整是，把 Z、SE 這兩組容易引起混淆的字母安排在了彼此相鄰的位置。這樣一來，即使電報員在聽到“滴滴滴 滴”時無法立刻判斷，手指也能在緊鄰的區域中快速選擇或更正，而不必在全鍵盤上尋找。或許正是這類針對電報場景的優化，最終塑造了我們今天所熟知的 QWERTY 鍵盤格局。
雖然原因至今尚無定論，且無論是為了避免機械故障還是適配摩爾斯電碼的輸入習慣，都跟當下的使用場景有所不同，但至今為止也沒有任何一種其他布局方式來取代它。
19 世紀，木漿制漿技術與工業造紙廠的出現讓廉價紙張得以廣泛流通。面對隨之產生的大量零散紙張，人們開始使用手邊常見的別針來加以固定——這被視為回形針的前身。盡管別針價格低廉、使用方便且用后即棄，但其缺點也十分明顯：不僅容易生銹，還會刺穿紙張，留下難看的銹跡與孔洞。
最早的回形針專利記錄來自挪威人約翰·瓦勒（Johan Vaaler），他在 1901 年提交了申請。專利摘要中寫道，這是一種“由彈簧材料彎曲成矩形、三角形或其他形狀的環，金屬絲兩端形成并排且方向相反的部件或舌片”。相比別針，回形針不需要通過刺穿紙面來固定紙張，并排的金屬絲結構也提供了更多的固定方式。
1899 年，威廉·米德爾布魯克（William D. Middlebrook）獲得了回形針制造機械的設計專利，隨后他將專利賣給了一家辦公用品制造商，該公司將其注冊為“寶石回形針”（Gem clip）。其有著標志性的雙橢圓形環圈設計，通常采用鍍鎳或彩色塑料包裹的材質，不僅有效防銹，也兼顧外觀的美感。
相比約翰·瓦勒的設計，寶石回形針將紙張與回形針接觸的位置處理得更圓潤，減少了刺破紙張的風險。螺旋狀的鋼絲具有一定的柔韌性，可輕松張開以便放入紙張，同時又有足夠的彈性來夾緊文件。
幾年后，喬治·W·麥吉爾（George W McGill）對寶石回形針做出了改良，進一步增大了內環的弧度，使其更明顯地上翹。相比初代寶石回形針平緩的環圈末端，這種上揚的開口形成了更清晰的“示能”——直觀地提示用戶“此處可拉開并插入紙張”。在結構上，它也實現了更省力的開合體驗。正是這一改良版本，逐漸演變成了今天最常見、最廣泛使用的回形針。
回形針作為“固定文件”的工具這一認知，也自然而然地從現實世界延伸到了數字世界。在圖形用戶界面中，當我們想要將文件添加至郵件或文檔時，常常能看到那枚熟悉的回形針圖標。
中國最早的蚊香可追溯至宋代，一本記錄民間生產技術的古籍《格物粗談》中記載：“端午時，收貯浮萍，陰干，加雄黃，作紙纏香，燒之，能祛蚊蟲”。這段記載中所述的制品可視為早期形態的“蚊香”，其外形類似于帶芯的線香。換而言之，最初的蚊香是直的。
蚊香的螺旋形演變可以追溯到 19 世紀末的日本。當時，人們將除蟲菊粉與鋸末混合燃燒用于驅蚊。日本企業家上山英一郎（うえやま えいいちろう）生產了一種混合了淀粉和除蟲菊的香，雖然驅蚊效果良好，但存在明顯缺陷：不僅燃燒時間短，不到四十分鐘便燃盡，而且與普通線香一樣質地較脆，遇風易折。
1895 年，上山英一郎正致力于尋找延長蚊香燃燒時間的方法。期間，他的妻子在倉庫中偶然看見一條盤踞的蛇，由此獲得靈感，建議他將蚊香制成螺旋形狀。這一設計在工程上極為巧妙：螺旋結構以最小的面積延展了蚊香長度（相比線狀蚊香延長約 4 倍），也設置了一個單點、穩定、緩慢的燃燒路徑，讓蚊香既不會熄滅也不會因為香條過寬而燃燒太快。1902 年，可持續燃燒約七小時的螺旋狀蚊香問世，并被命名為“金鳥蚊香”，其有著標志性的深綠色外觀與印有紅色公雞頭的包裝設計。
如今我們使用的螺旋盤香，基本都是采用了這個結構，在保證單盤燃燒時間 7-8 小時的前提下，既能節省包裝空間，又能在運輸中互相支撐，防止斷裂。
在拉鏈發明之前，人們用以拉緊衣物的工具繁多，包括系帶、紐扣、別針、搭扣、腰帶與松緊帶等。紐扣是其中歷史最久、使用最廣的一種，但其使用效率較低，解開與扣上均需時間，且在耐用性上存在不足，時有脫落之虞。
19 世紀末，在追求“效率”的工業時代背景下，拉鏈應運而生。發明家惠特科姆（Whitcomb Judson）想解決傳統的系帶式高幫靴穿脫過于繁瑣這個問題，在芝加哥世界博覽會上展示了名為鉤鎖（clasp locker）的裝置，它的核心目標很明確：用一次滑動，替代逐個系扣的繁瑣過程，節省時間。但當時這種拉鏈依賴手工制作，成本較高，且質量不夠穩定，最終因為結構缺陷及成本問題退出了市場。
1912 年，森貝克（Gideon Sundback）取得了突破性進展，他將惠特科姆發明的易崩開的鉤環結構改成了穩定咬合的齒牙結構，實現凹凸完全咬合，使拉鏈閉合更牢固，開合也更加順滑流暢。一百多年過去，如今金屬拉鏈仍然在沿用這種工藝制造。
1923 年，百路馳（B.F. Goodrich）公司將森貝克設計的拉鏈用于一款女式橡膠靴，因其開合時會發出“滋滋”的摩擦聲，公司便形象地將其命名為 “ZIPPER”。這個朗朗上口的名字隨后逐漸被大眾廣泛采用，“拉鏈”也因此得名并沿用至今。
拉鏈與紐扣的爭端
在時尚界，關于在服裝上用拉鏈或是紐扣還引起過一場關乎功能、形式甚至是倫理上的論戰。
從效率上而言，拉鏈無疑更勝一籌，其便利性也更符合我們現代快節奏生活的需要。紐扣的使用需要一定的技巧，而且會增加衣物的厚度，對于如今流行的緊身牛仔褲來說，紐扣可能使面料更容易鼓起或撕裂；而拉鏈則能通過“收緊并向上拉”的方式來解決這個問題。
但是，拉鏈更容易損壞和卡住，更難修理。它們也存在一定的安全隱患：在戰場上，軍服就曾發生過因拉鏈卡死耽誤急救而導致傷亡的事件；反之，紐扣在意外拉扯下更易整體脫落而非卡死。
紐扣的另一個好處在于美觀：隨著時間的推移，紐扣與衣服的摩擦會形成獨特的色落與磨損痕跡，對于牛仔愛好者來說是一個理想的特性。
還有一部分來自復古派的道德質疑，批評者稱拉鏈簡化衣物穿脫的特性會助長輕率行為，敗壞社會風氣。因此，盡管拉鏈技術早已成熟，直到 1947 年李維斯才將其應用于牛仔褲上。
最終在 1937 年，拉鏈在這場論戰中擊敗紐扣，鞏固了其在服裝設計中的地位。如今，這個一百多年前的發明無處不在，被廣泛應用于服裝、行李箱和無數其他物品中，YKK（全球市場份額第一的拉鏈制造商）每年生產的拉鏈足以繞地球 50 圈。
面對技術的百年巨變，為何這些產品能不被淘汰，甚至其基本形態都與百年前最初發明時大體相同？值得肯定的是，他們的設計的確超越了同期其他產品，呈現出一些寶貴的特質。
簡單精妙的結構
例如經典的寶石回形針，其雙橢圓形結構在同期的其他設計中脫穎而出，以簡潔優雅的形態高效實現了“不傷紙”這一核心需求；而螺旋形的蚊香設計，既延長了燃燒時間，又通過嚴絲合縫的嵌套，兼顧了節省包裝空間和運輸穩固性。
易用性
拉鏈和回形針是典型的無意識設計，它們形態與功能高度統一、無需學習曲線。即使是年幼的孩童，也能憑直覺學會使用拉鏈：20 世紀 30 年代拉鏈推廣初期，拉鏈款童裝就常常以“幫助幼兒學會自己穿衣，培養自理能力”作為賣點。
易工業化、標準化
回形針只需彎曲三次并剪斷即可制成，易于自動化生產；螺旋形蚊香可通過鋼制模具一次沖壓成型，一臺機器每分鐘可生產數百盤蚊香，整個過程可高度標準化。規?；a有效降低了成本，使其在市場上更容易取得價格優勢，進而推動廣泛普及。
然而，歷經百年技術發展與社會變遷，新生需求與問題層出不窮。這些經典產品，是否真的一如誕生之初那般，顯得全然不過時？或許，讓它們保持不變的還有更深層的原因。
去年 11 月的香港大埔火災事故造成了重大人員傷亡，令人痛心。在對這場事故的追責中，首當其沖地便是香港建筑行業的竹棚工程。許多人指出，竹材燃點僅為 265°C，遠低于鋼材，可能加劇火勢蔓延。此外，竹棚的結構強度也相對不足——過去香港曾多次發生棚架坍塌事故。以香港的經濟發展水平，完全有能力推動行業向鋼材升級。但網絡上仍有許多支持者聲稱：竹棚搭建技藝自清朝便出現在香港，已有上百年歷史，具有文化傳承價值，也是長久以來的行業慣例。
同樣的，歷史上也有其他證據表明 QWERTY 鍵盤并非最佳的鍵盤布局，比如美國心理學家發明的德沃拉克鍵盤布局（Dvorak keyboard layout）：這一布局基于字母使用頻率和手的生理結構設計，擁有打字更快、更易學習和降低疲勞的特點。二戰時一項研究表明，德沃拉克布局的打字員速度要比 QWERTY 布局打字員快 74%。即使是 QWERTY 鍵盤的發明人——肖爾斯本人也沒那么篤定：盡管他很早就將設計賣給了雷明頓公司，但他終其一生都在不斷改進布局，并創造出各種替代方案，在他去世的前一年，他還為自己的 XPMCH 鍵盤申請了專利。
螺旋蚊香的使用體驗也沒那么理想：其嵌套結構導致在拆分時比較困難，一不小心可能直接掰斷，且必須依賴專用底座才能使用。這本質上是一種便利工業化生產而非優化用戶體驗的設計。然而，即使有了電蚊香這種更方便、健康、安全的替代品，螺旋蚊香仍憑借低廉的成本、成熟的產業鏈以及簡易的倉儲運輸要求，在市場中占據著一席之地。
在歷史較短的互聯網領域也有類似的案例——比如搜索引擎結果頁的布局與交互模式。自 2000 年代初谷歌確立“頂部搜索框 + 藍色鏈接標題 + 簡短摘要”的模式以來，其核心框架在近二十年間保持高度一致，并成為行業標準，不管是在網頁端還是移動端。然而在移動端上，固定于屏幕頂部的輸入框常位于手指的自然操作范圍之外，用戶需特意伸展才能觸及，體驗不夠便捷。而“標題用藍色表示超鏈接” 這個設計也稍顯過時，在用戶已基本認知“搜索結果標題可點擊”的今天，整屏的藍色可能帶來不必要的視覺干擾，增加閱讀負擔。
回望這些產品或設計，其“不變”與其說是源于解決問題的完美，不如說是因為它們早早確立了“行業標準”，獲得了先發優勢，培養了牢固的用戶習慣，進而形成了強大的路徑依賴。一旦從用戶到產業鏈的“慣性”形成，任何改變都將面臨難以估量的轉換成本。正因如此，即便它們存在一定的缺陷，市場往往也會接受，畢竟這是性價比相對較高的策略。
一些產品能歷經百年而保持不變，固然有其設計上的優越性，但更值得深思的是不變的背后隱藏著的路徑依賴與行業慣性的強大力量。百年的不變或許只是暫時的，可能是顛覆性的技術尚未誕生，或是缺少一個推動行業變革的契機。
歸根結底，設計無法時刻去尋求那個完美的終極方案，而是在多重約束條件下尋找平衡——既要權衡用戶習慣與使用體驗，又要兼顧商業成本、行業發展情況與規模化需求，甚至還要回應文化傳承與社會倫理的爭議。同時，作為設計師也需要保持對行業規范與慣例的審視與批判意識，警惕將“長期不變”等同于“無可優化”，在考慮用戶習慣轉換成本的前提下，積極探索更適配當下需求的創新方案。
轉載：優設
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
閑魚發閑置功能接入AI，只需上傳商品圖片就可以直接生成描述文案，極大幫助用戶簡化發布流程
1. 零門檻發布，降低發布時間成本
解決非專業用戶 “不會寫文案、不懂專業術語” 的痛點，自動提取商品特征，組合成規范文案；相比傳統發布流程的耗時編輯文案、核對信息，更高效快捷。
2. 優化內容，提升交易轉化
自動生成符合當前市場熱點的文案表述，更能多文風轉換，一鍵轉為趣味的 “抽象文學”“黛玉文學”等，提升內容點擊率。
支付寶的首頁Banner通過游戲化的包裝，快速吸引注意力，驅動用戶主動點擊探索，高效地為活動頁面引流。
1. 互動機制強化用戶參與感
采用懸念式互動設計，button以 “猜猜是什么” 這類問答形式，激發用戶好奇心，通過游戲化場景的營造，降低參與門檻，驅動用戶主動點擊探索。
2. 場景氛圍營造提升吸引力
在以功能入口為主的首頁，該模塊具有游戲化趣味性的氛圍營造，從視覺上差異化的呈現，相比傳統的靜態廣告位，更能有效抓住用戶眼球，高效地為活動頁面引流。
當有中轉單的用戶在點擊退票時，用挽留浮層及時給用戶彈出更優的解決方案，并在方案中量化利益點，同時保證原有票的安全感。整體通過 “先抓痛點→再給解決方案→最后引導操作” 的路徑，優化了用戶出行體驗。
1. 量化利益點
除了直達更方便之外，直達還有更省時間、金錢，保底票免費退等更多的利益點
2. 有兜底有安全感
用當前的中轉作為保底，先搶票，搶到了還能再退票。讓用戶安心下單，在未搶到心儀票的時候能有中轉的替補票，可以緩解用戶的焦慮情緒，有兜底的保障安全感
通過一個巧妙的互動行為“搖動手機”，降低用戶對會員充值廣告的反感。
1. 提升用戶參與感與趣味性
“搖一搖”互動將被動觀看廣告轉變為主動參與，用戶通過簡單的物理動作即可觸發折扣，這種即時反饋機制增強了趣味性，降低了傳統廣告的侵入感。
2. 降低付費決策的心理門檻
通過互動行為展示折扣，巧妙地將付費流程包裝成一種“獎勵”而非強制推銷。用戶感受到的是“主動獲取優惠”的成就感，而非被廣告打擾的抵觸情緒，從而更愿意接受付費選項。
通過擬物化的卡牌堆疊形態，將傳統的平面信息流轉變為具有空間縱深感和探索趣味的交互式敘事焦點
1. 視覺層次突破傳統束縛
通過卡片堆疊、傾斜，在二維屏幕上創造出三維空間感。不對稱的布局打破了傳統設計的呆板，賦予界面動感與活力，能有效抓住用戶視線，對抗“橫幅盲視效應”
2. 建立擬物化的趣味交互
模擬物理世界卡牌的操作體驗，配合流暢的滑動動畫，讓用戶產生"翻閱卡片"的愉悅感，這種情感化設計能顯著提升用戶的操作滿足感和停留時長
3. 內容暗示激發探索行為
堆疊效果露出部分內容作為預覽，能有效刺激用戶的好奇心，主動進行滑動探索，提升內容消費深度
該設計通過 “貼合用戶習慣的交互 + 強引導 + 積分激勵” 的組合策略，實現簽到轉化與用戶留存
1. 交互設計貼合用戶固有習慣
采用下拉觸發模式，無需額外學習成本，降低用戶參與簽到的操作門檻，提升即時轉化效率
2. 視覺設計強化引導與目標感知
以金幣掉落清晰的視覺元素突出金幣中心入口，讓用戶快速捕捉核心功能，減少尋找成本，縮短 “看到 - 參與” 的路徑
3. 激勵設計構建留存閉環
用 “金幣” 作為即時激勵，滿足用戶即時反饋的心理需求，驅動次日復訪，同時聯動積分體系，將單次簽到轉化為長期行為
本期的設計分享就到這里啦。
文章中的案例與思考來自于UED同學的日常分享。
后續我們將持續深度體驗產品，挖掘更多值得分享、學習的設計案例。努力將其中的方法理論應用到后續的產品設計中。
愿我們的努力為你帶來更好的體驗。下次見。
轉載：優設
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
根據最新的產品定位，能提煉出兩個重要的信息，即“品牌電商”和“高端化”，若想把這兩點落實到產品設計當中，首先就是對這兩個關鍵詞有充分且客觀的認識。
京東、淘寶、拼多多是不是品牌電商？肯定不是，他們屬于綜合類電商，他們銷售各種品牌的產品，品牌電商的特征是，只針對一個品牌或集團旗下多個品牌（集團為品牌）的產品進行銷售。
綜合類電商：追求性價比，更多的是滿足消費者物質層面的需求，購買動機是功能、賣點、價值等利益點。
綜合類電商在設計上，貼近用戶的心智訴求，就應該注重產品的利益點露出，頁面設計上強調熱鬧的氛圍，這樣才能進一步刺激用戶的消費欲望。
品牌電商：品牌電商應注重品牌的調性，賦能品牌，用戶追求品牌溢價，滿足精神層面的需求，購買動機注重品質，以及身份的價值認同感，符合自己的社會屬性等。
設計上，不應過分強調利益點，不然會降低品牌的品質感，品牌電商應聚焦商品本身，更多的去解讀產品的價值和優勢，讓用戶感到品牌產品的品質。
什么是高端的？那首先得明白什么是低端的，從人類發展的客觀事實上來看，或從我們普遍認同的價值觀上來看，落后往往代表低端，先進則更能表現高端，下面我們看幾組圖片。
從圖片的對比上來看，粗糙、多色彩、雜亂看起來是低端的，精致、單色、簡潔更多人會認同是高端的。
最終通過品牌電商的特點，以及高端化設計認識，我總結出4條設計語言：
1）回歸產品本身
聚焦產品價值為核心，回歸本真，營銷信息合理展示。
2）克制的
克制色彩營銷的導向， 復雜的設計，助力品牌高端化。
3）極致的
以用戶語言，打造產品細節，打磨用戶體驗，做好服務。
4）有品牌感知的
提取品牌DNA，建立官網心智，打造官方商城優勢。
有了設計語言的方向指導，那所有的設計都要依據這四條原則進行設計，接下來看一下案例中如何運用設計原則。
下圖是一年前的首頁，最直觀的感受就是，整體看上去色調很多，圖素的飽和度也較高，根據我們的設計語言，對banner、金剛位、活動腰帶、一拖三（瓷片區）等、做了一系列的改版，同時還增加了幾個模塊，接下來我們細講。
banner圖區域結合需求，做了非常大膽的嘗試，對頭圖設定了幾種狀態，日常狀態、活動狀態、新品發布會狀態。
日常狀態：依舊是輪播banner展示，在圖素的設計上，對版式和用色做了規范調整。
色調上不再采用高飽和的圖素，板式上去掉了行動按鈕，原因就是結合設計語言“回歸產品本身”這一理念，去營銷化，圖素上的信息就展示關于產品本身，圖、名稱、賣點、價格。
這就是一個品牌電商，在日常展示上，應該有的一種態度，吸引用戶的一定是產品本身，而不應該是一個利益點。
活動狀態：當有重要的活動或新品時，會直接把所有banner都下掉，直接把一個加長的活動圖素放上去，業務方給起了個名字叫huner，意思就是直接“呼臉上”的意思，邏輯上就是重點強調。
huner展示
根據活動的重要程度，huner的高度會不一樣，左圖是與哈利波特聯名的一款手機，比較重要，所以更大，右圖是每月一次的F會員日活動，所以相對較小。
關于活動氛圍，在設計上還有一個遞進關系，當活動越重要，那huner的底部圓角就會越圓潤，因為越圓潤的設計越活躍，越活躍的設計活動氛圍就會越熱鬧。
另外有時我也會做一些動效上去，來重點渲染活動氛圍，下圖所示：
迪士尼聯名產品發布會動畫：
雙11活動huner動畫設計：
春節期間年貨節huner動畫設計：
618倒計時huner動畫設計：
新品發布會/重大節日狀態：這個狀態會在huner圖中下方增加多個次級活動入口，原因發布會和重大節日流量較高，這樣的設計形式，流量聚焦，減少路徑，能更好的完成活動目的。
另外在這個樣式的基礎上還有一種形式，huner下方的坑位會去掉產品圖，弱化展示，目的是為了給下方活動腰帶更多的流量。
大促期間各個需求組，都希望在首頁分到更多的流量，在眾多活動中，肯定有主有次之分，放在一起設計形式相同就會平均流量，這顯然不是平臺想要的效果，所以解決方案就是，通過設計形式來干預流量的走向。
對于一個多業務方的首頁，設計上往往還需考量各方利益，不能因為一方，影響另一方，做好權重需求分配，平衡利益，這也是設計師需要有意識思考的問題。
總結：banner頭圖的改版設計，日常輪播不會存在任何營銷信息，保持品牌電商的調性，活動期間根據不同級別的活動，給出級別不同設計方案，活動過多時，通過設計形式干預流量的走向。
金剛位做了簡單的優化，之前最大的問題是，產品的形狀各異，都是以最大要求尺寸展示，導致最終的視覺呈現常常不統一。
解決方案下圖所示，規范了較為方正的產品和較長產品，不同的呈現尺寸，讓視覺盡可能看起來統一。
米金商城圖標進行了改版，采用寫實效果，降低飽和度，盡可能看起來更貼近真實，這樣與真實的產品圖標會更加契合。
金剛位中“小米發布”的入口，有一個重要的改變，之前一直是一個圓角矩形，現在結合我們的設計語言“有品牌感知的”原則，進行調整。
提取小米logo的超橢圓形狀，直接用于圖標的呈現，小米發布是一個重流量的入口，所以一直是一個動效狀態。
因為“小米發布”是中間位置，圖標尺寸保持最大也不會不和諧，較大的展示面積，能把動效內容展示的更清晰。
這個內容是新增模塊，非常態化呈現，每次會隨著發布會新品發布出現，比如老板在發布會上正在介紹一款新品，那小米商城就會隨著發布會的節奏，首頁首屏出現一個非常突出的新品大卡。
當介紹第二款新品時，新品大卡就會以banner輪播的形式出現，另外有一點很重要，新品大卡的副文案，一定得是賣點，而不能是利益點。
賣點就是展示這個產品本身的亮點，利益點是這個產品有什么優惠，對于剛發布的新品就直接上利益點，有損新品的價值感，不符合我們“回歸產品”的設計語言。
所以每次業務方給出的是利益點，我都會提醒他換成賣點，講明原因，他們通常也是非常認可的。
活動腰帶是重運營區域，所以設計形式會常常換樣式，不然用戶容易視覺疲勞，但任何設計形式，也都是圍繞設計語言開展，下圖所示，新舊活動腰帶對比。
新舊對比很直觀的感受就是，變得冷靜克制了，場景變得寫實了，減少色相了，降低飽和度和明度了，下面我精選了一些近一年中用過的活動腰帶。
寫實風格的KV能增強商品的品質，也更符合目前的產品定位，從數據來看對比以前也是增長趨勢。
對于品牌電商來說，能給用戶帶來品質感，其實就等于用戶對平臺增加了信任感，設計促進了用戶的信任，那就等于設計賦能了品牌。
手機腰帶也是新增的模塊，原因很簡單，集團的主營業務就是手機，所以手機要有個專門的模塊展示。
手機腰帶日常保持冷靜的設計調性，大促期間會增加標簽和突出利益點的處理。
另外值得說的一點是，手機腰帶下面三個手機做到了“千人千面”，不同標簽的用戶會看到不同的手機推薦。
這個模塊的改版非常有講頭，這一年中也是經歷了多個版本的迭代，首先看一下最初的設計稿，其實是非常符合當時的產品定位，與之前的活動腰帶也非常契合，營銷感較重，主打的就是一個熱鬧。
最初的設計沒有問題，符合當時的產品定位，但后來應業務方的需求，加了一個配置標簽的功能。
當時告訴運營同學的是，四個卡片中只能加一個，功能上并沒有限制只能加一個，后來如上圖所示，每個都加，夸張的時候四個都加。
本來就是多色的色塊，再加上幾個突出的標簽，那直接就“花枝招展”了，每個卡片都加標簽，就等于沒有突出任何一個。
后來公司提出高端化路線，就快速做了一個用不到開發的去色的調整，去掉標簽，下圖所示，修改尺寸板式需要開發介入。
在用去色后樣式的同時，我也在進行需要開發介入的設計迭代優化。
首先分享一下我對改版優化的設計思考，對于改版設計拿到需求后，不提倡直接去找參考，應該先去調研改版的目的，了解業務方的想法。
然后結合產品定位，分析目前的設計存在哪些問題，深入去思考如何改版才能深入人心，這個環節非常重要，不僅能培養獨立思考能力和意識，而且也是鍛煉設計提案能力的重要方法。
拿到需求直接去找參考不僅是一種“懶”的行為，而且非常容易做很多徒勞無功的工作，因為不了解真正的改版目的，不思考存在的問題，最后難免就是多次的改稿。
在一拖三的案例中，我總結了四個問題：
問題一：整體看起來緊湊，其實也并非緊湊，而是如若有一個寬松和它對比，那它就是緊湊的，我先有個方案，再對應給它定義一個問題，當然前提是問題與解決方案是客觀成立的。
我堅信寬松一定會打敗緊湊，緊湊變寬松會給人一種輕松的清爽感，事實上也的確如此，最后的寬松方案大家都非常認可。
問題二：產品不能完全露出，導致用戶看不到產品全貌，從而會降低點擊的興趣，露出半個產品，這樣對用戶不僅不友好，而且也是對產品不尊重，所以展示出產品的全貌迫在眉睫。
問題三：大卡片的產品名稱字號過大，甚至大過板塊標題的字，常態展示模塊不應該出現不冷靜的字號，會顯得不精致。
問題四：大卡片的文字排版為居中，居中排版的優點是表現力會更強，缺點是板式結構變得不夠整潔，且不耐看，結合我們的設計語言“克制的”能簡潔絕不會讓它復雜。
最大的改變是一拖三變成了一拖四，整體看起來不再有緊繃感，雖說增加了模塊的高度，但也增加了一個坑位，這對對應的業務方來說也是求之不得的好事。
產品圖不在部分露出，每個模塊都是對角排版，文字左對齊，且可以展示更長的產品名稱，整體看起來較為工整，整齊的設計，帶來的就是信任感。
接下來我們看一下規范上的整理，邊距上視覺統一，產品名稱與賣點的間距是賣點與價格邊距的二分之一，即五分原則。
同時賣點與價格的邊距與外邊距相同，在這種小模塊設計中，在能把信息層級分清楚的基礎上，UI設計間距越少越好，大小相等的東西都會看起來就會更整潔。
產品圖的規范設定與前面的金剛位一樣，方正的產品貼合小框大小，較長的產品貼合大框。
最后整體看一下，小米商城首頁一年前后的對比。
總結：
這次首頁的改版主要就是根據公司高端化戰略和清晰的產品定位，總結得出設計語言，然后根據設計語言進行改版優化。
首頁還有會員樓層、省心優惠、新品上新三個樓層，依舊在改版中，上線后再與大家分享。
關于設計語言：
這四條設計語言，是我一年多以前在改版設計產品站（產品詳情頁）時做的總結，有些原則在這次的首頁改版并沒有體現，比如“極致的”用戶體驗服務，但在產品站的改版中有非常多的體現。
對于電商產品最重要的兩個板塊就是，首頁和產品站，首頁負責準確的流量分發，產品站負責銷售轉化，所以產品站的設計也是非常非常有學問，下一篇文章就是產品站的改版，敬請期待。
最后跟大家分享一下，這次改版的重要心得，電商首頁的每個模塊都是一個業務方，設計上要考慮各方利益，不然你的設計很難推動。
設計形式可以影響流量的走向，合理運用會有非常不錯的效果。
設計前的深度思考尤為重要，不僅能培養獨立思考的意識，也能無形中鍛煉設計提案的能力。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
本文聚焦B 端系統響應式設計，拆解適配邏輯、參數規范與設計交付，蘭亭妙微ui設計公司幫你低成本實現合理適配，告別無效工作量與開發返工。
轉載：優設
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://www.wtxcl.cn