首页

在用户体验研究中使用人工智能:个人观点:什么有效,什么无效

清阳

2 组用户评价见解
Dovetail 上的 AI 聚类数据

准备

开展研究

分析:人工智能有时能大放异彩的地方

包含 3 种不同见解的画布被分组为一个集群
Dovetail 人工智能辅助分析,由 Dovetail 网站提供。

报告

Breyta AI 驱动的搜索,由 Breyta 网站提供

工具概况

一个很大的警告:这一切的成本

 最后的想法

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

信息架构设计 | 全球导航、上下文导航、本地导航的区别是什么?

清阳

“导航系统并不是单一的工具,而是由多个互补的导航方式组成。” ——《信息架构:超越Web设计》
 
在信息架构里,导航系统不止一种。
我们常说的“导航”,其实包含了三个维度:全球导航、上下文导航、本地导航
如果你把网站当成城市地图,三者的区别就像
 
全球导航(Global Navigation) 相当于城市主干道。
总是在页面的显著位置(如顶部、侧边),无论用户在哪一页都可见。 
作用:提供站点的整体结构轮廓,保证“不会迷路”。
举个例子:你在电商平台首页、商品页、购物车页,都能看到顶部的“首页 / 分类 / 购物车 / 我的”。
 
 
本地导航(Local Navigation) 像是某个商圈里的路标。
 它只在特定区域内出现,展示该部分的子页面结构。
 作用:帮助用户在当前模块内自由切换,不跳出当前上下文。
比如你点进“具体单件商品”后,在侧边出现同商品分类就是本地导航。
 上下文导航(Contextual Navigation) 像是你在某家咖啡店里看到“附近的甜品推荐”。
 它不是常驻的,而是出现在特定内容中,基于语义提供额外链接
作用:提供延伸阅读、关联信息,拓宽用户探索路径。
对“单件产品”的批注延展,这就是上下文导航。
“全球导航帮助用户定位站点结构,本地导航指导区域内部的浏览,上下文导航则引导语义关联的跳转。”
 
如何为你的产品选对导航层级?
信息量不大? 全部用全球导航即可。
内容分区明确? 加上本地导航提升效率。
内容密集丰富? 增设上下文导航,增强探索体验。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
 

用户体验中的神经设计:认知科学如何帮助我们打造更佳的界面

清阳

通过 AI 辅助创建的图像

说实话,我们大多数人在设计屏幕时并不会考虑人脑。我们关注的是布局、间距和颜色。但事实是:设计并非发生在屏幕上——而是发生在用户的大脑中。这就是神经设计的用武之地。

神经设计就是运用认知心理学和神经科学来构建直观、轻松甚至略带愉悦的界面。我之前并没有学过神经科学,但自从我开始了解大脑的运作方式后,我的设计方式就彻底改变了。

以下是我所学到的知识 — — 有真实的例子、用户体验法则和一些你可能想看看的书籍精华。

1. 大脑是懒惰的(好的方面)

我们的大脑天生就具有节能的本能。这意味着人们几乎总是会选择阻力最小的路径。当你的用户界面过于复杂或选项过多时,大脑就会说:“不行。”

记住希克定律

提供的选择越多,做出决定所需的时间就越长。

想想谷歌的主页只是一个标志和一个搜索栏。这并非偶然——它的设计是为了减少认知负荷。

Google.com

您可以做什么:

  • 确定主要行动的优先级
  • 保持表单简短(就像 Typeform 那样)
  • 删除无用的元素

2.人们先看到,后思考

设计首先是情感驱动,其次是逻辑驱动。这意味着色彩、布局甚至动画都能在第一秒就建立信任。

让我们来看一个例子:Duolingo 的应用程序使用友好的插图、有趣的语气,以及一些感觉像大脑“拍拍背”一样的小奖励。它降低了学习新语言的情感障碍。

图片来源——匹兹堡杂志

以下是Susan Weinschenk 所著《神经网络设计》一书中的一条重要建议:

“我们不会做出合乎逻辑的决定。我们会做出情绪化的决定,然后用逻辑来证明其合理性。”

您可以做什么:

  • 使用温暖、友好的设计语言
  • 让入职培训感觉像是手把手指导,而不是测验
  • 添加微妙的动作,使操作感觉灵敏(就像Apple在 iOS 中使用弹跳或淡入淡出一样)

