首页

ISUX「七月」行业设计趋势速递

清阳 行业趋势

image.png

【1】随着iOS26发布,部分设计软件陆续在增加玻璃材质能力

【2】IF发布《2025年iF设计趋势报告》

【3】小米AI眼镜上线

【4】苹果iOS26 Beta3发布,液态玻璃效果回退

【5】Figma支持Liquid glass

【6】Figma Make AI 功能正式上线,面向所有用户开放

【7】腾讯开源混元模型 1.0,一键生成可漫游的 3D 虚拟场景

【8】 Luma AI 新增指令修改,视频编辑流程更快捷

1. 随着iOS26发布,部分设计软件陆续在增加玻璃材质能力

 

sketch beta版已加入液体玻璃效果,可以自定义相关的参数。

 

image.png

图片来自:sketch beta版

 

Figma也支持液态玻璃效果。

 

image.png

图片来自:figma软件

 

 

2.IF发布《2025年iF设计趋势报告》,报告将助力设计师深入理解未来变革性趋势

 

F 设计趋势报告 2025 是一本强调“设计介入社会系统”的指南。在面对数字化、生态危机、价值观重塑等全球议题时,设计不再是表层的装饰性行业,而是推动制度革新、关系重建和认知转变的战略工具。这份报告提供了:方向性判断、策略设计灵感、对未来的责任感与使命感。

 

image.png

图片来自: 《2025年iF设计趋势报告》

 

今年的《iF Design 趋势报告》聚焦于我们社会的六大主要转变:

1、CONSCIOUS ECONOMY 有意识的经济

2、HUMAN DIGITALITY人类数字化

3、CO-SOCIETY 共生社会

4、MINDSHIFT REVOLUTION思维转变革命

5、ECO TRANSITION 生态转型

6、GLOCALIZATION 全球本土化

 

CONSCIOUS ECONOMY 有意识的经济

现在消费者买的不只是价格,更看重企业对顾客的关心、后续服务和有没有社会担当。所以未来产品要和服务绑得更紧,靠贴心体验传递企业价值。企业得把战略重心从“卖东西”转到“顾人”上,在服务中既用技术解决问题,又满足人的情感需求,这样才能做出真正有温度的服务。

如:这家新成立的足球人才经纪公司的品牌形象深受年轻足球运动员的喜爱,并充分体现了其对球员需求以及体育产业的深刻理解。其企业设计以目标群体的语言进行表达,迎合了他们大胆、充满活力的天性。该设计注重在场上和场下创造空间的理念,象征着球员在职业生涯和生活中所面临的全新机遇。

 

image.png

图片来自: 《2025年iF设计趋势报告》

 

HUMAN DIGITALITY 人类数字化

随着技术的发展,现在的产品和AI交互太复杂了,过去光追求“简单”已经不够用了,得用“好玩有趣”的设计来化解复杂,让大家用得更开心、更愿意用!

 

AI伴侣(如陪伴机器人Ballie)通过人工共情提升用户体验。

如:伊库雷是个专门帮助自闭症孩子练社交的智能机器人。它能懂得每个孩子不同的情绪和反应方式,用AR投影和感应装备陪孩子玩,实时回应动作,在一个安全舒服的环境里帮他们练习。帮助这些孩子建立情感共鸣,增强他们的自我意识和表达能力。

 

image.png

图片来自: 《2025年iF设计趋势报告》

 

CO-SOCIETY 共生社会

繁荣需纳入个体生活质量、社会参与和生态可持续性,产品和服务不再只有实际用途,更承载了情感体验和价值理念,

如:这款科勒 x Remedy Place 联名冰浴桶将醒目设计、优化人机工学和智能科技(Kohler Konnect®)融为一体,提供可定制的冷水浸泡疗程,不仅兑现减少炎症、提升情绪和增强心理韧性的健康承诺,更成为展现优雅健康生活的标志性设计。

 

image.png

图片来自: 《2025年iF设计趋势报告》

 

MINDSHIFT REVOLUTION 思维转变革命

设计需打破刻板印象,践行无性别理念,摒弃性别标签;同时,更应关注心理健康,营造治愈性沉浸环境,缓解社会疏离感

如:德乌特儿童安抚背带Aircomfort Sensic Vario Netzrucken 系统为家庭徒步旅行提供了极大的便利,它在小巧的儿童背带中实现了出色的负荷分配和背部通风。该系统为父母和孩子都提供了舒适的体验,配有柔软的儿童头部垫和方便的安全带操作装置。

 

image.png

图片来自: 《2025年iF设计趋势报告》

 

ECO TRANSITION 生态转型

生态转型(循环社会+绿色科技+能源革命)正重塑全球发展路径。可持续设计作为关键响应,以智能循环、融入生物多样性为方法,重构“人-自然共生”系统,营造支持性环境与独特生态美学。

 

如:戴尔笔记本电脑套装倡议戴尔笔记本电脑多包装计划旨在重新设计现有的包装,拆箱过程节省了 60% 的时间。经过全面且反复的工程优化,与单个包装相比,每单位包装材料的重量减少了 38%,从而打造出更小巧、更环保、更具用户友好性的设计。

 

image.png

图片来自: 《2025年iF设计趋势报告》

 

GLOCALIZATION 全球本土化

未来的设计需要在全球视野下,在文化层面融入本土特色,实现有共鸣的文化交流,促进全球本土化如:滴滴的多元国际业务需要在多个国家和市场中为用户提供一致且高效的体验,为此打造Global One弹性化设计系统,以灵活、可拓展和在地适配的特性满足全球业务需求,在保障品牌一致性的前提下助力各国市场快速响应本土化需求。

 

image.png

图片来自: 《2025年iF设计趋势报告》

 

 

3.小米AI眼镜上线

 

过去两年,AI热潮席卷智能硬件领域,从手机到PC,各类终端纷纷拥抱AI重塑自我。沉寂已久的智能眼镜赛道也随之迎来爆发:Ray-Ban Meta联手AI注入新活力后,Rokid、雷鸟、李未可等国产厂商相继推出形态功能各异的新品。  纵观AI硬件,特别是以智能眼镜复兴为代表的发展态势,一个核心趋势已然显现:设备体验正经历从“智能化”向“无感化”的深刻转型。 

 

image.png

图片来自: 小米官网

 

 

4.苹果iOS26 Beta 3 发布,液态玻璃效果回退

 

在Beta3版本,将原来激进的高拟真液态玻璃效果,回退至雾面毛玻璃+渐变的形式,显著提升了文字可读性。

 

image.png

▲ 左:iOS 26 Beta 2 / 右:iOS 26 Beta 3 

来源:https://www.ifanr.com/1630100

 

 

5.Figma原生支持Liquid glass

 

image.png

 

图片来自:Figma官网

 

image.png

 

图片来自:X官网

 

继 Sketch 和 Motif 之后,Figma 原生也支持iOS 26 的液态玻璃(Liquid glass)效果。设计师可在 Figma 中直接应用该效果。用户可以灵活在工具栏中调节材质和效果。

https://x.com/i/status/1945513823949222239 

 

 

6.Figma Make AI 功能正式上线,面向所有用户开放

 

设计平台 Figma 正式向所有用户开放其 AI 工具 Figma Make。用户只需输入需求,即可自动生成网页原型、交互逻辑甚至基础应用框架。此前仅限付费用户使用的功能,现已全面开放。

网址:https://www.figma.com/make/ 

 

image.png


image.png

image.png

图片来自:Figma官网

image.png

图片来自:Figma官网

 

image.png

图片来自:Figma官网

 

颠覆传统设计流程的三大核心能力

1. 文字驱动创作

无需编写 CSS 代码,输入指令如“创建带邮箱/密码字段的登录页”,AI 即刻生成高保真界面及可点击交互元素。设计构想从概念到屏幕呈现的链路被大幅压缩,省去重复搭建画布的时间成本。

 

image.png

图片来自:Figma官网

 

image.png

图片来自:Figma官网

 

2. 视觉素材智能转化

支持上传 Logo、插画或照片,AI 自动解析视觉风格与布局结构,将其转化为可复用组件或页面背景。该功能打通“视觉稿→可交互原型”的转化路径,尤其适用于品牌宣传与内容营销场景。

 

image.png

图片来自:Figma官网

 

3. 现有设计深度增强

将 Figma 设计文件中的 Frame 直接导入 Make,AI 会智能补全交互逻辑与布局细节。在保留原始设计的基础上,快速实现原型功能升级,显著提升产出效率。

 

进阶能力:从设计到上线的闭环

4.实时发布可访问应用

生成的原型并非静态稿,可一键发布为真实可访问的 Web 应用。用户可通过 Figma Make 预览页面,或部署至自定义域名。

 

5.集成 Supabase 后端服务

内置用户认证、数据库等后端能力,结合自定义域名功能,实现“设计-开发-部署”全流程贯通。

 

6.对话式实时微调

选中特定元素(如按钮)后,通过自然语言指令调整细节:“添加紫色渐变效果”“增加悬停动效”。AI 即时响应修改需求,使原型优化更精准高效。

 

工具价值与适用场景

Figma Make 重新定义了设计生产力:通过融合文字指令、视觉识别与智能增强,将静态设计转化为可运行原型,并直接对接发布流程。

 

其价值在于:

a.消除设计师与开发者之间的协作断层

b.释放创意人员对技术实现的依赖

c.加速从概念到可体验产品的转化周期

适用群体:产品经理、UI/UX 设计师、初创团队及任何需要快速验证想法的创作者。建议即刻体验,抢占AI驱动的产品开发效率先机。

 

 

7.腾讯开源混元模型 1.0,一键生成可漫游的 3D 虚拟场景

 

