“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 年代拉链推广初期,拉链款童装就常常以“帮助幼儿学会自己穿衣,培养自理能力”作为卖点。
易工业化、标准化
回形针只需弯曲三次并剪断即可制成,易于自动化生产;螺旋形蚊香可通过钢制模具一次冲压成型,一台机器每分钟可生产数百盘蚊香,整个过程可高度标准化。规模化生产有效降低了成本,使其在市场上更容易取得价格优势,进而推动广泛普及。
然而,历经百年技术发展与社会变迁,新生需求与问题层出不穷。这些经典产品,是否真的一如诞生之初那般,显得全然不过时?或许,让它们保持不变的还有更深层的原因。
去年 11 月的香港大埔火灾事故造成了重大人员伤亡,令人痛心。在对这场事故的追责中,首当其冲地便是香港建筑行业的竹棚工程。许多人指出,竹材燃点仅为 265°C,远低于钢材,可能加剧火势蔓延。此外,竹棚的结构强度也相对不足——过去香港曾多次发生棚架坍塌事故。以香港的经济发展水平,完全有能力推动行业向钢材升级。但网络上仍有许多支持者声称:竹棚搭建技艺自清朝便出现在香港,已有上百年历史,具有文化传承价值,也是长久以来的行业惯例。
同样的,历史上也有其他证据表明 QWERTY 键盘并非最佳的键盘布局,比如美国心理学家发明的德沃拉克键盘布局(Dvorak keyboard layout):这一布局基于字母使用频率和手的生理结构设计,拥有打字更快、更易学习和降低疲劳的特点。二战时一项研究表明,德沃拉克布局的打字员速度要比 QWERTY 布局打字员快 74%。即使是 QWERTY 键盘的发明人——肖尔斯本人也没那么笃定:尽管他很早就将设计卖给了雷明顿公司,但他终其一生都在不断改进布局,并创造出各种替代方案,在他去世的前一年,他还为自己的 XPMCH 键盘申请了专利。
螺旋蚊香的使用体验也没那么理想:其嵌套结构导致在拆分时比较困难,一不小心可能直接掰断,且必须依赖专用底座才能使用。这本质上是一种便利工业化生产而非优化用户体验的设计。然而,即使有了电蚊香这种更方便、健康、安全的替代品,螺旋蚊香仍凭借低廉的成本、成熟的产业链以及简易的仓储运输要求,在市场中占据着一席之地。
在历史较短的互联网领域也有类似的案例——比如搜索引擎结果页的布局与交互模式。自 2000 年代初谷歌确立“顶部搜索框 + 蓝色链接标题 + 简短摘要”的模式以来,其核心框架在近二十年间保持高度一致,并成为行业标准,不管是在网页端还是移动端。然而在移动端上,固定于屏幕顶部的输入框常位于手指的自然操作范围之外,用户需特意伸展才能触及,体验不够便捷。而“标题用蓝色表示超链接” 这个设计也稍显过时,在用户已基本认知“搜索结果标题可点击”的今天,整屏的蓝色可能带来不必要的视觉干扰,增加阅读负担。
回望这些产品或设计,其“不变”与其说是源于解决问题的完美,不如说是因为它们早早确立了“行业标准”,获得了先发优势,培养了牢固的用户习惯,进而形成了强大的路径依赖。一旦从用户到产业链的“惯性”形成,任何改变都将面临难以估量的转换成本。正因如此,即便它们存在一定的缺陷,市场往往也会接受,毕竟这是性价比相对较高的策略。
一些产品能历经百年而保持不变,固然有其设计上的优越性,但更值得深思的是不变的背后隐藏着的路径依赖与行业惯性的强大力量。百年的不变或许只是暂时的,可能是颠覆性的技术尚未诞生,或是缺少一个推动行业变革的契机。
归根结底,设计无法时刻去寻求那个完美的终极方案,而是在多重约束条件下寻找平衡——既要权衡用户习惯与使用体验,又要兼顾商业成本、行业发展情况与规模化需求,甚至还要回应文化传承与社会伦理的争议。同时,作为设计师也需要保持对行业规范与惯例的审视与批判意识,警惕将“长期不变”等同于“无可优化”,在考虑用户习惯转换成本的前提下,积极探索更适配当下需求的创新方案。
转载:优设
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。


兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

