在进行设计时，常常会涉及到“时间”的排版，比如展会日期、演出时间、活动促销时间等。“时间”在版面中更像是个“配角”，并不像标题和其它信息那么显眼，所以常常被设计师所忽视。但版面中任何一个小细节都会影响到版面整体的美观，本期讲解“时间”信息编排的几种思路，教你如何让“时间”的排版在顺利传递信息的同时，还具有良好的视...

在进行设计时，常常会涉及到“时间”的排版，比如展会日期、演出时间、活动促销时间等。“时间”在版面中更像是个“配角”，并不像标题和其它信息那么显眼，所以常常被设计师所忽视。

但版面中任何一个小细节都会影响到版面整体的美观，本期讲解“时间”信息编排的几种思路，教你如何让“时间”的排版在顺利传递信息的同时，还具有良好的视觉体验，为版面增添设计感。

往期平面干货：

文字怎么搭配排版才吸睛！送你50+案例！ 海报文字的排版怎么样才能吸睛与众不同？

阅读文章 >

一、对比 “对比”在设计中无处不在，在“时间”的编排中也是如此。在设计时可以弱化日期中较次要的信息，突出主要信息，让观者一目了然。

此案例时间并没有经过太多的刻画，但加入了大小对比，形成了视觉层次感。

将“年份”和“月、日”字眼信息缩小，采用大小对比增强信息之间的跳跃率，显得灵动活泼。

将“月份”改为空心字，形成空心字和实心字的强弱的对比，使主要信息“日期”更突出。

二、简化 将“年、月、日”简化为“.”“/”等符号，既能准确传达日期信息，又可以使视觉效果更简约。

很多时候年份并不那么重要，可以把年份弱化，突出具体时间，形成对比、层次区分，这样更有利于阅读。

如果时间信息较多，想更简约的呈现，年份直接删去也无妨。

当活动的时间范围在同一个月，“月份”可以共用，这样能精简画面重复的信息。

三、替代 将月份替换为英文，使版式多一点变化。

将日期中的阿拉伯数字用汉字代替，比较适用于传统复古的版面。

日期连接经常使用横线“——”，也可以替换为各式各样的箭头来连接日期。

将年份信息放在连接线上，既起到连接的作用，同时还能引起阅读者的注意。

四、添加 如果想让版面视觉效果更丰富，可以选择添加信息。

此案例添加星期的英文缩写，增加大小对比，丰富了画面层次。

有些活动是只在一天的某个时段举行，则需要添加具体时间。

还可以添加图标或其他小元素进行装饰，增加更多趣味性。

添加外框，让“时间”信息的呈现更整体，也能与其它信息进行区分。

六、分行 当有两个日期需要呈现，可以采用分行处理，让读者更易于阅读与识别。

七、对齐方式 左对齐是最符合人阅读习惯的对齐方式，所以也是“时间”编排中最常使用的对齐方式。在设计时也可以尝试改变不同的对齐方式，让编排多一些个性和变化。

也可以将文字调整大小和间距，使两端完全对齐，可以达成工整严谨的效果，看起来也更加饱满。

八、纵向编排 在版面空间比较狭窄时，可以改变时间的排版方向来适合版面编排需求，纵向的编排还能体现出古典文化感。

在改变排版方向时，一般要把数字调整为常规阅读方向，保证良好的识别性。

也可以同时采用横排和竖排相结合的排版方式，形成方向上的对比，视觉效果更丰富。

九、字体 选取特殊的字体，让信息编排更具个性和设计感。

掌握方法后，可以尝试更多的组合方式，让重新设计后的“时间”信息在顺利传递信息的同时，还具有良好的视觉体验，为版面增添设计感。

本期示范所用字体为：Trajan、Times New Roman、Garamond、思源黑体、D-DIN、Bebas、Facon、Quantum、Bungee Inline、Morena、Baloo（除前三款外均可免费商用）

欢迎关注作者的微信公众号：「艺海拾贝Design」

在进行设计时，常常会涉及到“时间”的排版，比如展会日期、演出时间、活动促销时间等。“时间”在版面中更像是个“配角”，并不像标题和其它信息那么显眼，所以常常被设计师所忽视。但版面中任何一个小细节都会影响到版面整体的美观，本期讲解“时间”信息编排的几种思路，教你如何让“时间”的排版在顺利传递信息的同时，还具有良好的视...