在2024世界人工智能大会上,腾讯正式发布并开源 混元3D世界模型1.0(HunyuanWorld 1.0)。该模型支持通过文本或单张图片输入,一键生成具备360°自由漫游能力的3D虚拟场景,生成内容可导出编辑。其创新性语义分层算法兼容Unity等主流开发工具,实测性能超越全球开源对标模型,将推动游戏开发、VR应用及数字创作领域的技术革新。

网址:https://3d.hunyuan.tencent.com/sceneTo3D 

 

效果展示unsetunset

一些HunyuanWorld 1.0生成的360°沉浸式、可探索3D世界:

 

image.png

图片来自:混元官网

image.png

图片来自:混元官网

 

技术突破:解决三维生成核心痛点

1.当前3D世界生成技术存在两大局限:

视频驱动方案:场景多样性丰富但缺乏三维一致性,渲染效率低下

几何驱动方案:结构稳定性强却受限于训练数据匮乏与内存效率瓶颈

 

2.HunyuanWorld 1.0通过融合双方优势实现突破性创新:

全景世界代理技术:以360°全景图为媒介构建沉浸式空间

网格化资产输出:生成标准3D网格模型,无缝对接图形管线

解耦式物体表征:增强场景元素的可交互性与编辑自由度

 

 

8. Luma AI 新增指令修改,视频编辑流程更快捷

 

Luma AI 近日为其视频生成平台 Dream Machine 上线自然语言指令编辑功能。用户通过输入文本指令(如“调整黄昏色调”“替换背景建筑”),即可动态修改视频中的色彩、场景元素及视觉特效,编辑效率提升显著。该功能将大幅优化视觉特效师、动态设计师等创意工作者的工作流。网址:https://lumalabs.ai/ 

 

image.png

图片来自:luma ai官网

 

image.png

图片来自:luma ai官网

image.png

 
 

▲视频来自:luma ai官网

 

image.png

图片来自:luma ai官网

 

image.png

图片来自:luma ai官网

 

核心能力与技术进展

1. 语言驱动实时编辑

支持颜色分级、物体替换、场景重构等高频需求

修改指令即时响应,避免传统逐帧操作

 

2. 持续迭代的路线图

正解除当前仅限首帧修改的限制

即将推出全时间轴的帧级精确控制功能此次升级标志着AI视频编辑从生成向智能精修进化,通过降低专业技术门槛释放创意潜能。影视后期、广告创意及短视频创作领域将率先受益。

转自:腾讯ISUX

毛玻璃质感应用在复杂页面,居然也这么优雅!

清阳 系统UI设计文章及欣赏

一直以来复杂的工业页面或者dashboard,都会采用比较简洁的UI效果,很少会增加一些质感。毕竟这类页面的设计重点是突出信息。但是来自RonDesignLab 的设计,给我们打开了新的思路。

 

其实毛玻璃本身也是一种突出信息的手法,只是大部分情况下使用来突出氛围信息。但如果把浮窗也做成毛玻璃的效果,其实在整体信息分级上会有更显著的效果。

 

让我们一起来欣赏一下吧~

image.png

image.png

image.png

image.png

image.png

image.png

All by @RonDesignLab 

转载:UX设计便利店

6种设计手法!打破枯燥!

清阳 平面设计

ca6db6f6948cf73f6787cae4e9c54f8e.jpg

29aeda2049db37d1c99d42bcdc784f31.jpg

307da22e0fc9dfcb1874e2752e71a19c.jpg

7131eb0f2dc6ced271faf269d149739a.jpg

ee7c296f9bf0dce829531241b2866568.jpg

921d44b2b694deeddda191085e9b4009.jpg

转载:微信公众号平面设计

干货来了!40个界面设计经典技巧!(下)

清阳

21 让界面平滑显示而不要死板地呈现

用户进行操作过程中,界面上的元素会经常出现,隐藏,打开,关闭,放大缩小移位等。给这些元素增加些自然的动画,淡入淡出效果不但美观,也更符合实际,本来元素尺寸位置的变化就是一个需要时间的动画过程。但要注意动画时间不要设置过长,那样会让想尽快完成操作的用户不耐烦。

image.png

22 循序渐进的引导而不要直接让用户注册

与其让用户马上注册,何不让用户先进行一些体验式的操作呢。这个体验过程可以展示程序的功能,特性等。一旦用户通过简单几步的操作了解了程序的价值所在,那么它会更愿意填写注册表单的。这种循序渐进的引导可以尽量推迟用户注册的时间但又可以让用户在没注册的情况下进行个性化设置等简单操作。

image.png

23 过多边框会让界面四分五裂

过多边框会喧宾夺主。不用说,边框确实在划分区域进行版块设置时有很大的作用,但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的,在排版时可以将界面上不同区域的元素通过空白进行分组,用上不同的背景色,将文字对齐方式进行统一,还有就是为不同区域设置不同的样式。当使用所见即所得的界面设计工具时,我们经常在界面上方便地拖出很多区块来,这些区块多了就会显得杂乱无章。所以我们又会到处放些横线来分界。一个更好的做法是将区块垂直对齐,这样做不会让那些多余的线条来扰乱视觉。

image.png

 

24 展示产品带来的好处而不要罗列产品特性

市场就是这样的,用户永远只关心自身利益而产品特性对他们来说倒不是那么重要。只有利益才更直观地体现出使用产品所带来的价值。Chris Guillebeau在他的著作《100美元起家》中指出,相比压力,冲突,烦心事和未知的未来,人们在乎得更多的是爱,金钱,认同感和自由支配的空闲时间。所以我相信在展示产品特性时回归到利益上是必要的。

image.png

 

25 考虑零数据的情况

界面上经常需要呈现不同数量的数据,从0,1,10,100到10000+等。这里存在个普遍的问题就是:在程序最开始使用的0条数据到过度到有数据之前,该如何进行显示界面。这也是我们经常忽视了的地方。当程序初始没有数据时,用户看到的就是一片空白,此时用户可能不知道该进行哪些操作。利用好没有数据的初始界面可以让用户学习和熟悉如何使用程序,在程序中创建数据。力臻完美永远是我们追求的目标,界面设计也不例外。

image.png

 

26 默认将用户引入

将界面做成默认用户选中想要使用你的产品,意味着如果用户真的需要使用,那么可以直接点击确定而不需要额外点选了。当然,也有另一种做法就是默认不选中服务,用户需要的话可以手动点选。前者这种设计更好的原因有两点。一是用户不需要额外点选,非常省事,因为默认设置为用户需要我们的产品或服务。二是这种做法某种程度上是在向用户推荐产品,暗示了其他人都选择了我们。当然,将界面设计成默认选择的样子多少存在点争议,有点强迫用户的感觉。如果你想道德一点,你可以要么把让用户选择的文字写得模棱两可,要么使用双重否定这样不那么直白的描述,这两种方式都可以让用户觉得没有那么强的感觉是被强迫选择使用产品的。

image.png

 

27 界面设计得一致,不要增加用户的学习成本

自从Donald Norman的一系列著作面世后,界面设计中尽量保持一致性成了一个普遍遵循的准则。在设计中保持一致性可以减少用户的学习成本,用户不需要学习新的操作。当我们点击按钮,或者进行拖拽操作,我们期望这样的操作在整个程序的各个界面都是一致的,会得到相似的结果出来。反之我们需要新情境下重新学习某种操作会产生何种结果。可以在很多方面下功夫来实现一个一致的界面,包括颜色,方向,元素的表现形式,位置,大小,形状等。不过在让界面变得一致之前,记住一点,适当的打破整体的一致性也是可取的。这偶尔的不一致性的设计用在你需要强调的地方可以起到很大的作用。所以世事无绝对,我们应遵从一致的设计准则,但适当地打破这种常规。

image.png

 

28 使用较贴切的默认值会减少操作

适当的默认值和预先填充好的表单字段可以大量减少用户的工作量。在节省用户宝贵的时间上面,这是种非常常见的做法,可以帮助用户快速填完表单或者注册信息。

image.png

 

29 遵从一些约定而不要去重新设计

界面设计中遵从约定的准则跟之前的界面一致性准则很相似。如果我们遵从了界面设计中的一些约定,用户用起来会很方便。相反,不一致和没有遵从约定的设计则会提高学习成本。有了界面设计中这些约定,我们想都不用想就知道界面右上角(大多数情况下)的叉叉是关闭程序用的,或者点击一个按钮后我们能够预测到将会发生什么。当然,约定是会过时的,随着时间的推移,同样的操作也有可能被赋予新的含义。但要记住,当你在界面中打破这些常规时一定要目的明确,并且出发点是好的。

image.png

 

30 让用户觉得可以避免失去而不是获得

我们喜欢成功,没有谁愿意失败。根据心理学得到的可靠结论,人们一般更顷向于避免失去拥有的东西而不是获得新的利益。这一结论也适用于产品的设计和推广中。试着说明你的产品会帮助客户维护他的利益,保持健康,社会地位等要好过告诉客户这个产品会带来一些他未曾拥有的东西。比如保险公司,它是在销售我们出事之后可以得到的大笔赔偿呢还是在强调可以帮助我们避免失去拥有的财产?

image.png

 

31 具有层次的图形化展示优于直白的文字描述

具有层次的设计可以将界面上重要的部分与不次要部分区分开来。要让界面层次分明,可以在这些方面做文章:对齐方式,间距,颜色,缩进,字体大小,元素尺寸等。当所有这些调整运用得适当时,可以提高整个界面的可读性。相比在一个很直白的界面上用户一眼就可以从上瞟到底的设计,这样分明的设计也可以让用户放慢速度来慢慢阅读。这样也使界面更有特色一些。就好比一次旅行,你可以乘坐高铁快速到达景区(从页面顶部瞟到底部),但你也可以慢行以欣赏沿途风光。所以层次分明的设计让眼睛有可以停留的地方,而不是对着空白单调的一个屏幕。

image.png