3.熟悉的感觉很好

大脑喜欢模式。当用户看到自己熟悉的事物时,他们会感到安全,并且能够掌控一切。

记住雅各布定律

用户大部分时间都花在其他网站上。因此,他们期望你的产品也能以同样的方式运作。

让我们看一些例子:Instagram 的底部标签栏亚马逊的购物车图标Gmail 的撰写按钮——它们都遵循常见的视觉隐喻,以减少学习曲线。

您可以做什么:

  • 遵循原生平台惯例
  • 使用常见的图标和术语(除非您是 Zara,否则不要将购物车称为“我的包”)
  • 除非有充分理由,否则避免不必要的改造

4.记忆很短暂——真的非常短暂

认知科学告诉我们,用户的工作记忆中一次只能记住大约4个条目。因此,如果你的应用依赖于用户记忆指令,那么它注定会失败。

“米勒定律”来了

一般人的短期记忆只能保留 7 件(正负 2 件)物品。

真实案例:你有没有尝试填写表单,但错误信息只有在提交后才会显示,而你却忘了哪个字段出了什么问题?这简直就是记忆噩梦。

您可以做什么:

  • 将任务分解成小的、可管理的步骤(例如Airbnb 的分步主机设置
  • 使用内联验证
  • 保持标签靠近输入(不要让用户滚动或猜测)

5.反馈=安全

大脑会不断检查:这有效吗? 我能控制吗?如果用户界面没有响应输入,用户就会感到不确定——即使后台一切正常。

用户体验法则:反馈循环原则

人们需要立即得到反馈来了解其行为的结果。

例如,Slack在消息发送时会显示“正在发送…”的动画和勾号。这能建立信任,尤其是在快速对话中。

您可以做什么:

  • 显示加载状态、成功消息或错误提示
  • 允许用户撤消操作(如 Gmail 的“撤消发送”)
  • 动画过渡到信号系统状态

如果你想深入了解,可以参考以下书籍推荐

以下几本书确实帮助我将神经科学和用户体验联系起来:

  • Susan Weinschenk 的《神经网络设计》 ——超级易读,示例丰富
Susan Weinschenk 的《神经网络设计》
  • Susan Weinschenk 撰写的《每个设计师都需要知道的关于人的 100 件事》 ——设计师的最爱
苏珊·温申克 (Susan Weinschenk) 的《每个设计师都需要了解的关于人的 100 件事》
  • 史蒂夫·克鲁格的《别让我思考》 ——虽然不是神经科学,但完全符合大脑的行为方式
史蒂夫·克鲁格的《别让我思考》
  • 唐纳德·诺曼的《设计心理学》 ——以人为本的设计思维的经典见解
唐纳德·诺曼的《设计心理学》

好的用户体验不仅仅是让事物看起来美观。它在于理解人脑的运作方式,并围绕此进行设计。神经设计提醒我们,我们设计的不是屏幕,而是思维中的体验

当我们做得好的时候,一切都会顺利。

所以下次调整布局或重新设计流程时,问问自己:
现在什么对大脑来说最容易?
这个问题比任何花哨的工具都更能帮助我做出更好的决策。

……

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

如何用ChatGPT的新图像生成器创建UI(4o)

清阳

ChatGPT 是否有可能生成 UI?

我之前测试过几次,但结果却令人失望。

下面是我两个月前在一份时事通讯中分享的一个例子。

升级前通过 ChatGPT 生成

它看上去太卡通了,不太实用。

然而,上周,OpenAI 推出了一个重大更新,所以我决定再次尝试。

根据我的提示,我能够生成更好的UI模型。我甚至可以根据自己的需求创建多个设计选项:

通过 ChatGPT 生成

今天,我将向你们展示我进行的实验、我使用的提示以及过程中的一些惊喜和收获。

让我们开始吧。

背景

OpenAI 宣布,现在可以使用 GPT-4o 在 ChatGPT 中生成高质量图像,而不是使用较旧的 DALL·E 模型。

它更擅长遵循指令,并且可以更好地呈现图像中的文本。

上周,许多人尝试将照片转换成人工智能艺术作品——这就是吉卜力风格艺术潮流流行的原因。

我也尝试过:

通过 ChatGPT 生成

但在网上看到很多有趣的艺术作品后,我想:

如果我可以使用 ChatGPT 生成对产品设计师真正有用的 UI 会怎么样?

实验就是从这里开始的。

实验

1. 创建详细的提示

我使用 ChatGPT 来帮助我生成我想要的 UI 的详细提示。

# 为名为“SkillVerse - 热门微课程”的应用设计一个简洁、现代的移动 UI 界面(iOS 风格)。布局应遵循以下结构化部分。## 1. 状态栏(顶部)- **样式**:标准 iOS 布局(顶部安全区域)---## 2. 标题部分- **居中标志**:“SkillVerse”  - **字体**:中等粗细,小尺寸  - **颜色**:蓝色文本  ---## 3. 特色课程轮播(水平滚动)- **风格**:具有圆角和柔和阴影的可滑动卡片  - **卡片**:    -**卡 1**      - 标题:**动态设计简介**      - 字幕:*4 月 2 日开始*      - 视觉:动画缩略图    -**卡 2**      - 标题:《自由职业者精通 Excel》      - 字幕:*3 月 31 日开始*      - 视觉:生产力图标  ---## 4. 导航标签-**标签**:    - **趋势**(活跃,**粗体标签**带有**蓝色下划线**)    - 受到推崇的    - 已注册    - 已保存  ---## 5. 过滤行- **过滤器(下拉菜单)**:    - **过去 7 天**(基于时间)    - **所有主题**(类别)    - **所有级别**(难度)  ---## 6. 热门课程列表- **布局**:可重复课程项目的垂直堆叠:  - **左**:圆形缩略图    - **中心**:      - 课程名称      - 级别(例如,初学者、中级等)    - **右**:保存图标  - **底部**:入学人数 + 趋势(例如,入学人数 2.4k,+12%)   ---## 7. 底部导航栏-**标签**:  - **主页**(活动,突出显示颜色)    - 搜索    - 活动    - 轮廓  - **风格**:    - 下方有标签

然后我将其粘贴到 ChatGPT 中的新聊天窗口中,然后单击“生成”图标。

2. 生成代码支持的 UI

令人惊讶的是,ChatGPT 在右侧打开了一个额外的面板,触发了它的 Canvas 功能。然后它开始生成代码。

这立刻让我想起了克劳德的神器功能。

ChatGPT 的屏幕截图

然后我点击了右上角的“预览”按钮。

生成了响应式、代码支持的 UI。

ChatGPT 的屏幕截图

看起来很有趣,但似乎不如克劳德那么精确/精致。

3. 要求提供视觉模型

由于我的目的只是生成一个图像(一个可视化模型)而不是一个代码支持的 UI,因此我请求后续提示来纠正它:

创建一个可视化模型。而是一个视觉模型。

结果如下:

通过 ChatGPT 生成

结果出乎意料地好,尤其是与 ChatGPT (DALL·E) 之前生成的版本相比。这是一个巨大的提升。

测验:你能在上述 AI 生成的 UI 中找到多少个拼写错误?:)