在进行设计时，常常会涉及到“时间”的排版，比如展会日期、演出时间、活动促销时间等。“时间”在版面中更像是个“配角”，并不像标题和其它信息那么显眼，所以常常被设计师所忽视。

但版面中任何一个小细节都会影响到版面整体的美观，本期讲解“时间”信息编排的几种思路，教你如何让“时间”的排版在顺利传递信息的同时，还具有良好的视觉体验，为版面增添设计感。

往期平面干货：

文字怎么搭配排版才吸睛！送你50+案例！ 海报文字的排版怎么样才能吸睛与众不同？

阅读文章 >

一、对比 “对比”在设计中无处不在，在“时间”的编排中也是如此。在设计时可以弱化日期中较次要的信息，突出主要信息，让观者一目了然。

此案例时间并没有经过太多的刻画，但加入了大小对比，形成了视觉层次感。

将“年份”和“月、日”字眼信息缩小，采用大小对比增强信息之间的跳跃率，显得灵动活泼。

将“月份”改为空心字，形成空心字和实心字的强弱的对比，使主要信息“日期”更突出。

二、简化 将“年、月、日”简化为“.”“/”等符号，既能准确传达日期信息，又可以使视觉效果更简约。

很多时候年份并不那么重要，可以把年份弱化，突出具体时间，形成对比、层次区分，这样更有利于阅读。

如果时间信息较多，想更简约的呈现，年份直接删去也无妨。

当活动的时间范围在同一个月，“月份”可以共用，这样能精简画面重复的信息。

三、替代 将月份替换为英文，使版式多一点变化。

将日期中的阿拉伯数字用汉字代替，比较适用于传统复古的版面。

日期连接经常使用横线“——”，也可以替换为各式各样的箭头来连接日期。

将年份信息放在连接线上，既起到连接的作用，同时还能引起阅读者的注意。

四、添加 如果想让版面视觉效果更丰富，可以选择添加信息。

此案例添加星期的英文缩写，增加大小对比，丰富了画面层次。

有些活动是只在一天的某个时段举行，则需要添加具体时间。

还可以添加图标或其他小元素进行装饰，增加更多趣味性。

添加外框，让“时间”信息的呈现更整体，也能与其它信息进行区分。

六、分行 当有两个日期需要呈现，可以采用分行处理，让读者更易于阅读与识别。

七、对齐方式 左对齐是最符合人阅读习惯的对齐方式，所以也是“时间”编排中最常使用的对齐方式。在设计时也可以尝试改变不同的对齐方式，让编排多一些个性和变化。

也可以将文字调整大小和间距，使两端完全对齐，可以达成工整严谨的效果，看起来也更加饱满。

八、纵向编排 在版面空间比较狭窄时，可以改变时间的排版方向来适合版面编排需求，纵向的编排还能体现出古典文化感。

在改变排版方向时，一般要把数字调整为常规阅读方向，保证良好的识别性。

也可以同时采用横排和竖排相结合的排版方式，形成方向上的对比，视觉效果更丰富。

九、字体 选取特殊的字体，让信息编排更具个性和设计感。

掌握方法后，可以尝试更多的组合方式，让重新设计后的“时间”信息在顺利传递信息的同时，还具有良好的视觉体验，为版面增添设计感。

本期示范所用字体为：Trajan、Times New Roman、Garamond、思源黑体、D-DIN、Bebas、Facon、Quantum、Bungee Inline、Morena、Baloo（除前三款外均可免费商用）

欢迎关注作者的微信公众号：「艺海拾贝Design」

情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。相关的概念你可以看这篇：关于情感化设计，这篇干货带你快速入门这个知识点！小溜Epik：情感化设计是完善产品，提升用户体验的关键，在当今移动应用泛滥的时代，只有存在情感化设计的产品才能脱...

情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将 情感化设计 分成了三个层次：本能层、行为层、反思层。相关的概念你可以看这篇：

关于情感化设计，这篇干货带你快速入门这个知识点！ 小溜Epik：情感化设计是完善产品，提升用户体验的关键，在当今移动应用泛滥的时代，只有存在情感化设计的产品才能脱颖而出。

阅读文章 >

接下来，我们就从案例中分析，作为设计师该如何在这三个层次中做好情感化设计。

一、本能层 —— 感官刺激 对于本能层，设计师可以在符合功能需求的前提下，尽力给用户带来听觉、视觉、触觉的感官刺激，促成用户与产品的 “一见钟情”。