32 将有关联的功能分组而不是杂乱无章

将各个功能项分组合并起来可以提高程序的可用性。有点常识的人都知道刀子和叉子,或者打开文件和关闭文件是放在一起的。将功能相近的元素放在一起也符合逻辑,符合我们平时的认知。

image.png

 

33 使用内联的验证消息而不是提交后再验证

在处理表单时,最好立即检测出用户所填写内容是否符合要求然后给出验证消息。这样错误一出现能就能得到改正。相反,提交后再检查表单会给出错误消息,会让用户感到乏力又要重复之前的工作。

image.png

34 放宽对用户输入的要求

对用户输入的数据,尽量放宽限制,包括格式,大小写什么的。这样做可以更人性化一点,也使得界面更加友好。一个再恬当不过的例子就是让用户输入电话号码的时候,用户有很多种输入方式,带括号的,带破折号的,带空格的,带区号和不带区号的等等。如果你在代码中来处理这些格式的问题,代价也只是你一个人多写几行代码而以,却可以减少无数用户的工作量。

image.png

35 让用户感觉需要快速做出响应而不是毫无时间观念

适当的紧迫感是个有效的战术可以让用户立即做出决定而不是等上个十天半个月。重要的是这种战术屡试不爽,因为它暗示了资源的紧缺或者活动的时间有限,今天可以买,但明天可能就无法这么低价了。另一方面,这一战术也让用户感到会错失一次大好的机会,再一次,应用了人们害怕失去的本性。当然,这种战术会被一些人嗤之以鼻,认为是不耿直的做法。不过,这只是种战术而以,并且在保持合法性的前提下应用也无伤大雅。所以请不要为了营销而在界面上制造紧迫的假象。

image.png

 

36 使用饥饿营销

物以稀为贵。饥饿营销给出的信息就是东西不多,只剩几件,明天再来,可能没了。你去比较一下批发与限量版的东西他们的价格差距有多大就知道了。回过头来看,那些批发商或者大零售商,他们也使用饥饿营销,以获得更好的销量。但在软件行业,我们经常会忘记有饥饿营销这回事。因为数字产品是可以很容易拷贝复制的,不存在缺货的情况。其实,在界面设计中,也可以将其运用起来与现实中的资源紧缺进行联系。想想一次网上研讨会的门票,想想你一个月可以服务的人数限制,这些信息都可以告知用户是有限的。

image.png

 

37 让用户选择而不是重新填写

这一界面设计中的经典准则是有心理学依据的,相比要让某人回想想某样东西,从一堆东西中认出某样东西会更容易些。辨识出一样东西只需要我们稍微回忆一下,通过一些线索就可以完成。而回想则需要我们全面搜索自己的大脑。也许这也是为什么试卷上选择题会比简答题做得快的原因。所以试着在界面上展示一些用户之前涉及到的信息让他们进行选择,而不是让他们想半天然后自己填写。

image.png

38 让点击更轻松

像链接,表单的输入框还有按钮等,如果尺寸做得大一点则点击起来更方便容易些。根据费特定律,使用像鼠标这样的外设来点击需要一些时间,特别是元素比较小的情况下,时间会更多。鉴于此,最好还是把你的表单输入框,按钮等做大点。抑或者你可以保持原有的设计不变,只是把元素可点击区域(也就是热区)增大。这样的一个典型例子是手机设备上的文本链接和导航菜单,它们文字不一定很大但背景是拉伸的,在很宽范围内点击都有效。

image.png

 

39 优化页面加载速度,不要让用户等太久

速度很重要。页面加载速度和UI对操作的响应速度都直接关系到用户是否有耐心继续等下去。无疑地每多一秒种的等待都会失去一些用户或者项目机会。一个好的解决之道当然就是优化你的页面和图片。除此之外还可以运用心理学让这个等待时间显得不那么长。具体来说有两种技巧。一是显示进度条,二是展示其他相关或有趣的东西来吸引用户的注意力(就好比你沿着传送带走走总比傻站在原地盯着一个位置看要好得多吧)。

image.png

40 除了按扭外,快捷键也必不可少

当你的程序广为流传,应该考虑下高级用户的感受。人们总是试图为一些重复性的操作找到更快捷的方法,快捷键就应运而生了。相比在界面上点来点去,快捷键无疑大大提高工作效率。一个好的例子就是现今流行于各个主流程序中的J(后退)K(前进)快捷键组合,比如在Gmail,Twitter和Tumblr中。按钮固然好,但快捷键会锦上添花。

image.png

转载:微信公众号UI设计

干货来了!40个界面设计经典技巧!(上)

清阳

1 尽量使用单列而不是多列布局

单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮。

image.png

 

2 放出礼品往往更具诱惑力

给用户一份精美小礼品这样的友好举动再好不过了。具体来讲,送出礼品也是之有效的获得客户忠诚度的战术,这是建立在人们互惠准则上的。而这样做所带来的好处也是显而易见的,会让你在往后的活动进展(不管是推销,产品更新还是再次搞活动)中更加顺利。

image.png

 

3 合并重复的功能而使界面简洁

在整个产品开发期间我们会有意无意地创建很多模块,版面或者元素,而它们的功能可能有些是重叠的。此种情况表明界面已经过度设计了。时刻警惕这些冗余的功能模块,它无用且降低了电脑性能。此外,界面上模块越多,用户的学习成本就越大。所以请考虑重构你的界面使它足够精简。

image.png

 

4 客户的评价好过自吹自擂

在获得项目机会或提高项目转化率时客户的好评是一种极为有效的手段。当潜在客户看到其他人对你的服务给予好评时,项目机会会大增。所以试着提供一些含金量高的证据证明这些好评是真实可信的。

image.png

 

5 频繁展示你的主旨来加深印象

多次重复主旨口号这种方法适用于界面很长或者分页的情况。首先你肯定不想满屏刷出相同的信息,这样会让人生厌。但当页面足够长的时候这些重复就显示自然多了并且也不显得拥挤。所在在页面顶部放一个按钮然后在页面底部再适当放个突出的按钮的做法没有什么不妥。这样当用户到达页面底部在思考接下来该做什么的时候,你提供的按钮就可以获得一个潜在的合同或者即使用户不需要你的服务这个按钮也可以起到过滤的作用。

image.png

 

6 将选项与按钮区分开来

诸如颜色,层次及模块间的对比这些视觉上的设计可以很好地帮助用户使用产品:他时刻知道当前所处的页面以及可以转到哪些页面。要传达这样一个好的界面,你就需要将可点击的元素(比如连接,按钮),可选择的元素(比如单选多选框)以及普通的文字明显区分开来。在下图的例子中,我将点击操作的元素设置为蓝色,选中的当前元素为黑色。这样适当的设计可以让用户很方面地在产品的各模块间切换。但千万不要把这三种元素设计得混乱不堪。

image.png

 

7 给出推荐而不是让用户来选择

当展示许多项服务时,给出一个重磅的推荐项是个不错的做法,尽管推荐的设置无法满足所有用户。这么做是有理论依据的,一些研究已经揭示了这么一种现象:当面临的选择越多时,用户就越难做出决定。所以你可以高亮某个选项来帮助用户做出选择。

image.png

 

8 给出撤销操作来代替确定操作

假设你刚点击了一个连接或者按钮,撤销操作可以让操作流畅自然,这也符合人类的本能。而每次操作都弹一个确定框则好像是在质问用户你明白不明白这个操作会产生什么后果。我还是更习惯假设用户每次操作都是正确的,其实只有极少数情况下才会发生误操作。所以,为了防止误操作而设计的确认窗口其实是不人性化的,用户每次操作都需要进行毫无意义的确定。所以请考虑在你的产品里实现撤销操作来增加用户的操作友好度吧。

image.png

 

9 指出产品适用人群而不是做成全年龄

你是想把产品做成大众化的呢还是有精确的适用人群?在产品定位上你需要更精确些。通过不断了解目标客户的需求及标准,你能把产品做得更好得到更多与客户交流的机会,并且让客户觉得你很专业,在这方面是独家提供的优质服务。把产品定位得精确的风险就是可能缩小了目标潜在客户的范围,也使自身变得不那么全能。但这种做得更专业的精神却反过来会赢得信任,权威。

(贴士:喜欢下图中可爱的小人物造型么?去了解MicroPersonas吧)

image.png

 

10 试着直接果断而不要唯唯诺诺

你可以通过不确定而颤抖的声音来表达传递自己的意思,当然也可以通过很自信的方式表达。如果你在界面中的表述用语多以问号结束,比如"也许","可能","感兴趣?" 或者"想要试试么?",那么你完全还可以把语气变得更坚定一些。不过万事无绝对,或许适当放松措词让用户有自行思考的余地也是可以的。

image.png

 

11 界面要有鲜明对比让人容易区分

把主要功能区从界面中突出显示出来效果会好很多。使你的主要口号醒目有很多种方法。通过明暗色调的对比来突显。通过为元素添加阴影渐变等效果让界面富有层次感来张显主题。最后,你甚至可以在色相环上专门选择互补色(比如黄色与紫色)来设计你的界面,以达到突出重心的目的。综合所有这些,最后得到的界面会使你的主要意图与界面其他元素有明显的区分,得到完美的呈现。

image.png

 

12 指明产地

指明你的地区,所提供的服务,产品来自哪里意义重大,同时也将与客户的沟通引入了一个更具体带有地域特色的场景中。指出具体来自哪里,国家,省分及城市,也是一种在进行自我介绍或产品展示时被常常提及的。当你在界面设计中实现这点时,让人觉得非常友好。同时指明区域也会隐形提高产品的声誉,好上加好。

image.png

 

13 精简表单内容