4. 要求缩小用户界面

尽管用户界面看起来不错,但我仍然对图像截断感到有点困扰,所以我问了:

顶部和底部看起来有点截断。您能将 UI 缩小 20% 左右,让它整体更小一些吗?顶部底部看起来有点截断。您能将 UI 缩小20%左右, 让它整体更小一些吗?

结果如下:

通过 ChatGPT 生成

看起来不错!

5. 要求生成设计选项

然后我开始更有创意了……我想,如果我让它生成多个设计方案供我参考会怎么样?那会更有帮助!

所以我写了这个:

创建三个设计选项。使用相同的核心内容,但根据以下描述改变布局、UI 元素和视觉重点:选项 1. 大胆且引人入胜- 优先考虑视觉冲击力和品牌表达选项 2. 功能强大且快速- 优先考虑速度、清晰度和生产力- 紧凑的用户界面,卡片更小,信息层次更密集选项3.个性化和温暖- 优先考虑联系、信任和个性化- “为你推荐”轮播,包含人工智能策划的课程建议- 社会证明(头像、徽章、朋友活动)- 添加“社区”选项卡,用于同行共享内容

结果如下:

通过 ChatGPT 生成

再次,我对 GPT-4o 图像生成能力的提升感到震惊。

虽然这三个选项看起来仍然非常相似,但如果仔细观察,就会发现一些小细节 - 例如“搜索”图标、社交证明和副本 - 试图使每个版本都与其他版本区分开来。