作为一款国民级应用，支付宝出行功能下的每个 icon 都做得很用心，小动画让交互更有趣：

Airbnb 在北美登录界面的长按钮，按钮的颜色会随着鼠标移动而产生变化，让交互感受更加深刻：

语雀 App 在生成长图进行分享和转发时，有不同的卡片样式可以选择，图案随机像开盲盒一样，促成用户尝试分享：

在淘宝搜索商品，可以看到页面右下角的“花瓣图标”，点开后是拼接图效果来展示商品。每个小图可以是视频，也可以左右滑动翻页，视觉展示效果明显，挑选商品也更加方便：

在互联网时代，表达哀悼也有了新的方式，很多产品都使用首屏去色黑白化，来缅怀领导人的离去：

二、行为层 —— 细节引导 对于行为层，设计师需要对用户的行为进行预判和引导，利用细节处理打动用户，让用户对产品产生信任感和依赖感。

使用 “ 微信 读书” 在读到一本书的 50% 的时候，页面顶部会显示剩余阅读量，并会根据你之前的阅读速度估算剩余时间，鼓励你继续读：

高德地图利用树木和楼高的数据，配合天气太阳角度的计算，在夏天时为选择骑行的用户提供有林荫和楼阴的“清凉导航路线”：

在一些车辆限行的城市，高德地图增加了“添加限行日提醒”功能，根据不同城市有定制化的规定。在添加车牌号时，键盘默认开启大写字母和数字组合，方便用户输入：

微信的搜索推荐，会用一些小脚标来吸引用户点击，比如“互联网精英都在看”，应该是根据文章阅读的用户画像来做的精准推荐：

美团外卖在用户给订单打差评时，会自动开启匿名开关，保护用户的隐私：

钉钉会在你长时间（约 3-4 小时）未读某人发的单聊消息时，再次发出通知提示，避免你错过重要消息：

微信群聊天，大家通常都会设置“消息免打扰”，但也很可能会错过很多重要信息。微信可以在群聊设置中选择关注的群成员，这样这几个被你关注的群成员在说话时候，你就可以接到通知提醒：

三、反思层 —— 认知共鸣 对于反思层，设计师要调动用户最深层的记忆和感知，将视觉效果、产品功能和用户认知紧密结合，形成用户对于产品和品牌的深刻认知。

英雄联盟的微信广告植入别具一格，将游戏用语、社群平台和用户很好的连接到一起，你只要发送 “亚索，听我口令…” 这段口令，就会唤起动画效果和小程序：

饿了么的搜索推荐，使用滚动条状态，并配有古灵精怪的形容词，还会有 IP 形象不断的加词加戏：

网易云音乐的播客功能，在切换主题内容时使用的是模仿老式收音机调频的方式，有趣的是，你能感觉到手机随着滑动调频而产生明显的震动感：

花小猪 App 为了缓解用户等待平台派单时的焦虑感，将等待进程设计成红包进度条样式的样式，等的时间越长红包越大，让用户舍不得离开：

Google 浏览器首页的 Logo 涂鸦变体经常会和实际事件相呼应，比如在某年的月食日时曾使用过的涂鸦小动画，点击后则会跳转到与月食知识相关的百科页面：

欢迎关注作者微信公众号：「长弓小子」

情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。相关的概念你可以看这篇：关于情感化设计，这篇干货带你快速入门这个知识点！小溜Epik：情感化设计是完善产品，提升用户体验的关键，在当今移动应用泛滥的时代，只有存在情感化设计的产品才能脱...

情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将 情感化设计 分成了三个层次：本能层、行为层、反思层。相关的概念你可以看这篇：

关于情感化设计，这篇干货带你快速入门这个知识点！ 小溜Epik：情感化设计是完善产品，提升用户体验的关键，在当今移动应用泛滥的时代，只有存在情感化设计的产品才能脱颖而出。

阅读文章 >

接下来，我们就从案例中分析，作为设计师该如何在这三个层次中做好情感化设计。

一、本能层 —— 感官刺激 对于本能层，设计师可以在符合功能需求的前提下，尽力给用户带来听觉、视觉、触觉的感官刺激，促成用户与产品的 “一见钟情”。

作为一款国民级应用，支付宝出行功能下的每个 icon 都做得很用心，小动画让交互更有趣：

