• 超全免费!3D模型素材聚合站SketchFab

    UI交互 2022-09-15
    SketchFab 是一个3D模型的聚合网站,从日本九州大学的1400多种生物3D模型到大英博物馆的艺术品3D模型,可以说应有尽有。

    编者按: SketchFab 是一个3D模型的聚合网站,从日本九州大学的1400多种生物3D模型到大英博物馆的艺术品 3D模型 ,可以说应有尽有。

    3D模型干货:

    去年日本最大手游爆款《赛马娘》,是怎么做3D模型的? 对绝大多数玩家而言,这款游戏最让人眼前一亮的,莫过于角色散发出来的魅力。

    阅读文章 >

    大家好哇~这里是和大家一起进步的南清音~

    大家最近有没有看到日本九州大学最近在 3D 模型网站 Sketchfab 上公开的 1400 余个生物 3D 模型?每个模型都活灵活现的,扑面而来的真实感非常强烈。今天我就借此机会来给大家介绍一下这个网站吧~说不定会对你的 3D 建模有所启发呢?

    「日本九州大学 3D 建模」 网站链接: https://sketchfab.com/ffishAsia-and-floraZia

    Sketchfab 是一个拥有海量 3D 模型的分享平台,涉及的领域众多,这里不仅仅是建模爱好者的天堂也是一个参观博物馆藏品和艺术品的平台。并且里面的模型有很多是可以免费下载的哦~

    「网站直达」 https://sketchfab.com/feed

    在网页上方搜索框内搜索想要查询的建模或者根据分类进行查找,找到之后,在下载模型之前,点开任意一个模型,还可以对模型进行 360 度的实时预览。除了零散的模型,你还可以点击 Sketchfab 的 Collections 菜单,通过查看他人创建的收藏夹,可以很方便地找到多个风格相似的 3D 模型。

    这里要重点推荐一个 Sketchfab 账户——The British Museum(大英博物馆),在这里你可以看到多个古代的艺术品,如狮身人面像和古人大理石肖像等。链接在下方↓ ↓ ↓

    https://sketchfab.com/britishmuseum/likes

    1.下载方法:

    该网站部分资源支持免费下载,需要免费注册帐号,如不熟悉英文,可采用浏览器自带的翻译功能进行查看。

    首页点击 JOIN FOR FREE,填写相关信息,进入注册邮箱进行认证就可以申请到一个账户。然后找到你想要的模型,点击「Downloadable」,进去之后选择你喜欢的模型点进去找到「Download 3D Model」,找到你需要的格式下载下来就好啦~

    下载格式:fbx、gltf、obj、blend 和 stl 等

    2. 特点:

    丰富多样的 3D 作品展示

    在这里我们可以看到来自世界各地优秀的 3D 设计师展示的作品,只要在搜索框内搜索我们想要的作品就可以轻松找到了。当然,你也可以通过列表里的分类进行查找,这些炫酷的 3D 作品总有一款能让你心动。

    专业的 3D 模型展示

    如果你是 3D 模型设计师,也是可以在 Sketchfab 上展示 3D 作品的。Sketchfab 支持 27 种 3D 文件格式,包括 .blend、.obj、.3ds、.dwf 等常见的 3D 软件格式。

    用户把 3D 模型直接上传到 Sketchfab 平台上,便可以对模型的颜色、透明度等一些模型外观参数进行操作,支持金属度、高光、凹凸等多种通达调整。

    不仅如此平台还支持大量的贴图通道,就连法线贴图都能很好的实时渲染。用户在平台上还可以对展示的 3D 模型作品选择不同展示方式,比如:可以显示 3D 模型的结构线,改变渲染模式等操作。

    3. 优势:

    sketchfab 最大的优势在于实时操作查看各类 3D 模型。中间拖拽可以平移模型,左键拖拽旋转,滚轮键缩放,ALT+左键拖拽可以实时调整灯光。

    sketchfab 汇聚了全球热爱 CG 的专业和非专业人群,用户量大,里面的资源品质非常高且数量广,生物、建筑、机甲、艺术、物件、游戏角色等几十种分类。常用搜索方式有两种,分类检索和关键词搜索。

    sketchfab 采用下拉刷新的方式,相比于很多老牌专业资源网,更加贴近用户使用习惯。并且它的加载和刷新时间短,现在大多数国外网站都存在加载和刷新慢的问题,但是 sketchfab 基本上是没有的。

    好啦~今天的分享就到这里了,欢迎大家留言讨论哦~

  • 免费好用!自媒体时代设计师必备的5款Gif制作工具

    UI交互 2022-09-15
    今天为大家整理推荐 5 款免费好用的 Gif 制作工具,适用于电脑端的 Gif 录制及编辑,还不会制作 Gif 的小伙伴不要错过哦~

    大家好,我是和你们聊设计的花生 ~

    身处自媒体时代,我们每个设计师都可以作为内容创作者在微博、小红书、知乎、朋友圈这些地方分享自己的经验和想法,而无论是写设计教程,还是制作表情包,Gif 动图都是一种极佳的信息传递媒介,它比静态图片更详细生动的展示步骤和细节,也比视频更轻便直观,因此应用范围极广。

    今天就为大家整理推荐 5 款免费好用的 Gif 制作工具,适用于电脑端的 Gif 录制及编辑,还不会制作 Gif 的小伙伴不要错过哦~

    清华出品!AI 神器 WantQuotes 让你的文案立马变高级 大家好,我是和你聊设计的花生~ 前两天刚盘点完一波人工智能在图像生成方面的超强工具,又在微博上看到了清华大学推出的一款“据意查句”的 AI 工具,可以按照你想要的意思快速查找出相关的名言、诗句、俗语等 。

    阅读文章 >

    一、ScreentoGif (Win) 应用详情及下载地址: https://www.screentogif.com/  (文末也有安装包)

    ScreentoGif 是一款操作简单、功能全面的免费 Gif 录制工具,适用于 Windows 系统,支持中文界面。可以一站式完成由录屏/视频/图片到 Gif 的全部制作及编辑工作。

    使用方法:需要录屏时启动程序后点击录屏选项,设置好录制区域后点击开始,点击结束完成录制,软件会自动跳转至编辑界面,编辑完成后导出即可。

    二、 Gif123(Win) 应用详情及下载地址: https://gif123.aardio.com/ (文末也有安装包)

    Gif123 是一款适用于 Windows 系统的轻量录屏工具, 应用程序不到 800KB。界面简单操作便捷,录制完成后自动压缩优化 Gif 的体积,可一键复制到微信/QQ/文章编辑器等界面。相比其他的 Gif 软件,Gif123 可以省去人为压缩、导出、上传等步骤,且智能压缩后 Gif 的色彩及质量仍然比较理想。

    使用方法:启动程序即使录屏界面,设置好录制区域后点击开始,点击停止结束录制,点击预览可以查看录制结果,点击复制后可以直接粘贴到需要的地方。

    三、 Kap(Mac) 应用详情及下载地址: https://getkap.co/

    Kap 是一款适用于 macOS 系统的开源 Gif 工具,支持自定义录制区域及指定的应用程序窗口录制,。录制时可以选择显示 鼠标 指针、鼠标动作、隐藏桌面图标等,录制完成后可以调整帧率和尺寸,支持 GIF、MP4、WebM、APNG 四种导出格式。

    使用方法:启动后点击图标打开面板,按红色的框选图标设置录屏区域,调整好区域后点击面板上的红色按钮就可以录制,再次点击结束录制。

    四、Gif 优化工具 EZGIF.com 网址直达: https://ezgif.com/optimize

    EZGIF.com 是一款在线 Gif 编辑工具,直接打开使用,无需注册登录。功能包括在线制作 Gif,视频转 Gif,Gif 裁剪、删帧、比例压缩、旋转、添加文字、调速、倒放等等。它的 GIF 优化功能用来压缩 Gif 非常好,压缩后 Gif 仍能保持较好的质量。

    五、Gif 格式转换神器 TinyWow 网址直达: https://tinywow.com/

    实际应用中,我们常需要将 Gif 转换为 MP4、WEBM 等不同格式。这款为大家推荐一个全能的格式转换网站 Tinywow。它免费快捷,支持 Gif 与 MP4、WEBM、MOV、MKV、AVI、PNG、JPG 等多种格式的互相转换,除 Gif 外也支持 PDF、视频、图片、文档等多种类型的格式转换。

    好啦以上就是今天的有关 Gif 生成工具分享,如果你也有好用的 Gif 工具,欢迎在评论区分享出来。如果有关于本文或者设计的相关疑问,可以在评论区提出,我会第一时间为大家解答 ~

    推荐阅读:

    想转换PDF/视频/图片的格式?收下这个在线免费神器! 本文要介绍「TinyWow」是一个免费在线工具,首页明确标示「这是一个解决文件问题的工具」,使用者在 TinyWow 可以找到各种解决问题的功能,主要有 PDF、视频、图片、文件和其他工具,使用上也非常简单,选择要用的功能、将文件上传后就能进行处理,完全不用额外安装软件,不过要注意的是这

    阅读文章 >

    要质感叠纹理!5个设计师必备的免费高清纹理素材网站 大家好呀,我是和你们聊设计的花生~ 在海报设计、字效设计、插画中,叠加纹理是提升设计质感、营造主题氛围的有效手段。

    阅读文章 >

  • 超全免费!3D模型素材聚合站SketchFab

    UI交互 2022-09-15
    SketchFab 是一个3D模型的聚合网站,从日本九州大学的1400多种生物3D模型到大英博物馆的艺术品3D模型,可以说应有尽有。

    编者按: SketchFab 是一个3D模型的聚合网站,从日本九州大学的1400多种生物3D模型到大英博物馆的艺术品 3D模型 ,可以说应有尽有。

    3D模型干货:

    去年日本最大手游爆款《赛马娘》,是怎么做3D模型的? 对绝大多数玩家而言,这款游戏最让人眼前一亮的,莫过于角色散发出来的魅力。

    阅读文章 >

    大家好哇~这里是和大家一起进步的南清音~

    大家最近有没有看到日本九州大学最近在 3D 模型网站 Sketchfab 上公开的 1400 余个生物 3D 模型?每个模型都活灵活现的,扑面而来的真实感非常强烈。今天我就借此机会来给大家介绍一下这个网站吧~说不定会对你的 3D 建模有所启发呢?

    「日本九州大学 3D 建模」 网站链接: https://sketchfab.com/ffishAsia-and-floraZia

    Sketchfab 是一个拥有海量 3D 模型的分享平台,涉及的领域众多,这里不仅仅是建模爱好者的天堂也是一个参观博物馆藏品和艺术品的平台。并且里面的模型有很多是可以免费下载的哦~

    「网站直达」 https://sketchfab.com/feed

    在网页上方搜索框内搜索想要查询的建模或者根据分类进行查找,找到之后,在下载模型之前,点开任意一个模型,还可以对模型进行 360 度的实时预览。除了零散的模型,你还可以点击 Sketchfab 的 Collections 菜单,通过查看他人创建的收藏夹,可以很方便地找到多个风格相似的 3D 模型。

    这里要重点推荐一个 Sketchfab 账户——The British Museum(大英博物馆),在这里你可以看到多个古代的艺术品,如狮身人面像和古人大理石肖像等。链接在下方↓ ↓ ↓

    https://sketchfab.com/britishmuseum/likes

    1.下载方法:

    该网站部分资源支持免费下载,需要免费注册帐号,如不熟悉英文,可采用浏览器自带的翻译功能进行查看。

    首页点击 JOIN FOR FREE,填写相关信息,进入注册邮箱进行认证就可以申请到一个账户。然后找到你想要的模型,点击「Downloadable」,进去之后选择你喜欢的模型点进去找到「Download 3D Model」,找到你需要的格式下载下来就好啦~

    下载格式:fbx、gltf、obj、blend 和 stl 等

    2. 特点:

    丰富多样的 3D 作品展示

    在这里我们可以看到来自世界各地优秀的 3D 设计师展示的作品,只要在搜索框内搜索我们想要的作品就可以轻松找到了。当然,你也可以通过列表里的分类进行查找,这些炫酷的 3D 作品总有一款能让你心动。

    专业的 3D 模型展示

    如果你是 3D 模型设计师,也是可以在 Sketchfab 上展示 3D 作品的。Sketchfab 支持 27 种 3D 文件格式,包括 .blend、.obj、.3ds、.dwf 等常见的 3D 软件格式。

    用户把 3D 模型直接上传到 Sketchfab 平台上,便可以对模型的颜色、透明度等一些模型外观参数进行操作,支持金属度、高光、凹凸等多种通达调整。

    不仅如此平台还支持大量的贴图通道,就连法线贴图都能很好的实时渲染。用户在平台上还可以对展示的 3D 模型作品选择不同展示方式,比如:可以显示 3D 模型的结构线,改变渲染模式等操作。

    3. 优势:

    sketchfab 最大的优势在于实时操作查看各类 3D 模型。中间拖拽可以平移模型,左键拖拽旋转,滚轮键缩放,ALT+左键拖拽可以实时调整灯光。

    sketchfab 汇聚了全球热爱 CG 的专业和非专业人群,用户量大,里面的资源品质非常高且数量广,生物、建筑、机甲、艺术、物件、游戏角色等几十种分类。常用搜索方式有两种,分类检索和关键词搜索。

    sketchfab 采用下拉刷新的方式,相比于很多老牌专业资源网,更加贴近用户使用习惯。并且它的加载和刷新时间短,现在大多数国外网站都存在加载和刷新慢的问题,但是 sketchfab 基本上是没有的。

    好啦~今天的分享就到这里了,欢迎大家留言讨论哦~

  • 5000字干货!从四个方面完整分析B端工作台的设计流程和方法

    UI交互 2022-09-14
    B端工作台如何设计?本文从需求分析、信息架构、可视化图表和视觉设计4个方面,完整解析一个B端工作台的设计方法。

    编者按:B端工作台如何设计?本文从需求分析、信息架构、可视化图表和视觉设计4个方面,完整解析一个 B端 工作台的设计方法。

    如何制定B端项目全局框架?收下这篇总监级的经验! 这阵子想了想关于交互知识的分享,还是应该要拓展成一整个系列的内容,包含各类组件、控件和行为的解析。

    阅读文章 >

    举着 Case 当火把,照亮五彩斑斓的黑~

    一、需求分析 在设计一个产品的时候,我们要透过现象看本质。

    我们是为谁?解决什么问题?分析的结果将直接影响到方案的好坏。 这里推荐大家采用 5W1H 分析法,5W1H 分析法也叫六何分析法,是一种思考方法,也可以说是一种场景创造分析法。

    5W1H 分析法包含如下几个方面:

    Why:为什么要做,是原因。 What:做什么、做成什么,是目标。 Where:在哪儿做,是地点。 When:什么时候做,是时间。 Who:谁来做,是执行对象。 How:怎么做,是方法。 通过上述分析我们可以(假设)知道:我们的用户是技术人员、基层管理人员;做这个页面的目的是为了让用户随时掌握各项工作的进展情况,快速进入需要处理的工作事项。 根据结论可以得出工作台是一个导航页面或者综合管理页面,它是用户感知产品价值的重要“门面”,使用者有一定的经验,属于高级用户。从设计角度来看,首页工作台是整个系统规范与视觉风格的核心场景。

    使用角色:

    主要是技术人员、基层管理人员

    内容主次(根据需求得出):

    P0:各类数据指标的汇总、我的动态 P1:总量趋势、数据排名、操作汇总 P2:分发汇总、待办事项 设计要求:

    重点突出、简洁、清晰

    二、信息架构 1. 优先级处理

    下面这张图是产品给的原型,也是 B 端面试题中经常会遇到的题目。如果你打算就按照产品给的原型直接做美化,那估计很难被选中。

    做需求分析的目的之一就是为了做信息处理,这里要提到一个词叫“屏效”。B 端产品我们都知道,目的是“降本增效”,在合理的信息布局下尽量利用交互等手段让页面缩短。

    比如:上面原型中有两个 top10 排名,如果一行展示会比较拥挤,也体现不了 top10 排名。考虑“易读性”我们会放两行,但这样又占据了屏幕空间,在与产品沟通后我们把它整合到一起,利用按钮组切换进行查看。同时排名也是业务人员需要关注的,所以我们把它们往上放。

    顶部个人信息内容比较少,也没必要占一整行,我们把它移到右边;各类指标因前 3 个是不能点击的,为了和后面可点击按钮做区分,我们整合到一个卡片上;待办事项与产品沟通后说不太重要,移动到了最下面,操作汇总模块往上移;

    到这里模块之间的信息优先级基本处理完成,下面就要对单个模块进行拆解处理。

    首先我们要观察哪个是:重要信息、次要信息、辅助信息,上面我们提到了“效率”,把重要信息突出显示,就是为了让用户一眼就能看清,不需要去寻找或被次要信息干扰。

    最后一个模块原型上只有一个标题,这真是验证了一句话:“巧妇难为无米之炊”,所以又去找产品沟通,为什么单个模型可以点击查看更多?用户在这个地方想要获取什么样的数据?

    经过一番沟通,拿到了一些“米”,巧妇终于可以干活了。为了体现“易发现性”,我们在后面这个模块上加了一个详情按钮。

    2. 栅格化处理

    其实上面的图是我处理过的,产品的原型可不长这个样子,模块大小、间距都是随便给的。你如果也按照产品给的原型模块大小做,估计研发会“骂娘”,因为这样没法按照比例进行换算,也就没法做自适应。

    这一步主要就是做栅格化处理,我们需要定义每个模块的占比与间距。B 端产品通常选用 24 栅格布局,也就是 24 栏+23 水槽+2 页边距。

    我遇到的工作台页面有两种,一种是带左侧树,一种是不带,这两种对应的栅格化数值不太一样。 按照目前常用的尺寸 1440*900 来计算:不带左侧树我采用的是 1440=2*20+43*24+16*23。

    如果大家做的是带左侧树,可以参考下图数据

    三、可视化图表 重点来了,我个人觉得这一节才是工作台、数据分析页面的核心,但很多人都忽略了,觉得不就是几个图表,唰唰唰一下就搞定了……

    上面我们提到过 B 端测试题给的都是原始数据(表格),需要设计师自己根据数据找合适的可视化图形进行展示。

    如果你对可视化图表不熟悉,不知道什么时候该用柱图、折线图、饼图;不知道随时间变化该用什么图形;不知道体现排名的数据该用什么图形。那你很难输出一份有理有据的作品。

    B 端图表如何设计?这篇5000字的总结超全面! 前言 无论是数据展示设计还是工作汇报中,都离不开图表的运用。

    阅读文章 >

    因图表类型太多,详细的留到后面文章讨论,这次只对原型中使用的到图表进行分析:

    1. 柱图:

    柱状图是常用的数据可视化图形之一,可用于随时间变化而产生变量的数据统计,也可用于数据类别的对比、排名。

    如图,柱状图能展示知乎文章观看者地域分布,也能反应出不同时间段的情况,并通过图形能够快速了解 分布最多和最少的省份。

    优点:

    人眼对长短(高度)比较敏感,可以直观体现数据差异性。

    缺陷:

    分类过多时数据的展示效果会降低。

    设计要点:

    能把图形视觉与体验都兼顾好,才能体现设计师的价值。 设计师的能力不仅体现在技法上,更多的是体现在思考能力上。图形扩展性设计和创新性设计都需要设计师做缜密的思考,只有这样才会有出彩的设计结果。

    信息层级:

    视觉展示:

    2 个人站在一起我们除了对比高度、颜值,还有会对比胖廋。那么,柱状体的粗细和间距如何定义呢? 在图中,中间柱状图的柱子间距过于疏散没有规律;右边图中的柱子间距又过小,视觉上显得拥挤,并且当分类过多时,过小的间距会导致柱状体之间没有独立性,不易阅读。

    定义柱状体的间距可以用 5 分原则设计法,即柱子之间的间距为 N,左右两边与柱子之间的距离就是 2/N。 如图所示。这也是很多界面设计中常用的技法,其原理就是接近黄金比例,视觉上较为舒适。同时,在保证界面元素整体协调性的情况下,尽可能把柱子的宽度设计成 N,这样视觉上最为协调。

    另外,在设计图形前,设计师最好能了解到真实数据,这样才能结合真实的数据来设计图形,尽可能还原落地后的样子。在图中,图形的设计和落地后的样子存在较大的差异。问题就出在设计前设计师没有了解数据的真实情况,前端工程师按照设计图把 X 轴的数值固定了。

    相似图表:

    堆积柱状图:堆积柱状图可以展示两个或多个数据的变化,以及数据之间的综合比较情况。

    分组柱状图:分组柱状图可以在同一数轴上展示各个分类下的不同分组数据。

    有序柱状图:与有序条形图一样,有序柱状图也能呈现数据的排名情况。

    2. 折线图:

    折线图常用于表示一个连续时间段内数据的变化趋势,主要功能是能够清晰地反映出数据随时间变化的趋势。

    如图,折线图不仅能展示不同月份的价格趋势,还能清晰呈现数据的峰值和低谷。折线图也可以是多条线,用来分析多组数据随时间变化的趋势及数据间的趋势比较。

    优点:

    直观反映数据变化趋势

    缺陷:

    无序的类别无法展示数据特点。

    设计要点:

    折线图可以用于展示数据的趋势变化,通过折线的起伏波动可以帮助人们探究数据背后的逻辑。但如果折线图的设计不够合理,在视觉上会让人产生错误的认知。在图中,有的折线图的刻度值设置不合理,如中间折线图的刻度值未从 0 开始,导致折线的呈现夸大;右边折线图的刻度值过高,趋势变化呈现过于平缓,这些都是在不客观地表达数据。正确的方式应该是刻度值从 0 开始,随着数据的增减,刻度值也做相应的变化。

    视觉展示:

    在折线图设计中,还需要注意折线的粗细要适中。在图中,其中一条折线过细,这会降低数据可视化的表现;另一条过粗,就会损失折线中的数据波动细节。在产品的图形设计中,一般网格线和起始线都是 1 像素,折线一般用 2 像素,这样的粗细会有较好的视觉表现。

    相似图表:

    阶梯线图:线在数据点之间形成一系列步骤。

    面积图:与折线图唯一不同的是,其自变量数据和坐标轴之间有颜色填充,这样能更加突出数据的趋势变化。

    3. 饼图:

    提到数据的占比,相信你第一个就会想到饼图,主要用来展示数据分布情况。 饼图是展示占比数据最直观的图形,通过弧度大小来表示分类的占比多少。但饼图有一定的局限性,当占比数值接近或占比分类过多时,在视觉上就不容易辨别各个类别占比的大小。在数据可视化产品中,因为饼图是大面积的色块,视觉上会非常突显,很容易抢走重要数据的风头,所以使用时要酌情考虑。

    优点:

    直观显示各项占总体的占比,分布情况,强调整体与个体间的比较。

    缺陷:

    分类过多,则扇形越小,无法展现图表。

    设计要点:

    每个图形都有自己的设计规范,如当饼图分类过多时,一般不把文字放在图形元素上,因为一旦出现几个相对较小的占比数据,字就很容易溢出,不容易辨别指向的分类,如图中的右图所示。好的解决方案就是,在图形的外围用引线指出分类数据,或者加示例图展示。

    视觉展示:

    另外,饼图的分类最好从 12 点钟的位置开始,这样较为符合人的阅读习惯,即从上到下、从左到右,如图中。如果饼图随意从不同位置开始展示,就会缺少规范,这样当多个饼图同时展示时容易出现混乱。

    同时,在饼图的分类中如果没带排序,如 1 月、2 月……,那么占比最好能够从大到小依次排列,这样还能直观地呈现出分类的排名情况。任何时候,如果有“其他”这项分类,无论其占比多少都要放在最后,因为其数据通常是最不被关注的数据。

    相似图表:

    嵌套圈饼图:用于一个指标在不同维度的占比。

    跑道图:看到占比的同时,可以直观看到指标在当前维度下的排名情况。

    4. 表格

    表格看起来简单,但想设计好也不是一件容易事。通常我们见到的(产品中)表格都属于比较简单的表格。

    在 BI 系统中有一些复杂的表报,如果直接用组件信息会很难阅读。我们需要对表格的视觉进行调整,让信息获取更高效,这就需要一些设计技巧和原则。

    设计要点:

    表格排版第一大原则:文字左对齐,数字右对齐表格中文字需要左对齐,因为我们阅读文字的习惯是从左到右。

    而图中(上图)的项目名称长短不一,居中对齐在视觉上会使切入点呈现“Z”字形,影响阅读效率。左对齐可以使线性结构在视觉上不跳跃,阅读流畅且更具美感。表格中的数字需要右对齐,因为当我们在面对一个长数字时,一般会从右往左读。比如数字¥368,568,023.00,我们一般是从个位到最后的千万位顺序识别数字体量,有的人可以通过千分符迅速判断数字的体量,但其实也是从右到左的浏览顺序,因此数字右对齐最符合人的阅读方式。

    在图中(下图),让我们感受一下数字左对齐、居中对齐、右对齐的阅读效率,以及对各个数据体量的对比感知。

    文字左对齐和数字右对齐,针对的是长短不一的名称和大体量的数字,而对于文字数量一样、体量较小的数字也可以尝试用居中对齐的方式,对称的元素本身就具有美感。如图所示,通过对表格中的文字和数字的重新排版,相信在阅读效率上会有较大的提高。虽然提高了阅读效率,但这相比优秀的表格设计还差得很远,其中最明显的是表格的边框在视觉上过于突出,接下来我们继续调整。

    ① 弱化边框

    如图(下图)所示,通过弱化边框在视觉上能够突出表格的内容。表格边框可以让信息的呈现更有条理,能够提高易读性,但在视觉层级上不能高于内容信息。

    ② 去掉边框与分割线

    将表格的边框与分割线去掉,用留白分隔内容,无框胜有框,增大留白可以使表格更有空间感。这样的设计需要注意的是,元素的间隔不能太小,不然会显得拥挤。由于去掉边框后有些问题会被放大,比如标题与内容没有对比,因此需要增强对比,在整体上要有层次。

    ③ 强调标题

    图中的表格加强了标题,这样看起来更有层次。强调标题的方法有很多种,不一定只是加粗字体或加大字号,还可以给标题栏添加背景,以形成对比。

    ④ 突出重要信息

    如果在一组数据中有重要数据和次要数据之分,那么就需要在对重要数据的设计上着重突出,表格的设计同样如此。图中所示就是把重要的数据信息通过增加背景色与其他元素形成较为突出的对比,这种设计是一种为用户做选择的设计方法,容易让用户的视觉停留在他本想重点关注的地方。

    ⑤ 表格扩展设计

    由于人们常常会对熟悉的事物产生审美疲劳,因此设计中有创新才容易给人眼前一亮的感觉。

    下图在背景上面给了一根横线,来凸显这一列的数据,这样除了可以加强信息传达也可以打破常规的表格样式(这里只是提供一种思路)。

    ⑥ 表格字体运用

    表格数字最容易出问题的是数字字体的运用,因为很多数字字体不是等距设计,比如数字“1”所占的字间距面积要小于“8”的。如果遇到一组大量级的数字,就有可能会误导观者。

    如下图所示,本来 32,118,116,00 大于 28,558,363,00,但由于不同数字所占宽度不一样,这样的设计在视觉上容易误导用户。因此,表格中的数字要使用表格字体,因为表格字体每个数字所占面积一致,这样就不会出现案例中的问题了。

    其实很多表格里面的数字字体都存在类似问题。下图是修改数字字体后的设计,这样就能客观地呈现数据了。

    表格中常用的字体有 Roboto、DIN、微软雅黑、思源黑体、宋体、苹方字体等。

    四、视觉设计 1. 配色:

    参考 631 配色法

    对有含义的颜色要谨慎使用,例如:红、黄、绿

    2. 图标:

    常用的图标分为两类:

    工具图标:包含一定产品功能隐喻的简化抽象图形,代替文字节省界面空间,方便用户理解,常用于 b 端产品里面。

    如图,里面来自不同产品的图标,虽然表现形式不太一样,风格不太一样,但都是为了体现图标后面文字的意思。

    装饰图标:主要目的是用来装饰界面的视觉元素,样式大于功能,常用于产品宣传、活动等页面。 如图,云计算、大数据相关的产品,语义都比较复杂,很难通过图标去表达,既然看不懂,就抽象点。

    在 B 端产品中,应用最广泛的还是工具图标。 可能有人觉得工具类图标太简单了,它是看起来简单,想做好一点都不容易。

    首先要保证“一致性”, 粗细一致、圆角一致、透视一致、大小一致,同时还要把语义用图形表达出来。

    3. 间距:

    一般采用 8 的倍数:8、16、24、32、40、48、…

    4. 字体:

    12px、14px、16px、20px、24px,可采用“回退机制”

    最终效果:

    谢谢观看!

  • 设计师想做自媒体?我总结了3个上手就用的写作方法!

    UI交互 2022-09-14
    设计师想发展副业,成为自媒体?本文作者总结了3个上手就用的写作技巧,帮你快速入门。

    编者按: 设计师 想发展副业,成为自媒体?本文作者总结了3个上手就用的 写作 技巧,帮你快速入门。

    为什么会写作的设计师,在春招季能收到更多Offer? 姜正 :金三银四好时节,相信很多同学都准备好了作品集蠢蠢欲动,准备为自己的职场发展和薪资再次树立一个新的标杆。

    阅读文章 >

    清华出品!AI 神器 WantQuotes 让你的文案立马变高级 大家好,我是和你聊设计的花生~ 前两天刚盘点完一波人工智能在图像生成方面的超强工具,又在微博上看到了清华大学推出的一款“据意查句”的 AI 工具,可以按照你想要的意思快速查找出相关的名言、诗句、俗语等 。

    阅读文章 >

    写文案没灵感?这8款文案网站免费用! 编者按:本文为大家收集了 8 款好用的文案网站神器,包括名言通、押韵助手、学句子、藏头诗生成器、朋友圈文案网站生成器、邻近词汇检索、彩虹屁生成器、句易网,让你写文案手到擒来。

    阅读文章 >

    在数字网络新时代,各大厂公众号频繁更新,招聘需求中新增了对设计师的影响力要求,设计师也需要考虑多元化的发展途径。

    其中通过写作输出文章,分享到各公众平台,便成为了一种新的能力拓展方式,文字书写能够提升我们的逻辑思考力、表达力,并能为设计师的我们探索出第二条职业赛道,作为后盾加持。

    你准备好了吗?!

    一、为什么要写作? 写作是最简单、低成本且随时随地都可以开始的一件事,简单到只需要一支笔、一张纸即可;即便是电子化的形式,一部手机或一台电脑,打开文字编辑软件就可以立刻开始写作啦~

    设计师通过写作进行内容分享,可以让我们具体获得哪些助益呢?

    1. 记录&探索

    文字可以记录我们的职场、生活经历,通过书写进行自我探索,帮助我们提升表达力,并能更好的运用到职场沟通中。

    通过记录的文字,我们可以更好的认知自己的成长,促使我们思考并从中积累经验,沉淀知识底蕴,不断优化自身,扩大能量的传播,带动周围气氛。

    2. 倒逼输入

    书写文章也需要有内容来支撑,而内容除了来源于自身,还来源于身边生活、阅历,来自于书籍,为了可以让我们产出更有价值的内容,我们也会尝试让自己拓展更多的信息来源,收获新知,并糅合内化,产出具有个人特色的有价值的观点言论。

    3. 创收&品牌影响

    写作,可以让我们的工作与生活多一种选择,在职场中产出一些有价值的内容,在同行之中进行交流,在提升我们自身专业能力的同时,也可以打造自己的品牌影响力,例如当面对「裁员潮」、「被毕业」时,我们可以多一些主动选择权,拥有核心竞争力,以及部分的收益加持,为我们减少焦虑与迷茫。

    二、设计师快速入门的 3 个写作技巧 写作技巧可以通过阅读写作类的书籍进行学习,以书籍为工具指导,我们仍需边读边练,不断优化总结属于自己的技巧方式。

    其中打好基础是写作开始的关键,也是如根基般的存在,让我们快速入门。

    (一)明确写作目的 我们明确写作目的的根本,是为了能更好地去规划自己的成长路径。

    例如以设计师角色思考,我主要希望通过写作来打造职场影响力,提升逻辑表达能力,那该如何做呢?

    我总结了 3 多原则:多读、多学、多总结;

    1. 多读

    想要提升自己的沟通力与逻辑表达力,我们可以通过多阅读相关文章或书籍,例如《金字塔原理》《沟通的力量:正确表达的艺术》等;

    2. 多学

    多学习职场领域的优秀文章或书籍,学习别人是如何书写相关话题与内容,以怎样的方式表达了自己的哪些观点等。

    3. 多总结

    总结职场写作的不同问题有哪些,研究每种文体的 写作方法 ,例如公文写作、项目计划、年终总结等。

    4. 感受小结

    想着把自己作为一个创业公司去管理运营,在我们处于不同的成长阶段时,我们的写作目的与成长路径也需要随着阶段变化而调整,但其中写作的底层逻辑是相通的,都是要通过文字去表达自己、展示自己并影响自己,这种能量也会通过传递,影响到周边的人事物;

    设计产品时我们需要具有用户思维,写作时则需要我们具备读者思维,即书写文字的我们与读者之间要建立双向交流,在文字中能够表达自己内心思考的同时,也为读者发声,其核心要点在于可以抓住特定读者的痛点,满足其需求,并引起读者共鸣与兴趣。

    (二)策划选题

    关于选题的策划,可以总结为 333 原则,即 3 个维度(判断选题是否值得写)、3 种类型(了解常见的选题类型与方法)与 3 个方法(提升进阶,写出新意);

    1. 3 个维度|判断选题是否值得写

    维度 1:受众群体

    受众群体的大小,决定了一个选题是否能引起更多读者的共鸣;选题的受众群体越大,关注与感兴趣的读者就越多,我们围绕这个选题产出对应的文章,那么这篇文章的阅读量也就会越高;

    例如 8 月 17 日的热点事件:Behance 封禁国内账号,浏览量迅速突破百万,正是因为关注的受众群体多,能够击中读者的痛点,因此获得了设计师群体围绕这类话题,以文字或视频的形式抒发着彼此的感想,交流破局方法与更多途径,以能够引起读者情绪共鸣的地方为切入点展开讲述,从而打动读者。

    Behance显示无权访问?别急,还有这些方法可以挽救! 大家好,我是和你们聊设计的花生。

    阅读文章 >

    维度 2:定位与人设

    考虑选题是否符合自己的定位与人设,这个维度需要与技巧一中确定的写作目标相结合,我们要时刻明确自己的写作定位是什么。

    例如我的定位是职场成长与探索适老化设计两个方向为拓展,那我就不能总追着大众热点而逐渐迷失,面对话题选择时,我就要进行适当筛选,结合自己的专业知识去思考、书写内容,如此既符合自己的定位和人设,还能为读者带去价值与收获;

    要记住,我们写的每一篇文章,都是在与读者交流,是我们思想与价值的传递。

    维度 3:充足的素材,独特的观点

    考虑自己是否有足够的素材可以书写文章,是否有独特的观点表达用以区别于其他文章的优势;

    如果我们在书写时感觉时常卡顿,脑中空空如也,并且所写的内容都是别人已经说过的,没有什么自己能够表达的独特视角,那么即便有热点选题的流量加持,我们也无法写出优秀文章。

    素材可以通过搜索关键词进行储备整理,观点则要表达自己对某一事物的个人看法,如何表达看法的独特性?还记得技法一中的三原则吗?是的,就是要多读、多学、多总结,当然还要补充一点:多练!

    2. 3 种类型|了解常见的选题

    类型 1:常规选题

    顾名思义就是我们书写作最多的选题,根据阅读群体的特点与需求,结合自己擅长的写作领域与素材库积累,进行相关选题;这类选题可以通过 生活经历、书籍/影视剧以及网络搜索 3 种途径进行策划思考;

    ① 生活经历

    来源于自身的经历挖掘,例如职场经验这个大话题下,还包括求职、入职、进阶等分类经历与思考价值;

    我们也可以从身边的人和事发现选题,添加到自己的素材库中,作为自己专属的选题源,获取第一手资料。

    ② 书籍/影视剧

    写作需要持续的吸收外界信息并转化输入内容,书籍与影视剧就是一种很好的信息输入方式;

    在阅读或观看剧目时,我们可以接收其表达的核心内容,以此来确定选题点;

    例如我之前观看的一部电影《土拨鼠之日》让我极有感触的两个金句,其中一句是“Today is tomorrow(今天就是明天)。”就被我记录下来,在文章尾声部分就使用到了~

    书籍与影视剧中总会有让我们感触的故事、金句、案例等内容,我们都可以记录下来,作为日后的文章选题点。

    再结合最打动自己的内容展开写作,例如阅读《精进写作》一书时,我收获到的其中一个选题点是如何能够快速无压力入门写作,因此这篇文章也是以设计师视角围绕「入门的写作技巧」这个核心内容来写的。

    ③ 网络搜索

    当我们受限于亲身经历时,也可以通过网络、公众平台(知乎、公众号、微博等)寻找灵感;

    例如通过一个问题点引发,结合自己的思考梳理文章内容,或选择爆款文章作为自己的选题切入点,思考是否能有更新颖的观点表达。

    类型 2:热点选题

    即热点事件,它本身具有足够的吸引点,来引起读者的关注与探讨,从热点事件中策划选题,我们可以根据发生情况,将其分为「可预期事件」与「突发事件」两种。

    ① 可预期的热点事件

    例如各种节假日(情人节、中秋节、购物节等),再比如热门电影、体育赛事或重大活动等,都可以策划相关的热点文章,此类事件正因为其可预期性,我们也能提前做好定选题、找素材与写作的准备,并在事件开始的第一时间发布,快速收获关注度。

    ② 突发的热点事件

    例如上面提到的「Behance 突然关停国内账号」,此类事件文章需要写作者抢占时间快速出文,并且表达自己的独特观点与深度,才能在众多同类文章中脱颖而出。我也在当天以解决思路为视角快速产出了回答短文,并收获了一些认同反馈,这也给予了我书写的成就感与自信力~

    热点选题的来源可从几个常见的话题榜单中积累,例如百度热搜、微博热搜、头条热点。

    微博热搜榜可以刷新到当日实时热点事件,快速掌握吸引广泛关注的话题与素材来源; 知乎作为问答社区,我们可从中检索高赞话题与回答,获取素材灵感; 微信作为社交平台,我们可以关键词直接搜索高阅读量、评论多的信息,进行选题挖掘与素材收集; 也可以加入各类微信群,在群内交流彼此观点,收集提炼; 类型 3:系列选题

    系列的概念,我们可以理解为书写一本书,首先明确核心思想,围绕核心列出大纲与目录,再确定 30-50 个选题,接着围绕选题寻找相关素材,规划写作频率,然后持续书写,这个过程将会让我们一步步成为某个领域的专家。

    例如选题的核心方向为「写作」,那拆分小选题后,我们可以从开头、结尾、结构、素材、选题等细分类目着手书写,也可以从写作心得、写作技巧、写作素材等方向做拓展表述。

    3.  3 个方法|提升进阶,写出新意

    同一个选题中,我们如何与已有的其他文章形成差异化,写出新意呢?

    方法 1:刻意培养选题敏感度

    当我们看到一个素材时,除了要记录下自己当下的想法,还可以思考我们能从素材的哪些方面提炼选题,写哪个方向的文章,要表达怎样的思想内容等。

    例如我在阅读《精进写作》与《畅销作家写作全技巧》两本书时,里面提到了写作的价值、写作的技巧与方法,我对这个核心点进行发散思考,记录内容为:设计师为什么要写作?写作对设计师自身与职场有哪些好处?行业内的知名人物是如何做的?我们可以从哪些方面开始等;

    这篇文章的选题就是如此得来,我们需要锻炼自身随时思考的能力,平时多积累,慢慢就会培养出自己的选题敏感度,并沉淀经验。

    方法 2:分析爆款文章的选题角度

    俗话说“知己知彼,百战不殆”,我们想要写出新意,也要学习「对方」的优势,取他人之长补己之短;

    在阅读爆款文章、经典书籍时,我们可以分析别人是如何进行选题的,他们的选题角度与思考逻辑是什么,是怎样写出的新意内容促使其成为爆款;当面对同一个选题时,自己想到了哪些方向,是否也包含爆款中的写作角度?若没想到,是什么原因呢?

    经常分析,就可以扩展自己的写作思维,提升选题能力,为我们的写作做好储备,便于我们迅速提炼有新意的选题。

    方法 3:命题写作练习

    思考后就需要我们通过实践反复检验自己的产出;

    可以自定选题进行书写,完成初稿后与同类选题的其他爆款文章进行对比,思考两者之间的差距点,反复打磨优化;

    也可以做这样的练习,请朋友收集一些文章内容,遮盖掉阅读量、点赞等数据显示,我们通过阅读后,自行判断哪些属于爆款文章,预估其对应的阅读量,以此来提升自己对爆款选题的敏感度,掌握文章的审美力。

    (三)素材收集 作为设计师,深知素材与灵感源的重要性,身为写作者,素材与选题同样,更是一篇文章不可或缺的因素之一;

    日常搜集写作素材,我们可以使用 433 原则,即 4 个方法、3 种途径、3 个步骤。

    1. 4 个方法|快速找到一篇文章的写作素材

    一篇文章,我们确定好选题,接下来有内容可写是关键,这个内容就基于我们的素材啦!首先需要明确的一点是:素材需围绕本篇文章的选题进行展开。

    方法 1:头脑风暴

    根据选题,利用我们的发散思维,尽量多的去联想与主题相关的写作素材,让大脑完全处于开放与兴奋状态,记录下所思所想,不放过任何一个细枝末节,想到就写,不多加评判与论断,营造自由记录的氛围。

    方法 2:筛选素材库

    从已有的素材中进行寻找,电子档形式,可以通过我们收集时的关键词标签进行检索,或从相关主题中,边读边找,快速筛选;纸质素材库,例如书籍、文件等,我们可以根据主题快速翻阅相关资料,边回想边查找,收集标记位置储备使用。

    方法 3:公众平台收集相关素材

    前面热点事件提到的微博热搜榜、知乎、微信,以及网络搜索;

    网络搜索,我们先确定好几个关键词,再进行检索筛选,这里可以巧用命令语言,帮助我们精细化素材;

    “关键词” – 可拆分关键词检索相关信息; 关键词 site:网址链接 – 可定向网址检索关键词相关的信息; “关键词” -广告 -推广 – 可筛除含推广标签的信息,让结果推送更精准。 方法 4:选题筛选四要素

    ① 优选强相关的素材

    面对很多好的内容,我们也需要对其进行区分,优先选择与本篇文章选题强相关的素材进行使用,无关素材则先录入素材库,以备后续再用;

    以“时间管理”选题为例,我们需要写一篇有关「时间管理的方法」的文章,检索的素材中「扎克伯格的 26 个时间管理方法」「学霸自律」「职场人把握下班时间」等都与选题强相关,可以优先收录备用。

    ② 尽量选择新鲜生动的素材

    新鲜生动的素材可以提升文章的创意性,增加读者的阅览兴趣;

    继续时间管理的选题,在众多素材中“扎克伯格”这个名字,就可以瞬间吸引读者的新鲜感与探索欲望。

    ③ 选择典型素材

    典型素材需具备鲜明个性与代表性,可以深刻揭示文章主题;

    扎克伯格的名人身份、成功人士的形象观念,本身就具有一定的代表性与典型特征,他的时间管理方法也是很多人想了解的。

    ④ 选择真实素材

    真实能传递真心,打动读者,引起共鸣。

    2. 3 种途径|随时积累直接与间接素材

    凡事切忌临时抱佛脚,养成日常积累的习惯,能更好的扩充我们自己的素材库内容,在书写时行云流水,融汇贯通;

    素材内容以获取形式可分为直接素材与间接素材两种,直接素材好比就地取材,来源于自己与周身的真实生活经历;间接素材则是从第三方间接得到,例如书籍、影视剧、网络等。

    途径 1:从人生经历中筛选直接素材

    人生经历是我们最宝贵的写作素材,这就需要我们在平时做一个「有心人」,调动眼、耳、口鼻,去充分的体味人生,把所听、所看、所感的人事物随时记录下来做为内容储备,深挖其背后的观点与体会,这样在写作时我们才更能以真情实感传递并打动读者,引起共鸣。

    途径 2:从书籍、影视剧中积累间接素材

    书籍、文章与影视剧中的观点、金句、故事、案例以及经典桥段等都可以摘录出来,收录进我们的素材库中。

    若短期内想快速积累素材,其中最行之有效的方式就是进行有目的地大量阅读,带着疑问去看,学习书中的用词、表述方式与思考逻辑,快速增长见识、启发思维,让阅读与写作相辅相成。

    途径 3:通过搜索获得间接素材

    搜索引擎是我们非常强有力的武器,借用电子软件进行素材的收录,当我们需要某个主题时,通过关键词检索进行查找调用;前两个途径需要我们摘抄书写,而这种方式只需要一个口诀即可快速完成:复制、粘贴、分类!

    有意识的收集,让整个互联网的信息成为我们最丰富的素材库吧~

    3. 3 个步骤|打造专属自己的写作素材库

    若我们只是收集而不做复盘整理,很多宝藏就只能“吃灰”而无法发挥它的真正价值,因此定期整理素材,熟悉素材与可用场景也是我们需要修炼的能力。

    步骤 1:裁剪,截取有用的素材

    从我们收录的书籍、文章中,截取出有趣的故事、经典案例、金句等内容,好比划重点一样,把它们收录到对应素材目录中即可,如此在日后写作时我们能精准定位,快速找到需要的信息并有效使用它;

    例如我已经 N 刷的一本书《当下的力量》,书中讲述了一种新的生活方式,告诉我们如何可以将日常生活中所受的苦减到最少,收获快乐、活得更好;还讲了乞丐与陌生人的故事、爱因斯坦的案例、探索大脑、意识、思维与内在身体的关联等,我摘录了自己喜欢的金句,“没有任何事情可以发生在过去,所有的事情都发生在当下。”这就是裁剪的过程。

    步骤 2:精准分类,做好素材整理

    精准分类,有助于我们记忆已有内容,当面对需要时能够有方向且快速的进行查找调用;

    分类方式可参考图书馆的形式,例如哲学类、文学类、社科类等,大类目还可再进行细化拆分,形成一套架构体系;

    我们也可以罗列自己感兴趣的领域,例如职场、情感、育儿、设计等,把素材分门别类进行收录整理,设计领域也可细分为 B 端设计、无障碍设计、智能化设计等,并再细分 B 端金融、适老化、车载等类目。

    步骤 3:记住标题,便于查找

    即便身处数字化时代,记忆仍是我们不可或缺的能力。记住标题,首先能对自己有所知,写文章时也有利于回忆使用;

    写作是一个融汇贯通的过程,让素材之间产生关联,有助于我们形成自己逻辑体系。

    三、总结&常见解惑 1. 总结

    好啦,啰啰嗦嗦半天,能看到这里的都是真爱吖!~

    以上就是我在阅读《精进写作》一书时的部分收获与思考实践,可概括为:

    内容时代,设计师想要实现职场突破的方向之一是写作,学会运营自己,首先我们需要具有读者思维,明白写作是实现自己与读者的双向交流,因此我们不仅要表达自己的观点,也要能说读者所想,提供有价值的内容,引发共鸣;

    拥有 3 个技巧可以帮我们快速入门写作:

    技巧 1:明确写作目的; 技巧 2:策划选题; 技巧 3:素材收集; 明确写作目的需遵循的 3 个原则:多读、多学、多总结,找到适合自己的方向,再去规划自己的成长路径,可以让我们的行动目的更清晰。

    如何策划选题?需要我们学会 判断选题的书写价值,了解常见的选题类型有哪些,并且知道如何能写出自己的特色与新意,这需要我们刻意练习,培养自己的话题敏感度。

    一个选题是否值得写,我们可从 3 个维度进行判断:受众群体大小、自己的定位与人设、素材充足并且观点独特,满足这三点就是很有价值的话题,可以放开去写啦~

    常见的选题类型有常规选题、热点选题以及系列选题,来源于自身经历、周边事件以及日常所见所感,选题的积累需要我们善于发现、挖掘其深层内容,进行记录整理。

    想要把选题写出深度,需要刻意练习培养自己的选题敏感度,有文章的审美力,重要的是自己要多实践,写出东西才知道需要改哪里。

    文章的内容需要依靠好的素材来支撑,素材可以通过日常的人生经历、书籍/影视剧以及互联网络进行收集,裁剪 – 分类 – 记住标题三个步骤打造自己的素材库,让自己成为「有心人」,有目的的收集,善用已有素材,定期复盘总结,如此才能在我们需要用到某个内容时快速调取,融会贯通。

    2. 常见问题解惑

    Q1 没有时间怎么写?

    首先要思考明确一个问题:“你是真的没时间?还是懒而觉得自己没时间?”比如坐车通勤的时间、刷视频的时间、玩游戏的时间、躺平的时间……只要你想,都可以利用起来写下一些文字。

    Q2 不知道怎么写?

    上面不是告诉你了嘛?赶紧照着做!

    Q3 我要等一个最佳时机?!

    Today is tomorrow(今天就是明天);别废话,现在就是你的最佳时机!!!

    Q4 我还能怎么做?

    继续深入研究呗!

    先学习优秀文章的架构、逻辑,再结合自身经历与收获添加创作,一定要做好复盘总结呀,并且不要白总结,下次写的时候回顾一下,用上其中的一两点试试效果哈~

    最后的最后,与大家分享我最近的座右铭~

    “Only ever work on the thing that will have the biggest impact.”(只去做那件有着最大影响的事情) —— Jason Cohen

    从现在开始,行动起来吧~加油,设计师们~

    欢迎关注作者微信公众号:「雪莉成长圈」

  • 短视频应用如何做好沉浸式体验设计?来看百度的实战案例!

    UI交互 2022-09-14
    短视频APP如何做好沉浸式设计?本文作者通过百度APP的实战案例,帮你掌握短视频的沉浸式设计方法。

    编者按:短视频APP如何做好沉浸式设计?本文作者通过百度APP的实战案例,帮你掌握短视频的 沉浸式设计 方法。

    往期回顾:

    大厂出品!百度「好看视频」 PC 站体验升级复盘 好看视频 PC 站围绕建立响应式布局,提升筛选效率两个目标全新升级。

    阅读文章 >

    在视频画面尺寸、手机屏幕分辨率极多的复杂情况下,如何通过布局、内容、视窗挤压、智能满屏等形式,进一步提升视频看播沉浸式体验呢?

    前言

    沉浸式体验是让人专注在当前的目标,全身心投入并感到愉悦和满足,从而忽略时间的流逝。应用到界面上则是更强调聚焦内容,减少不必要的打扰。本次研究与实践针对视频场景中视频所呈现的画面,通过精细化的设计,在多样化的手机屏幕中呈现时,能够带给用户更为沉浸的视频观看体验。

    一、百度 APP 是如何进行视频沉浸式设计的? 视频播放器中视频画面当然是最主要的内容,以此作为突破点进行思考:

    最大化画面视野:通过改变视频画面本身的大小,减少页面“留白”,让用户更聚焦视频画面,观看视频时更专注。 最佳视线观看位置:将不同高度的视频按照页面结构去布局视频画面,通过画面避让状态栏、顶底 bar 结构的方式,使画面更加整洁,减少元素混乱带来的干扰,同时整体位置偏上展示,视线落点更加舒适。 观看体验连续性:视频浏览过程中,非必要不打断视频浏览,在进行如查看评论、临时退出播放器等行为时,保证视频播放的连贯性,方便用户多操作。

    (一)最大化视频画面视野 1. 视频画面裁剪

    随着时代的发展,为提升消费者对手机的操作体验,智能手机逐渐多元化,手机屏幕尺寸迭代更快、更加丰富多样。手机作为视频很重要的生产端,手机屏幕尺寸的多样化影响到产出视频尺寸的多样化,同时用户可通过视频编辑工具任意编辑视频尺寸,最终生产的视频尺寸比例自由度非常高。据不完全统计视频平台中视频尺寸达 22 万多种,用户使用机型近 300 种,在视频尺寸多样性及视频展现媒介多样性的现状下,需要兼容性更强的裁剪及展现规则才能带给用户更好的观看体验。

    我们要做的就是将不可控的视频资源和不可控的浏览视频设备设计为可控的视觉展示效果,并最大化视频画面。减少环境干扰,给用户带来沉浸式感官体验。

    视频宽撑满手机屏宽后,将视频尺寸分为四类:

    (1)视频高度>手机屏高

    视频画面宽度撑满屏幕后,视频整体居中于屏幕,居中裁剪视频多余画面。

    注:不允许画面高度撑满屏幕,宽度自适应导致画面左右留黑效果。

    (2)视频高度=手机屏高

    视频居中于屏幕,刚好填满屏幕,不需要裁剪处理。

    (3)1:1<视频高度<手机屏高

    此类尺寸较复杂、难处理,于是将限制裁剪面积和展示位置相结合,保证裁剪面积和位置可控。结合视频平台资源尺寸和业务目标来确认理想展示效果,反推定义最大裁剪面积,根据显示位置多次判断视频放大后是否符合既定裁剪面积,最终确定当前视频的显示方式。同时支持根据不同视频业务进行个性化定制,并且将裁剪面积云控处理,根据业务内不同时期的诉求限制比例来灵活调整展示效果,双端也可分端定义数值;横向协同及迭代成本极低,便于快速上线验证效果。

    (4)横版视频(高宽比≤1:1)

    横版视频在手机屏幕中面积占比较小,画面可识别度和饱满度稍有欠缺,轻微扩大画面视野,画面浏览更加清晰有冲击力。以不影响内容理解为前提,根据自身平台视频尺寸占比及视频内容特点规定固定比例或比例范围适度放大。

    锦上添花,引入文字内容识别

    为避免因裁剪规则而裁剪到视频关键文字对视频内容获取有障碍的问题,发挥百度强大的 AI 技术优势,引入文字识别技术及视觉展现规则,进一步提升视频展现样式的可控性,同时能够通过尽量少损失画面达到画面放大的效果,平衡画面沉浸感和完整性的关系。

    左右文字被裁剪情况:文字左右设置安全距离,保证安全距离在屏幕内。如果安全区超出屏幕,则按照上方描述的裁剪规则进行退档显示(满屏至不裁剪之间的档位),直至文字不被裁剪。极端情况退档至最后一档,视频画面不裁剪。

    横版资源文字左右被裁剪情况:按照固定尺寸退档

    上下文字被裁剪情况:文字上下设置安全距离,保证安全距离在屏幕内。如果安全区超出屏幕,则按照上方裁剪规则进行满屏至不裁剪之间的档位进行退档显示,此情况只会从全屏一档显示退至二档显示。

    裁剪面积、展示比例、文字安全距离等数据都通过云控的方式下发,灵活配置到不同业务中,保证裁剪规则一致的同时又能针对不同业务进行定制展现,也可快速调整并支持上线实验,来验证适合自己产品的展示效果。

    2. 智能满屏

    通过裁剪方式放大画面视野之外,还通过让用户自主交互操作再次放大画面视野,调整到自己喜欢的观看视频的方式。相较于上方默认裁剪放大,满屏方式更加激进极致,画面放大更多。开启方式除了通过面板功能按钮外,增加便捷交互开启手势,用户可双指放大快速开启。

    由于满屏是用户主动操作放大行为,可以接受文字内容被裁剪,但也需要有节制的放大,避免带来画面裁剪过多视觉体验不佳的问题。为了保证 95%以上资源撑满全屏,达到放大画面视野极致体验。同时最大画面裁剪面积不超过一定比例(根据自身业务视频资源判断),将视频资源细分为 3 类进行不同效果处理:

    可继续放大至满屏的视频,则进行满屏展现。 不可继续放大的视频,如果继续放大会导致裁剪画面过多影响观看完整度与观看体验,则保持上方提到的裁剪规则,不做另外处理。 横版视频统一放大至固定尺寸,可根据自身业务资源进行放大尺寸的定义。

    (二)最佳视线观看位置 通过布局合理、舒适的画面位置,也能提升浏览过程中用户体验的沉浸感。人的视觉中心一般会在物理中心的偏上方,于是在设计中我们将视频画面放在屏幕偏上的位置,用户视线落点更加舒适,一般是用户在浏览页面时最先注意到的地方。同时视频在页面偏上的位置,能减少下方标题等信息过多对视频画面的遮挡。

    为了精细化处理不同比例的视频资源,竖版视频和横版视频根据页面效果分别定义了最佳观看展示位置。

    竖版视频:高于 1:1 的视频,按照页面结构布局视频画面,避让状态栏、顶底 bar 操作,避免与页面结构冲突带来画面凌乱不美观的问题,同时能减少画面参差带来的干扰,增加沉浸浏览感受。

    横版视频:等于矮于 1:1 的视频,画面按照屏幕高度比例展示在偏上的区域,高度比例可云控便于灵活调整。

    (三)观看体验连续性 1. 视窗挤压

    在视频场景观看评论时会弹起半屏面板,遮挡住视频内容,导致用户无法在浏览评论的同时观看视频内容。我们通过视窗上移动挤压功能,在浏览面板内容时不对视频内容打断,弱化面板内容给用户带来的影响。

    视窗高度固定,画面宽高比越小画面内容越小,观看体验不友好,所以竖版视频对压缩后的显示尺寸进行干预,定义最小视频画面展示比例,尽量扩大画面视野,保证观看视频的舒适度。

    2. 悬浮小窗

    在不打断用户视频浏览的基础上还建设了悬浮小窗交互体验,旨在为用户提供完善优质的视频消费体验。用户进行其它操作时仍保留视频后台播放,同时也能在屏幕角落观看到缩略图大小的视频播放窗口,可以从任何页面中观看视频,我们同时也保留了部分视频基础操作。观看体验连续性让用户对视频有绝对的主控感,提升用户使用体验的满意度。

    写在最后 沉浸式 体验设计 是帮助用户减少画面干扰,让用户专注于当前的视频浏览,忽略时间的流逝进入心流状态。我们通过放大画面视野,增强画面冲击力的方式减少干扰,并解决在视频画面尺寸、手机屏幕分辨率极多的复杂情况下,保证画面效果的稳定和可控,并且不会受阻于未来手机机型的扩充发展,普适性极强。同时通过视窗挤压、悬浮小窗的交互体验专注于当前的视频浏览不被打断,进一步提升视频看播沉浸式体验。后续我们将不断探索视频场景沉浸度提升方式,为用户带来更加舒适的观看使用体验。

    欢迎关注作者的微信公众号:「百度MEUX」

  • 5000字干货!从四个方面完整分析B端工作台的设计流程和方法

    UI交互 2022-09-14
    B端工作台如何设计?本文从需求分析、信息架构、可视化图表和视觉设计4个方面,完整解析一个B端工作台的设计方法。

    编者按:B端工作台如何设计?本文从需求分析、信息架构、可视化图表和视觉设计4个方面,完整解析一个 B端 工作台的设计方法。

    如何制定B端项目全局框架?收下这篇总监级的经验! 这阵子想了想关于交互知识的分享,还是应该要拓展成一整个系列的内容,包含各类组件、控件和行为的解析。

    阅读文章 >

    举着 Case 当火把,照亮五彩斑斓的黑~

    一、需求分析 在设计一个产品的时候,我们要透过现象看本质。

    我们是为谁?解决什么问题?分析的结果将直接影响到方案的好坏。 这里推荐大家采用 5W1H 分析法,5W1H 分析法也叫六何分析法,是一种思考方法,也可以说是一种场景创造分析法。

    5W1H 分析法包含如下几个方面:

    Why:为什么要做,是原因。 What:做什么、做成什么,是目标。 Where:在哪儿做,是地点。 When:什么时候做,是时间。 Who:谁来做,是执行对象。 How:怎么做,是方法。 通过上述分析我们可以(假设)知道:我们的用户是技术人员、基层管理人员;做这个页面的目的是为了让用户随时掌握各项工作的进展情况,快速进入需要处理的工作事项。 根据结论可以得出工作台是一个导航页面或者综合管理页面,它是用户感知产品价值的重要“门面”,使用者有一定的经验,属于高级用户。从设计角度来看,首页工作台是整个系统规范与视觉风格的核心场景。

    使用角色:

    主要是技术人员、基层管理人员

    内容主次(根据需求得出):

    P0:各类数据指标的汇总、我的动态 P1:总量趋势、数据排名、操作汇总 P2:分发汇总、待办事项 设计要求:

    重点突出、简洁、清晰

    二、信息架构 1. 优先级处理

    下面这张图是产品给的原型,也是 B 端面试题中经常会遇到的题目。如果你打算就按照产品给的原型直接做美化,那估计很难被选中。

    做需求分析的目的之一就是为了做信息处理,这里要提到一个词叫“屏效”。B 端产品我们都知道,目的是“降本增效”,在合理的信息布局下尽量利用交互等手段让页面缩短。

    比如:上面原型中有两个 top10 排名,如果一行展示会比较拥挤,也体现不了 top10 排名。考虑“易读性”我们会放两行,但这样又占据了屏幕空间,在与产品沟通后我们把它整合到一起,利用按钮组切换进行查看。同时排名也是业务人员需要关注的,所以我们把它们往上放。

    顶部个人信息内容比较少,也没必要占一整行,我们把它移到右边;各类指标因前 3 个是不能点击的,为了和后面可点击按钮做区分,我们整合到一个卡片上;待办事项与产品沟通后说不太重要,移动到了最下面,操作汇总模块往上移;

    到这里模块之间的信息优先级基本处理完成,下面就要对单个模块进行拆解处理。

    首先我们要观察哪个是:重要信息、次要信息、辅助信息,上面我们提到了“效率”,把重要信息突出显示,就是为了让用户一眼就能看清,不需要去寻找或被次要信息干扰。

    最后一个模块原型上只有一个标题,这真是验证了一句话:“巧妇难为无米之炊”,所以又去找产品沟通,为什么单个模型可以点击查看更多?用户在这个地方想要获取什么样的数据?

    经过一番沟通,拿到了一些“米”,巧妇终于可以干活了。为了体现“易发现性”,我们在后面这个模块上加了一个详情按钮。

    2. 栅格化处理

    其实上面的图是我处理过的,产品的原型可不长这个样子,模块大小、间距都是随便给的。你如果也按照产品给的原型模块大小做,估计研发会“骂娘”,因为这样没法按照比例进行换算,也就没法做自适应。

    这一步主要就是做栅格化处理,我们需要定义每个模块的占比与间距。B 端产品通常选用 24 栅格布局,也就是 24 栏+23 水槽+2 页边距。

    我遇到的工作台页面有两种,一种是带左侧树,一种是不带,这两种对应的栅格化数值不太一样。 按照目前常用的尺寸 1440*900 来计算:不带左侧树我采用的是 1440=2*20+43*24+16*23。

    如果大家做的是带左侧树,可以参考下图数据

    三、可视化图表 重点来了,我个人觉得这一节才是工作台、数据分析页面的核心,但很多人都忽略了,觉得不就是几个图表,唰唰唰一下就搞定了……

    上面我们提到过 B 端测试题给的都是原始数据(表格),需要设计师自己根据数据找合适的可视化图形进行展示。

    如果你对可视化图表不熟悉,不知道什么时候该用柱图、折线图、饼图;不知道随时间变化该用什么图形;不知道体现排名的数据该用什么图形。那你很难输出一份有理有据的作品。

    B 端图表如何设计?这篇5000字的总结超全面! 前言 无论是数据展示设计还是工作汇报中,都离不开图表的运用。

    阅读文章 >

    因图表类型太多,详细的留到后面文章讨论,这次只对原型中使用的到图表进行分析:

    1. 柱图:

    柱状图是常用的数据可视化图形之一,可用于随时间变化而产生变量的数据统计,也可用于数据类别的对比、排名。

    如图,柱状图能展示知乎文章观看者地域分布,也能反应出不同时间段的情况,并通过图形能够快速了解 分布最多和最少的省份。

    优点:

    人眼对长短(高度)比较敏感,可以直观体现数据差异性。

    缺陷:

    分类过多时数据的展示效果会降低。

    设计要点:

    能把图形视觉与体验都兼顾好,才能体现设计师的价值。 设计师的能力不仅体现在技法上,更多的是体现在思考能力上。图形扩展性设计和创新性设计都需要设计师做缜密的思考,只有这样才会有出彩的设计结果。

    信息层级:

    视觉展示:

    2 个人站在一起我们除了对比高度、颜值,还有会对比胖廋。那么,柱状体的粗细和间距如何定义呢? 在图中,中间柱状图的柱子间距过于疏散没有规律;右边图中的柱子间距又过小,视觉上显得拥挤,并且当分类过多时,过小的间距会导致柱状体之间没有独立性,不易阅读。

    定义柱状体的间距可以用 5 分原则设计法,即柱子之间的间距为 N,左右两边与柱子之间的距离就是 2/N。 如图所示。这也是很多界面设计中常用的技法,其原理就是接近黄金比例,视觉上较为舒适。同时,在保证界面元素整体协调性的情况下,尽可能把柱子的宽度设计成 N,这样视觉上最为协调。

    另外,在设计图形前,设计师最好能了解到真实数据,这样才能结合真实的数据来设计图形,尽可能还原落地后的样子。在图中,图形的设计和落地后的样子存在较大的差异。问题就出在设计前设计师没有了解数据的真实情况,前端工程师按照设计图把 X 轴的数值固定了。

    相似图表:

    堆积柱状图:堆积柱状图可以展示两个或多个数据的变化,以及数据之间的综合比较情况。

    分组柱状图:分组柱状图可以在同一数轴上展示各个分类下的不同分组数据。

    有序柱状图:与有序条形图一样,有序柱状图也能呈现数据的排名情况。

    2. 折线图:

    折线图常用于表示一个连续时间段内数据的变化趋势,主要功能是能够清晰地反映出数据随时间变化的趋势。

    如图,折线图不仅能展示不同月份的价格趋势,还能清晰呈现数据的峰值和低谷。折线图也可以是多条线,用来分析多组数据随时间变化的趋势及数据间的趋势比较。

    优点:

    直观反映数据变化趋势

    缺陷:

    无序的类别无法展示数据特点。

    设计要点:

    折线图可以用于展示数据的趋势变化,通过折线的起伏波动可以帮助人们探究数据背后的逻辑。但如果折线图的设计不够合理,在视觉上会让人产生错误的认知。在图中,有的折线图的刻度值设置不合理,如中间折线图的刻度值未从 0 开始,导致折线的呈现夸大;右边折线图的刻度值过高,趋势变化呈现过于平缓,这些都是在不客观地表达数据。正确的方式应该是刻度值从 0 开始,随着数据的增减,刻度值也做相应的变化。

    视觉展示:

    在折线图设计中,还需要注意折线的粗细要适中。在图中,其中一条折线过细,这会降低数据可视化的表现;另一条过粗,就会损失折线中的数据波动细节。在产品的图形设计中,一般网格线和起始线都是 1 像素,折线一般用 2 像素,这样的粗细会有较好的视觉表现。

    相似图表:

    阶梯线图:线在数据点之间形成一系列步骤。

    面积图:与折线图唯一不同的是,其自变量数据和坐标轴之间有颜色填充,这样能更加突出数据的趋势变化。

    3. 饼图:

    提到数据的占比,相信你第一个就会想到饼图,主要用来展示数据分布情况。 饼图是展示占比数据最直观的图形,通过弧度大小来表示分类的占比多少。但饼图有一定的局限性,当占比数值接近或占比分类过多时,在视觉上就不容易辨别各个类别占比的大小。在数据可视化产品中,因为饼图是大面积的色块,视觉上会非常突显,很容易抢走重要数据的风头,所以使用时要酌情考虑。

    优点:

    直观显示各项占总体的占比,分布情况,强调整体与个体间的比较。

    缺陷:

    分类过多,则扇形越小,无法展现图表。

    设计要点:

    每个图形都有自己的设计规范,如当饼图分类过多时,一般不把文字放在图形元素上,因为一旦出现几个相对较小的占比数据,字就很容易溢出,不容易辨别指向的分类,如图中的右图所示。好的解决方案就是,在图形的外围用引线指出分类数据,或者加示例图展示。

    视觉展示:

    另外,饼图的分类最好从 12 点钟的位置开始,这样较为符合人的阅读习惯,即从上到下、从左到右,如图中。如果饼图随意从不同位置开始展示,就会缺少规范,这样当多个饼图同时展示时容易出现混乱。

    同时,在饼图的分类中如果没带排序,如 1 月、2 月……,那么占比最好能够从大到小依次排列,这样还能直观地呈现出分类的排名情况。任何时候,如果有“其他”这项分类,无论其占比多少都要放在最后,因为其数据通常是最不被关注的数据。

    相似图表:

    嵌套圈饼图:用于一个指标在不同维度的占比。

    跑道图:看到占比的同时,可以直观看到指标在当前维度下的排名情况。

    4. 表格

    表格看起来简单,但想设计好也不是一件容易事。通常我们见到的(产品中)表格都属于比较简单的表格。

    在 BI 系统中有一些复杂的表报,如果直接用组件信息会很难阅读。我们需要对表格的视觉进行调整,让信息获取更高效,这就需要一些设计技巧和原则。

    设计要点:

    表格排版第一大原则:文字左对齐,数字右对齐表格中文字需要左对齐,因为我们阅读文字的习惯是从左到右。

    而图中(上图)的项目名称长短不一,居中对齐在视觉上会使切入点呈现“Z”字形,影响阅读效率。左对齐可以使线性结构在视觉上不跳跃,阅读流畅且更具美感。表格中的数字需要右对齐,因为当我们在面对一个长数字时,一般会从右往左读。比如数字¥368,568,023.00,我们一般是从个位到最后的千万位顺序识别数字体量,有的人可以通过千分符迅速判断数字的体量,但其实也是从右到左的浏览顺序,因此数字右对齐最符合人的阅读方式。

    在图中(下图),让我们感受一下数字左对齐、居中对齐、右对齐的阅读效率,以及对各个数据体量的对比感知。

    文字左对齐和数字右对齐,针对的是长短不一的名称和大体量的数字,而对于文字数量一样、体量较小的数字也可以尝试用居中对齐的方式,对称的元素本身就具有美感。如图所示,通过对表格中的文字和数字的重新排版,相信在阅读效率上会有较大的提高。虽然提高了阅读效率,但这相比优秀的表格设计还差得很远,其中最明显的是表格的边框在视觉上过于突出,接下来我们继续调整。

    ① 弱化边框

    如图(下图)所示,通过弱化边框在视觉上能够突出表格的内容。表格边框可以让信息的呈现更有条理,能够提高易读性,但在视觉层级上不能高于内容信息。

    ② 去掉边框与分割线

    将表格的边框与分割线去掉,用留白分隔内容,无框胜有框,增大留白可以使表格更有空间感。这样的设计需要注意的是,元素的间隔不能太小,不然会显得拥挤。由于去掉边框后有些问题会被放大,比如标题与内容没有对比,因此需要增强对比,在整体上要有层次。

    ③ 强调标题

    图中的表格加强了标题,这样看起来更有层次。强调标题的方法有很多种,不一定只是加粗字体或加大字号,还可以给标题栏添加背景,以形成对比。

    ④ 突出重要信息

    如果在一组数据中有重要数据和次要数据之分,那么就需要在对重要数据的设计上着重突出,表格的设计同样如此。图中所示就是把重要的数据信息通过增加背景色与其他元素形成较为突出的对比,这种设计是一种为用户做选择的设计方法,容易让用户的视觉停留在他本想重点关注的地方。

    ⑤ 表格扩展设计

    由于人们常常会对熟悉的事物产生审美疲劳,因此设计中有创新才容易给人眼前一亮的感觉。

    下图在背景上面给了一根横线,来凸显这一列的数据,这样除了可以加强信息传达也可以打破常规的表格样式(这里只是提供一种思路)。

    ⑥ 表格字体运用

    表格数字最容易出问题的是数字字体的运用,因为很多数字字体不是等距设计,比如数字“1”所占的字间距面积要小于“8”的。如果遇到一组大量级的数字,就有可能会误导观者。

    如下图所示,本来 32,118,116,00 大于 28,558,363,00,但由于不同数字所占宽度不一样,这样的设计在视觉上容易误导用户。因此,表格中的数字要使用表格字体,因为表格字体每个数字所占面积一致,这样就不会出现案例中的问题了。

    其实很多表格里面的数字字体都存在类似问题。下图是修改数字字体后的设计,这样就能客观地呈现数据了。

    表格中常用的字体有 Roboto、DIN、微软雅黑、思源黑体、宋体、苹方字体等。

    四、视觉设计 1. 配色:

    参考 631 配色法

    对有含义的颜色要谨慎使用,例如:红、黄、绿

    2. 图标:

    常用的图标分为两类:

    工具图标:包含一定产品功能隐喻的简化抽象图形,代替文字节省界面空间,方便用户理解,常用于 b 端产品里面。

    如图,里面来自不同产品的图标,虽然表现形式不太一样,风格不太一样,但都是为了体现图标后面文字的意思。

    装饰图标:主要目的是用来装饰界面的视觉元素,样式大于功能,常用于产品宣传、活动等页面。 如图,云计算、大数据相关的产品,语义都比较复杂,很难通过图标去表达,既然看不懂,就抽象点。

    在 B 端产品中,应用最广泛的还是工具图标。 可能有人觉得工具类图标太简单了,它是看起来简单,想做好一点都不容易。

    首先要保证“一致性”, 粗细一致、圆角一致、透视一致、大小一致,同时还要把语义用图形表达出来。

    3. 间距:

    一般采用 8 的倍数:8、16、24、32、40、48、…

    4. 字体:

    12px、14px、16px、20px、24px,可采用“回退机制”

    最终效果:

    谢谢观看!

  • 短视频应用如何做好沉浸式体验设计?来看百度的实战案例!

    UI交互 2022-09-14
    短视频APP如何做好沉浸式设计?本文作者通过百度APP的实战案例,帮你掌握短视频的沉浸式设计方法。

    编者按:短视频APP如何做好沉浸式设计?本文作者通过百度APP的实战案例,帮你掌握短视频的 沉浸式设计 方法。

    往期回顾:

    大厂出品!百度「好看视频」 PC 站体验升级复盘 好看视频 PC 站围绕建立响应式布局,提升筛选效率两个目标全新升级。

    阅读文章 >

    在视频画面尺寸、手机屏幕分辨率极多的复杂情况下,如何通过布局、内容、视窗挤压、智能满屏等形式,进一步提升视频看播沉浸式体验呢?

    前言

    沉浸式体验是让人专注在当前的目标,全身心投入并感到愉悦和满足,从而忽略时间的流逝。应用到界面上则是更强调聚焦内容,减少不必要的打扰。本次研究与实践针对视频场景中视频所呈现的画面,通过精细化的设计,在多样化的手机屏幕中呈现时,能够带给用户更为沉浸的视频观看体验。

    一、百度 APP 是如何进行视频沉浸式设计的? 视频播放器中视频画面当然是最主要的内容,以此作为突破点进行思考:

    最大化画面视野:通过改变视频画面本身的大小,减少页面“留白”,让用户更聚焦视频画面,观看视频时更专注。 最佳视线观看位置:将不同高度的视频按照页面结构去布局视频画面,通过画面避让状态栏、顶底 bar 结构的方式,使画面更加整洁,减少元素混乱带来的干扰,同时整体位置偏上展示,视线落点更加舒适。 观看体验连续性:视频浏览过程中,非必要不打断视频浏览,在进行如查看评论、临时退出播放器等行为时,保证视频播放的连贯性,方便用户多操作。

    (一)最大化视频画面视野 1. 视频画面裁剪

    随着时代的发展,为提升消费者对手机的操作体验,智能手机逐渐多元化,手机屏幕尺寸迭代更快、更加丰富多样。手机作为视频很重要的生产端,手机屏幕尺寸的多样化影响到产出视频尺寸的多样化,同时用户可通过视频编辑工具任意编辑视频尺寸,最终生产的视频尺寸比例自由度非常高。据不完全统计视频平台中视频尺寸达 22 万多种,用户使用机型近 300 种,在视频尺寸多样性及视频展现媒介多样性的现状下,需要兼容性更强的裁剪及展现规则才能带给用户更好的观看体验。

    我们要做的就是将不可控的视频资源和不可控的浏览视频设备设计为可控的视觉展示效果,并最大化视频画面。减少环境干扰,给用户带来沉浸式感官体验。

    视频宽撑满手机屏宽后,将视频尺寸分为四类:

    (1)视频高度>手机屏高

    视频画面宽度撑满屏幕后,视频整体居中于屏幕,居中裁剪视频多余画面。

    注:不允许画面高度撑满屏幕,宽度自适应导致画面左右留黑效果。

    (2)视频高度=手机屏高

    视频居中于屏幕,刚好填满屏幕,不需要裁剪处理。

    (3)1:1<视频高度<手机屏高

    此类尺寸较复杂、难处理,于是将限制裁剪面积和展示位置相结合,保证裁剪面积和位置可控。结合视频平台资源尺寸和业务目标来确认理想展示效果,反推定义最大裁剪面积,根据显示位置多次判断视频放大后是否符合既定裁剪面积,最终确定当前视频的显示方式。同时支持根据不同视频业务进行个性化定制,并且将裁剪面积云控处理,根据业务内不同时期的诉求限制比例来灵活调整展示效果,双端也可分端定义数值;横向协同及迭代成本极低,便于快速上线验证效果。

    (4)横版视频(高宽比≤1:1)

    横版视频在手机屏幕中面积占比较小,画面可识别度和饱满度稍有欠缺,轻微扩大画面视野,画面浏览更加清晰有冲击力。以不影响内容理解为前提,根据自身平台视频尺寸占比及视频内容特点规定固定比例或比例范围适度放大。

    锦上添花,引入文字内容识别

    为避免因裁剪规则而裁剪到视频关键文字对视频内容获取有障碍的问题,发挥百度强大的 AI 技术优势,引入文字识别技术及视觉展现规则,进一步提升视频展现样式的可控性,同时能够通过尽量少损失画面达到画面放大的效果,平衡画面沉浸感和完整性的关系。

    左右文字被裁剪情况:文字左右设置安全距离,保证安全距离在屏幕内。如果安全区超出屏幕,则按照上方描述的裁剪规则进行退档显示(满屏至不裁剪之间的档位),直至文字不被裁剪。极端情况退档至最后一档,视频画面不裁剪。

    横版资源文字左右被裁剪情况:按照固定尺寸退档

    上下文字被裁剪情况:文字上下设置安全距离,保证安全距离在屏幕内。如果安全区超出屏幕,则按照上方裁剪规则进行满屏至不裁剪之间的档位进行退档显示,此情况只会从全屏一档显示退至二档显示。

    裁剪面积、展示比例、文字安全距离等数据都通过云控的方式下发,灵活配置到不同业务中,保证裁剪规则一致的同时又能针对不同业务进行定制展现,也可快速调整并支持上线实验,来验证适合自己产品的展示效果。

    2. 智能满屏

    通过裁剪方式放大画面视野之外,还通过让用户自主交互操作再次放大画面视野,调整到自己喜欢的观看视频的方式。相较于上方默认裁剪放大,满屏方式更加激进极致,画面放大更多。开启方式除了通过面板功能按钮外,增加便捷交互开启手势,用户可双指放大快速开启。

    由于满屏是用户主动操作放大行为,可以接受文字内容被裁剪,但也需要有节制的放大,避免带来画面裁剪过多视觉体验不佳的问题。为了保证 95%以上资源撑满全屏,达到放大画面视野极致体验。同时最大画面裁剪面积不超过一定比例(根据自身业务视频资源判断),将视频资源细分为 3 类进行不同效果处理:

    可继续放大至满屏的视频,则进行满屏展现。 不可继续放大的视频,如果继续放大会导致裁剪画面过多影响观看完整度与观看体验,则保持上方提到的裁剪规则,不做另外处理。 横版视频统一放大至固定尺寸,可根据自身业务资源进行放大尺寸的定义。

    (二)最佳视线观看位置 通过布局合理、舒适的画面位置,也能提升浏览过程中用户体验的沉浸感。人的视觉中心一般会在物理中心的偏上方,于是在设计中我们将视频画面放在屏幕偏上的位置,用户视线落点更加舒适,一般是用户在浏览页面时最先注意到的地方。同时视频在页面偏上的位置,能减少下方标题等信息过多对视频画面的遮挡。

    为了精细化处理不同比例的视频资源,竖版视频和横版视频根据页面效果分别定义了最佳观看展示位置。

    竖版视频:高于 1:1 的视频,按照页面结构布局视频画面,避让状态栏、顶底 bar 操作,避免与页面结构冲突带来画面凌乱不美观的问题,同时能减少画面参差带来的干扰,增加沉浸浏览感受。

    横版视频:等于矮于 1:1 的视频,画面按照屏幕高度比例展示在偏上的区域,高度比例可云控便于灵活调整。

    (三)观看体验连续性 1. 视窗挤压

    在视频场景观看评论时会弹起半屏面板,遮挡住视频内容,导致用户无法在浏览评论的同时观看视频内容。我们通过视窗上移动挤压功能,在浏览面板内容时不对视频内容打断,弱化面板内容给用户带来的影响。

    视窗高度固定,画面宽高比越小画面内容越小,观看体验不友好,所以竖版视频对压缩后的显示尺寸进行干预,定义最小视频画面展示比例,尽量扩大画面视野,保证观看视频的舒适度。

    2. 悬浮小窗

    在不打断用户视频浏览的基础上还建设了悬浮小窗交互体验,旨在为用户提供完善优质的视频消费体验。用户进行其它操作时仍保留视频后台播放,同时也能在屏幕角落观看到缩略图大小的视频播放窗口,可以从任何页面中观看视频,我们同时也保留了部分视频基础操作。观看体验连续性让用户对视频有绝对的主控感,提升用户使用体验的满意度。

    写在最后 沉浸式 体验设计 是帮助用户减少画面干扰,让用户专注于当前的视频浏览,忽略时间的流逝进入心流状态。我们通过放大画面视野,增强画面冲击力的方式减少干扰,并解决在视频画面尺寸、手机屏幕分辨率极多的复杂情况下,保证画面效果的稳定和可控,并且不会受阻于未来手机机型的扩充发展,普适性极强。同时通过视窗挤压、悬浮小窗的交互体验专注于当前的视频浏览不被打断,进一步提升视频看播沉浸式体验。后续我们将不断探索视频场景沉浸度提升方式,为用户带来更加舒适的观看使用体验。

    欢迎关注作者的微信公众号:「百度MEUX」

  • 设计师想做自媒体?我总结了3个上手就用的写作方法!

    UI交互 2022-09-14
    设计师想发展副业,成为自媒体?本文作者总结了3个上手就用的写作技巧,帮你快速入门。

    编者按: 设计师 想发展副业,成为自媒体?本文作者总结了3个上手就用的 写作 技巧,帮你快速入门。

    为什么会写作的设计师,在春招季能收到更多Offer? 姜正 :金三银四好时节,相信很多同学都准备好了作品集蠢蠢欲动,准备为自己的职场发展和薪资再次树立一个新的标杆。

    阅读文章 >

    清华出品!AI 神器 WantQuotes 让你的文案立马变高级 大家好,我是和你聊设计的花生~ 前两天刚盘点完一波人工智能在图像生成方面的超强工具,又在微博上看到了清华大学推出的一款“据意查句”的 AI 工具,可以按照你想要的意思快速查找出相关的名言、诗句、俗语等 。

    阅读文章 >

    写文案没灵感?这8款文案网站免费用! 编者按:本文为大家收集了 8 款好用的文案网站神器,包括名言通、押韵助手、学句子、藏头诗生成器、朋友圈文案网站生成器、邻近词汇检索、彩虹屁生成器、句易网,让你写文案手到擒来。

    阅读文章 >

    在数字网络新时代,各大厂公众号频繁更新,招聘需求中新增了对设计师的影响力要求,设计师也需要考虑多元化的发展途径。

    其中通过写作输出文章,分享到各公众平台,便成为了一种新的能力拓展方式,文字书写能够提升我们的逻辑思考力、表达力,并能为设计师的我们探索出第二条职业赛道,作为后盾加持。

    你准备好了吗?!

    一、为什么要写作? 写作是最简单、低成本且随时随地都可以开始的一件事,简单到只需要一支笔、一张纸即可;即便是电子化的形式,一部手机或一台电脑,打开文字编辑软件就可以立刻开始写作啦~

    设计师通过写作进行内容分享,可以让我们具体获得哪些助益呢?

    1. 记录&探索

    文字可以记录我们的职场、生活经历,通过书写进行自我探索,帮助我们提升表达力,并能更好的运用到职场沟通中。

    通过记录的文字,我们可以更好的认知自己的成长,促使我们思考并从中积累经验,沉淀知识底蕴,不断优化自身,扩大能量的传播,带动周围气氛。

    2. 倒逼输入

    书写文章也需要有内容来支撑,而内容除了来源于自身,还来源于身边生活、阅历,来自于书籍,为了可以让我们产出更有价值的内容,我们也会尝试让自己拓展更多的信息来源,收获新知,并糅合内化,产出具有个人特色的有价值的观点言论。

    3. 创收&品牌影响

    写作,可以让我们的工作与生活多一种选择,在职场中产出一些有价值的内容,在同行之中进行交流,在提升我们自身专业能力的同时,也可以打造自己的品牌影响力,例如当面对「裁员潮」、「被毕业」时,我们可以多一些主动选择权,拥有核心竞争力,以及部分的收益加持,为我们减少焦虑与迷茫。

    二、设计师快速入门的 3 个写作技巧 写作技巧可以通过阅读写作类的书籍进行学习,以书籍为工具指导,我们仍需边读边练,不断优化总结属于自己的技巧方式。

    其中打好基础是写作开始的关键,也是如根基般的存在,让我们快速入门。

    (一)明确写作目的 我们明确写作目的的根本,是为了能更好地去规划自己的成长路径。

    例如以设计师角色思考,我主要希望通过写作来打造职场影响力,提升逻辑表达能力,那该如何做呢?

    我总结了 3 多原则:多读、多学、多总结;

    1. 多读

    想要提升自己的沟通力与逻辑表达力,我们可以通过多阅读相关文章或书籍,例如《金字塔原理》《沟通的力量:正确表达的艺术》等;

    2. 多学

    多学习职场领域的优秀文章或书籍,学习别人是如何书写相关话题与内容,以怎样的方式表达了自己的哪些观点等。

    3. 多总结

    总结职场写作的不同问题有哪些,研究每种文体的 写作方法 ,例如公文写作、项目计划、年终总结等。

    4. 感受小结

    想着把自己作为一个创业公司去管理运营,在我们处于不同的成长阶段时,我们的写作目的与成长路径也需要随着阶段变化而调整,但其中写作的底层逻辑是相通的,都是要通过文字去表达自己、展示自己并影响自己,这种能量也会通过传递,影响到周边的人事物;

    设计产品时我们需要具有用户思维,写作时则需要我们具备读者思维,即书写文字的我们与读者之间要建立双向交流,在文字中能够表达自己内心思考的同时,也为读者发声,其核心要点在于可以抓住特定读者的痛点,满足其需求,并引起读者共鸣与兴趣。

    (二)策划选题

    关于选题的策划,可以总结为 333 原则,即 3 个维度(判断选题是否值得写)、3 种类型(了解常见的选题类型与方法)与 3 个方法(提升进阶,写出新意);

    1. 3 个维度|判断选题是否值得写

    维度 1:受众群体

    受众群体的大小,决定了一个选题是否能引起更多读者的共鸣;选题的受众群体越大,关注与感兴趣的读者就越多,我们围绕这个选题产出对应的文章,那么这篇文章的阅读量也就会越高;

    例如 8 月 17 日的热点事件:Behance 封禁国内账号,浏览量迅速突破百万,正是因为关注的受众群体多,能够击中读者的痛点,因此获得了设计师群体围绕这类话题,以文字或视频的形式抒发着彼此的感想,交流破局方法与更多途径,以能够引起读者情绪共鸣的地方为切入点展开讲述,从而打动读者。

    Behance显示无权访问?别急,还有这些方法可以挽救! 大家好,我是和你们聊设计的花生。

    阅读文章 >

    维度 2:定位与人设

    考虑选题是否符合自己的定位与人设,这个维度需要与技巧一中确定的写作目标相结合,我们要时刻明确自己的写作定位是什么。

    例如我的定位是职场成长与探索适老化设计两个方向为拓展,那我就不能总追着大众热点而逐渐迷失,面对话题选择时,我就要进行适当筛选,结合自己的专业知识去思考、书写内容,如此既符合自己的定位和人设,还能为读者带去价值与收获;

    要记住,我们写的每一篇文章,都是在与读者交流,是我们思想与价值的传递。

    维度 3:充足的素材,独特的观点

    考虑自己是否有足够的素材可以书写文章,是否有独特的观点表达用以区别于其他文章的优势;

    如果我们在书写时感觉时常卡顿,脑中空空如也,并且所写的内容都是别人已经说过的,没有什么自己能够表达的独特视角,那么即便有热点选题的流量加持,我们也无法写出优秀文章。

    素材可以通过搜索关键词进行储备整理,观点则要表达自己对某一事物的个人看法,如何表达看法的独特性?还记得技法一中的三原则吗?是的,就是要多读、多学、多总结,当然还要补充一点:多练!

    2. 3 种类型|了解常见的选题

    类型 1:常规选题

    顾名思义就是我们书写作最多的选题,根据阅读群体的特点与需求,结合自己擅长的写作领域与素材库积累,进行相关选题;这类选题可以通过 生活经历、书籍/影视剧以及网络搜索 3 种途径进行策划思考;

    ① 生活经历

    来源于自身的经历挖掘,例如职场经验这个大话题下,还包括求职、入职、进阶等分类经历与思考价值;

    我们也可以从身边的人和事发现选题,添加到自己的素材库中,作为自己专属的选题源,获取第一手资料。

    ② 书籍/影视剧

    写作需要持续的吸收外界信息并转化输入内容,书籍与影视剧就是一种很好的信息输入方式;

    在阅读或观看剧目时,我们可以接收其表达的核心内容,以此来确定选题点;

    例如我之前观看的一部电影《土拨鼠之日》让我极有感触的两个金句,其中一句是“Today is tomorrow(今天就是明天)。”就被我记录下来,在文章尾声部分就使用到了~

    书籍与影视剧中总会有让我们感触的故事、金句、案例等内容,我们都可以记录下来,作为日后的文章选题点。

    再结合最打动自己的内容展开写作,例如阅读《精进写作》一书时,我收获到的其中一个选题点是如何能够快速无压力入门写作,因此这篇文章也是以设计师视角围绕「入门的写作技巧」这个核心内容来写的。

    ③ 网络搜索

    当我们受限于亲身经历时,也可以通过网络、公众平台(知乎、公众号、微博等)寻找灵感;

    例如通过一个问题点引发,结合自己的思考梳理文章内容,或选择爆款文章作为自己的选题切入点,思考是否能有更新颖的观点表达。

    类型 2:热点选题

    即热点事件,它本身具有足够的吸引点,来引起读者的关注与探讨,从热点事件中策划选题,我们可以根据发生情况,将其分为「可预期事件」与「突发事件」两种。

    ① 可预期的热点事件

    例如各种节假日(情人节、中秋节、购物节等),再比如热门电影、体育赛事或重大活动等,都可以策划相关的热点文章,此类事件正因为其可预期性,我们也能提前做好定选题、找素材与写作的准备,并在事件开始的第一时间发布,快速收获关注度。

    ② 突发的热点事件

    例如上面提到的「Behance 突然关停国内账号」,此类事件文章需要写作者抢占时间快速出文,并且表达自己的独特观点与深度,才能在众多同类文章中脱颖而出。我也在当天以解决思路为视角快速产出了回答短文,并收获了一些认同反馈,这也给予了我书写的成就感与自信力~

    热点选题的来源可从几个常见的话题榜单中积累,例如百度热搜、微博热搜、头条热点。

    微博热搜榜可以刷新到当日实时热点事件,快速掌握吸引广泛关注的话题与素材来源; 知乎作为问答社区,我们可从中检索高赞话题与回答,获取素材灵感; 微信作为社交平台,我们可以关键词直接搜索高阅读量、评论多的信息,进行选题挖掘与素材收集; 也可以加入各类微信群,在群内交流彼此观点,收集提炼; 类型 3:系列选题

    系列的概念,我们可以理解为书写一本书,首先明确核心思想,围绕核心列出大纲与目录,再确定 30-50 个选题,接着围绕选题寻找相关素材,规划写作频率,然后持续书写,这个过程将会让我们一步步成为某个领域的专家。

    例如选题的核心方向为「写作」,那拆分小选题后,我们可以从开头、结尾、结构、素材、选题等细分类目着手书写,也可以从写作心得、写作技巧、写作素材等方向做拓展表述。

    3.  3 个方法|提升进阶,写出新意

    同一个选题中,我们如何与已有的其他文章形成差异化,写出新意呢?

    方法 1:刻意培养选题敏感度

    当我们看到一个素材时,除了要记录下自己当下的想法,还可以思考我们能从素材的哪些方面提炼选题,写哪个方向的文章,要表达怎样的思想内容等。

    例如我在阅读《精进写作》与《畅销作家写作全技巧》两本书时,里面提到了写作的价值、写作的技巧与方法,我对这个核心点进行发散思考,记录内容为:设计师为什么要写作?写作对设计师自身与职场有哪些好处?行业内的知名人物是如何做的?我们可以从哪些方面开始等;

    这篇文章的选题就是如此得来,我们需要锻炼自身随时思考的能力,平时多积累,慢慢就会培养出自己的选题敏感度,并沉淀经验。

    方法 2:分析爆款文章的选题角度

    俗话说“知己知彼,百战不殆”,我们想要写出新意,也要学习「对方」的优势,取他人之长补己之短;

    在阅读爆款文章、经典书籍时,我们可以分析别人是如何进行选题的,他们的选题角度与思考逻辑是什么,是怎样写出的新意内容促使其成为爆款;当面对同一个选题时,自己想到了哪些方向,是否也包含爆款中的写作角度?若没想到,是什么原因呢?

    经常分析,就可以扩展自己的写作思维,提升选题能力,为我们的写作做好储备,便于我们迅速提炼有新意的选题。

    方法 3:命题写作练习

    思考后就需要我们通过实践反复检验自己的产出;

    可以自定选题进行书写,完成初稿后与同类选题的其他爆款文章进行对比,思考两者之间的差距点,反复打磨优化;

    也可以做这样的练习,请朋友收集一些文章内容,遮盖掉阅读量、点赞等数据显示,我们通过阅读后,自行判断哪些属于爆款文章,预估其对应的阅读量,以此来提升自己对爆款选题的敏感度,掌握文章的审美力。

    (三)素材收集 作为设计师,深知素材与灵感源的重要性,身为写作者,素材与选题同样,更是一篇文章不可或缺的因素之一;

    日常搜集写作素材,我们可以使用 433 原则,即 4 个方法、3 种途径、3 个步骤。

    1. 4 个方法|快速找到一篇文章的写作素材

    一篇文章,我们确定好选题,接下来有内容可写是关键,这个内容就基于我们的素材啦!首先需要明确的一点是:素材需围绕本篇文章的选题进行展开。

    方法 1:头脑风暴

    根据选题,利用我们的发散思维,尽量多的去联想与主题相关的写作素材,让大脑完全处于开放与兴奋状态,记录下所思所想,不放过任何一个细枝末节,想到就写,不多加评判与论断,营造自由记录的氛围。

    方法 2:筛选素材库

    从已有的素材中进行寻找,电子档形式,可以通过我们收集时的关键词标签进行检索,或从相关主题中,边读边找,快速筛选;纸质素材库,例如书籍、文件等,我们可以根据主题快速翻阅相关资料,边回想边查找,收集标记位置储备使用。

    方法 3:公众平台收集相关素材

    前面热点事件提到的微博热搜榜、知乎、微信,以及网络搜索;

    网络搜索,我们先确定好几个关键词,再进行检索筛选,这里可以巧用命令语言,帮助我们精细化素材;

    “关键词” – 可拆分关键词检索相关信息; 关键词 site:网址链接 – 可定向网址检索关键词相关的信息; “关键词” -广告 -推广 – 可筛除含推广标签的信息,让结果推送更精准。 方法 4:选题筛选四要素

    ① 优选强相关的素材

    面对很多好的内容,我们也需要对其进行区分,优先选择与本篇文章选题强相关的素材进行使用,无关素材则先录入素材库,以备后续再用;

    以“时间管理”选题为例,我们需要写一篇有关「时间管理的方法」的文章,检索的素材中「扎克伯格的 26 个时间管理方法」「学霸自律」「职场人把握下班时间」等都与选题强相关,可以优先收录备用。

    ② 尽量选择新鲜生动的素材

    新鲜生动的素材可以提升文章的创意性,增加读者的阅览兴趣;

    继续时间管理的选题,在众多素材中“扎克伯格”这个名字,就可以瞬间吸引读者的新鲜感与探索欲望。

    ③ 选择典型素材

    典型素材需具备鲜明个性与代表性,可以深刻揭示文章主题;

    扎克伯格的名人身份、成功人士的形象观念,本身就具有一定的代表性与典型特征,他的时间管理方法也是很多人想了解的。

    ④ 选择真实素材

    真实能传递真心,打动读者,引起共鸣。

    2. 3 种途径|随时积累直接与间接素材

    凡事切忌临时抱佛脚,养成日常积累的习惯,能更好的扩充我们自己的素材库内容,在书写时行云流水,融汇贯通;

    素材内容以获取形式可分为直接素材与间接素材两种,直接素材好比就地取材,来源于自己与周身的真实生活经历;间接素材则是从第三方间接得到,例如书籍、影视剧、网络等。

    途径 1:从人生经历中筛选直接素材

    人生经历是我们最宝贵的写作素材,这就需要我们在平时做一个「有心人」,调动眼、耳、口鼻,去充分的体味人生,把所听、所看、所感的人事物随时记录下来做为内容储备,深挖其背后的观点与体会,这样在写作时我们才更能以真情实感传递并打动读者,引起共鸣。

    途径 2:从书籍、影视剧中积累间接素材

    书籍、文章与影视剧中的观点、金句、故事、案例以及经典桥段等都可以摘录出来,收录进我们的素材库中。

    若短期内想快速积累素材,其中最行之有效的方式就是进行有目的地大量阅读,带着疑问去看,学习书中的用词、表述方式与思考逻辑,快速增长见识、启发思维,让阅读与写作相辅相成。

    途径 3:通过搜索获得间接素材

    搜索引擎是我们非常强有力的武器,借用电子软件进行素材的收录,当我们需要某个主题时,通过关键词检索进行查找调用;前两个途径需要我们摘抄书写,而这种方式只需要一个口诀即可快速完成:复制、粘贴、分类!

    有意识的收集,让整个互联网的信息成为我们最丰富的素材库吧~

    3. 3 个步骤|打造专属自己的写作素材库

    若我们只是收集而不做复盘整理,很多宝藏就只能“吃灰”而无法发挥它的真正价值,因此定期整理素材,熟悉素材与可用场景也是我们需要修炼的能力。

    步骤 1:裁剪,截取有用的素材

    从我们收录的书籍、文章中,截取出有趣的故事、经典案例、金句等内容,好比划重点一样,把它们收录到对应素材目录中即可,如此在日后写作时我们能精准定位,快速找到需要的信息并有效使用它;

    例如我已经 N 刷的一本书《当下的力量》,书中讲述了一种新的生活方式,告诉我们如何可以将日常生活中所受的苦减到最少,收获快乐、活得更好;还讲了乞丐与陌生人的故事、爱因斯坦的案例、探索大脑、意识、思维与内在身体的关联等,我摘录了自己喜欢的金句,“没有任何事情可以发生在过去,所有的事情都发生在当下。”这就是裁剪的过程。

    步骤 2:精准分类,做好素材整理

    精准分类,有助于我们记忆已有内容,当面对需要时能够有方向且快速的进行查找调用;

    分类方式可参考图书馆的形式,例如哲学类、文学类、社科类等,大类目还可再进行细化拆分,形成一套架构体系;

    我们也可以罗列自己感兴趣的领域,例如职场、情感、育儿、设计等,把素材分门别类进行收录整理,设计领域也可细分为 B 端设计、无障碍设计、智能化设计等,并再细分 B 端金融、适老化、车载等类目。

    步骤 3:记住标题,便于查找

    即便身处数字化时代,记忆仍是我们不可或缺的能力。记住标题,首先能对自己有所知,写文章时也有利于回忆使用;

    写作是一个融汇贯通的过程,让素材之间产生关联,有助于我们形成自己逻辑体系。

    三、总结&常见解惑 1. 总结

    好啦,啰啰嗦嗦半天,能看到这里的都是真爱吖!~

    以上就是我在阅读《精进写作》一书时的部分收获与思考实践,可概括为:

    内容时代,设计师想要实现职场突破的方向之一是写作,学会运营自己,首先我们需要具有读者思维,明白写作是实现自己与读者的双向交流,因此我们不仅要表达自己的观点,也要能说读者所想,提供有价值的内容,引发共鸣;

    拥有 3 个技巧可以帮我们快速入门写作:

    技巧 1:明确写作目的; 技巧 2:策划选题; 技巧 3:素材收集; 明确写作目的需遵循的 3 个原则:多读、多学、多总结,找到适合自己的方向,再去规划自己的成长路径,可以让我们的行动目的更清晰。

    如何策划选题?需要我们学会 判断选题的书写价值,了解常见的选题类型有哪些,并且知道如何能写出自己的特色与新意,这需要我们刻意练习,培养自己的话题敏感度。

    一个选题是否值得写,我们可从 3 个维度进行判断:受众群体大小、自己的定位与人设、素材充足并且观点独特,满足这三点就是很有价值的话题,可以放开去写啦~

    常见的选题类型有常规选题、热点选题以及系列选题,来源于自身经历、周边事件以及日常所见所感,选题的积累需要我们善于发现、挖掘其深层内容,进行记录整理。

    想要把选题写出深度,需要刻意练习培养自己的选题敏感度,有文章的审美力,重要的是自己要多实践,写出东西才知道需要改哪里。

    文章的内容需要依靠好的素材来支撑,素材可以通过日常的人生经历、书籍/影视剧以及互联网络进行收集,裁剪 – 分类 – 记住标题三个步骤打造自己的素材库,让自己成为「有心人」,有目的的收集,善用已有素材,定期复盘总结,如此才能在我们需要用到某个内容时快速调取,融会贯通。

    2. 常见问题解惑

    Q1 没有时间怎么写?

    首先要思考明确一个问题:“你是真的没时间?还是懒而觉得自己没时间?”比如坐车通勤的时间、刷视频的时间、玩游戏的时间、躺平的时间……只要你想,都可以利用起来写下一些文字。

    Q2 不知道怎么写?

    上面不是告诉你了嘛?赶紧照着做!

    Q3 我要等一个最佳时机?!

    Today is tomorrow(今天就是明天);别废话,现在就是你的最佳时机!!!

    Q4 我还能怎么做?

    继续深入研究呗!

    先学习优秀文章的架构、逻辑,再结合自身经历与收获添加创作,一定要做好复盘总结呀,并且不要白总结,下次写的时候回顾一下,用上其中的一两点试试效果哈~

    最后的最后,与大家分享我最近的座右铭~

    “Only ever work on the thing that will have the biggest impact.”(只去做那件有着最大影响的事情) —— Jason Cohen

    从现在开始,行动起来吧~加油,设计师们~

    欢迎关注作者微信公众号:「雪莉成长圈」


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通