人生性就懒惰,在填写表单时也是同样的道理,没人愿意填写一大堆表单字段。表单中每个字段都会有失去用户的风险。不是每个人打字都很快速的,并且在移动设备上进行输入更是相当麻烦的事情。问下自己表单中是不是每个字段都必需,然后尽量减少表单中的字段。如果你确实需要一大堆信息让用户填写,试着将它们分散在不同页面,在表单提交后还可以继续补充。过多字段很容易让整个表单显示臃肿,当然想简洁也很容易,只放少数字段。

image.png

 

14 暴露选项而不要将操作隐藏

你使用的任何一个下拉框都会对用户造成信息的隐藏而需要额外的操作才能显示。如果这些信息是贯穿整个操作所必需的,那你最好把它展示出来做得更显而易见一点。下拉框最好用在选择日期,省份等约定俗成的地方。对于程序中重要的选项最好还是不要做成下拉形式。

image.png

 

15 把界面做得环环相扣要好过直白的排版

一个平淡无奇行文无疑会让用户失去兴趣而继续阅读。是的,单列滚动的长页面是不错的,但是我们应该适当地设置一些小节,并且环环相扣,来提高用户的兴趣使其继续阅读。但需要注意的是节与节之间的留白不要太大。

image.png

 

16 不要放太多链接分散用户注意力

为了满足各式用户的需求,在页面上放些链接链到这里链到那里是常见的做法。如果你的主要目的是想让用户点击页面最后那个下载按扭什么的话,就需要三思了。因为用户可能点击了其他链接离开页面了。所以你需要注意页面的链接数量,最好将用于导航与用于操作的链接用样式区分开。尽量移除页面不需要的链接会让用户点击到你的功能按钮。

image.png

 

17 将操作的状态或者进度呈现出来

现如今大多界面当中已经呈现了各色样式的进度条或者标明状态的图标,比如邮件有已读或未读的状态,电子帐单有支付或未支付的状态。而在界面上呈现这样的状态对于用户来说是很有必要的。这样用户就可以知道某些操作是否成功,接下来准备进行怎样的操作。

image.png

 

18 不要让用户觉得是在完成任务

试想界面上有这样两个按钮:一个是"获取折扣",另一个是"立即注册"。我敢打赌大多数人会点击第一个,因为第二个按扭让人感觉不到有利可图,并且"注册"让人联想到填不完的表单。也就是说让用户感受到获利的按钮更有可能被点击。这种让用户感到好处的文字信息也可放在按钮旁边,不一定要做为按钮的标题。当然,正常的按钮还是有用处的,一般用于重复性操作频繁的地方。

image.png

 

19 让操作直观而不是让人觉得找不到上下文

不用说直接在元素身上进行操作是更直观明了的方式。比如在一个列表中,我们想让用户对每个条目进行操作那么就把按钮放到当前条目上,而不要把放到列表之外。再比如就是直接点击元素就进入编辑状态(比如页面上的地址信息点击后可以进行编辑)。这种方式比传统的选中再点击相应的按钮进行操作要简洁省事得多。当然,对于一般性的操作本身就不需要有什么上下文的,就没必要这么做了,比如页面上的前进,后退按扭。

image.png

20 尽量显示全部内容而不要额外页面

在一个足够大的宽屏界面上最好还是直接给出表单,这比点击按钮再弹出表单要好很多。首先减少了点击操作,流程变得简洁也节省了时间。其次,直接呈现出表单可以让用户知道表单有多长,其实也是在告诉用户注册花不了多少时间。当然,这条规则适合注册表单非常简单的情况。

image.png

转载:微信公众号UI设计

小小button,大大力量!快来看看UI里的button都有哪些玩法~

清阳

在 UI 设计中,button 有多种设计形式。组合形式可以多种多样,比如纯文字button、图标+文字button、图标button、幽灵框button等等。在各种设计规范里都可以获得一个比较完整的全集。

 

image.png

作者 Lisa Cosme

image.png

作者 Pixsellz

除了组合形式,最能让button设计出彩的还是材质和风格。扁平风格简洁明了,以纯色或简洁的图标为主,适合现代简约的界面。拟物风格则模拟现实中的按钮,具有立体感和真实质感,能增加用户的熟悉感。幽灵按钮以透明或弱轮廓呈现,简洁而不突兀,与背景融合较好。还有带有动态效果的按钮,如点击时的变色、缩放等,增强交互性。此外,异形按钮可根据特定主题设计独特形状,为界面增添个性与创意。

下面来看一些好看的button设计。

image.png

作者 Aaron Iker

 

image.png

作者 Aaron Iker

image.png

作者Aaron Iker

image.png

作者Buzuk

image.png

作者 Gleb Kuznetsov

image.png

作者 Max Rudberg

你最常用和最喜欢的button,都是样的呢?

转载:UX设计便利店

B端要吃透系列:京东设计师探索高效交互模式,让我打开新思路了

清阳

我们常以“ 心有灵犀 ”来形容与合作伙伴的默契配合,若我们的产品能与用户达到同样的默契,将极大地提升用户在任务旅程中的流畅体验。

 

image.png

 

 

在B端体验设计领域,我们深知用户对我们产品的期待──快速完成任务、即用即走。

 

然而,随着业务需求和产品功能的不断扩展,流程复杂化、功能冗余、信息过载和引导不足等问题逐渐浮现,这不仅增加了新用户的学习成本,也使得老用户丧失了使用产品时的专注和效率。

 

为应对这些挑战,在早期版本升级时我们提出了“高效、亲和”的设计理念(《京东行云3.0|B端产研协作工具体验升级的思考与实践》 )。
并致力于通过设计手段减少用户在使用产品时的学习成本和操作负担,旨在打造一个流畅、愉悦的体验环境,让用户每次使用都能保持轻松愉悦的工作状态。
同时,我们也积极践行集团倡导的 “ 简单、顺滑、激发 ” 产品设计理念,通过在交互设计、业务组件等多个层面进行来深入优化和改进,以达到产品与用户之间的"心有灵犀",让用户在使用过程中更加的得心应手、更加快速高效的触达并完成任务。

 

 一  探索顺滑、高效的交互模式 
通常来说一个顺滑的交互对产品的体验提升的是非常大的,它允许用户以直观的方式理解产品的操作含义,在不依赖帮助文档的情况下,也能轻松完成各项任务。
这种设计理念不仅提升了用户体验,也确保了产品的高效率和便捷性,能够使用户迅速投入并快速完成工作,实现了真正的“即用即走”。
(1) 数字键盘,让数据录入更简单、更高效
相信很多产品设计人员都清楚选择录入的优势远大于手动录入。
在此之前,我们的工时填报页面,由于可输入信息精确到小数点后两位,所以我们常用的计步器、选择器、滑动输入等组件都无法在这里使用。对用户而言,手动逐项录入数据的操作成本非常高。

在业务改版时,我们的体验设计师了解到旧版页面信息录入成本过高的问题,于是提出了数字键盘录入数据的方案「用户在原本手动录入数据的基础上,增加选择录入数据的能力,以此降低用户录入数据的操作负担」。

 

image.png

  • 作为数据录入的组件,数字键盘适用于简短且整数的特殊场景下,如:数字录入、百分比录入。备选的数据信息以宫格布局呈现,用户可以快速点击数字键盘中需要填入的数字。相比下拉菜单和上下箭头数字输入框相比,更直观,易用性更强。
  • 对于擅长键盘盲打的研发工程师类角色来说,仍然可以通过物理键盘录入数据;而对于不太熟练操作键盘的大多数用户来说,可以通过直观的数字键盘点选录入数据。数字键盘组件甚至还能帮助用户自动计算已填数据,实现一键补全。

image.png

  • 数字键盘作为一种兼具选择录入便捷性和手动输入灵活性的数据录入组件,为不同类型的用户提供了高效、准确的数据录入体验,不仅提升了数据输入的便捷性和准确性,而且通过适应不同用户的操作习惯,增强了产品的普适性和用户满意度。
    继而我们也将数字键盘组件在其他使用场景进行了拓展,比如,其他场景下数字键盘上集成了手动录入的输入框,备选数据可以根据用户设置的起止日期进行自动计算,不仅帮助用户减轻了操作难度也极大节省了用户的时间成本。
数字键盘经过不断的拓展与优化,已经成为用户在多种场景下进行数据录入的利器。
在未来,我们将持续关注并探索数据录入交互方式的优化与改进,致力于进一步优化信息录入的体验,如当下火爆的AI,来实现更加智能和自动化的输入解决方案,从而最大程度上让用户与产品交互默契、事半功倍。
(2) 在关键节点设置任务提示卡,给予用户即时指引
很多大型B端产品的详情页在成熟期后都会面临信息内容多、分类复杂的问题,这导致用户需要滚动多屏或者切换tab页签去查找信息,即便产品设计团队已经花了不少心血将信息布局做了优化和重组,但也难以避免有些用户查找关键信息费时费力,不清楚应该在页面哪一块进行哪些操作。
虽然IM、邮件等工具可以一定程度上解决信息的触达,但用户从其他平台点击网址链接跳转到产品详情页后依然会面临缺少明确的指引问题。

image.png

  • 针对以上用户使用中的痛点,我们在页面中关键区域设置了一系列操作指引性的任务提示卡片,并在卡片上设置明确的引导文案及操作按钮,以减少用户因不熟悉产品功能或者页面信息过多而找不到操作入口的问题;
    引导用户点击“去完成”、“去操作”等操作按钮直接跳转至应该操作内容模块或相应页面去完成应该完成的操作,这样就使得不同用户在不同环节完成相应的任务,保证流程顺畅的走下去。

image.png

  • 任务提示卡作为一类高效的即时指引工具,已在多个用户使用场景下发挥了关键作用,不仅帮助用户提升了完成任务的效率,也在一定程度上缓解了用户的焦虑。该组件的设计初衷是为了解决当用户面对复杂或不熟悉的操作时,为了用户提供即时的指引。
    在不同系统平台的适配过程中,我们特别注重交互模式的灵活性和适应性,以适应不同的适用场景。例如,我们将传统的卡片视图优化为列表视图,并支持多个操作项,实现了用户所见即所得的直观体验。