闲鱼发闲置功能接入AI,只需上传商品图片就可以直接生成描述文案,极大帮助用户简化发布流程
1. 零门槛发布,降低发布时间成本
解决非专业用户 “不会写文案、不懂专业术语” 的痛点,自动提取商品特征,组合成规范文案;相比传统发布流程的耗时编辑文案、核对信息,更高效快捷。
2. 优化内容,提升交易转化
自动生成符合当前市场热点的文案表述,更能多文风转换,一键转为趣味的 “抽象文学”“黛玉文学”等,提升内容点击率。
支付宝的首页Banner通过游戏化的包装,快速吸引注意力,驱动用户主动点击探索,高效地为活动页面引流。
1. 互动机制强化用户参与感
采用悬念式互动设计,button以 “猜猜是什么” 这类问答形式,激发用户好奇心,通过游戏化场景的营造,降低参与门槛,驱动用户主动点击探索。
2. 场景氛围营造提升吸引力
在以功能入口为主的首页,该模块具有游戏化趣味性的氛围营造,从视觉上差异化的呈现,相比传统的静态广告位,更能有效抓住用户眼球,高效地为活动页面引流。
当有中转单的用户在点击退票时,用挽留浮层及时给用户弹出更优的解决方案,并在方案中量化利益点,同时保证原有票的安全感。整体通过 “先抓痛点→再给解决方案→最后引导操作” 的路径,优化了用户出行体验。
1. 量化利益点
除了直达更方便之外,直达还有更省时间、金钱,保底票免费退等更多的利益点
2. 有兜底有安全感
用当前的中转作为保底,先抢票,抢到了还能再退票。让用户安心下单,在未抢到心仪票的时候能有中转的替补票,可以缓解用户的焦虑情绪,有兜底的保障安全感
通过一个巧妙的互动行为“摇动手机”,降低用户对会员充值广告的反感。
1. 提升用户参与感与趣味性
“摇一摇”互动将被动观看广告转变为主动参与,用户通过简单的物理动作即可触发折扣,这种即时反馈机制增强了趣味性,降低了传统广告的侵入感。
2. 降低付费决策的心理门槛
通过互动行为展示折扣,巧妙地将付费流程包装成一种“奖励”而非强制推销。用户感受到的是“主动获取优惠”的成就感,而非被广告打扰的抵触情绪,从而更愿意接受付费选项。
通过拟物化的卡牌堆叠形态,将传统的平面信息流转变为具有空间纵深感和探索趣味的交互式叙事焦点
1. 视觉层次突破传统束缚
通过卡片堆叠、倾斜,在二维屏幕上创造出三维空间感。不对称的布局打破了传统设计的呆板,赋予界面动感与活力,能有效抓住用户视线,对抗“横幅盲视效应”
2. 建立拟物化的趣味交互
模拟物理世界卡牌的操作体验,配合流畅的滑动动画,让用户产生"翻阅卡片"的愉悦感,这种情感化设计能显著提升用户的操作满足感和停留时长
3. 内容暗示激发探索行为
堆叠效果露出部分内容作为预览,能有效刺激用户的好奇心,主动进行滑动探索,提升内容消费深度
该设计通过 “贴合用户习惯的交互 + 强引导 + 积分激励” 的组合策略,实现签到转化与用户留存
1. 交互设计贴合用户固有习惯
采用下拉触发模式,无需额外学习成本,降低用户参与签到的操作门槛,提升即时转化效率
2. 视觉设计强化引导与目标感知
以金币掉落清晰的视觉元素突出金币中心入口,让用户快速捕捉核心功能,减少寻找成本,缩短 “看到 - 参与” 的路径
3. 激励设计构建留存闭环
用 “金币” 作为即时激励,满足用户即时反馈的心理需求,驱动次日复访,同时联动积分体系,将单次签到转化为长期行为
本期的设计分享就到这里啦。
文章中的案例与思考来自于UED同学的日常分享。
后续我们将持续深度体验产品,挖掘更多值得分享、学习的设计案例。努力将其中的方法理论应用到后续的产品设计中。
愿我们的努力为你带来更好的体验。下次见。
转载:优设
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

本文聚焦B 端系统响应式设计,拆解适配逻辑、参数规范与设计交付,兰亭妙微ui设计公司帮你低成本实现合理适配,告别无效工作量与开发返工。
转载:优设
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

蓝蓝设计的小编 http://www.lanlanwork.com