最专业的代练平台开发!

资讯热点
高级学习!如何在产品界面中设计内容?

发布时间:2020-8-21 分类: 行业动态

我今天想谈的不是设计技巧或方法,而是设计过程中的一个非常基本的,但往往是无意或有意的忽视:设计草案内容的控制。

通常我们认为我们是产品框架的设计者,用户填写内容和设计并不重要。

产品上线后,当老板赶紧去寻找设计师时,设计师不满地想出了一个漂亮的设计稿:这个用户的口味不好,怪我??

引用今年多次提到的一句话:未来,整个互联网设计师都强调内容创意的设计,而不仅仅是产品框架的设计。

内容创建是一个很大的话题,我们今天要讨论的只是设计内容控制的基本要求——深入思考设计草案中内容的真实性。在下文中,我们将结合一个案例来讨论内容真实性的三个层次及其对项目和设计者本身的价值。

案例介绍

工作中的项目不便于讨论。以下是虚拟项目“一站式”的示例,便于通常的讨论。

由于它是基于许多商业背景的假设的概念解决方案,因此可能有一些地方不是最合适的例子,但使用熟悉真实思维过程的项目是我现在能想到的最佳方式。

“一站式”是基于地铁查询工具的内容共享平台。用户可以简单地将它用作地铁查询工具,或者作为树洞来分享自己的地铁相关故事并找到共鸣。

以下引用当时的简要介绍,简要介绍本案的设计背景:

当网易云音乐评论和杭州地铁的结合在一起时,我想到了为什么地铁和音乐评论如此之好。

地铁站一直是交通设施的代名词,它越来越像一个城区。每天都有游客来来往往。地下地铁站不是一个明亮的场景,它是思绪闪回和触摸场景的地方。因此,与记忆和故事相关的音乐评论在地铁中看起来非常和谐。

那么如果地铁站本身有自己的“站点评论”?

关于这个案子的更多背景可以加盖印章和rarr;《一站:提起一个地铁站时,你会想起什么?》。

从一个反例来说

首先,让我们来看一站的主页。主页的主要部分包括顶部的“今日推荐”卡片轮播,本周的热门,朋友推荐以及编辑选择。

我还为这篇文章准备了相应的计数器版本——故意基于Dribbble上常见的一类飞机风格。

在正常的工作环境中,我认为反例中的这些问题绝对不可见:

在国内用户的项目中,为了看起来高,使用英文排版,外国人头像和ID。

界面的主体由漂亮的图片支持,甚至界面颜色匹配是根据图片拍摄的——所以没有严格的色彩搭配,它看起来不错。

副本和内容是莫名其妙的——谁会在关于地铁站的故事中写下这些直言不讳的句子?

你为什么要首先提出这样一个令人发指的反例呢?

首先,这是因为这些问题与我在本文中要讨论的问题有一些共同之处。

其次,我想用这个例子来说一些额外的东西:当Dribbble处于这种类型的飞机的边缘时,我和Dribbble谈了一个非常着名的同事。这些手稿的大量涌入极大地误导了刚开始或开始的朋友。我认为在实际工作中,我会把一些看似好看的飞机(事实上,不一定)放在一起,即使在作品中也是如此。在很大程度上,同样的手稿以相同的方式产生,导致在交付后海洋沉没。

因为商业环境中的视觉设计绝不是手稿,所以产品和交互设计更是如此。

事实上,练习草案对于从业者来说绝对有价值。我愿意在工作的时候继续练习。我将抛弃我在实际工作中所采取的好主意,并将交换技能并提高技术的熟练程度。对于设计师自己来说,即使手稿可能不成熟,也总是一件好事。

但是,对于那些看工作的人来说,可能没有任何价值。即使是那些被同样工作的洪水严重误导并且浪费大量时间来模仿类似手稿的初学者也非常受欢迎。

练习草稿的英文版有什么意义吗?我的判断是,熟悉中西方之间的微妙差异是有帮助的,特别是对于可能在工作中接触海外项目的设计师。

