我对 ChatGPT 下手了!




ChatGPT是一款非常神奇的 AI 软件,它能够帮助我们改简历、写文章、阅读汇总。同时,它也是我们的一个非常好的文字秘书。
但是,在使用它的过程中,总会让我感到非常头疼。因为作为一个设计师,第一次看到日活这么高,同时页面还这么 简洁(jian lou),真是一个非常优秀的产品!
不知道大家有没有和我类似的想法,我想修改这个页面,因为在我的使用过程当中,也会有对应的痛点。那么今天我们就来聊一聊:

如果我是设计师,我会如何进行优化呢?

产品介绍

首先改一款产品时,需要对该产品非常了解。鉴于部分同学可能不太熟悉,我们先讲解一下 ChatGPT 的的基本页面内容。

我对 ChatGPT 下手了!

页面左侧:

是聊天列表区域,其中包含我们每一次聊天后生成的历史数据内容。

同时 ChatGPT 会根据你的内容,自动生成对应的标题。我们也能够点击对应的历史数据,来对标题进行修改。

我对 ChatGPT 下手了!

页面左下方

是设置入口。在ChatGPT中,只有少量的配置选项,如夜间模式、问题的QA、退出登录以及升级付费。

它就类似于在 B 端产品的导航当中,很多默认用户信息配置、通知、帮助中心 等功能。

我对 ChatGPT 下手了!

页面右侧

是聊天框,其中包含每次聊天的具体数据。通常以“s一问一答”的形式呈现,我们提问,他回答。当您第一次进入页面时,系统会给出默认提示,这也是关于 ChatGPT 提供的新手引导。
我对 ChatGPT 下手了!

页面下方

是我们的聊天输入框,我们可以在里面去提出相应的问题,和 AI 进行互动,进而得出我们想要的结果。
我对 ChatGPT 下手了!
那这就是关于ChatGPT整体的布局,而了解了它的布局过后,我们就可以对它的一些问题进行修改。

无法显示长文本

在 ChatGPT 里,我们经常会使用大量的长文本信息,比如 一篇文章 让 ChatGPT 进行总结;程序员编写的代码 让它进行检查;这些场景都需要我们进行长文本录入,但是在设计层面上,目前 ChatGPT 给出的方案是使用鼠标滚动的方式来查看长文本,假设文本过长,我们就需要来回滚动,反复查看,同时顶部的空间并没有进行很好的利用,因此现在的方案不太适合大量文字输入的场景。

我对 ChatGPT 下手了!

为了解决这一问题,我们可以在输入框旁边提供一个全屏输入入口。

我对 ChatGPT 下手了!

当用户需要录入长文本时,可以点击该入口,展开输入框并实现内容的大面积展示。

同时,全屏输入不会影响用户的正常体验,因为其所影响的页面都是用户之前的对话或者 ChatGPT 本身的引导设计。

我对 ChatGPT 下手了!

同时你也可以发现,在产品发展过程中,很容易出现设计方案没有跟上的现象,这就是一个例子。

寻找大量的 Chat 数据

因为 ChatGPT 的机制,导致我们提问是都需要去新建一个 Chat ,因此左侧会出现大量的 聊天列表。这就导致了在左侧其实囤积着大量的数据,很难去进行寻找。

针对这一情况,首先可以考虑通过顶部增加搜索入口,这样就能够实现我们页面的简单搜索。

我对 ChatGPT 下手了!

同时在聊天列表里面,左侧的图标并没有任何的含义,目前能想到的是可以通过自定义去设定左边的图标,进而来对, Chat聊天里面的内容进行分类,实现统一的管理。

我对 ChatGPT 下手了!

如果上述两种情况,都还不满足,对于 Chat 的管理,那我们可以考虑通过树形导航的方式来解决,可以提供给用户自定义文件的结构,来对上述的内容进行归类。这样就能实现,对数据量大的情况下的管理。

一键清除

除了在寻找大量的 Chat 数据时遇到的问题之外,我们还会发现在删除 Chat 列表时,由于数据量很大,一个一个地去关闭会浪费时间,因此,在 ChatGPT 底部提供了一键删除的入口。

但这个入口的设计有点奇怪,它出现的位置较为尴尬,一方面通过分割线去区分了上半部分的消息列表;另一方面又让我觉得它和下方的信息内容格格不入,感觉层级关系有点混乱。
我对 ChatGPT 下手了!

针对这个情况,我们可以优化一下目前的设计方式,因为分割线的出现,本身就是为了去区分两部分的信息内容,我们可以通过轻量化的清除,将 它 与 分割线结合,进而实现此功能。

我对 ChatGPT 下手了!
当然不能光说不好的交互,在 ChatGPT 中还是会有很多亮眼的地方,比如关于清除的确认。

我们可以发现,当我们点击清除按钮后,它会直接询问我们是否要删除所有信息,再次点击后就可以完成清除操作,这个连续性的操作非常不错。

视觉引导

当我第一次进入 ChatGPT 时,我其实会非常的迷茫。因为 AI 软件给人带来的感觉就是 门槛高、需要复杂的操作,因此在使用时,很明显能够感受到它的新手引导过于缺失,或者叫做保守,在所有的用户进入它时,我们都会打开这个页面,其实这种就是 它对这个产品的全部介绍。
我对 ChatGPT 下手了!
但是我根本不知道原来是需要点击下方的输入框进行录入,因此这里可以加上更明确的视觉引导,来提示我们的用户在这里进行输入你的问题。

我对 ChatGPT 下手了!
当然在引导上,还能做得更好,这部分可以看看我们之前分享 Arco 浏览器的内容。

当然,目前修改的内容,仅仅是我使用体现下来遇到不太满意的地方,不过 使用 ChatGPT 确实能够为我们日常的工作带来非常多的便利,你在使用 ChatGPT 还遇到过哪些设计层面的问题,不妨在评论区我们一起讨论讨论~



最近我们开放了 B 端设计交流 5 群,如果你也是 B 端设计师,你还没有加入咱们的交流社群,可以扫码下方二维码

我对 ChatGPT 下手了!

当然入群需要做一个小小的测试,这是群内的各位设计师的质量保证,如果感兴趣,就扫码备注 “入群” 即可

本篇文章来源于微信公众号: CE青年Youthce

UI/UX

UX团队影响力建设指南(上)

2023-4-11 8:54:00

UI/UX

UX团队影响力建设指南(下)

2023-4-19 8:50:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索