经过在多种场景下的实践验证,任务提示卡已成为缓解用户焦虑的一种手段。我们也认识到,用户焦虑直接影响到产品的可用性和用户满意度。
因此,我们会持续关注用户焦虑产生的根源,不断调整和优化我们的设计策略,有目的有效率的降低用户焦虑水平。
(3) 巧用浮层卡片,减少非必要的页面跳转
提到「链路」,相信很设计师都能想到缩短流程、简化操作步骤等手段。然而,随着业务的复杂度提升,我们的很多使用流程变得越来越长,用户仅仅查看或者编辑一个简单的信息也需要打开新页面,这无疑增加了用户的操作成本。
在诸多项目实践中,我们发现浮层卡片是一个非常灵活的组件,它可以在用户需要时通过鼠标悬停即可展开,用户可以不用跳转或打开新页面就可以在浮层卡片中完成一些关键信息的查看或者编辑。
这种交互模式不仅可以减少用户的操作步骤,还减少了产品链路和开发成本,在提升体验的同时也更好的效能业务。

image.png

在我们的平台上,一些用户虽然可以将自己经常使用的应用常驻到菜单栏上,但是受限于屏幕尺寸左侧的菜单栏不能显示太多常驻应用。
  • 当用户在切换一个常驻但因为屏幕尺寸而没有展示在菜单栏上的应用时,需要先点击更多【应用图标】进入更多页面。
  • 再定位到需要切换的应用图标上进行点击才能完成整个【切换】的流程。
  • 当我们洞察到用户使用菜单栏的痛点后,在后续的迭代优化时。在更多应用的图标上增加一个悬浮事件。
  • 鼠标悬浮时,它就像一个传送门一样将用户需要切换的应用呈现在浮层卡片上,用户点击所需的应用即可完成应用的切换。

 

image.png

 

【浮层卡片】作为一种灵活、高效的交互模式,在业务侧得到能够有效降低用户重复操作的验证后,我们把它拓展到了很多的相似场景里。
  • 比如,在消息通知面板交互上我们也采用了【浮层卡片】的交互模式,用户既可以点击去查看全部消息也可通过鼠标悬浮快捷唤出【浮层卡片】查看最新消息。

  • 在表格页面通过使用【浮层卡片】查看状态、附件等信息,用户可以不用进入详情页快速获取信息,用户掌握好这些小贴士可以有效提高工作效率。

 

经过多场景的实践,我们团队已将浮层卡片精炼为一种有效缩短用户使用流程的交互模式,显著提升了用户操作效率。也被我们拓展到更多场景,以实现在更广泛的应用维度上为用户提效。

 

 二  创新业务组件设计,提升复杂场景下的数据可视化体验 
随着业务的不断下钻,不免会遇到一些复杂的使用场景,基础的交互和组件已不能有效的解决用户在使用中的问题。
在一些既需要关注结构化的概览数据又要方便查看详细数据的场景中,以及在一些数据关联、任务串联等场景中,设计侧通过可视化、结构化等设计手段探索出了一些新的业务组件,解决了数据概览、数据关联不清晰等问题,为用户构建了直观、易懂的使用体验。
(1) 信息概览与Tab标签页相遇,概览&详情均可兼得
在一些管理场景下会涉及到既需要查看各阶段下不同状态的概览数据,又需要查看详细数据的场景。
按照以往的交互,用户可以用筛选器筛选出各阶段下不同状态数据再进行查看对比,虽然筛选器可以筛选出这些多阶段、多状态的数据,但存在着筛选步骤繁琐、多阶段&多状态的数据呈现都是棘手问题。

我们最初使用了数据可视化的看板来呈现各阶段下不同状态的概览信息,但这只解决了数据概览的问题,用户还是需要点击“详情”才能跳转至相应的页面。

 

image.png

 

  • 体验设计师在一些项目中尝试了将数据可视化看板与Tab标签页的融合,这就形成了具有Tab切换功能的数据看板,用户在查看概览数据的同时也可以通过点击切换查看各阶段/状态下的详细数据。

image.png

 

  • 在经过用户反馈和不同业务场景下的适配后,我们又针对小屏增加了折叠功能、折叠后状态数据隐藏、宽度不够时状态数据隐藏等优化。

 

image.png

 

  • 以上数据看板与tab页签融合的方案,一方面解决了数据可视化的问题,另一方面也解决了切换查看详情数据的繁琐操作。在明确了以上组件的价值点后,将其进行延展并应用到了一些具有共性的使用场景中。

通过将数据结构化和tab标签页的结合的方式,巧妙的解决了用户在进行数据概览和查看详细信息时可能遇到的繁琐操作问题。
这种模式不仅让页面信息结构更加清晰,用户无需跳转,即可在当前页面内,快速的查看概览及详情页信息。

(2) 树形连接线新范式,数据关系呈现简单明了

针对CICD等技术类产品中的存在的诸多数据关联、任务串联等复杂数据关系的难点,设计侧巧妙的使用树形连接线的可视化手段解决数据关联不清晰的问题,让信息结构更易懂,方便用户理解和操作。
在我们的版本管理模块中,用户在需求规划阶段需要将交付的需求和开发分支进行关联,一个需求不仅可以与多个开发分支进行关联、多个需求也可以与多个应用进行关联。这里的不仅要解决复杂的关联关系,还要解决需求与开发分支可增删的操作难点。

image.png

 

  • 针对这样的复杂多维使用场景,我们在设计时借鉴了树形连接线来解决需求与开发分支的复杂关联关系,通过树形连接线将需求与开发分支进行串联,让复杂的关联关系一目了然。

    在解决了复杂的关联的同时,在连接线上增加了「新增」及在表格操作列增加了「操作列」的操作来解决编辑等扩展问题。

 

树形连接线作为一种解决数据可视化的手段有效解决了业务中的难点,同样设计团队也将其拓展到了更多适用场景,帮助用户提升信息查看和操作效率。

 

image.png

 

  • 在处理嵌套表格时,树形连接线的使用极大增强了单元格与嵌套层之间的视觉关联。

  • 在OKR系统中,树形连接线的应用使目标和任务之间的从属关系更加明晰。此外,还为卡片在折叠状态下提供了展开后可查看更多信息的视觉引导。

通过以上创新应用,树形连接线已成为提升数据可视化和用户交互效率的重要设计元素。设计团队将继续探索其在不同业务场景下的应用潜力,以进一步优化用户的信息读取和决策过程。
以上两组业务组件的设计思路充分体现了设计师对用户诉求的深入洞察,并在设计上做出了突破。
设计师在对用户场景深入分析后,巧妙地将现有组件的优势与用户场景相结合,创造出了一系列新的业务组件,这些业务组件不仅解决了一系列共性问题,也为未来的业务组件设计提供了新的可能性。
 三  制定可持续的体验改进策略 

 

以上几个是我们通过洞察用户诉求,依靠设计手段改善用户体验的典型案例。

 

想要持续而又高效的提升产品的用户体验,仅凭零星的创意是不够的,还需制定一套有效的设计策略,这套策略旨在培养设计团队成员的创新意识和体验思维能力,使设计团队能够持续产出高质量的用户体验解决方案。

 

(1) 培养宏观视角
设计师理解需求时需从全局视角审视业务需求、产品目标和用户诉求,深入洞察产品体验旅程中的所有关键触点,避免陷入只见树木不见森林的误区。通过多元的视角辅助我们了解用户行为背后的真实动机,从而提出更有效的解决方案。

(2) 鼓励尝试更多可能

在项目中,我们鼓励设计师在满足产品和业务需求的基础上,打开思维的边界去探索更多可能性。无论是对用户的理解还是设计方向的探索,我们支持设计师不断自问,给予他们尝试更多可能性的资源支持,以促使设计师们产出无懈可击的解决方案。
(3) 理解用户对变化的抗拒心理
在B端产品中,用户对比较大的变化会产生抵触心理,从心理学上来讲:大家更喜欢保持现有的、已熟悉的行为模式和习惯。如果出现一些改进比较大的优化方案上线后,用户并不一定都是照单全收,极端情形下还会出现用户要求代码回滚的情况。
因此,我们在设计时不仅要解决业务需求,还要考虑用户的学习成本和对变化的接受程度。必要时,需通过强化运营和落地最佳实践,让用户意识到改变后的优势和收益来提升心理上的接受度。
(4) 沉淀与复用优秀设计方案
我们会定期复盘并将在项目实践中已经被验证的优秀、通用性高的方案(包括但不限于交互、视觉、业务组件等)定期汇总到设计组件库以及模板库中。通过评估这些方案的价值点和适用场景,设计师可以将这些经过验证的方案作为备选,复用和延展到未来的项目中,为更多业务、更多产品赋能。
转载:UXD笔记
 四  写在最后 
落地简单、顺滑、激发的产品设计理念,我们不求一蹴而就,而是有意识的去关注用户的问题,持续不断的优化和改进,用心对待每次微小的改进,积少成多,最终会实现产品与用户之间的“心有灵犀”。
希望以上分享能给从事在B端体验设计伙伴们带来一些新思路、新思考。优化、改进的途径有很多种,我们愿意将此次分享称为抛砖引玉,更多还是需要我们深入到业务中,与产研同学协作一起产出更优秀的解决方案。

什么才是好设计?14个维度分析给你听!

清阳

什么是好设计?这个问题大概是一千个人有一千个哈姆雷特了,不过作为一门学问,有心人会将它归纳起来,今天分享的这篇文章,是由一位有心的设计师总结而成的,聊聊他对好设计的14个维度分析,童鞋们可以学习一下呦。