我也练习英语排版,但我总是考虑在完成中文排版后给自己一个额外的刻意练习。在Behance上发布通信也很方便。也是通过这种方式,去年我找到了两个与外国队合作的机会。

但是,不要只看飞机的吃水,即使中文没有排版,那么去英文选秀,然后马车倒挂。

三个级别的内容真实性

除了上面提到的非常荒谬的问题,继续比较两个草案。

首先,乍一看,哪一个看起来不错?可能很多人认为这是后者。但是当涉及到地面时,后者可能会被产品和开发喷射到筛子中。

原因是今天我想谈谈内容的真实性。内容的真实性将极大地影响设计草案的质量,沟通的效率和着陆的平稳性。

关于设计草案是应该注重美学还是注重实际,还与视觉同事讨论过。最终的共识是:看具体阶段。

在初始报告阶段,您可以向老板展示性能更好的概念草案,但是任何不希望手稿被诽谤的人都不会在报告中显示某些极端情况。

当然,前提是这些“理想效果”也在可能的范围内,而不是采取不能出现在产品中的完美展示来欺骗老板,那么当谈到降落时,情况并非如此。必须等待董事会。它是。

在项目实施和登陆阶段,——也是本文讨论的阶段,我们必须彻底考虑内容的各种变量,在这个阶段内容的真实性尤为重要。

对于团队合作的效率,无论是在审查还是着陆中,逻辑真理都有利于减轻阅读稿件的人的理解成本和不必要的反复确认沟通。这是许多同行已经在聊天或文章中表达的好处。 。

我想要关注的是产品设计师本身的价值——真实性是思考你的体贴的最佳方式之一。

内容真实性可分为三个级别:

逻辑现实。

内容来源是真实的。

用户情绪是真实的。

相应的是产品设计师的三个重要功能 - ——逻辑判断能力,商业理解能力和同理心。

以下将结合一个站的示例进行分析和详细说明。

第1级:逻辑现实

逻辑真理是最基本的要求。

例如,分阶段活动页面,剩下10到4天,剩下3天,是两个不同的阶段(称为阶段A和阶段B)。阶段A和阶段B的播放方式不同,导致界面存在许多差异。不要在B阶段界面的活动倒计时上写“剩下6天”。它应该还剩不到3天。写作“剩下6天”显然会让下游同事感到困惑甚至误导。

不久前,一位产品经理同事看到我正在仔细检查交互式手稿中的类别数量和总字段数。我说过你的贡献过于严谨。这可能是由于工程学的起源,自从我第一次进入这个行业以来,我已经习惯了。

在涉及故事列表的场景中,逐个填写每个故事的时间和点数,可以引导我思考,在当前模块中,排序规则是按时间还是按点数排序?在电台页面的故事列表中,用户我想看看默认是“最新”还是“最热”。哪一个适合留住新用户,这对老用户有好处,是否提供自定义设置?

关于排序逻辑,城市的站点列表和线路站点列表,哪种逻辑更合适?

不同时间段的显示格式是什么?对于日期的表达,请选择“年 - 月 - 日,月 - 日”或“X天前,昨天”。你需要额外的积分和秒数吗? “X分钟前,X小时前”的关键点是什么?

故事的哪些页面属于地铁站字段需要添加城市名称,哪些不使用?

通常,交互设计是前进的,并且通常与产品一起考虑。似乎我不知道如何从它开始。事实上,当我每天埋头时,我更注重一些逻辑细节。我更多地考虑产品和操作,也就是说,这是最容易锻炼的。其中一种方法。

第2级:内容来源为真

如果逻辑真理有助于与产品经理思考,那么内容源的真实性对于理解操作要求和困难非常有帮助。

平台内容主要基于UGC还是PGC?哪个副本,图片和字段需要强烈操作?

这似乎与设计没什么关系,事实上它需要在任何地方都要仔细考虑。