Airbnb 在北美登录界面的长按钮，按钮的颜色会随着鼠标移动而产生变化，让交互感受更加深刻：

语雀 App 在生成长图进行分享和转发时，有不同的卡片样式可以选择，图案随机像开盲盒一样，促成用户尝试分享：

在淘宝搜索商品，可以看到页面右下角的“花瓣图标”，点开后是拼接图效果来展示商品。每个小图可以是视频，也可以左右滑动翻页，视觉展示效果明显，挑选商品也更加方便：

在互联网时代，表达哀悼也有了新的方式，很多产品都使用首屏去色黑白化，来缅怀领导人的离去：

二、行为层 —— 细节引导 对于行为层，设计师需要对用户的行为进行预判和引导，利用细节处理打动用户，让用户对产品产生信任感和依赖感。

使用 “ 微信 读书” 在读到一本书的 50% 的时候，页面顶部会显示剩余阅读量，并会根据你之前的阅读速度估算剩余时间，鼓励你继续读：

高德地图利用树木和楼高的数据，配合天气太阳角度的计算，在夏天时为选择骑行的用户提供有林荫和楼阴的“清凉导航路线”：

在一些车辆限行的城市，高德地图增加了“添加限行日提醒”功能，根据不同城市有定制化的规定。在添加车牌号时，键盘默认开启大写字母和数字组合，方便用户输入：

微信的搜索推荐，会用一些小脚标来吸引用户点击，比如“互联网精英都在看”，应该是根据文章阅读的用户画像来做的精准推荐：

美团外卖在用户给订单打差评时，会自动开启匿名开关，保护用户的隐私：

钉钉会在你长时间（约 3-4 小时）未读某人发的单聊消息时，再次发出通知提示，避免你错过重要消息：

微信群聊天，大家通常都会设置“消息免打扰”，但也很可能会错过很多重要信息。微信可以在群聊设置中选择关注的群成员，这样这几个被你关注的群成员在说话时候，你就可以接到通知提醒：

三、反思层 —— 认知共鸣 对于反思层，设计师要调动用户最深层的记忆和感知，将视觉效果、产品功能和用户认知紧密结合，形成用户对于产品和品牌的深刻认知。

英雄联盟的微信广告植入别具一格，将游戏用语、社群平台和用户很好的连接到一起，你只要发送 “亚索，听我口令…” 这段口令，就会唤起动画效果和小程序：

饿了么的搜索推荐，使用滚动条状态，并配有古灵精怪的形容词，还会有 IP 形象不断的加词加戏：

网易云音乐的播客功能，在切换主题内容时使用的是模仿老式收音机调频的方式，有趣的是，你能感觉到手机随着滑动调频而产生明显的震动感：

花小猪 App 为了缓解用户等待平台派单时的焦虑感，将等待进程设计成红包进度条样式的样式，等的时间越长红包越大，让用户舍不得离开：

Google 浏览器首页的 Logo 涂鸦变体经常会和实际事件相呼应，比如在某年的月食日时曾使用过的涂鸦小动画，点击后则会跳转到与月食知识相关的百科页面：

欢迎关注作者微信公众号：「长弓小子」

年货节来了！年货节的到来，意味着电商设计师一年的工作将要画上圆满的句号，终于可以把工作节奏放慢，上班期间感受下摸鱼的快乐了~作为一年压轴的大促活动，各大店铺也都非常重视，在视觉上的比拼自然也是针尖对麦芒，谁也不服谁。今天就跟着老张的步伐，一起来看看各大店铺的年货节创意吧：电商设计到底有多卷？

年货节来了！

年货节的到来，意味着 电商设计 师一年的工作将要画上圆满的句号，终于可以把工作节奏放慢，上班期间感受下摸鱼的快乐了~

作为一年压轴的大促活动，各大店铺也都非常重视，在视觉上的比拼自然也是针尖对麦芒，谁也不服谁。

今天就跟着老张的步伐，一起来看看各大店铺的年货节创意吧：

电商设计到底有多卷？看今年双11开门红就知道了！ 电商设计圈内卷究竟有多严重？

阅读文章 >

华美食品旗舰店 | 视觉冲击力很强啊！

李子柒旗舰店 | 好家伙，还是这么秀~

珀莱雅官方旗舰店 | 动效的天下

极米科技旗舰店 | 摄像头视角

柴火大院旗舰店 | 对比做的不错，主体很明确