不过,结果肯定还有改进的空间。例如,由于一张图片中包含了大量信息,ChatGPT 的精度开始下降。你可能会注意到,部分文本变得无法识别/扭曲。

6. 将设计转换为 Figma 文件

接下来,作为一个有趣的测试,我使用Codia AI 的插件根据 ChatGPT 生成的视觉模型生成 Figma 设计。

Figma 中的屏幕截图

所有组件(包括文本)都可以在 Figma 中编辑。

它使用的字体系列是 Intel。

好得可怕。

如果我想进行更改,这使我能够自定义 UI 模型。

最后的想法

ChatGPT 生成 UI 视觉模型的能力是一个巨大的提升。与之前版本相比,它提供了更高的精度和对提示的遵循性。

话虽如此,速度还是有点慢,准确率还有待提高。有时图像生成到一半就停止了;有时结果很随机,而且与指令不完全一致。

当我要求 ChatGPT 根据设计选项创建 3D 模型时,事情变得有点扭曲和奇怪——但还不算太糟。

通过 ChatGPT 生成

不管怎样,这已经是一次很棒的升级了。我现在能生成以前无法生成的东西了。

这一切都在 ChatGPT 聊天窗口内完成。多么方便啊?

我非常兴奋并希望未来会有更好的升级。

科学的 UI 设计流程以及如何提升 UI 视觉效果

涛涛

这篇文章主要分享了科学的 UI 设计流程以及如何提升 UI 视觉效果,结合学生作业案例,解答了设计中常见的问题,内容通俗易懂

8 个易于实践的 UI 设计技巧

涛涛

本文总结了 8 个易于实践的 UI 设计技巧,可帮助设计师改善设计并为后续实践提供指导,具体内容如下。

UI 设计中的构图与排版

涛涛

UI 设计中的构图与排版需将文字、图片及色彩等要素有组织组合,构图通过黑林错觉等心理学原理和居中、九宫格等九大技巧构建和谐布局,排版依据格式塔原理的接近性、连续性等法则及亲密性、对齐等原则,合理运用对比、重复等手法,同时结合界面投影等设计形式,以提升页面用户体验及相关性。

UI 设计中的情感化设计

涛涛

UI 设计中的情感化设计是设计师基于满足产品功能性和易用性后,设计出满足用户更高层级需求的创意表达工具,其目的是赋予产品情感以增加用户粘性、树立品牌形象以增强用户认知、引导用户操作以达成设计目的,可从本能层次(视觉)、行为层次(交互)和反思层次(思维)融入情感化设计,如视觉层次用独特 IP 形象、风格明确的规范化设计和拟人化动作,交互层次遵循操作前可预知等原则,思维层次明确服务者定位等,如此才能设计出以人为本的产品。

如何设计好看实用的仪表盘?

涛涛

仪表板 UI 设计需注重一致性,在颜色、字体、元素位置等方面保持各设备统一,优先传达重要信息,采用卡片布局、将关键内容放中心路线、用 18 像素内字体和独特颜色突出,设计要便于用户定制,如拖放交互、修改字段、换主题等,图表选择条形图等简单类型,避免 3D,图标选熟悉的,字体不超两种并建立视觉层次,色彩遵循心理学且不过度使用,利用对比度,同时要了解用户偏好,才能设计出实用美观的仪表板。

UI设计的4个角度14点思考

涛涛

UI 设计需从产品经理、交互设计师、用户和自我这 4 个角度思考:像产品经理一样关注用户群体、相关竞品、主要商业模式;像交互设计师一样考虑用户体验、使用场景、信息优先级、转场、使用习惯;像用户一样思考产品能否解决问题、设计是否美观、使用是否顺畅;像自己一样保持设计观,不盲目接受错误设计。如此才能做出符合用户需求且有自己韵味的设计。

日历

链接

个人资料

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

存档