以“一站式”为例。这是一个非常明显的UGC属性平台。根据产品定义(通过案例的背景假设,我们不在此处讨论),用户发布的内容表单是图形,故事在150字以内+至少一张照片组成。除了可以由平台操作的主页轮播,编辑选择和主题规划之外,所有其余内容都是不可控制的UGC内容。

这要求在设计过程中的任何一点都能很好地理解内容的质量和特性。

以图片为例。由于目标用户是熟练使用移动电话的年轻人,具有相对较高的审美标准,并且熟悉过滤器的操作,因此他们发布的地铁的地图,情绪和记忆的质量可能不是特别差。 。但与此同时,因为照片大多是拍摄的,而且场景与城市的地铁站有关,这就决定了视角必须是抬头的视角,而且高海拔的高度会更低以前的假冒飞机起草射击。

因此,在一站式互动草稿中,除了在商业上可行的场景中使用的一些照片之外,所有照片都在我自己的移动相册中。

让我们看一下主页顶部的“今日建议”模块,以一些非常简单的问题和答案为例,讨论内容源在设计中可以关注的重点。

问题1:为什么主页顶部的“今日推荐”模块会选择卡片轮播,但不直接制作更漂亮的横幅?网站详细信息页面和许多其他页面可以是?

答:在大多数情况下,横幅顶部有一个文本图层,文本图层必须出现在相反的中心。这与卡片容器明显不同。

网站详细信息页面的横幅地图(如右图所示)具有强大的操作属性,页面顶部包含文本的可读性。平台编辑器有一百种方法可以避免。

“今日推荐”(左)是UGC内容。虽然编辑推荐了一种筛选机制,但建议使用高质量的内容,这通常是因为故事本身是触摸的,并不意味着图片可以与上面的任何文本完美匹配。相处得很好,这是完全不同的。

如下所示,如果站点详细信息页面的横幅地图成为UGC内容(例如将最热门故事的第一个地图作为站点标题),则可读性变得非常不可控制(右)。

问题2:为什么卡片大小正方形?而不是更漂亮的4: 3,3: 2,16: 9等等?

答:因为今天的推荐中推荐的每个项目都是由用户上传的。当您考虑在朋友圈中看到的照片时,很容易认为用户拍摄的UGC图像根据横向和纵向的水平和垂直习惯而不同。

在这一点上,通常的做法是切割中间部分,如果在反例中使用容器的水平版本,则垂直照片被切断得非常严重甚至变得莫名其妙。

问题3:为什么用户输出的图片相同,列表中的所有图片总是以非常小的尺寸使用,只有“今日推荐”的图片可以大胆占据屏幕的一半?

一站式是图形内容平台,图片和文字都是基于文字,而不是几乎每个内容都有几乎高质量照片的图像平台。

“推荐今天”被编辑和过滤,而其他列表按点或时间排序。

以喜欢的顺序为例。哪一段内容是充值的,不一定是因为图片拍得很好,它很可能是一种内容,可以唤起其他用户的共鸣,但有更随意的画面。如果此类内容以热门列表为榜单且显示尺寸过大,则显然会对整体感知产生不良影响。这也是图像显示空间经常在工作中的实际项目中被有意压缩的原因。

那么,PGC怎么样?它可以任意设计吗?增加经营妹妹的工作量?让老板给她一条鸡腿。这么简单吗?

例如,主页的顶部是反例,需要额外的横幅操作吗?

如果仅从设计角度来看,这里没有答案。也许它根本不需要,也许真的有可以操作的场景。有必要与操作充分沟通,实现设计,产品和操作的双赢。

这不仅仅是因为它看起来不错。在反例中,强行在顶部添加了一个Banner旋转木马,旋转木马是什么?多么美丽的风景图?

顺便说一句,这里有一个简单的解释,我没有根据这样一个假设的商业背景说明:这个产品不需要第一级Banner在提升内容的初始阶段转移到特定场景,这样做只能导致更高的跳跃。