邹三和旗舰店 | 漂亮~

好欢螺旗舰店 | 螺蛳粉不错

五粮浓香官方旗舰店 | 春节都不要贪杯哈~

馋匪旗舰店 | 食欲来了

亿家达旗舰店 | 开盲盒的感觉

三只松鼠旗舰店 | 可爱的三小只，太喜欢了

甘福园旗舰店 | 喜气洋洋~

久年旗舰店 | 质感很强啊！

云南白药旗舰店 | 数一数有多少只兔子图片

贡牌茶叶旗舰店 | 品茶品茶~

黄老五食品旗舰店 | 氛围感十足

翠宏旗舰店 | 龙的传人

欧诗漫旗舰店 | 灯光秀来了

臭宝旗舰店所 | 好有食欲图片

十月稻田旗舰店 | 人物和建筑之间的空间感再拉开一些会更好，整体来说还是不错的！

认养一头牛旗舰店 | 文案有意思

rio 锐澳旗舰店 | 有点喜感

袋鼠比比旗舰店 | 简单大方

卢正浩旗舰店 | 有钱没钱，回家过年~

食族人旗舰店 | 他家酸辣粉不错

欧莱雅官方旗舰店 | 看，飞机

OGP 旗舰店 | 光效用的不错

皇上皇旗舰店 | 有拼单的吗？我买第三件

罗技官方旗舰店 | 好一个兔发奇想

蔓斯菲尔旗舰店 | 创意还不错

monge 旗舰 | 看烟花了

轩妈食品旗舰店 | 温馨的画面

尔沫旗舰店 | 中间部分稍有点空

花西子旗舰店 | 颜色即氛围

连咖啡旗舰店 | 哎呦，这个可以~

南国食品旗舰店 | 还有个动画没保存图片

卫龙食品旗舰店 | 喜庆~

暂且就放这么多吧，看完之后你最喜欢哪家店铺的设计？

2022 年注定也是不平凡的一年，从全国疫情再次爆发到全国解控，我们经历太多，大家都辛苦了！

接下来的几天可以在思想上给自己放个假，不要再死盯着工作不放了，忙碌了一整年也该休息休息了。

不如约几个朋友吃吃饭，谈天说地一番，回顾 2022，展望 2023，一切都会越来越好。

收拾收拾心情，准备回家过年，让所有的烦恼都烟消云散。

加油！

欢迎关注作者的微信公众号：「美工美邦」

年货节来了！年货节的到来，意味着电商设计师一年的工作将要画上圆满的句号，终于可以把工作节奏放慢，上班期间感受下摸鱼的快乐了~作为一年压轴的大促活动，各大店铺也都非常重视，在视觉上的比拼自然也是针尖对麦芒，谁也不服谁。今天就跟着老张的步伐，一起来看看各大店铺的年货节创意吧：电商设计到底有多卷？

年货节来了！

年货节的到来，意味着 电商设计 师一年的工作将要画上圆满的句号，终于可以把工作节奏放慢，上班期间感受下摸鱼的快乐了~

作为一年压轴的大促活动，各大店铺也都非常重视，在视觉上的比拼自然也是针尖对麦芒，谁也不服谁。

今天就跟着老张的步伐，一起来看看各大店铺的年货节创意吧：

电商设计到底有多卷？看今年双11开门红就知道了！ 电商设计圈内卷究竟有多严重？

阅读文章 >

华美食品旗舰店 | 视觉冲击力很强啊！

李子柒旗舰店 | 好家伙，还是这么秀~

珀莱雅官方旗舰店 | 动效的天下

极米科技旗舰店 | 摄像头视角

柴火大院旗舰店 | 对比做的不错，主体很明确

邹三和旗舰店 | 漂亮~

好欢螺旗舰店 | 螺蛳粉不错

五粮浓香官方旗舰店 | 春节都不要贪杯哈~

馋匪旗舰店 | 食欲来了

亿家达旗舰店 | 开盲盒的感觉

三只松鼠旗舰店 | 可爱的三小只，太喜欢了

甘福园旗舰店 | 喜气洋洋~

久年旗舰店 | 质感很强啊！

云南白药旗舰店 | 数一数有多少只兔子图片

贡牌茶叶旗舰店 | 品茶品茶~

黄老五食品旗舰店 | 氛围感十足

翠宏旗舰店 | 龙的传人

欧诗漫旗舰店 | 灯光秀来了