1. 品味和能力

一个设计者最需要的就是好的品味(Taste)。当我们说一个人品味好的时候,常是指这个人的”审美”好,或者这个人善于发现”美”。但是一个人有好的品味,往往不是因为他善于发现“美”,而是因为他善于识别“丑”。当一个人识别出丑陋的事物,并且对这种丑无法忍受的时候,他自然就会选择那些美的东西。因此,好的品味不仅和”美”有关,更和”丑”有关。这里说的”美”和”丑”,不只是表面上的好看或者不好看,它包括产品的美丑,技术的美丑,制度的美丑,和人性的美丑。对于刚开始从事创作职业的人,尤其是做设计的,品味和能力可能会有一定的距离。在你在职业生涯刚开始的几年里,你的品味会比你的才能超前几步。你的作品可能暂时没有满足你的品味,不要因此放弃,因为能力会慢慢的赶上。而且最终,你的品味会决定你的风格(Style)。

美国最火的广播节目”This American Life”的Ira Glass通过一个视频告诉我们他的经验,他说,在刚开始几年里,你的作品可能并不如你希望的那么好,你试图做好,但是能力并没有达到。但是记住品味是你的一切,如果你的品味足够好,那你就能意识到你做的东西是很蹩脚的,是不够满意的。很多人没有度过那个阶段就中途退出了,但是我见过的所有优秀的创作者,都曾有过这样的阶段,在这个阶段中,他们有很好的品味,他们知道他们所做的并不让自己满意,但最终都度过了这个阶段。因此每个人都有过这样的阶段,如果你正处在这样的阶段,你需要知道这是正常的。你所唯一能做的而且最重要的就是,做很多很多的事,每个月每周都做出新的东西,只有通过大量的实际操作,你才能跟上你的品味,才能够弥补品味和能力之间的间隙。你的品味帮你辨别出你想做的和你会做的之间的距离。

2. 什么决定你的品味?

一个人的品味由多个因素共同塑造,最直接的是一个人成长环境的文化,中国的文化是什么也许透过frog Design的创意总监Jan Chipchase的这几张图你就能看出一些,财富和贫困的差异,西方文化和传统文化的差异,梦想与现实的差异

image.png

image.png

image.png

image.png

 

在这样差异巨大的多元文化下成长起来的人,对差异化会比较包容,品味自然也就比较宽松,可以说中国人适应能力强,好的坏的都能将就,喝的了毒牛奶,吃的了地沟油。也可以说中国人有中庸的思想,做事情一定跟大部分人一样,不愿意与众不同,抢打出头鸟。还可以说中国人喜欢辩证的看问题,任意拿两样东西去让他做个比较,答案常常是”这个也可以,那个也不错,各有各的好”。中国人差异化的成长环境,决定了中国人必须对丑的事物拥有极大的容忍度,否则就混不下去。在中国表达对丑不满的人常常会被排挤,被攻击,甚至遭受生命危险,因此大部分人都不由自主的接受我们周围的世界,而能够发出批判声音的人为数不多。有意思的是,公众本身不觉得那么有些东西很丑陋,被有的人一提醒,才意识到原来那的确是丑的。从毒牛奶地沟油到现在的毒胶囊,本质上说都是有人对一些丑恶的做法视而不见的结果。中国需要更多这样”对丑无法容忍”的人,需要一个对”丑”重新认识的启蒙,通过揭露丑而发现美。

3. 对丑的容忍度

Hi-iD 曾有一片文章讲“美的感知力”,很赞同其中关于Taste的看法。Taste翻译过来是”品味”,可品味通常是围绕着格调上的词语,比如我们会说某某人着装很有品味,某某人对美食很有品位,如果我们只是把品味当做类似着装或美食概念上的品味的话,未免有点将其概念狭隘化了。Steve Jobs的衣服千古不变,如果按照大众对品位的理解,Steve Jobs的品味就差到了极点。因此Taste是一种能力,而不是格调。我们不去纠结于词语上的不同,就其概念来说,绝对不仅仅是穿着时尚,或者紧跟潮流那么简单。Taste是一种”美的感知力”,是一种力量,这种力量一定是每个人都有,否则就不会有大众都欣赏的美。既然每个人都有这种美的感知力,那么是什么让Steve Jobs的Taste与公众的Taste不同呢?仅仅是因为每个人的对美的感知力大小不同决定的吗?个人认为正好相反,Steve Jobs的品味于众人不同的原因在于他对丑的容忍度极底。几乎是“对丑陋的零容忍”。这种近乎严苛的要求一直影响着他的一生

Steve Jobs刚刚搬新家的时候,家里没有家具,因为他始终找不到自己满意的家具。他就是这种宁缺毋滥的人。有一张照片,他在家里盘腿坐在地板上,家里只有一盏Tiffany的大落地灯。这张照片后来成为了经典。

因此”对丑的不容忍”是解释一些人Taste的不同于其他人的最好的方法,也是解释了中国为什么一直出不了像Steve Jobs这样的人,因为中国每个人从小到大见过太多丑的东西,对丑的容忍度很高。不信?欣赏一下这些优秀建筑吧。

image.png

4.”美”是主观感受吗?

我们从小到达都会认为,”美”的概念是主观的,一个东西美不美,常常由个人喜好决定。某个人喜欢一件东西,会有很多原因,有可能是他的母亲也拥有同样的东西,或者某个明星也在用它,或者是有一些特殊的记忆在里面。

人的思想就是没有经过整理的碎片的混合物,所有小孩子从被无数遍的教导,”美”是一种偏好,是每个人自己的事。这样的说法可以有效的解释不同人有不同的观点并且杜绝无谓的争辩。但这种说法是错误的。只要你设计过东西,你就会明白。

如果你是一个设计者,如果你承认美是主观的,那你没法做设计了,如果美只是个人偏好,那为什么还有设计呢,每个人喜欢自己偏好的东西就好了。

image.png

有经验的设计者会发现随着经验的积累自己对”美”的认知是在变化的,他会发现有些美是被人们共同认可的美,找出这些被公认的美之间的共性,就成为他的主要工作方法。中学的课堂里马克思教我们辩证的看问题,任何事情都是相对的,包括真理。即使我们已经长大了,这种观念仍然会留在我们的潜意识里。但是只要你开始思考,你就会发现,众多领域对”美”的认识有惊人的相似之处。

Dieter Rams设计原则

既然有公认的”美”,那么自然会有一些创造这些美的通用方法。德国工业设计师Dieter Rams总结过如下”好设计”的十大原则

image.png

好设计是有创意的(innovative)

image.png

好设计让产品可用(makes product useful)

image.png

好设计是美的(aesthetic)

image.png

好设计让产品易被理解(be understood)

image.png

好设计是不唐突的(unobtrusive)

image.png

好设计是诚实的(honest)

image.png

好设计是不过时的(durable,timeless)

image.png

好设计贯穿到每一个细节(thorough to the last detail)

image.png

好设计关心环境因素(concerned with environment)

image.png

好设计是尽可能的无设计(as little design as possible)

Dieter Rams所说的设计是工业设计的范畴,工业设计是塑造可操控产品的艺术。设计对象包括人们要的用各种实体,从餐具到椅子,从电话到汽车。在这里不讨论工业设计和其他领域的区别,也不去逐一探讨Dieter Rams设计原则,仅仅挑出几个有意思的分享。

5. 好设计是尽可能的无设计 As Little Design As Possible

这句话换个说法就是”好的设计是简洁的”,这个观点听过无数遍,不论从数学领域,建筑领域,绘画领域,你都会听到这种说法。在数学里,越简短的证明公式就越好。对于建筑师来说它意味着精心打造的结构,而不是表面的装饰。同样,在写作中,这种观点意味着只说必要的话,并且尽量简短。

建筑领域中 密斯•凡德罗 采纳了包豪斯建筑学派的风格,继承了包豪斯的创始人 格罗皮乌斯 的现代主义建筑的观念,并且将种观念带入美国,提出”少即是多(Less is more)”的建筑哲学,开创了现代主义建筑的时代。当现代建筑想要抛弃建筑中的装饰的时,他们不自觉的的还是会设计带有装饰性的建筑,只有”空间(space)”和”关连(Ariticulation)”的概念代替了”象征主义(symbolism)”和”修饰(ornament)”成为建筑的关键词时,好的建筑才出现,John Ruskin曾说过”建筑是结构的装饰”,但现在可以说,装饰建造可以,但是不要建造装饰

image.png

The Farnsworth House by Mies Van der Rohe

其实简单就是事物本来的样子。不断强调简单,是因为当人从事设计工作的时候,常会忘掉这个原则。比如网页设计里,一些人总是想要把空白的地方填满,生怕页面空空淡淡,那样是极傻的。设计中的装饰只是一些花样而已,只是些小把戏(Trick),表面的装饰背后隐含着的其实是内容的空虚。当你强迫自己把东西做的很简单的时候,你就被迫直面真正的问题。当你不能用一些花样和装饰掩盖的时候,你就不得不做好那些真正本质部分

6. 好的设计是不过时的 TimeLess

从数学角度思考,只要没有错误,每一个数学证明都是永恒的。所以数学家哈代会说:”丑陋的数学是在这个世界上是无法存在的”。以永不过时作为目标是帮助自己找到最佳答案的最好方法,如果你不想让你的产品被别人所取代,那你就只好做出那个最佳的产品。这也是为什么一些大师的作品在任何时代都很有吸引力的原因了。