在内容池转换的后期阶段,您可以考虑一些营销内容。例如,如果有一些类似于“体育西路”的促销营销活动,则适合在此操作。

以上问题都是图片的例子。在实际项目中,文案,图片和视频都需要与内容制作者的能力和习惯相结合,充分考虑设计的合理性,而不是扭转设计和强制内容制作者的操作。内容以设计师心目中更美丽的格式制作。这种限制的约束通常是用户流失的开始。

3级:用户情绪是真的

与前两个层次的现实相比,用户的情感现实是对设计师同理心的考验。

在这种情况下,如果你不考虑用户视角的真实性,可以毫不夸张地说我可以在1/10的时间内完成它。

9/10的时间花在哪里?

这有点好笑,它用于制作故事——谁使这个故事平台。

电台评论的内容是逐一写入的。其中一些是从向朋友解释案例背景,朋友帮助写作或提供材料,另一部分是用最大的替代感和同理心写作。

在开始设计内容卡之前,您需要“编辑”很多故事。在此期间,你会开始不由自主地思考:你会在这种评论中写出多少个单词?文字是否全部放在卡片中或以固定长度切断?它如何影响卡片设计?有多少行?线路有多高?当字数很小时,这是奇怪的吗?图像大小如何适应字数的变化?

最后,故事文本的最大长度被确定为150.选择不同场景的卡片进行剪切和完全布局。这些是在这一系列思考之后确定的答案。每个小问题的具体分析都不在这里。

围绕文本的设计,谈论一个问题——故事需要标题吗?

在设计开始时,您可能不想绘制标题。与长度不固定的内容相比,标题在某种意义上确实对设计更有利。

但是当我写作和我自己时,我忍不住认为标题非常麻烦,无论是在设计时,还是真正的用户。而对于长度仅为150的故事内容,标题的价值很难说。

因此,在随后的设计中取消了标题的设置,并且直接翻译了内容。如果您不尝试以用户的角度编写内容,那么您将不会深入思考。

对于目标用户组,是否需要提供个性化签名功能?曾几何时,大量的APP,无论何种类型,都会复制QQ的个性化签名系统。结果太可怕了,设计的标志必须打开天窗。因此,这是在签署稿件时需要同时考虑的问题。

考虑到产品受到大量精致且渴望亲自表达的人的影响,他们自己和朋友“签名”签名的过程也非常顺利,结果也与产品的色调一致,因此最终采用了签名方案。

最后,个人一直认为了解用户的产品音调非常重要。它是一种柔软的力量,没有真正的感受,但不容忽视。这不是一个过客,而是一个设计。思考这个问题。

同样是来自网易的两款产品,由评论系统,网易云音乐和网易新闻所知,用户的语言风格和评论习惯完全不同,为什么云音乐评论回复是一对一的私人聊天,以及网易新闻以出生于“大厦建筑”模式的各种神建筑而闻名。产品的许多特性在发布之前并未完全设置,而是用户的反馈输入的结果。

结论

也许许多朋友的反应是:如果是这样的话,有时间在实际项目中真正改进手稿的内容是个好主意。按时交付框架是件好事。

但我最真实的感觉是,我真的不觉得这个过程影响了我的效率。是因为war3训练的速度?

我认为最合理的解释是因为这种习惯已经和你在一起很长时间了。也许是我第一次研究内容的不真实性并逐一改变它,我觉得花了一点时间,但这次我改变了一点。下次我谈到需求和手稿时,这自然是第一次。这被认为是全面的。随着时间的推移,对内容进行简单检查非常耗时。

即使项目真的很热,也没有时间在设计草案上展示,持续锻炼和考虑真实性至少可以帮助您考虑可能影响设计的所有细节。

我认为这是勤奋思考和造福生活的奖励。

« 网站SEO优化:如何理解排名和流量之间的“暧昧”关系 | 微铸易旭阳:利用人工智能解决超人崛起带来的残疾问题 »