臭宝旗舰店所 | 好有食欲图片

十月稻田旗舰店 | 人物和建筑之间的空间感再拉开一些会更好，整体来说还是不错的！

认养一头牛旗舰店 | 文案有意思

rio 锐澳旗舰店 | 有点喜感

袋鼠比比旗舰店 | 简单大方

卢正浩旗舰店 | 有钱没钱，回家过年~

食族人旗舰店 | 他家酸辣粉不错

欧莱雅官方旗舰店 | 看，飞机

OGP 旗舰店 | 光效用的不错

皇上皇旗舰店 | 有拼单的吗？我买第三件

罗技官方旗舰店 | 好一个兔发奇想

蔓斯菲尔旗舰店 | 创意还不错

monge 旗舰 | 看烟花了

轩妈食品旗舰店 | 温馨的画面

尔沫旗舰店 | 中间部分稍有点空

花西子旗舰店 | 颜色即氛围

连咖啡旗舰店 | 哎呦，这个可以~

南国食品旗舰店 | 还有个动画没保存图片

卫龙食品旗舰店 | 喜庆~

暂且就放这么多吧，看完之后你最喜欢哪家店铺的设计？

2022 年注定也是不平凡的一年，从全国疫情再次爆发到全国解控，我们经历太多，大家都辛苦了！

接下来的几天可以在思想上给自己放个假，不要再死盯着工作不放了，忙碌了一整年也该休息休息了。

不如约几个朋友吃吃饭，谈天说地一番，回顾 2022，展望 2023，一切都会越来越好。

收拾收拾心情，准备回家过年，让所有的烦恼都烟消云散。

加油！

欢迎关注作者的微信公众号：「美工美邦」

不论做什么产品，界面上几乎都少不了「确定」按钮。例如：操作提示时、进行选择时、填写表单时……完成、保存、下单…

不论做什么产品，界面上几乎都少不了「确定」按钮。

例如：操作提示时、进行选择时、填写表单时……

完成、保存、下单……各种代表“确定某一步骤”的按钮，都可以统称为确定按钮。

以前的产品设计，大量以来确定按钮，但是现在的产品设计，确定按钮用得越来越少了。

倒不是因为不需要确定操作了，而是除了「 确定按钮 」之外，设计师们发现了更好的方式。

往期细节分析回顾：

淘宝网页设计摆烂？淘宝京东网页细节体验分析 最近突然想起要买一个东西，刚好手就放在键盘上，刚好手机又有点远，我就用浏览器打开了淘宝。

阅读文章 >

一、能自动「确定」，就不需要按钮 有一句话说：

最好的交互就是没有交互

同样，最好的「确定」按钮，其实是没有按钮。

例如，手机锁屏时，输入密码后不需要确定按钮就可以直接验证进入。

能这么做是因为手机锁屏密码固定六位数，而电脑的锁屏密码通常不确定，所以还是需要一个「确定」按钮。

这说明，如果能够预料到用户的操作数量，且操作很简单的话，是完全可以考虑去掉「确定」按钮的。

二、不是什么时候，都适合写「确定」 通常「确定」字面上可以表示：“我知道了/就这样”。

如果是提示或者是简单的操作，则比较适合使用「确定」文案。

三、把确定了什么写出来 如果是发送、登录、购买、支付……这类目的性很强的操作，与其写「确定」还不如直接把操作目的写出来。

不然，如果只写「确定」，让人容易犯迷糊。

四、进行了输入/修改，得用「保存」 输入操作后，用户最怕丢失信息没有保存，回头得重新写。

如果只是简单的表单，例如设置用户名什么的，重来一次倒也无所谓。但如果是填写项达到三、四条甚至更多，看不到「保存」两个字难免担心数据丢失。

如果按钮上写清楚「保存」两个字，也让人安心一些。如果是自动保存，也需要把相应反馈展示出来。

五、只是结束流程而非操作，可以用「完成」 其实「完成」按钮大多可以用「确定」替代。

但是「完成」的特别之处，是表达了“结束流程”的概念。

所以，如果想让用户感觉按下按钮之后不会进行任何其它操作，而仅仅只是结束流程而已，则很时候使用「完成」。

六、工具类产品，可以用「XX 并 XX」 很多工具类产品，为了操作效率会把两个操作并列起来。

例如我现在打在所用的公众号编辑器，就有一个「保存并群发」的按钮：