同样,把永恒作为目标也是一个避开流行趋势影响的方法。”流行(Trend)”会随着时间改变,它和”潮流”,”时尚”一样,每年,每个季度,甚至每天都不一样。但是如果你要设计出杰出的产品,你应该避开流行的掌控。拿三星和苹果做比较,三星的是典型的追求流行的公司,它的文化是紧跟用户的需求,用户要什么他们就做什么。而苹果的文化是要做出杰出产品,他们不是那种对用户言听计从的人,他们不关心当下流行什么,只关心如何找到那正确的答案。同样,如果看国内的创业热潮,很多idea是追求当下流行,常常照搬美国的最流行的东西或者概念,互联网概念一出一大堆,一会儿LBS,一会儿SOLOMO,一会儿Cloud Computing,一会儿Pinterest等等,媒体把概念炒的风风火火,不但没有帮到创业者什么忙,反而误导了很多人,以为找一个很火的概念就一定能做好,就一定能有人用。结果并不是这样,不论之前团购的火热,或者社交游戏”Draw Something”的火热,它们都是一个流行的产物,随着时间的推移,它们会慢慢淡入我们的视线。反之如果一个东西能够长盛不衰,那说明它的吸引力一定来自于本身的魅力,而不是流行因素的影响

既然好的设计是不受时间影响的,那么如何判断你的做的东西是否受时间影响呢?方法之一就是让你的作品对上几代人有吸引力。因为我们很难猜测未来是什么样子,但是可以肯定的是,未来的人不会关心当今的流行趋势,这一点和上几代人相同,上几代人也不会关心当下的流行趋势。所以,如果你的作品对今天的人们以及200年前的人都有吸引力的话,那么它很有可能对未来200年后的人还有吸引力。

7. 好的设计让产品被理解

好的设计可以让产品更容易被理解,许多设计者设计了半天,做的很辛苦,但是如果他解决的是错的问题,一切都白费。举个例子,20世纪中期伴随着包豪斯的影响,现代主义诞生后,出现了一股无衬线(San-Serif)字体的热潮,浪潮发展到最后,甚至现在所有的设计师在任何地方都在用Helvatica了,因为都知道这个字体是简洁的。的确这类字体是更加的纯粹化的字体,看起来的确很简洁,但是在字体中它并不是是你要解决主要问题,字体设计最为重要的目的是易于辨认,也就是让内容变的易读(readable)。传统的Times New Roman 字体是一种有衬线(serif)字体,他很容易分辨。还有很多很好的serif字体,例如Garamond,Baskerville,Carlson,Egyptienne等等。优秀的产品需要贯穿到每一个细节,就连小小的字体的选择都要做大量的研究和对比。阅读工具prismatic的设计者为了选择一款合适的字体,对其各个字体的历史,发展和优缺点做了极其精致的分析:

Garamond是法国传统风格,始于1530年,它对比划的几何比例和平衡有着超前思考,其中的字体粗细交错带来了动态的平衡和易辩性。

image.png

image.png

Egyptienne 是基于Carendon模式的一种变形,它和现代的sans-serifs字体搭配起来非常合适。

serif字体本身的线条的粗细变化和平衡就跟中国书法一样,好的书法作品是不可能每条线都一样粗细,一定是交织的平衡。人类的视觉本身对不同线宽的交错就有着美的感觉。比如下图最左边是蒙德里安在”新造形主义”﹝Neo-Plasticism﹞里的作品,其中每个交叉的线条都有着不同的粗细。如果将同样这幅画的线条变成同等粗细,那这件作品的性格就淡了。同样根据人自然的审美观,细线条比粗线条要美,比较第二和第三张就能看出来

image.png

image.png

image.png

San-Serif字体并不是完全坏的,它可以作为很好的文章标题,但是让人伤心的是大多数设计师也许只知道Helvatica,好的san-serif字体有很多,比如Akzidenz-Grotesk,Univers

Akzidenz-Grotesk 起于1896年,受到很多字体的影响,从Baskerville, Garamond和Carlson中继承了几何比例的影响,将其发展到了新的一级。当代的Akzidenz-Grotesk字体遗传于20世纪50年代后期,它已经是被扩大后的字体族,这些风格到后来启发了更加现代的Helvetica,和Univers。

image.png

字体的设计最初是由印刷术带动的,欧洲人当时声称印刷术是德国人在1450年首次发明的,但是他们当时不知道,中国早在1040年就发明了活字印刷术,虽然现在中国先进存留的印刷物最早的已经是13世纪的,但是关于毕升的发明活字印刷的事迹是早已记载在11世纪北宋时期沈括的”梦溪笔谈”中了。中国的字体一直是一门书法艺术了,其影响扩展到整个东亚,但是如今写的简体字的我们,几乎连欣赏书法的能力都快没有了,前人在字体发展上的积累并没有很好继承下去,直到现在,中文在电脑上的字体只有那么几个,相对其他语言,差的太多。这样宝贵的传统文化的丢失,让人十分感叹。

image.png

8. 好的设计是诚实的,正直的(Honest,Integrity)

一个诚实的设计产品绝不能声称它并没有的功能,绝不能吹嘘。对于很多人来说,”设计”和”诚实”是两个很难放在一起的词,但是诚实对于设计来说太重要了,拿我们都相信的数据图表来说,如果你觉得,一个数据或者一个图表是最力的证据,是无可争辩的,那你就错了,图表也可以撒谎。信息设计和数据可视化之父 Edward Tufte 在他的书“The Visual Display of Quantitative Information” 中说,当电视里的产品或者图表说谎的时候,这个谎言就会被扩大千万倍。如果纽约时报的报道插入了说谎的图表,那么这个谎言就被扩大了几百万倍。书中有这么一个图,图中表示施行限速前后交通死亡数量的变化。

下面这个图几乎不能说明任何问题

image.png

加上几个数据点,这个图表达的就有了不同的解释

image.png

我们可以试想第一幅图的其他可能解释。

image.png

如果再加上其他地区的数据,那表现的又多了一层意义。

image.png

因此,同样的图表,可以表达很多意思,如何找到最好的表达方式是设计者需要认真思考的。

Paul Graham的设计原则

image.png

Y Combinator的创始人Paul Graham在他的文章”Taste of Maker”里讲了他的设计原则

image.png

好设计是有启发性的

image.png

好设计是困难的

image.png

好设计是看似容易的

image.png

好设计是有些奇特的

image.png

好设计是成批出现的

image.png

好设计是大胆的

9. 好设计是有启发性的

文学作品可以被分为描述性和启发性,绘画作品也是,启发性的作品往往比描述性的更打动人心,正如每个人看到《蒙娜丽莎》都会有自己的理解一样。在建筑和设计领域,这个原则意味着一个建筑或者产品,应该允许你按照自己的意愿使用。比如一幢好的建筑物应该充当一个平台,人们在这个平台上可以过自己想过的生活,而不是让人按照建筑师的意思去安排你的生活

对软件行业来说,这条原则意味着应该为用户提供基础的元素,并且使得他们能够随心所欲的组合,就像乐高玩具。在数学领域,有启发性意味着一个好的研究应该可以为许多新工作提供基础。在学术界里,大体上可以把被引用的次数当做启发性的衡量标准。

10.好设计是困难的

做出伟大作品的人,我们会发现他们的共同点都一样,他们工作的非常辛苦。解决越困难的问题越需要努力付出,登山的时候,必须扔掉一切不必要的装备。有一个关于王石的故事印象很深刻,冯仑在谈王石时说:”王石登珠峰的时候,每登到一个阶段, 回到大本营时,就一头扑进帐篷,躺下,一动不动,一句话也不多说,队友以为没气了,但王石说,到那个时候自己只想多蓄积精神,以便能登上珠峰,其他什么都不想。”

然后冯仑又说另外一个登山者,每到一个阶段就跟媒体通气儿,很兴奋地谈自己看到的感受,结果到8000米的时候再没有力气登上去了,只好遗憾地下山。所以,当人有了一个目标的时候,就应该不遗余力,耐得住寂寞,才能登到高处。

在设计中,当困难太大的时候,就逼得设计师不得不选择最简单的设计,当解决难题成为设计师的主要任务时,那些花样,流行,装饰全都不存在了。

并非所有的痛苦是有益的,有好的痛苦,也有坏的痛苦,你需要的痛苦是让你向前冲的痛苦,而不是无作为的痛苦。设计工作中,解决问题的痛苦是好的,但是挑剔的客户和低劣的材料带来的痛苦是坏的痛苦