这样做挺好的，工具类产品效率最重要美观是其次。两个经常要连贯执行的操作，合为一个按钮能够减少没必要的点击。

而一旦把操作合并了，肯定要写清楚比较好。否则如果没说明白，既让人难以理解，而且点起来又不放心，导致学习成本大大增加。

有一个问题是，如果文字太长了，可以考虑简化按钮文案并在旁边加点提示。

工具类产品效率最重要美观是其次，因为如果不写清楚很难让人理解。

以上是我自己做 B/C 端各类产品过程中，对「确定」按钮的思考总结。

如果大家有其它的见解或者补充，欢迎评论。

欢迎关注作者的微信公众号：「体验进阶」

不论做什么产品，界面上几乎都少不了「确定」按钮。例如：操作提示时、进行选择时、填写表单时……完成、保存、下单…

不论做什么产品，界面上几乎都少不了「确定」按钮。

例如：操作提示时、进行选择时、填写表单时……

完成、保存、下单……各种代表“确定某一步骤”的按钮，都可以统称为确定按钮。

以前的产品设计，大量以来确定按钮，但是现在的产品设计，确定按钮用得越来越少了。

倒不是因为不需要确定操作了，而是除了「 确定按钮 」之外，设计师们发现了更好的方式。

往期细节分析回顾：

淘宝网页设计摆烂？淘宝京东网页细节体验分析 最近突然想起要买一个东西，刚好手就放在键盘上，刚好手机又有点远，我就用浏览器打开了淘宝。

阅读文章 >

一、能自动「确定」，就不需要按钮 有一句话说：

最好的交互就是没有交互

同样，最好的「确定」按钮，其实是没有按钮。

例如，手机锁屏时，输入密码后不需要确定按钮就可以直接验证进入。

能这么做是因为手机锁屏密码固定六位数，而电脑的锁屏密码通常不确定，所以还是需要一个「确定」按钮。

这说明，如果能够预料到用户的操作数量，且操作很简单的话，是完全可以考虑去掉「确定」按钮的。

二、不是什么时候，都适合写「确定」 通常「确定」字面上可以表示：“我知道了/就这样”。

如果是提示或者是简单的操作，则比较适合使用「确定」文案。

三、把确定了什么写出来 如果是发送、登录、购买、支付……这类目的性很强的操作，与其写「确定」还不如直接把操作目的写出来。

不然，如果只写「确定」，让人容易犯迷糊。

四、进行了输入/修改，得用「保存」 输入操作后，用户最怕丢失信息没有保存，回头得重新写。

如果只是简单的表单，例如设置用户名什么的，重来一次倒也无所谓。但如果是填写项达到三、四条甚至更多，看不到「保存」两个字难免担心数据丢失。

如果按钮上写清楚「保存」两个字，也让人安心一些。如果是自动保存，也需要把相应反馈展示出来。

五、只是结束流程而非操作，可以用「完成」 其实「完成」按钮大多可以用「确定」替代。

但是「完成」的特别之处，是表达了“结束流程”的概念。

所以，如果想让用户感觉按下按钮之后不会进行任何其它操作，而仅仅只是结束流程而已，则很时候使用「完成」。

六、工具类产品，可以用「XX 并 XX」 很多工具类产品，为了操作效率会把两个操作并列起来。

例如我现在打在所用的公众号编辑器，就有一个「保存并群发」的按钮：

这样做挺好的，工具类产品效率最重要美观是其次。两个经常要连贯执行的操作，合为一个按钮能够减少没必要的点击。

而一旦把操作合并了，肯定要写清楚比较好。否则如果没说明白，既让人难以理解，而且点起来又不放心，导致学习成本大大增加。

有一个问题是，如果文字太长了，可以考虑简化按钮文案并在旁边加点提示。

工具类产品效率最重要美观是其次，因为如果不写清楚很难让人理解。

以上是我自己做 B/C 端各类产品过程中，对「确定」按钮的思考总结。

如果大家有其它的见解或者补充，欢迎评论。

欢迎关注作者的微信公众号：「体验进阶」

最近突然想起要买一个东西，刚好手就放在键盘上，刚好手机又有点远，我就用浏览器打开了淘宝。当我在搜索结果页点击商品时，突然被告知要登录：着急想要了解商品的我……没有登录而是新开标签页进入了京东。

最近突然想起要买一个东西，刚好手就放在键盘上，刚好手机又有点远，我就用浏览器打开了淘宝。

当我在搜索结果页点击商品时，突然被告知要登录：

着急想要了解商品的我……没有登录而是新开标签页进入了京东。

找到想要的商品后，我登录下单了。

事后我仔细对比了一下，发现淘宝的网页处处显得「敷衍」。反衬之下，京东显得专业多了。

这就让我有点惊奇了。

2021 年阿里巴巴旗下以淘宝为代表的淘系零售电商占据过半市场份额（52%），是京东（20%）的两倍不止。

在使用手机端网购时，我也是向来更喜欢淘宝而不是京东的。

而且在互联网从业人员眼中，阿里属于一线大厂，京东一般认为是二线大厂，前者更能吸引顶尖人才。

为啥淘宝的网页端还明显不如京东呢？

如果只是稍逊一点也就算了，关键淘宝网页端有很多迷惑的设计点。

更多 网页设计 干货：

只会黑白灰？7大要点帮你做好悼念缅怀的网页设计！ 如何设计悼念缅怀相关的网页？

阅读文章 >

我们就以首页为例分析一下：

一、大片无效模块 首先，现在应该没那么多人有耐心愿意先登录再使用吧，登录模块占用那么大的位置挺没必要的。

而且还没登录，就展示那么大的宝贝收藏、买过的店、收藏的店……感觉没啥意义。

然后 banner 下的第一个模块居然是猜你喜欢（个性推荐）？

我还没登录，显然猜不准，这个模块基本也废了。

然后那个 banner，我翻了一下，都是什么贵就卖什么……切中普通用户需求的几率也是相当之低

也就是说，这整个首页，大半的空间都是无效的。

作为业内人士，我猜，设计成这样，可能是因为设计师压根没想到大部分访客可能没登录？

对比一下，京东的登录模块小很多，banner 内容更有吸引力，而且第一个模块是秒杀活动（虽然露出不多）。

二、双重悬停态 Banner 左侧的这个分类导航很奇怪，鼠标移上去是整行高亮，而且每行一个图标。

刚开始，我还以为每行的 3 个链接点过去都往一个地方跳转，结果发现不是。

仔细一看，每个链接有单独的下划线悬停样式！

不但如此，商品卡片也有 2 个悬停态！

鼠标放在卡片上时，背景色和边框变一下；然后鼠标放到商品名称上时，商品名称单独高亮了。

点击这两块区域跳转到不同的地方吗？

不，没有差别。

对比一下，京东就正常很多：

三、粗糙的细节 首先，很明显的是淘宝这个 banner 的箭头不但上下没对齐，而且里面的图标也没居中，强迫症看着闹心。

然后淘宝大量使用灰色卡片，却不把间距统一一下。

虽然一般用户看不出来，但这应该是基本的设计规范吧？

对比一下，京东的边距就整齐多了：

四、梦回上个世纪的消息通知 淘宝首页这个消息通知我很想吐槽，等了好几条，几乎没有一条能引起普通消费者的兴趣。

京东也做了消息通知，虽然字显示不全也不滚动，但好歹内容稍微有用了一点：

五、不登录看不了商品 前面也说过了，虽然淘宝能够直接搜索，但是即便搜到了，也必须登录后才能查看。 刚有点兴趣，还没确认要买就把人拦下，这显然不明智：

对比一下，京东会等到用户决定要买的事后，再提醒登录：

六、内容太少 往下一翻，淘宝 banner 下面只有一个模块，还都是猜不准的猜你喜欢：

京东的模块就丰富多了：

七、为啥淘宝在网页端摆烂？ 以我自己在大厂工作过的经验来说，造成这个现象的原因，十有八九是网页端数据占比太低，团队不重视。

就算以目前这个状态，淘宝网页端的访问量都未必比京东网页端低。

淘宝如果愿意把网页端稍微捯饬一下，数据量肯定能明显超过京东网页端。

但淘宝手机端太赚钱了，所有资源都倾斜过去，其它端的资源还不如二线厂商。

大厂的资源分配的马太效应比很多人以为的更加严重。

凡有的，还要加倍给他，叫他多余；没有的，连他所有的也要夺过来

圣经《新约·马太福音》

可让网页端这样摆烂多少也是个隐患不是？

这么看还是拼多多聪明，既然懒得管网页端，就干脆不做了：

欢迎关注作者的微信公众号：「体验进阶」