德国包豪斯(Bauhaus)学派的设计师采取美国建筑师路易斯 沙利文(Louis Sullivan)的”形式追随功能(form follows functions”的观点。因为当功能本身就很困难的时候,形式必须追随功能,因为没有别的精力再开发多余的”形式”了。同样,人们觉得自然界里野生动物是很美也是因为他们富有挑战的生活让他们的每一个特征都有其作用。没有丝毫装饰和浪费。

“Time always softens the pain and makes things look like more fun than they really were.
But who said everything has to be fun?
Pain builds character.
(Sometimes it builds products, too.)

时间总是淡化痛苦,让一切变得比实际情况更轻松。
但是谁说生活一定是轻松的?
痛苦造就性格。
(也许还造就产品。)”

Jamie Zawinski,”the netscape dorm”

11. 好设计是看似容易的

当我们看到优秀的设计师做出的作品时,常常会想他们这不就是个这嘛,这也太容易了吧。但是这其实是一种错觉,一个好的产品很好用的很简单,可能是经过了不断的改善。比如好的文章读起来很轻松,但是背后可能经过反复修改。科学和技术上的重大发现,在形式上往往很简单,看过之后你会觉得这办法我也可以想出来。Adam Savage在TED上做了一个演讲,“简单的想法是如何引导科学发现(How simple ideas lead to scientific discoveries)”他通过两个生动的故事告诉我们重大的科学发现是来自于简单的,有创意的方法的,这个方法任何人都可以使用。但是实际上却并不是任何人都能做出伟大科学发现的。达芬奇的绘画有些只有寥寥几笔,但他却画出了最重要的东西,单独看这些线,你会觉得没什么困难,但是你开始画的时候就会发现那是很困难的。

用线作画实际上是最难的,因为他要求对对象的准确把握和高度的概括。许多小孩子放弃画画的原因之一就是他们开始学习成年人的绘画技法,用线条勾勒。因为用线条作画是最为困难的,而中国的传统水墨画都是用深浅的线条画出来的,所以,可以说中国传统画家对事物的概括能力是世界上最好的。而我们在新的时代却把这些能力忘记了,或者不再谈论了。

image.png

12. 好设计是奇特的

某些最杰出的设计常被认为是不可思议的,因为他超出了人们的想象。这里说的奇特也就是我们通常所说的风格。每个设计师都想有发展出自己的风格。但是如果你为了开发风格而做的产品,往往不是最好的,相反如果你只想着做出最好的作品,你就不可避免的采用一些特殊的方法。密斯凡德罗并没有想过要树立现代极简主义风格,蒙德里安也无意构造新造型主义,他们只是想做出好的作品

每个人的风格都是自然形成的,在通向正确的道路上必然会产生风格。16世纪的风格主义,19世界的浪漫主义都是追求做出完美作品的结果。

13. 好设计是成批出现的

这是一个很奇特的规律,接触的设计作品永远都是成批出现的,比如15世纪的佛罗伦萨有伟大的建筑师布鲁内莱斯基,画家马萨乔,飞利浦里皮,达芬奇和米开朗基罗。当时在意大利的米兰也是同大的城市,可是15世纪的米兰却没有什么伟大的艺术家。15世纪弗洛伦萨有一些特殊的条件,这些条件早就了这些伟大的艺术家。它们是不可延续的,因为今天的佛罗伦萨已经不是这样了。今天中国的人口那么多,按比例推算,拥有达芬奇天赋的人有很多,为什么没有出一个达芬奇。原因是达芬奇和任何伟大艺术家的出现除了他本身的天赋以外,还依赖于当时的地理位置和环境。今天的人流动性很高,但是伟大的项目依然集中在少数几个热点上:比如德国的包豪斯学校,曼哈顿计划,洛克希德公司,以及硅谷产生的创业传奇。历史上任何时刻都有一些热点领域,而且也有一团体在这些领域里做出伟大的成绩。如果你远离这些中心,那几乎不可能靠自己就取得伟大的成果。你可以拉动这个浪潮,但是不可能跳出这个浪潮。

14. 好设计是大胆的

在历史的任何一段中,人们都会相信一些很荒谬的东西,并且那么的深信以至于你出言质疑就会被恶意伤害。许多文艺复兴时期的作品在当时都被认为是极其大逆不道。哥白尼对地心说感到无法解释,而他的同代人都可以忍受。爱因斯坦的相对论触犯了经典物理学家,许多年一直不被接受。奥威尔在他的著作《一九八四》中按时政府会通过赤裸的压制来控制信息的流动,特别是通过禁书的方式。听起来很熟悉吧,中国早在秦始皇时期就已经下令过销毁孔子的《论语》,以及后来的焚书坑儒。奥维德被奥古斯都驱逐出罗马,其中第一个原因就是因为他写了《爱的艺术》,即使在崇尚优秀的文化的雅典,人们在阅读某些书籍的时候也难免胆战心惊。大卫里斯曼说过,在印刷术的世界里,信息是思想的火药,所以审查者们才需要穿着肃穆的长袍来熄灭点燃的火药。因此伟大的思想往往是大胆的跟统治者对立的。这也就是解释了,为什么中国的诺贝尔奖得住们,要么是在国外得到的,要么就是在监狱得到的。

上面一部分说的事件的错误现在看来都是显而易见的,然而在当时的人们并不觉得有那么的糟糕。上海美国学校的师生看了电影《阳光灿烂的日子》,姜文跟这帮洋师生做了映后交流。临走前一穿着校服的女生问姜文”为什么电影里那些孩子都经历了文革,却感觉那么快乐呢?”。 姜文愣了一下,但反应够快,说:”我看你现在也很快乐, 等你长大了, 你才知道自己处在一个多么糟糕的年代。”同理,生活在现在的我们似乎觉得周围的一切是可以接受的,但是当过了几十年之后,就会发现原来之前的时代是那么的糟。

我们当下需要警惕的不是奥威尔笔中的”老大哥”,而是我们自己心中的对丑陋的无视。如果你想要做出伟大的成果,就不能对现实和丑陋视而不见,反而应该特别主义。

发现丑的东西比想象美的东西要容易。大多做出杰出成绩的人似乎都是为了修正他们眼中的丑陋的东西。意大利画家乔托看到拜占庭帝国的《圣母像》,深感不满,于是动手改进,他因此成了文艺复兴的先行者。哥白尼对地心说的解释感到困惑,所以去找到真正的答案。乔布斯觉得所有的智能手机都很丑陋,因此决定去设计他想要的手机。中国诺贝尔奖得主看到中国的丑陋,于是去为之斗争。所有优秀作品的秘诀就是:非常苛刻的品味,加上实现这种品味的能力。

经验教训

  • 做设计不是发现美,而是感知丑

  • 设计与流行无关,与做出最好的产品有关

  • 装饰是掩盖空虚内容的多余物,设计要直面本质部分

  • 做设计的过程很难,但结果看似简单

  • 设计需要大胆,敢于判断

转载:UI设计

10张图让您读懂什么是UI、 UX?

清阳

什么是UI、 UX?或者说它们之间有什么不同?说句实话早几年我连UI都不是很明白,说出来都有一点不好意思了……

Ok…让我们用图片的形式来看一下UI与UX的不同之处吧。

图一:倒过来的蕃茄酱瓶设计,考虑到番茄酱快用完时很难倒出来的使用情境

 

image.png

图二:从定义来解释UI与 UX之间的差异,两者定义有很大的不同。

  • UI定义:UI是网站页面是如何物理布局。一个UI设计师会和你谈东西应该放哪里,用什么颜色。UI是负责网站的创意和视觉作品。

  • UX定义:UX专注于网站,它的行为与互动,比如一个盒子滑出,以及人们如何与它进行交互,比如他们会点击或输入进行交互。UX处理的内容和网站地图的结构。

image.png

图三:从专业分工的角度来说明差别,可以看出负责的部份有哪些相同,哪些不同。

image.png

图四:这张图比较复杂,但是基本上还是看得出差异。相同之处很明显,都有大胡子,但是装扮上就有很大的区别。为什么?你们可以根据定义思考一下……

image.png

下面的这张图跟上面的那张是同一张,只是风格不一样,从设计师的角色转变成很酷的时尚年轻人。

 

图五:从工作职责来解释差异, UX的范围很广,很少人可以精通全部,可以说几乎没有。

image.png

image.png

图六:这张图的表述可能并不全面或清晰,但可以做为一个参考。

image.png

图七:UI、 UX基本的工作项目来区分的话,UI没有品牌推广这个职位。

image.png

 

图八:从产品的角度看UI与UX,UI是产品的一部份,UX是使用产品的体验。

image.png

图九:UI Design:功能;Usabilitydesign:动作;User Experiene Design:情感;

image.png

图十:UI是用来取内容的工具,使用者使用UI吃完东西(内容)的体验是UX。

image.png

总结:UI设计是展现视觉层面的(界面),而UX是使用过程中的情感(互动与体验)。UX设计师不仅关注界面的设计,更关心所有会影响使用者体验的一切。如架构、互动、内容与及使用者对象、需求、价值观。

有人会说设计UI不就是在设计UX吗?如果用户的体验只注重视觉界面的美观,或许可以这么说。但是使用者手上拿的不是UI,而是产品,UI只是产品设计的一部份,体验不仅受到产品的影响,还会受到使用产品体验过程中的情境及使用者对品牌印像等等其它体验相关的事影响。

转载:微信公众号UI设计

UI欣赏:大圆角 UI 设计:从功能妥协到美学符号的演进

清阳

大圆角设计并非凭空出现,其起源可追溯至早期图形界面时代。在 CRT 显示器时代,像素密度低且显示边缘易出现锯齿,设计师通过圆角弱化视觉毛刺,这是基于技术限制的功能妥协。随着显示技术升级,圆角逐渐从 “必要修正” 转变为 “美学选择”,2013 年 iOS 7 的扁平化革命中,大圆角首次大规模应用于图标与控件,打破拟物设计的硬朗边界,开启现代 UI 的柔和风格浪潮。

在应用方案上,大圆角设计需结合场景平衡功能性与美观度。在移动端界面中,卡片式布局常搭配 16-24px 大圆角,如微信读书的书籍卡片,既通过圆角区分内容模块,又降低手持设备的视觉压迫感;针对儿童应用或生活服务类 APP,32px 以上的超大圆角能传递亲和力,例如美团 APP 的功能入口图标,圆润形态更易吸引用户点击。

在桌面端设计中,大圆角应用需考虑屏幕尺寸差异。Windows 11 的窗口采用 28px 圆角,在大尺寸显示器上营造轻盈悬浮感;而设计软件 Figma 的工具栏按钮则采用适中圆角,避免过度圆润导致的操作辨识度下降。此外,大圆角还可与阴影、渐变结合增强层次感,如苹果 macOS 的控制中心,通过 24px 圆角与柔和阴影,打造出符合物理直觉的 “半透明毛玻璃” 效果。

下面来欣赏一组优秀的大圆角UI设计。

 

640.png
by @ Budiarti R.

 

 

640 (1).png
by @ Budiarti R.
640 (2).png
by @ Afterglow
640 (3).png
by @ Budiarti R.

从技术妥协到设计语言核心,大圆角的演变折射出 UI 设计 “以人为本” 的趋势 —— 它不仅是视觉风格的迭代,更是对用户心理舒适度与交互体验的深度考量。

转载:UX设计便利店

日历

链接

个人资料

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

存档