首页

2020年该如何自我提升?来看设计高手的10个思考习惯

涛涛

除了专业和工作,你思考过别的问题吗?最近反思了这十个问题,分享出来与各位酷友共勉。

年关将至,越是这个时候行业的波动也比较大,设计师萌生跳槽想法、被离职风险、薪资拖欠带来焦虑情绪、常年加班的职业病等等。也许我们在耗费心力提升专业能力的同时,是否应该思考点别的问题。

最近进行了一些反思,除了专业以外我还有哪些需要坚守的习惯和培养的目标。整理出最近思考的十个问题,希望与大家一起共勉。

有自己的短期目标吗?

无论是职场新人还是行业老司机,我们不怕专业能力不足,就怕浑噩度日,漫无目标。看到过很多工作多年的设计师迷茫,缺少新人的工作激情,却又不知道自己应该如何前进一步。

小时候老师总会问我们梦想是什么,却很少有人实现,现在如果问我梦想的话,我一般会说自己的短期目标是什么。你可以定一个大的目标,但是一定要拆分为短期可落地执行的目标,阶段性的验收才能做出灵活的调整。

如果是专业层面可以梳理当前行业需要的技能树,然后对自己的能力进行梳理,看看不足的是哪些,以此制定短期目标一个一个进行攻破。目标不一定与专业有关,也可以是生活中的兴趣,比如学会游泳、看十本书、完成一次自驾游、让自己瘦十斤、年底有钱回家~O(∩_∩)O~一切都可以成为自己的短期目标。短期目标是为了丰富自己的时间管理,也能充分的利用好阶段性的时间去完成,不断增进自信和维持这份驱动力。

能控制好时间规划吗?

如果你能控制好自己的时间,就是一个优秀的设计师,时间规划主要的难度不是制定,而是坚持,很多人都半途而废。我从实习开始工作以来为了更好的掌控自己的时间,喜欢以日记的形式记录当日完成的工作和接下来需要准备去执行的事项。完成之后以勾选的方式划掉,如果发现接下来没有任务进来,会制定一些日常提升的计划。

业余的碎片化时间根据出现的场景做规划,刚工作的时候上下班地铁时间需要 2 小时左右,通常就会安排进行阅读,不仅可以消磨时间也增加了自己的阅读量。如果加入一些日常练习主要的不是一天要做多少,而是能否长期坚持,通常是一天完成两个界面就睡觉,不多做也不少做,随着练习的坚持后面完成的时间就会越来越快。通过一些设计平台以打卡的形式发布作品,目的就是为了有一个可以记录自己成果展示的场景,调动起氛围。

也可以给自己的时间规划设定提醒,以免忘记这个时间段应该做什么,规划不能过于密集,休息是为了放松自己,如果被规划压得喘不过气,会把一个好的东西变得排斥。所以,留足一些休息的时间追剧、刷抖音、锻炼身体、逛逛商场散散步等等,劳逸结合才能持之以恒。

能驾驭自我驱动吗?

其实专业能力不足并不可怕,只要你想学都可以弥补不足,难的是缺少自我驱动力。三分热度你都能有,持之以恒却没多少人可以做到了。要时刻反思自己坚持了曾经的那份初心了吗?

如果自己自控意识薄弱,要刻意而为之,强迫自己按照定好的轨迹运行。可以制定阶段性的小目标和规划,这样战线不会拉得很长,有助于刻意坚持。可以给自己设定一些奖励,完成目标大吃一顿、看一场电影、去一个地方旅游、买一件规划好的商品等。如果没有完成就要强迫自己完成才能获得设定好的奖励,现在不对自己狠一点,未来职场就会对你狠一点,进而抛弃你。

如何提高自我驱动力:

除了专业还有兴趣爱好吗?

思考一下除了专业和工作以外,你有兴趣爱好吗?如果你犹豫停顿了,希望你可以培养一个兴趣爱好,丰富自己的精神追求。当然,这个爱好需要是阳光积极的,别把陋习当成爱好。

除了设计以外,我从小喜欢画国画,虽然没有走这个方向去发展,我把它作为兴趣爱好来看待,丰富自己的业余生活。作为设计师兴趣爱好不一定是与设计沾边的,我以前有个同事她是 UI 设计师,业余时间却是某游戏栏目的专栏博主,也有专门写旅行日记的,研究美食的等等。

培养兴趣爱好可以让你在工作之余放松心情,释放压力,没有束缚才能释放自己压抑的情绪,也能更好的调整好心态。

有哪些适合设计师的兴趣爱好?

作息时间是否合理?

年轻的自己从来不担心这个问题,只有当发现自己身体透支过度的时候才会有所意识。作为设计师来说加班似乎已经家常便饭,不过如果加班透支了自己的身体也要进行反思了,毕竟健康是属于自己的。

虽然没办法立马做到早睡早起,但是可以逐步把休息时间和起床时间提前,早点起来锻炼一下身体、看半小时书也不错。好的身体才能实现更多价值,我最近都在尽量控制晚上十一点前睡觉,逐渐调整出更好的作息时间和习惯。

把青春和时间奉献给了工作,别把健康也搭进去了,如果公司不注重员工的健康而一味的压榨,不值得你为之拼命。

如何看待自己的青春流逝?

青春我们都曾有过,也都会失去,如果你正直青春期间,如何看待自己当前的经历和奋斗的动力比较关键。

刚毕业的时候用一部分青春换取了职场经验和专业进阶,后来选择创业也是希望把青春留给自己,为自己而奋斗。每个人都有自己的选择,只希望你今日的努力能够对得起未来的自己。

能肩负起自己的责任吗?

责任感是我们每个人都需要具备的,上学期间我们习惯了在爸妈的庇护下成长,从我们步入职场的时刻,我们就要学会独立生活。虽然你可能过着月光族的生活,一人吃饱全家不饿,也不一定尽到了自己的责任,但是总有从某一刻开始你会意识到自己的责任。

当我们在追求自己的未来的时候,也要回头思考自己的责任,从肩负起一个小的责任开始。可以是对家人的关心与照顾,如果当你成家之后应该会感触更深。今日对未来的反思与规划是为了使自己变得更优秀,将来有能力守护家人,实现自己的价值,肩负起自己的责任。

是一个有态度的设计师吗?

作为设计师我们是商业环节中的一环,随着感官体验的升级,设计的质量越发显得重要。在工作中我们需要成为一个有态度的设计师,主导自己的设计使其发挥更大的价值。个人态度分为性格层面和习惯层面的态度,下面分别梳理一下。

从性格层面体现自己的态度:在对接需求的时候,我们不能是一只温顺的小羔羊,被人牵着走并任人宰割。要有自己的态度,敢于为自己的设计发声,有自己坚守的原则,通过案例和经验进行引导需求方的选择。坚持不一定可以改变别人的选择,但是我们做到了专业设计师的态度。

从习惯层面体现自己的态度:设计能力都是可以学习培养的,养成良好的习惯至关重要,对细节的态度、设计质量的态度、提案演示的态度、沟通对接的态度等等。养成一个好的设计习惯,就算生活中也应如此,态度可以决定你能把一件事做到何种深度,希望我们都可以成为一个有态度的设计师。

坚持总结了吗?

优秀的设计师总能善于总结,总结可以对自己的知识体系进行梳理和检索,查漏补缺。总结个人分为两个方向,一是对自己的经验进行总结梳理,把经验形成可传递的方法论;二是对优秀的案例和资源进行梳理总结,把他人的优秀方法论转化为自己可吸收的轨迹。

有句话叫为了写作而看书,通过输出倒逼输入,主动吸收的通常转化和记忆都更强。除了专业相关的总结以外,我们也可以是一些读书笔记、日常感悟等,锻炼自己写作的能力和养成习惯。以前我们一个学员有记录生活感悟和写读书笔记的习惯,一年能坚持输出十万多字的随记,这个习惯值得学习。坚持几年后可以看出她在各方面的理解能力都非常好,也善于将自己的经验进行总结,带来的结果自然是得到了很多机会去更好的发挥自己的价值。

写作与你的专业能力不一定强关联,不要以经验不足而自我放弃,这只是一个习惯的培养。只有去尝试了才知道那里不足,如何去优化,下次应该如何写才能更合理。希望从今天以后,你可以坚持写作总结的习惯。

自己是否够专业?

一切的自信和态度都是建立在自我专业的基础上,特别是设计师,如果自身不够专业如何说服别人。要时刻质问自己是否依然保持专业性,低姿态面对学习,时刻评估和提升自己。

不同阶段关注的焦点不同,刚开始我们可能在意技能操作层面,执行能力为第一保障。随着工作经验的积累,我们的关注面更综合,有时候也会感觉学得越多发现自己越是什么都不会。如果在职场中一直都没有新的知识和认知丰富自己,会逐渐变得被动,很难突破自己的瓶颈期。要保持学习的动力和日常输出的自我驱动力,不要温水煮青蛙,把自己陷入被动的状态。

所以,时刻问问自己,我是否够专业。

总结

反思自己是为了让自己时刻保持清醒,作为设计师我们需要有态度、要自信、够专业;除了专业层面我们还需要反思更多问题,有自己的短期目标、能管理好时间、培养更多兴趣爱好等等。不断丰富自己的生活状态,可以带给自己更多乐趣,把有限的时间过得更合理。

希望本文可以抛砖引玉,大家都可以反思自己面临的问题,提升自己的综合素质和能力。

文章来源:优设

如何做好数据可视化设计?

涛涛

本文的英文原标题是「10 Rules of Dashboard Design」,其中 Dashboard 如果翻译成仪表盘的话,总觉得不大容易理解,所以我在这里把它翻译为数据可视化。数据展示方面的设计,相信大家会经常用到,这篇文章有很多简单直接,立马就能用上的干货,一起来学习吧!

为什么数据可视化设计非常重要?

数据可视化的目的是以一种用户更容易理解的形式呈现复杂信息。

一个优秀的数据可视化界面包含以下几个关键要素:

  • 清晰:一个好的数据可视化界面一定是能够清晰的展现用户所需要的信息。当用户看到界面内容时,应该能在 5 秒内了解到它的用途,而不是花费至少几分钟才能理解各个数据的含义。
  • 有意义: 一个有用的数据可视化界面上的每一条信息都应该是有意义的。这些有意义的信息能准确传达设计师想要表达的内容。每一条数据的背后,用户都是可以读懂的。
  • 一致性:优秀的数据可视化界面,会有一套非常严谨一致的版面。这里的一致性需要考虑到布局,结构和内容。
  • 简单: 复杂的界面违背了数据可视化设计的初衷。如果一个信息呈现不够简单直接,那么肯定是在设计上出现了问题。

如何设计一个数据可视化界面?

数据可视化界面设计最重要的步骤是需要了解目标用户是谁,能为他们提供什么价值。了解目标受众的知识背景和理解水平能帮助你做出对他们有价值的设计。

在了解目标用户时,有必要了解受众感兴趣的数据类型。

「专注于用户的需求,更容易产生他们喜欢使用的结果。」

目标用户级别可能会在一级和另一级之间变化,这是一个挑战性的点。与其他任何设计项目一样,可以细分受众并将信息相应地分为基本内容和高级内容。

在界面中表示一组信息有多种方法,选择正确的数据指标是设计数据可视化的另一个关键元素。这也与目标用户的偏好有关,即他们希望看到什么样的信息。

「根据需要设计数据可视化界面,为不同的业务使用不同类型的展示方式。」

下面是为目标用户设计数据可视化界面时需要考虑的一些重要规则。

1. 区分层级

一个常见的错误就是设计师没有对信息区分层级,所有的内容看起来都一样重要。

可以尝试使用组件的大小和位置来区分数据的层次结构。

  • 通过定义信息层级,让用户清楚什么是最重要的
  • 在左上角显示更重要的信息,沿着对角线方向,信息的重要程度应该依次减弱,右下角的信息重要性最弱
  • 还可以将信息划分为不同类别,并在不同的视图中显示它们

2. 简单易懂

数据可视化的真正目的是用一种更方便理解,更简单的形式来传达复杂信息。

  • 不要放一些大多数用户都难以理解的信息
  • 使用更少的列来显示信息
  • 删除冗余内容来减少混乱

3. 一致性

使用一致性布局设计的数据可视化界面看起来更好。

  • 为了使界面更容易阅读,可以在信息组之间使用类似的可视化效果。
  • 把相关的信息放的更近一些
  • 对相关内容进行可视化分组

4. 临近原则

在界面中把相近的信息放在一起可以帮助用户快速理解。

  • 把相关的信息放的更近一些
  • 不要将相关信息分散在界面上
  • 对相关内容进行可视化分组

想更深入了解接近原则,看这篇:

5. 对齐

可视化组件元素需要在视觉上对齐,并保持视觉平衡。

  • 将可视化组件元素在视觉上进行对齐,可以将界面组织的更好
  • 尝试将组件元素进行网格布局设计
  • 不对齐的界面会给用户带来糟糕的体验

6. 留白

留白是为了让界面有呼吸感,它使得用户在使用你的界面时能够有喘息的空间。

  • 当用户查看需要的信息时,界面中的留白能够吸引用户的目光,提升用户体验。
  • 减少留白会使用户的界面变得混乱
  • 使用留白能对信息进行可视化分组

△ 留白太少简直就是在鼓励你的用户尽快离开

7. 颜色

使用有效的配色方案来吸引用户的注意力,帮助他们轻松地浏览信息。

  • 仔细选择颜色,目标是使内容易于阅读
  • 使用大对比度来显示背景上的视觉元素

△ 避免使用低对比度和低效的渐变

8. 字体

标准字体是可视化界面中的最佳字体,除非有特别的理由,一般不要用其他字体。

  • 使用标准字体,因为它们更容易阅读和扫描
  • 特别和美术字体可能看起来不错,但很难理解
  • 避免所有的大写字母文字,因为它很难阅读,人类的大脑需要时间来消化它。
  • 使用合适的字体大小和风格,有效地传达信息

△ 不要使用影响可读性的字体

9. 数字排版

显示精度超过要求的数字使它们难以阅读和理解。

  • 必要时使用整数,因为长数字会使用户混淆
  • 省去不必要的信息
  • 让用户能够容易地比较简单的差异细节

10. 标签

使用能够快速有效地向用户传达所需信息的标签。

  • 避免使用带旋转的标签,因为很难阅读
  • 尽可能的使用标准的缩写

△ 避免旋转标签

总结

数据可视化旨在节省时间和精力,将复杂和抽象的数据以更简单的形式表示,目的是以用户能够理解的方式将关键信息传达给他们,确保自己理解用户所需,并给他们需要的信息。

文章来源:优设

HTML 知识点总结

seo达人

一、HTML简介

HTML 俗称网页,就是我们打开浏览器访问任何一个网站所看到的都是由 HTML 页面提供的(或者与 HTML 技术相关的内容提供)。



HTML 全称为 HyperText Markup Language,被译为超文本标记语言。所谓的超文本就是不仅只有文本内容,包括链接、音频和视频、图像等内容。所谓标记语言,简单来说就是元素。也就是说,HTML 提供一系列的元素来构成一个页面中最基础的内容。



HTML 是一种描述 Web 文档结构和语义的语言,它由元素组成,每个元素可以有一些属性或文本。



当你保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 文件后缀。



编写HTML代码的工具:



记事本

sublime text

hbuilder

webstorm

vscode

pycharm – python代码 也可以写html代码

二、第一张网页

一个页面有且只有一个根标签是html, 元素一般包含 和 两个元素,也就是 HTML 的头部和主体内容。



<html>

    <head>

        <title>网页的标题</title>

    </head>

    <body>

        <!-- 这是一个文本框 -->

        <input type="text"></input>

    </body>

</html>

1

2

3

4

5

6

7

8

9

HTML标签:由尖括号包围:

成对出现: <p></p> ,即开标签和闭标签.

属性: 定义在开标签中,如input标签中的type属性

简写: 开闭标签之间的内容是标签体,如果标签体为空,则可以简写:

注释: 是注释标签

HTML文档在浏览器中被解释运行,展示的不是源码而是渲染之后的效果

三、HTML头部

< head > 元素包含了当前 HTML 页面的所有头部元素,在 < head > 元素内必须定义 < title > 元素,还可以定义 < script >、< link > 等元素。



这些 HTML 的头部元素定义了当前页面的标题、编码、使用的脚本或样式等信息。



1、title元素

< title >元素定义了当前HTML页面的标题



<title>百度一下,你就知道</title>

1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AGycI1jQ-1578023422160)(HTML.assets/1530668619163.png)]



2、meta元素

元素提供了 HTML 页面的元数据(Metadata),元数据是存储数据的信息。

通常用于设置页面的编码、描述、关键词、作者等信息。



元素不会显示在页面中,但会被浏览器解析。

2.1 定义网页内容的编码格式

<meta charset="utf-8">

1

2.2 定义HTML页面关键字,用于搜索引擎

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

1

2.3 定义HTML页面描述

<meta name="description" content="百知教育IT培训,java培训,PHP培训,UI培训,H5培训,linux培训,大数据培训,Python人工智能,IT行业培训领跑者,高薪就业 ">

1

2.4 定义HTML页面作者

<meta name="author" content="百知教育">

1

四、HTML主体

1、body元素

标签定义文档的主体。 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。body元素中包含的内容(子标签)是用户可以看到的。

一个 HTML 文件只能存在一个 标签。



2、HTML元素基本构成

2.1 元素类型

HTML 是标记语言,所谓标记就是指页面中的元素(元素也可以叫做标签)。一个完整的 HTML 页面都是由众多不同的元素组成的。



闭合元素:必须包含开始元素和结束元素,如果没有结束元素会产生意料之外的错误。



<title>百知教育Python人工智能培训</title>

<p>这是一个段落标签</p>                     <!--该标签的作用是表示一个段落,会有换行--> 

1

2

空元素:也可以叫做单元素,只需要开始元素,而不需要结束元素。



<meta name="description" content="渥瑞达Web前端培训">



<br/>            <!-- 换行 -- >   

1

2

3





2.2 HTML属性

属性是设置在HTML元素中的,用于为元素添加附加信息。属性一般都是定义在开始元素中,并且是以“名称/值”对出现



 <input type="text" />   <!-- 这是一个文本框 -->



 <input type="button" value="点我" />   <!-- 这是一个按钮 -->

1

2

3

五、HTML文本

1、标题元素

HTML 提供了 6 个标题元素,由大到小依次为 <h1> 到 <h6>



<h1>这是一级标题</h1>



<h2>这是二级标题</h2>



<h3>这是三级标题</h3>



<h4>这是四级标题</h4>



<h5>这是五级标题</h5>



<h6>这是六级标题</h6>

1

2

3

4

5

6

7

8

9

10

11

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gpmb9nTx-1578023422163)(HTML.assets/1530670234313.png)]



2、段落

元素定义段落



: 浏览器会自动地在段落的前后添加空行 ```html

这是一个段落.                

1

这是另一个段落.



注意: 在html中手动换行无效<br />
<br />
3、换行<br />
元素定义的段落内容是不会自动换行的,如果换行需要使用 br 元素<br />
<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>生活赋予我们一种巨大的和无限高贵的礼品,这就是青春:充满着力量,充满着期待志愿,充满着求知和斗争的志向,充满着希望信心和青春。<br />
<span style="white-space:pre;"> </span>&lt;br&gt;<br />
&nbsp; &nbsp; 人所缺乏的不是才干而是志向,不是成功的能力而是勤劳的意志。<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LbaNYf1L-1578023422165)(HTML.assets/1530670731312.png)]<br />
<br />
4、水平线<br />
在浏览器中显示一条水平线(分隔线)效果。<br />
属性:size=“10” color=“red” width=“100px 或者 50%” align=“left/right/center”<br />
<br />
10像素高 颜色 宽度 对齐方式<br />
<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>生活赋予我们一种巨大的和无限高贵的礼品,这就是青春:充满着力量,充满着期待志愿,充满着求知和斗争的志向,充满着希望信心和青春。<br />
<span style="white-space:pre;"> </span>&lt;br&gt;<br />
<span style="white-space:pre;"> </span>&lt;hr size="1" width="100%" color="red"/&gt;<br />
<span style="white-space:pre;"> </span>人所缺乏的不是才干而是志向,不是成功的能力而是勤劳的意志。<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nK6UOf0r-1578023422166)(HTML.assets/1530671029915.png)]<br />
<br />
5、文本修饰<br />
5.1 粗体字<br />
这是一段正常未加粗的文本内容.<br />
&lt;br&gt;<br />
&lt;b&gt;这是一段加粗之后的文本内容.&lt;/b&gt;<br />
&lt;br&gt;<br />
&lt;strong&gt;粗体--着重强调&lt;/strong&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Va3GdgFK-1578023422168)(HTML.assets/1530672074778.png)]<br />
<br />
5.2 斜体字<br />
&lt;i&gt;这是一段斜体的文本内容.&lt;/i&gt;<br />
1<br />
5.3 下划线<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>证明人:&lt;u&gt;百知教育&lt;/u&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJY0EaxC-1578023422169)(HTML.assets/1530671768110.png)]<br />
<br />
5.4 删除线<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;del&gt;这是一段要被删除的文字&lt;/del&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X4f2bCuN-1578023422172)(HTML.assets/1530671905293.png)]<br />
<br />
5.5 下标文字<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>H&lt;sub&gt;2&lt;/sub&gt;O<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8DEONkQ-1578023422179)(HTML.assets/1530672009385.png)]<br />
<br />
5.6 上标文字<br />
32 = 9<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTEZhEkv-1578023422180)(HTML.assets/1530672138124.png)]<br />
<br />
5.7 小号字<br />
正常文字<br />
&lt;small&gt;小号文字&lt;/small&gt;<br />
1<br />
2<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6KckvEOc-1578023422182)(HTML.assets/1530672191397.png)]<br />
<br />
5.8 大号字<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;small&gt;小号文字&lt;/small&gt;<br />
<span style="white-space:pre;"> </span>正常文字<br />
<span style="white-space:pre;"> </span>&lt;big&gt;大号文字&lt;/big&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gCJaBbhq-1578023422184)(HTML.assets/1530672254286.png)]<br />
<br />
六、图像与链接<br />
1、图像元素<br />
&nbsp;元素引入外部图像, 元素是空元素。<br />
<br />
1.1 src属性<br />
<span style="white-space:pre;"> </span>src 属性(必需),表示引入图像的 URL 地址。<br />
<br />
&lt;img src="images/img.png"&gt;<br />
1<br />
图像可以是本地地址,也可以是网络地址。<br />
<br />
&lt;img src="https://himg.bdimg.com/sys/portrait/item/c8764d725f6c6963656e6365g872fc876872f.jpg"&gt;<br />
1<br />
1.2 图像大小<br />
width 和 height 属性用于设置图像显示的宽度和高度。<br />
<br />
&lt;img src="img.png" width="350" height="233" /&gt;<br />
1<br />
1.3 图像定位(了解)<br />
align 属性用于设置图像显示的位置。<br />
<br />
left:水平方向居左。<br />
right:水平方向居右。<br />
top:垂直方向居上。<br />
bottom:垂直方向居下。<br />
middle:居中。<br />
&lt;img src="img.png" width="350" height="233" align="right" /&gt;<br />
1<br />
1.4 alt属性<br />
&lt;img src="abcdef.png" alt="无法加载图片"/&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evR6GiGo-1578023422185)(HTML.assets/1530673186561.png)]<br />
<br />
2、超链接<br />
2.1 用法<br />
href 属性(必需),表示指定跳转的 URL 地址<br />
<br />
&lt;a href="http://www.baizhiedu.com"&gt;百知教育&lt;/a&gt;<br />
1<br />
2.2 打开方式: target 属性<br />
元素的 target 属性用于设置链接的打开方式。<br />
<br />
_blank:在新窗口打开链接。<br />
_self:在当前窗口打开链接。<br />
&lt;a href="http://www.baizhiedu.com" target="_blank"&gt;百知教育&lt;/a&gt;<br />
1<br />
2.3 锚点<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;a name="postion"&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp;&lt;!-- 定义锚点 --&gt;<br />
<span style="white-space:pre;"> </span>&lt;!-- 页面其它内容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --&gt;<br />
<span style="white-space:pre;"> </span>&lt;a href="#postion"&gt;定位到postion的位置&lt;/a&gt;&nbsp; &lt;!-- 链接到锚点 --&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
2.4 回到顶部的空链接<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;!-- 页面其它内容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --&gt;<br />
<span style="white-space:pre;"> </span>&lt;a href="#"&gt;回到顶部&lt;/a&gt;&nbsp; &nbsp;&lt;!-- 回到顶部 --&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
七、列表<br />
1、无序列表<br />
1.1 定义无序列表<br />
元素定义无序列表,用于列出页面上没有特定次序的条目。<br />
&lt;ul&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重庆市&lt;/li&gt;<br />
&lt;/ul&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8MFYHQJB-1578023422187)(HTML.assets/1530684550787.png)]<br />
<br />
1.2 type属性<br />
定义列表的项目符号的类型<br />
<br />
disc:实心圆,默认值。<br />
circle:空心圆。<br />
square:实心矩形。<br />
&lt;ul type="circle"&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重庆市&lt;/li&gt;<br />
&lt;/ul&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gCwhGGdG-1578023422188)(HTML+CSS_pic/1530684771419.png)]<br />
<br />
2、有序列表<br />
2.1 定义有序列表<br />
&lt;ol&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重庆市&lt;/li&gt;<br />
&lt;/ol&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofA5U8WE-1578023422190)(HTML.assets/1530684878880.png)]<br />
<br />
2.2 type属性<br />
1:数字值,默认值。<br />
a 或 A:小写或大写字母。<br />
i 或 I:小写或大写罗马数字。<br />
&lt;ol type="a"&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重庆市&lt;/li&gt;<br />
&lt;/ol&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3l1LPm9P-1578023422191)(HTML.assets/1530685009075.png)]<br />
<br />
3、自定义列表<br />
&lt;dl&gt;<br />
&nbsp; &nbsp; &lt;dt&gt;北京&lt;/dt&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;海淀&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;昌平&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;朝阳&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dt&gt;广东&lt;/dt&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;广州&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;深圳&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;东莞&lt;/dd&gt;<br />
&lt;/dl&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
八、表格<br />
1、表格使用<br />
表格由 &lt; table &gt; 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。<br />
<br />
&lt;table&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JL9Sjv2t-1578023422196)(HTML.assets/1530685462072.png)]<br />
<br />
2、表格属性<br />
属性名称<span style="white-space:pre;"> </span>描述<br />
width 和 height<span style="white-space:pre;"> </span>设置表格的宽度和高度<br />
align<span style="white-space:pre;"> </span>设置表格的对齐方式<br />
border<span style="white-space:pre;"> </span>设置表格的边框宽度<br />
bgcolor<span style="white-space:pre;"> </span>设置表格的背景颜色<br />
cellpadding<span style="white-space:pre;"> </span>设置内边距(单元格边框与内容之间的距离)<br />
cellspacing<span style="white-space:pre;"> </span>设置外边距(单元格之间的距离)<br />
bordercolor<span style="white-space:pre;"> </span>边框颜色<br />
&lt;table border="1" cellspacing="0" bgcolor="gray" bordercolor="red" width="300px" height="100px" align="left"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3bucqAYt-1578023422198)(HTML.assets/1530685943196.png)]<br />
<br />
3、tr元素<br />
属性名称<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、left、center<span style="white-space:pre;"> </span>左右对齐方式<br />
valign<span style="white-space:pre;"> </span>top 、middle 、bottom<span style="white-space:pre;"> </span>垂直对齐方式<br />
bgcolor<span style="white-space:pre;"> </span>rgb(xxx,xxx,xxx)、colorName<span style="white-space:pre;"> </span>背景颜色<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr align="center"&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr align="right" valign="top" bgcolor="blue"&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-737Gkc1r-1578023422199)(HTML.assets/1530695272576.png)]<br />
<br />
4、td元素<br />
元素是定义表格的数据单元格。<br />
属性名称<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、center、left<span style="white-space:pre;"> </span>设置水平对齐方式<br />
valign<span style="white-space:pre;"> </span>top、middle、bottom<span style="white-space:pre;"> </span>设置垂直对齐方式<br />
width和height<span style="white-space:pre;"> </span>pixels 、%<span style="white-space:pre;"> </span>设置单元格的宽和高<br />
colspan和rowspan<span style="white-space:pre;"> </span>number<span style="white-space:pre;"> </span>设置单元格的跨列和跨行数量<br />
bgcolor<span style="white-space:pre;"> </span>rbg()、colorName<span style="white-space:pre;"> </span>单元格背景色<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td align="center"&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td valign="top"&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td width="300px"&gt;第2行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td bgcolor='red'&gt;第2行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IcLpE6Ii-1578023422201)(HTML.assets/1530697152946.png)]<br />
<br />
合并行和列<br />
<br />
&lt;table border="1" cellspacing="0" width="500px" height="200px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td colspan="2"&gt;第2行,第1列&lt;/td&gt;<span style="white-space:pre;"> </span>&nbsp;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第3行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td rowspan="2"&gt;第3行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第4行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z6ythYQ4-1578023422203)(HTML.assets/1530697074613.png)]<br />
<br />
5、表格标题caption<br />
元素用于定义表格的标题,必须紧随 元素之后,且只能对每个表格定义一个标题。<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;caption&gt;表格标题&lt;/caption&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V3X7gcxe-1578023422204)(HTML.assets/1530697414224.png)]<br />
<br />
6、表头thead、tbody表主体、tfoot表脚注<br />
标签定义表格的表头。<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;caption&gt;信息&lt;/caption&gt;<br />
<span style="white-space:pre;"> </span>&lt;thead&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;th&gt;姓名&lt;/th&gt; &lt;!-- 定义表头单元格 会加粗显示 --&gt;&nbsp;&nbsp;<br />
<span style="white-space:pre;"> </span>&lt;th&gt;性别&lt;/th&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;/thead&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;Tom&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;boy&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;Linda&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;girl&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
tfoot 元素应该与 thead 和 tbody 元素结合起来使用。 (比较少用)<br />
<br />
九、表单<br />
1、form 元素<br />
表单用标签描述,表单内部可以有多个子标签,用来完成用户信息的收集,并发送请求给服务器。<br />
<br />
属性:action=“xxx” method=“get/post”<br />
<br />
请求地址 请求方式<br />
<br />
http://www.baidu.com?uname=abc&amp;passwd=123<br />
&lt;form action="http://www.baidu.com" method="get"&gt;<br />
<span style="white-space:pre;"> </span>username:&lt;input type="text" name="uname" id="uname115"/&gt;&lt;br/&gt;&nbsp; # abc<br />
<span style="white-space:pre;"> </span>password:&lt;input type="text" name="passwd" id="pwd115"/&gt;&lt;br/&gt;&nbsp; &nbsp;# 123<br />
<span style="white-space:pre;"> </span>&lt;input type="submit" value="提交" id="sub115"/&gt;<br />
&lt;/form&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
2、表单元素<br />
元素有很多不同类型,根据不同的 type 属性来决定。<br />
<br />
用户名:&lt;input type="text" name="txt" /&gt;&nbsp; &lt;!-- text表示文本框--&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nLWfznhF-1578023422206)(HTML.assets/1530757524606.png)]<br />
<br />
type属性:<br />
类型名称<span style="white-space:pre;"> </span>描述<br />
text<span style="white-space:pre;"> </span>文本输入框<br />
password<span style="white-space:pre;"> </span>密码框<br />
radio<span style="white-space:pre;"> </span>单选按钮<br />
checkbox<span style="white-space:pre;"> </span>复选框<br />
button<span style="white-space:pre;"> </span>按钮<br />
submit<span style="white-space:pre;"> </span>提交按钮<br />
reset<span style="white-space:pre;"> </span>重置按钮<br />
file<span style="white-space:pre;"> </span>文件域<br />
name属性 :标签的普通的属性,相当于别名,是每个输入控件的重要属性==请求参数名。<br />
<br />
id属性 : 标签的唯一标识名,不能重复。<br />
<br />
value属性 :标签的普通属性,是中药属性==请求参数值。<br />
<br />
2.1 文本框<br />
用户名:&lt;input type="text" name="txt" /&gt;&nbsp; &lt;!-- text表示文本框--&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6IYvY3p-1578023422207)(HTML.assets/1530758139189.png)]<br />
<br />
用户名:&lt;input type="text" name="pwd" value="Mr_lee" maxlength="10" readonly="readonly" /&gt;<br />
1<br />
2.2 密码框<br />
密码:&lt;input type="password" name="pwd" value="123456" /&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Nk9Lys0-1578023422208)(HTML.assets/1530758213655.png)]<br />
<br />
2.3 单选按钮<br />
&lt;!-- name:值必须一样,value:表示提交表单时的值 checked:默认选中--&gt;<br />
&lt;input type="radio" name="sex" value="1"&gt;男&nbsp; &nbsp; &nbsp; &nbsp;<br />
&lt;input type="radio" name="sex" value="0" checked="checked"&gt;女<br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XP3i844U-1578023422210)(HTML.assets/1530758647865.png)]<br />
<br />
2.4 复选框<br />
&lt;input type="checkbox" name="course" value="Mysql"&gt;Mysql<br />
&lt;input type="checkbox" name="course" value="HTML"&gt;HTML<br />
&lt;input type="checkbox" name="course" value="Linux"&gt;Linux<br />
&lt;input type="checkbox" name="course" value="Django"&gt;Django<br />
1<br />
2<br />
3<br />
4<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r5mPRrZ3-1578023422211)(HTML.assets/1530758924865.png)]<br />
<br />
2.5 按钮<br />
&lt;input type="button" name="btn" value="点我"&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ozchiqAW-1578023422214)(HTML.assets/1530759170832.png)]<br />
<br />
2.6 提交按钮<br />
&lt;input type="submit" name="sub_btn" value="提交"&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kIOKVxLo-1578023422215)(HTML.assets/1530759206331.png)]<br />
<br />
2.7 重置按钮<br />
&lt;input type="reset" name="set_btn" value="重置"&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cG06duKx-1578023422217)(HTML.assets/1530759252821.png)]<br />
<br />
2.8 文件域<br />
<br />
&lt;input type="file"&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mHkQp3fZ-1578023422219)(HTML.assets/1530759404657.png)]<br />
<br />
2.9 文本域<br />
&lt;textarea name="txtInfo" rows="4" cols="20"&gt;aa&lt;/textarea&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-406qSTUX-1578023422221)(HTML.assets/1530759866508.png)]<br />
<br />
3、下拉选框<br />
选择课程:<br />
&lt;select name="course"&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="1"&gt;Java&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="2" selected="selected"&gt;C++&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="3"&gt;PHP&lt;/option&gt;<br />
&lt;/select&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b9rrRffX-1578023422222)(HTML.assets/1530759604602.png)]<br />
<br />
4、表单综合实例<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9sgjtXvT-1578023422223)(HTML.assets/1530759682014.png)]<br />
<br />
十、特殊符号<br />
显示结果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>实体名称<br />
空格<span style="white-space:pre;"> </span>&nbsp;<br />
&lt;<span style="white-space:pre;"> </span>小于号<span style="white-space:pre;"> </span>&lt;<br />
&gt;<span style="white-space:pre;"> </span>大于号<span style="white-space:pre;"> </span>&gt;<br />
&copy;<span style="white-space:pre;"> </span>版权(copyright)<span style="white-space:pre;"> </span>&copy;<br />
&reg;<span style="white-space:pre;"> </span>注册商标<span style="white-space:pre;"> </span>&reg;<br />
™<span style="white-space:pre;"> </span>商标<span style="white-space:pre;"> </span>™<br />
ile"&gt;<br />
<br />
<br />
[外链图片转存中...(img-mHkQp3fZ-1578023422219)]<br />
<br />
##### 2.9 文本域<br />
<br />
```html<br />
&lt;textarea name="txtInfo" rows="4" cols="20"&gt;aa&lt;/textarea&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
[外链图片转存中…(img-406qSTUX-1578023422221)]<br />
<br />
3、下拉选框<br />
选择课程:<br />
&lt;select name="course"&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="1"&gt;Java&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="2" selected="selected"&gt;C++&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="3"&gt;PHP&lt;/option&gt;<br />
&lt;/select&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外链图片转存中…(img-b9rrRffX-1578023422222)]<br />
<br />
4、表单综合实例<br />
[外链图片转存中…(img-9sgjtXvT-1578023422223)]<br />
<br />
十、特殊符号<br />
显示结果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>实体名称<br />
空格<span style="white-space:pre;"> </span>&nbsp;<br />
&lt;<span style="white-space:pre;"> </span>小于号<span style="white-space:pre;"> </span>&lt;<br />
&gt;<span style="white-space:pre;"> </span>大于号<span style="white-space:pre;"> </span>&gt;<br />
&copy;<span style="white-space:pre;"> </span>版权(copyright)<span style="white-space:pre;"> </span>&copy;<br />
&reg;<span style="white-space:pre;"> </span>注册商标<span style="white-space:pre;"> </span>&reg;<br />
™<span style="white-space:pre;"> </span>商标<span style="white-space:pre;"> </span>™<br />
<br />
<br />

Vue 数据持久化

前端达人

方法一:使用 localStorage 存储数据

window.localStorage.setItem(key,value)

 

方法二:使用 vuex-persistedstate插件

vuex 存在一个痛点,就是刷新以后vuex里面存储的state就会被浏览器释放掉(state都是存储在内存中的)。

办法:

通过vuex-persistedstate插件,实现将数据存储到本地。

1.实现

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    state:{},
    getters:{},
    actions:{},
    mutations:{},
    modules:{},
    plugins: [createPersistedState()]  //加上这个就可以了 //里面设置需要缓存的内容
})

API:  https://www.npmjs.com/package/vuex-persistedstate

方法三: 使用vue-cookie插件

cookie 可以设置过期时间

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)
var VueCookie = require('vue-cookie');

export default new Vuex.Store({
  state: {
    token: VueCookie.get('token')
  },
  mutations: {
    saveToken(state, token) {
      state.token = token;
      // 设置存储
      VueCookie.set('token', token, { expires: '30s' });
    }
  },
  actions: {

  }
})

简单有效的JavaScript图片预加载效果

seo达人

首先编写一个简单的容器:



<style>

content {

    width: 600px;

    height: 100vh;

    overflow-y: auto;

}

 

content ul {

    width: 100%;

}

 

content ul li {

    width: 50%;

    float: left;

    margin: 20px 0;

    list-style: none;

}

 

content ul li p {

    width: 200px;

    height: 200px;

    overflow: hidden;

    margin: 0 auto;

    border: 1px solid #999999;

}

 

content ul li p img {

    width: 100%;

    display: block;

    position: relative;

    top: 50%;

    transform: translateY(-50%);

}

</style>

<div id="content">

   <ul>

   </ul>

</div>

然后,编写js代码:



let imageArr = [{

    img_url: "http://www.lexilisi.com/Uploadpth/c45cc952-dcb7-493c-a171-357d1b820b37.png",

}, {

    img_url: "http://xiaobanyou.com/static/images/xby_user_3.jpg",

}, {

    img_url: "http://xiaobanyou.com/static/images/xby_user_4.jpg",

}, {

    img_url: "http://xiaobanyou.com/static/images/xby_user_5.jpg",

}, {

    img_url: "http://xiaobanyou.com/static/images/xby_user_6.jpg",

}, {

    img_url: "http://xiaobanyou.com/static/images/xby_user_799.jpg",

}];

const lazyLoad = (src) => {

    //加载loading动画

    let _image = new Image();

    _image.src = './loading.gif';

    //加载需要展示的图片

    let image = new Image();

    image.src = src;

    //加载成功,将loading图片路径改成对应的真实路径

    image.onload = _ => image.src = .currentTarget.src;

    //加载失败,将loading图片路径改成默认图片路径

    image.onerror = _ => _image.src = './error.png';

    return _image;

}

let _content = document.getElementById('content');

let _ul = _content.getElementsByTagName('ul');

imageArr.forEach(value => {

    let _li = document.createElement('li');

    let _p = document.createElement('p');

    let _image = lazyLoad(value.img_url);

    _p.appendChild(_image);

    _li.appendChild(_p);

    _ul[0].appendChild(_li);

})

展示效果如图:







每个图片都是异步加载,加载完成后:







 






vue使用路由进行页面跳转时传递参数

前端达人

一. 通过router-link进行跳转

<router-link

:to="{

path: 'yourPath',

    params: {

    name: 'name',

        dataObj: data

},

query: {

    name: 'name',

        dataObj: data

}

}">

</router-link>

二. 通过编程导航 $router进行路由跳转

1.路径后拼接参数

通过路径后直接拼接来传递参数



getDescribe(id) {

// 直接调用$router.push 实现携带参数的跳转

        this.$router.push({

          path: /describe/${id},

        })



对应路由配置

注意:此方法需要修改对应路由配置,需要在path中添加/:id来对应 $router.push 中path携带的参数。



 {

     path: '/describe/:id',

     name: 'Describe',

     component: Describe

   }



获取传递的参数值



this.$route.params.id

  1. 通过params来传递参数

    传递参数

    通过路由属性中的name来确定匹配的路由,通过params来传递参数。



     this.$router.push({

              name: 'Describe',

              params: {

                id: id

              }

            })



    对应路由配置

    注意这里不能使用:/id来传递参数了,因为已经使用params来携带参数了。



    {

         path: '/describe',

         name: 'Describe',

         component: Describe

       }



    获取参数



    this.$route.params.id

    1
  2. 通过query来传递参数

    传递参数

    使用path来匹配路由,然后通过query来传递参数

    这种情况下 query传递的参数会显示在url后面?id=?



    this.$router.push({

              path: '/describe',

              query: {

                id: id

              }

            })



    对应路由配置



     {

         path: '/describe',

         name: 'Describe',

         component: Describe

       }



    获取参数



    this.$route.query.id




人工智能行业常用名词科普

涛涛

本文整理了人工智能行业中设计师需要理解的一些名词和内容。

一方面供自己学习思考,另一方面也希望能帮助到准备投入到人工智能行业的设计师。之前听有的朋友讲到,觉得自己没有计算机背景,有点害怕进入到这样一个领域来。

没有计算机背景没有关系,只要对这个行业充满好奇,一个个的问题解决掉,在你眼前的迷雾都会散去的。

先简单举几个人工智能在生活中有在应用的例子:

像现在有的超市寄存物件,开箱时采用的人脸识别;像家里购置的智能音响,时不时还能跟它聊上几句;像接听到的银行电话(是的,对方可能是机器人噢);像在淘宝上咨询的客服小蜜;像你手机里的虚拟助手….等等这些都是人工智能在生活中的应用。

人工智能在设计领域的应用也相当广泛,具体可以看这篇文章:

这几个例子是在生活中比较普遍能接触到的,实际人工智能应用的领域还在不断的扩大,我们甚至都无法想象到,未来的生活会是怎样的状态和场景。

在这家公司之前,我做过语音交互类的产品交互设计。当时在定义人与设备进行语音交互时,会是怎样的一个交互场景。从说唤醒词到发出指令,从收到反馈到继续对话。唤醒后等待的时间、结束的规则等等这些。

而现在,我大部分时间是在设计工具,如何让使用者能快速的创建出一个智能机器人。如何让机器人的创建者方便快捷的添加机器人的相关数据和创建出对话场景。

所以在进行这些工具的设计之前,有些名词概念,会需要设计师来了解一下,能让我们更好的理解人工智能的一些原理以及能够让设计师具象化到实际的设计中,甚至能基于此技术/原理来进行相关的创新或研究。

整理内容如下:(内容基于工作及自身理解,如有概念理解错误,欢迎指正)

下面尝试用较易理解方式来解释这些名词:

与机器人进行对话,首先就需要让机器人懂我们说的话,这其中,就需要来关注到自然语言处理,通过自然语言处理技术,能够实现我们与机器之间「无障碍」对话。

  • 自然语言处理(NLP):是人类与机器沟通的中介,需要靠它来理解、处理和运用自然语言
  • 自然语言理解(NLU):指的是机器的语言理解能力,将人类语言转化为机器可理解的内容
  • 自然语言生成(NLG):指的是机器通过一系列的分析处理后,把计算机数据转化生成为自然语言内容,让人类可理解

我把这三者关系画了张图示,我是以这样的方式理解的

从图中可进一步看出,NLU 和 NLG 是 NLP 的子集,而 NLP 是人与机器沟通中很重要的存在。

涉及到语音就会经常听到 ASR 和 TTS

语音识别(ASR):将语音内容转为文字

如微信里面,当别人发的语音信息不方便外放收听时,可以转为文字查看

语音合成(TTS):将文字内容转为语音

如现在很多的阅读软件,支持播放,有的就是利用 TTS,直接将文本内容转为语音播放出来。

我试着将上面提到的 NLP 和 ASR、TTS 组合起来,关系可以如下图所示

当我们说一句话的时候,机器知道我们表达的是什么吗?

意图(Intent):一个人希望达到的目的,或者解释为想要做什么,他的动机是什么。

如:

  • 我对天猫精灵音箱说「声音太小了」,那我的意图是什么?意图是「将音量调大」。
  • 「看下明天上海飞北京的航班信息。」 直接意图:查航班信息,潜在意图:「买机票」?

槽位(Slot):可以理解为系统要向用户收集的关键信息。

如:

「买张明天从上海到北京的机票」

上面这句话中,获取到意图(买机票);提取关键信息 时间(明天)、地点(出发地:上海;到达地:北京)
这些关键的信息就是槽位,当系统获知到这些信息后,就能去执行下一步动作。

还可以这样理解,当我们去银行营业厅办理卡的时候,会填写一张表,表每个要填写的选项,就是一个个的槽位。槽位就是为你服务的人员要从你那收集的关键信息。

实体(Entity):用户在语句中提到的具体信息

实体这词放在生活中,我们很容易理解,就是实实在在的物体,像桌子、电脑、熊猫等等这些都是实体。

但是在人机对话中,机器理解人的语句内容,会识别出语句中的实体信息(如:地点、人名、歌曲名等),然后进行标记。

那槽位和实体是不是讲的是一回事?只是不同的说法?

我之前有一度陷入这样的困惑中,但其实这两者还是有所区别的。比如,一个实体是数字,但是在语句中,数字将代表不同的含义。

如:

人:有没有10元的鲜花? 机器人:玫瑰花10元一支 。

这句话中,实体number「10」,但这个 10 在句子中表达的是价格,所以收集到的槽位信息是价格:「10元」

这样说可能还是不太能理解,那我们可以先了解下,在一句表达中,需要进行槽位信息收集,但机器如何知道「买张明天从上海到北京的机票」中,「上海」是城市,并且「上海」是出发地呢?

「上海」这个词会被建立在一个城市实体词库中,这是「上海」能被识别到是「城市」的原因。

其次,通过将解析槽位加入语料中,加以训练让机器学习相关表述结构,来获知该句式中,收集到的第一个城市是出发地,于是把第一个城市填到对应的槽位中。

使用什么工具来让机器知道,这个信息是要提取的信息?

解析器(Parser):抽取/解析用户语句中的关键信息

上一个讲到实体,这里讲到的解析器则是这么个工具,用来抽取这些信息。比如会有些通用的解析器如时间解析器、城市解析器、歌手解析器等等。

解析器的类型也比较多,如通用解析器、词典解析器、正则解析器、组合解析器等等,这里就不再扩展开讲具体解析器,实在过于复杂了。

命名实体识别(NER):用来识别具有特定意义的实体。主要会包括像机构、地名、组织等。

是不是发现,解析器和 NER 在做差不多的事情?我是这样理解的,解析器的话是一个更大的存在,其中包括了 NER。解析器下会有不同类型和不同功能的工具来实现关键信息的识别/抽取。

在我们与机器人对话时,一般会涉及到四个不同类型的对话,开放域的聊天、任务驱动的对话、问答(FAQ)和推荐。

上面是在有次分享中提到的,这四个不同类型的对话,在机器人平台中,会需要借助不同的功能模块来实现。

任务对话(Task Dialogue ):有上下文联系,就像我们要去订票、订餐之类的一段任务型的对话。

我们公司产品中,任务引擎模块就是做这个任务对话的创建,比如,要订机票的场景。用户在这个订机票的场景中,会涉及到的对话内容、流程的设计。

知识图谱(Knowledge Graph):这个可以理解为可视化关联信息。
比如:查询一个明星的身高、年龄,他的学校、他的女友,他的相关作品,这些基于这个人而构建的信息库,都可以通过知识图谱在做整理。并且在构建时能够做到可视化的了解。

要让机器人知道,它脑子里有货了!

训练(Train):这个概念可以这样理解,比如你创建了个机器人,但是它什么都还不懂,于是你塞了堆知识给他,这时,它就需要自己训练学习了。训练好了,就能回答你塞的那堆知识里的问题了。

讲到这就忍不住想用这个学习的例子,来简单讲下一般机器人的创建流程。像我们在学校,会经历上课学习新知识-复习温习-考试-整理错题集,以此循环进行。

这个创建机器人的流程也是一样通过知识的导入/创建-训练-测试-优化-上线-优化,以此循环,不断强化机器人,让它越来越智能。

其他:

数据标注:将对话日志中的有价值数据做标注(标记/匹配/关联之类)。

因为人的表达万千,多种表达方式都代表的同一个意思。有时用户说了句话,是语料库中并不包含,于是机器人可能就答非所问了。

Ai 训练师们就可以将这些数据信息标注到对应的问题中去,这样当用户再用同样方式表述时,机器人就能如预期回答了。

讲到标注想到之前在朋友圈很火的你画我猜,谷歌推出的这个小游戏席卷朋友圈。他们用了个如此聪明的做法,其实我们参与其中的做法就是在做数据标注,而且还是主动提供数据的那种。

这也反映了,数据对于机器人的重要性,通过不断的进行数据维护和补充数据,机器人就会越来越理解人,表达也会越来越智能。就跟我们学习一样,不断学习才能够理解其他的含义,甚至当认知能力提升了,看待问题的角度才能不一样。

文章来源:优设

平面排版如何打造节奏感?

涛涛

我们在做设计的时候总是会听到,要注意「节奏感」。关于节奏感这个词,大多数人似懂非懂,可能明白它是什么意思,但是在设计中都应该注意哪些节奏感,却还没有一个比较清晰的思路。我们都知道音乐是有不同种类的,有古典音乐,有摇滚音乐等,它们之间的不同,很多时候是节奏给我们带来的感受不同。在设计上也是一样的,掌握节奏感就能控制画面的变化和气质的传达。

什么是节奏感

先理解什么是节奏感。

我们常说的生活节奏,可以理解为,假如你在规定时间里,你只需要上班和回家两点一线的生活。

但是当你有了孩子还要去幼儿园接送,晚上还要去健身等,这样就是生活节奏加快了。

我们常听到的节奏感其实是来源于音乐的。

不同节奏感的音乐会给人不同的感受,就像音乐1这种,会给你一种平静舒缓的感觉。音乐2这种就会有种比较喧闹、比较活泼的感觉。

说到设计的中的节奏感,从绘画里也可以看出,这是吴冠中的绘画作品,看似很简单的画面,但是这种水流的蜿蜒的感觉让这个画面变得灵动起来。

去掉这些流动的线之后,整个画面就变得很平静了。失去了那种蜿蜒流潺的感觉。

在我们很多图像网站里都用了这种瀑布流的方式,不仅是为了方便不同尺寸的图片的载入,在很多时候这种方式,相对于平铺的图片放置会更让人舒服而不枯燥。

节奏与韵律

在平面设计里,我们在学习平面构成的时候节奏与韵律是常常放在一起说的。

我们可以看海报去理解,第一张海报那几条鱼摆放的位置是没什么规律的,但是它却能形成节奏感。那么在第二张海报,我们能清晰地感受到它的节奏与韵律的变化。所以节奏是有规律或者无规律的变化的,韵律是有规律的变化的。

包括去百度百科查找相关信息也是表达类似这样的意思。

一个版面里的节奏影响是多方向面的,有文字编排、色彩搭配、图像处理等。

文字编排

今天我们要讲的是文字编排里的节奏感。在文字编排上我们为什么要掌握节奏感呢?

我们在看一些纯文字的书籍的时候,很容易犯困。

这就是因为书籍的文字编排几乎没有节奏感,所以相对来说是枯燥的。

有一些不同的书籍设计或者杂志会在里面加入图片、对文字与版式进行处理,使它们变得有变化性,就会调节这种节奏感。让画面阅读不再枯燥。当然了,画面左边是因为大量的信息的传达不适合做过多的变化,否则阅读过程会有阻碍。这也是根据不同种类的信息从而把握不同节奏感的结果。

所以在这个画面里标题是节奏感比较强的,在保证阅读性的同时也做到了装饰性。那么由于下方信息量比较多,这些文字又需要被快速传达,所以这些文字的编排就会趋向于阅读性。

掌握文字编排的节奏感对画面传达的气质的影响是非常大的。就像这两张海报,它们的背景图片气质是很像的,都是天空的大留白,但是,完全不同的文字编排,就让第一张海报表现出活泼可爱的感觉,第二张海报表现出平静安静的感觉。

我们可以理解为,随着几乎没有节奏感到节奏感比较弱再到节奏感强,它的画面是可以呈现出由静止到舒缓再到动感的。

在文字编排中有非常多的对比,是一个非常大的系统,今天我们主要去梳理一下文字编排时的一些影响因素,以及在文字编排上一些需要注意的细节。(我们今天会讲这些影响我们文字编排的节奏感,字体种类、大小、长短、位置、疏密、颜色、组合形状和方向。)

1. 字体种类

文字种类就是我们对文字的类别进行分类,在字体种类里一般分成了衬线体与非衬线体,但是在中文里,我觉得主要由这五大类组成,分别是黑体,宋体,楷体,圆体与书法体。

包括字体家族里的不同字重。

不仅是这样,对于同一个字体我们还分常规体、窄体、扁体。

一段文字只选择上面的所说的变化就已经可以有很多种了。我拿了一段数学公式装❌。这里我们算出有 105 种。所以文字编排时稍微不注意就会有太多的变化性。

更何况我们经常在版面里加入其他国家语言的文字,这些都会影响文字的节奏感。

所以我们要学会控制这种节奏感,一般来说我们日常比较常用的就是黑体配无衬线体,宋体配衬线体。并且在字重上我们都要注意协调。尽量使它们看一起是一样的粗细度。

不同的字体搭配起来是有一定难度的。这种节奏感就好像不同风格的音乐的结合,它们之间的衔接与融合会比单纯的某一种风格的音乐制作起来更难。

这种不同类型的文字的搭配,对于排版和运用的能力有一定要求,运用不好就会传达不了画面的气质与信息。在电商里的反例是比较多的。在我看到的这张图里,它同时用了无衬线体与衬线体的结合,画面没有清晰呈现出准确的气质。大家可能会说它是简约高贵风,但是这是一个大范围,在简约高贵里有现代的高贵,有复古的高贵,还有一些与众不同的高贵等。

我们尝试把左边的衬线体换成无衬线看看。是不是有种现代都市的气质?

如果都统一成衬线的话,是不是一种精致的时尚感就出来了呢。统一这种文字的种类能更加精准地传达画面的气质。

刚刚我们也说到字体的混搭会产生混乱和怪异感,要慎用,但是如果我们的画画就需要这种感觉呢,当然就可以用这种特性来故意营造一种怪异感,当画面的字体种类越多的时候,所营造出来的节奏感会更强烈。

我们看这个画面也是这样的,周围的很多图形和各种各种样的字体类型让这个画面变得搞怪活泼。

就算去掉了周围的图形,文字这传达出来的搞怪感觉也依然存在。

接下来我们用这个文案来做一个案例演示下,由于平时很多都是用同一种类型字体搭配,那么这一次就挑战一下,我就打算做一稿用不同类型字体的版面。看看会有什么样的效果。

首先我在版面中划分版块,填上相应的文字,在这里可以看到,我同时用了衬线与无衬线的字体,还用了具有手写性质的字体。不仅如此, 所有的文字我都用了窄体而不是常见的常规体来增强这种怪异的节奏感。

最后加上一些图形处理一下负空间,这个案例就完成了。

为了减少影响,我把图片遮住单看文字组,我把这些字体都变成黑体了,对比可以发现,还是原来的文字组更有搞怪奇异的节奏感。右边这个因为板式与图形的完整性使得它看起来并没有很大的问题,但是它的确是缺少了像左边这种古典与现代结合的节奏感。

2. 大小

文字的大小节奏可能会有人理解为这样,但是我们一般不会这么做。

我们更多地是用在标题与内文的对比。

节奏变化比较大的文字组会给人一种冲击力,让人无法忽视标题的存在,就好像我在大声告诉你一句话的感觉,会比较强硬与喧闹。

节奏比较平缓的文字组表现出一种精致、安静的感觉。

我们把它们放到画面里看下,这个标题与内文的对比很大,并且在这个版面中占据一定的大小,这种时候有没有觉得这个画面呈现出一种,好像在播放新闻的感觉,好像在说这个小岛有什么重大新闻一样。

但是当标题变小时,整个画面呈现出比较平缓的节奏感,很符合画面传达出来的安静舒缓的感觉。

这种方式很多作品都有,这种标题和内文的对比,或者说是文字在版面的占比比较大时,就可以体现出这种很强烈的节奏,让人很难忽视这些文字内容。同时画面也更容易传达出一种力量感。

往往想要营造这种安静感的时候,比较注重画面整体的感觉,就不需要太多的文字变化,甚至为了区别文字层级而需要有的文字大小,也尽量地在减少对比。

3. 长短

我们都知道音频都是这种长短不一的声波图,因为这种长短不一的变化感受会给人带来节奏感。

所以也有以这种形式来编排文字,表现节奏感的系列广告作品。

它比较经常出现在居中对齐的文字组上。

但是我们要注意的是,你会发现很少情况在两个极端之间直接过度,比如说一长一短。

在没有文字大小的对比情况下,如果文字的长短对比太小,我们先不说节奏感,我们可能会有种疑问,它到底是想两端对齐还是居中对齐的呢?所以这种两端模棱两可的情况最好避免。不能模棱两可,对比太大又会不够美观,所以我们去创造节奏感的时候要注意这些问题。

毕竟它不是让人阅读时间很长的文字,所以我们就需要调节这种节奏让它看起来美观而且不枯燥。

这是我随便在购物网站截图的,你会发现它们的文字编排都很注意我刚刚说的短长短的节奏感。

4. 位置

我找了两张都是黑色背景并且配图比例也差不多的海报作对比说明这个问题。

因为图像的干扰我就同时去掉了图片,还有也把右边红色的字变成了白色,它们之间的对比变得清晰了,左边的文字规划在版面中显得更有活力,右边版面的文字集中在一块,就像我们前面提到的小说书籍内页一样。这样的文字编排在阅读上会比左边的缺少节奏感。但是我在这里要说的一点是,左边海报本身的图像没有右边的有冲击力与活力,所以我们如果要真正做对比的话。

用左边的图像放置在两个不同的版面来作对比,这样大家应该能感觉到差别。左边的版面虽然没有表现特别强的节奏感觉,但是至少版面不是特别压抑的。至于右边的我们会觉得很沉静,配合这种黑色的背景比左边更压抑。这就是文字编排在版面的影响。

不仅是文字组之间,标题的有意放置不同的位置就可以营造这种节奏感,是因为它依然可以使得我们的阅读视线发生变化。

比较随意编排的文字组也会比,比较拘谨正式的文字组看起来更有节奏、更活泼。

接下来我们用案例来演示。

首先选择纤细的宋体会比较符合这个画面的气质,很多人可能把文字组放在画面四个角就算大功告成了,但是这个画面既没有一个亮点吸引我们,而且画面里的元素都非常得散,没有体现出一点活泼的味道。

这个时候我们可以效仿刚刚我们看到的标题的做法,拉开距离,调整位置让它有上下浮动的节奏感,包括文字上我都做了一些切割移动让它们活泼,再加上线条让它们更有联系感。这个画面就会比刚刚活泼多了。

案例完成。

5. 疏密

左边紧凑的文字字距会呈现出一种张力,一种急促的节奏,营造一种紧张感。右边宽松的字距画面会更缓和,不同的字距在版面中有宽松对比,也营造出了一种节奏对比。不会感到枯燥。

很多人可能没太去注意这些文字编排的小细节,这两版里哪一个更符合平缓的节奏感呢?答案是下面这个。第一张这样做也没错的,但是我们想让文字也能相应地呈现出一种透气感的话,第二张的会更加符合。

6. 颜色

颜色的问题大家应该了解了很多了,这里就简单提一下,就像我们在营造一种氛围的时候选择的气球颜色都是非常重要的,我们选择饱和度比较高,颜色种类比较多的气球的时候,是想营造一种热闹活泼的感觉的。但是如果想营造一种浪漫安静的氛围时就用了很多白色或者淡色调的颜色。

就像这个 banner 一样,中间不同颜色的文字为这个画面增加了很强的节奏感。变得很活泼。

很多时候我们不需要太强的节奏感,所以我们经常给文字做一点的颜色变化,来让画面更鲜活。就像这个 banner,如果它没有了左边那个粉色的颜色的跳跃。

这个画面就会变得很沉静。

如果,画面文字的粉色变多,它的节奏感又会变得更强。

不仅是因为这个颜色本身的跳跃性比较高,而且也是因为颜色的不停切换导致这种节奏感的增强。所以不同颜色的占比也是需要考虑的。在这里主要是因为模特身上没有玫红色,所以左边不适合用过多的玫红色,用全黑都会显得很沉闷,所以这里选择用一次玫红色让这个画面鲜活。

6. 组合形状

我们在这些变化的图形中替换两个不同形状的图形,我们可以感觉到替换后的图形里的变化会更多,呈现出来的活泼性更强了。当画面中的不同形状更多,就会趋向于一种混乱。

用不同的图形在版面里,有区分不同信息的作用,但是这种方式也是增加版面节奏感的一种方式。在很多促销的传单会经常看到。

这个画面没有人物图片,仅仅是通过文字的编排就能传达出这种热闹的节奏感。

除了颜色本身的热闹性,其中比较大的影响因素。就是文字在各种不同形状里的编排,让这个画面呈现出热闹的氛围。

7. 方向

随着方向变化越来越多,画面会趋向于更有动感的的节奏。但是节奏感觉也是有度的,一旦变化性很多,那么这个版面就会显得杂乱。我们也可以简单理解为乱的元素的占比决定着你画面呈现出来的节奏感的强烈。

像第一张海报一样,这种有点古老的作品我们一般会认为是比较正式和比较严肃的,但是这些方向不一的文字编排,向我们说明了这不是一个严肃的展览,而是具有活泼的属性,从而吸引不同的观看群体。包括右边这个海报的文字编排都让这个画面的节奏感变得更强了,与人物夸张的肢体语言也相呼应。

倾斜的文字编排在电商里是出现得比较多的,微微倾斜文字就可以强调这种活泼的节奏感。

我们来看一个比较明显的例子,画面只有一个黄色的色块和文字编排以及一个不规则的图形,但是这个画面呈现出来的感觉却很活泼。

其实去掉这图形,也并没有影响原有的气质,是因为文字的编排的方向性的对比让它的节奏感增强了。

7. 案例演示

那么说到这里其实今天的内容也就结束了,这次的案例就给大家演示下怎么用这些知识去做一张海报。

首先我们要分析这个画面,图片本身是比较具有节奏感的,因为不是我们平常看的袜子的视角,而且人物有一种运动过程的动势。

这个负空间非常不规则,如果文字在这个画面负空间上直接加字的话,可能就会显得比较乱,但是我们又要做出迎合这个图片的节奏但是不乱的画面,应该怎么做呢?

首先不采取直接在图上加字的方式,把图片缩小,再添加一个深色的底色,这样这张图片和这个画面里就是一个整体了。

由于我们要压住图片的节奏感,不让它太乱,所以我在周围的空间编排文字是呈现一个既有文字层级关系,但是整体是呈现矩形的文字组。现在这个画面看起来的确不会乱,但是文字还是少了和图片活泼气质契合的节奏感。

分析一下这个画面,是宇宙系列的感觉,所以我就加入了环形的文字,然后再加一点与图片呼应的颜色。这个画面就会比之前更和谐。在做的过程通过减少变化与增加变化让画面逐渐接近自己的预期。

总结一下今天我们讲的,我们今天讲的是文字编排中的节奏感,在一开始,我分别给大家讲了从生活节奏、音乐节奏、再到设计的节奏去理解什么是节奏感,然后我还讲了关于文字节奏感对于画面的重要性,无论是对信息的传达还是对气质的表现,它的影响是非常大的。最主要的部分,我讲了影响文字编排的节奏都有哪些因素,比如文字类型、大小、方向、长短、文字组合形态等。把握自己要传达的节奏,才能正确传达信息。大家也可以用这种方式去看作品,分析它的节奏感是通过什么方式形成的。久而久之,对节奏感的掌握就会更加熟练与精准。

文章来源:优设

「卡片式设计」知识点

涛涛

卡片式设计对于我们来说并不陌生,从设计类网站上或市场上的一些 APP 中也会看到很多的卡片式设计的案例,卡片式设计也是 UI 设计中最常用的方式之一。

最近在新项目的设计中也尝试使用了卡片式设计,结合实际项目中的一些思考进行总结并归纳出一些卡片式设计的小知识点。同时希望通过本次的总结进行知识沉淀,以及跟大家一起探讨下卡片式设计。

来源于日常

在现实生活中的卡片式设计可以说是无处不在,例如身份证、交通卡、银行卡、名片、便利贴、扑克牌、游戏卡……诸如此类的生活常见品都是以卡片的方式存在,其共同点都使用一个容器承载着内容,并且具有「便携性、信息简洁和相对独立性」。

UI设计中卡片的使用场景

在项目设计之初我分析了一些使用卡片设计的 App,并且从中整理总结了几个较为常见的卡片式设计的使用场景。

1. Feed流

卡片式的 feed 流设计是一种非常常见的设计,早在前几年 Facebook、Google+ 等产品就使用了这一方式,Feed 流作为一种长内容的媒介,用户需要长时间的滑动看内容并筛选有效信息,卡片式设计很好的解决了内容与内容的区块分隔,让用户在长屏幕滑动中依旧可以很好的明确识别每一块的内容。

实际案例-淘宝微淘

2. 瀑布流设计

瀑布流的出现让单屏区域内显示更多的内容,而内容较多的情况下,使用卡片式设计可以较好的对内容进行了区域划分,让上下左右的内容从整体中具有相对独立性。

实际案例-Pinterest

3. 左右滑动组合型内容

卡片式设计具有较强的层次感,相比于平铺更能呈现内容可滑动的感受,并且块状化的设计让内容具有较高的区域分割感。

实际案例-QQ音乐

4. Tips提醒

作为非界面固定内容,卡片式设计可以让 tips 提醒设计变得更自由,在符合用户体验的基础上,它可以出现在任何我们想要它出现的位置。

实际案例-淘票票会员提醒

5. 结合手势的单块可互动内容

若页面中有且只有一个主内容,并且需要用户进行快速筛选时,可考虑这种结合卡片式设计与手势设计的方式。大大增强了用户对于设计的体验感知和丰富视觉表现。

实际案例-探探首页

6. 卡券类设计

卡券类的设计实际上是一种物化映射的过程,我们在现实中看到的卡券造型,结合卡片式的拟物化设计,让用户在屏幕上可以更直观的感知,提升了设计的代入感。

实际案例-京东领券中心

7. 集合型功能入口

集合型功能入口往往会有多个入口,使用卡片式设计让入口形成一个区域整体,可以做到既统一又相对独立。

实际案例-淘宝微淘关注账号

8. 个人主页顶部内容卡片

个人主页的设计往往会在氛围上营造沉浸感,卡片式的设计可以把关键信息进行概括收归,让原本单个的内容形成一个整体。

实际案例-美团外卖会员

规则探讨

基础的卡片设计规则,相信大家在一些系统级别的设计指导规范中也或多或少都能了解到,不同平台的规范差异其实不会有太多本质性的区别,更多的是处理技巧或方式的差异,而每个设计师对其理解的角度也会具有一些差异化,这里分享下我对于卡片式设计的一些基础想法。

1.卡片的质感打磨

同样的卡片设计,不同的人做出来的感受可能会有所差别,而表达卡片质感的主要关键点在于:卡片形体、投影深度、卡片颜色对比,我们需要了解这些基础知识点之后,再结合实际的 APP 风格进行设计。

卡片形体

就像图标的图形设计一样,不一样的形体也能表达出不一样的气质,因此在设计的时候我们需要依据整体的风格进行表达。异形卡片的设计,可以让原有方方正正的卡片表达出差异化,从造型上打破一些传统的处理方式,再结合一些 IP 人物元素可以更加直观的表达出具体的内容氛围。

投影深度

投影的视觉效果,会直接影响整体卡片的质感,太深太大的投影会显得整体卡片过于厚重,太浅太小的投影则显得过度生硬,因此合理的数值比例可以让卡片看起来自然有质感。在项目中我常用的一组数值规律是 1:2 或 1:3,例如 Y 轴偏移 10px,模糊度则设定为 20 或 30px,这样成比例的数值出来的效果会较为自然,如下图:

卡片颜色对比

卡片与背景的颜色对比会影响这卡片的整体质感,在设计时我们需要把握好卡片与底色的对比,不同的明暗对比出来的质感也会有差异。这里有两点建议:

  • 卡片色与背景色不宜太过接近或使用同一颜色,因为会影响卡片整体的空间质感或使得卡片的边缘锐度下降;
  • 深色背景上,尽量让卡片与背景色在同一色系或者明度不要差异太大,避免过于突兀。

2. 边距的设定

在使用卡片式设计时,经常会纠结边距的设定,宽边还是窄边?多少像素更为合适?我经常会带着这种疑问去设计。

基于内容的简单规则

卡片式设计作为设计的表现形式,最终是为了承载内容,因此边距的宽窄也需要依赖于实际内容的判断。结合我在项目中的尝试分享以下几点:

多窄少宽

卡片内容较多是使用窄边距,让卡片具有足够的空间来展现内容,内容较少则可以考虑采用宽边距来打造整体的视觉空间感,如下图 app store 和淘宝的设计对比。当然这只是一个建议,实际还得具体问题具体分析。

再如一些瀑布流、宫格、横滑模块较多的 APP 设计亦是如此,在内容较多的情况下会把边距压缩到最小的合理间距。

内外成比例

以最外边为基础值往里设计,间距以固定比例进行缩减,虽然没有删格来得规范,但也可以让设计变得有迹可循。

基于删格

删格系统解决了一些基础的板式问题,有助于提升设计的规范性,让设计更加有迹可循。在设定卡片式的边距时可以适当应用删格系统,让边距与内容形成固定的关系,这样可以帮助整体的卡片设计更加具有细节和规则。

4.卡片的标题设定

标题的设定主要考虑以下几点:1.是在卡片内还是卡片外;2.标题的字号设定多少更合适;3.标题是否加粗?

卡片内或外的对比

在项目设计中让我较为纠结的是:标题应该在卡片内还是卡片外?通过了一些案例的尝试之后,我总结了一个规则(需要依据内容的形态而进行设计):当卡片内容是独立的模块或模块中只有一个大标题时可设定在卡片内;当卡片内容是以组合呈现或者具有延续性内容时设定在卡片外,形成最外层的主标题。

标题的字号设定

标题主要作用为 2 点:1.简短说明每个模块的内容;2.让用户在长页面浏览中起到引导、定位的作用。

通过一些尝试发现:1.当内容较少时,并不需要太大的字号即可起到标题的作用;2.当内容较多时,较小的标题字号则容易被沉入内容中,让用户在浏览的过程中难以发现,而导致信息获取缺失;3.建议标题与正文字号大小差异在 6-10px,这样可以更好的拉开差异,让标题更具有标题感。

字体是否加粗

常规思维下我们都会对标题进行加粗,我在实际中的经验得到的总结是:需要看手机系统或不同厂商的机型。我在项目之初都对标题进行了加粗,但后续在跟进还原时看到的效果并不理想,特别是 Android 的机型上,因为我们使用的是系统默认字体,android 系统很多字体并未对系统进行优化,而是使用微软雅黑,微软雅黑在android 系统上再加粗,就会显得整个系统的外轮廓特别粗糙,最后我们依据不同的机型进行了差异化的选择。

4. 圆角的规则

圆角的设定实际上没有太多的原则问题,只要符合整体的风格调性即可。当然不同的圆角也能表达出不同的质感,大圆角表达柔和、小圆角表达硬朗。

圆角的规则设定

以卡片的圆角作为基础的参考值往内推算整体的圆角使用规范,卡片与卡内的元素形成合理的比例规则,而非随意根据「经验」进行设定。

圆角大小差异对比

大小的差异化呈现出不同的视觉感受和风格差异,我们在设计时更多需要考虑我们设计的产品风格或气质是适合大圆角还是小圆角,而非依据一些设计网站上的流行趋势。因此基于不同的风格或者实际内容场景下进行设定才更为合理。

5. 宽窄间距对比

卡片式设计相比拉通式设计更需要考虑设计中的透气感。在常规情况下,对内容边距及四周边距进行调整,让内容之间具有较好的空间呼吸感,从而让设计得到留白的效果。如下图对比案例,在基础删格不变的情况下,每个间距都在原有基础上扩大了12px(接近 1.33 倍),从而让内容具有较为舒适的宽度进行阅读

优点分析

选择某一种设计方式的重点在于我们了解这种方式的优点,并且可以把这些优点融合到我们的设计当中。在项目设计中,我总结了几点卡片式设计的优点。

1. 优化模块化,提升内容区域感

模块化的设计也是我们日常中会应用到的方法,结合卡片式的设计可以让模块化的规则变得更加简单,增加了模块之间的可复用性和延展性。而当内容较多的情况下,使用卡片式设计可以有效直接的形成区域分隔,从视觉感知上就对内容进行了分隔,提升用户获取信息的效率。

2. 提升内容独立性

在组合型的内容设计上,使用卡片式设计可以让每个小块内容呈现相对独立的展现特性,结合模块化的设计,可以在一大片关联的内容中,做到既统一又相对独立。

3. 增强视觉空间感

卡片式的设计可以提升整体设计层次感,通过投影、前后颜色的设定,让内容与背景之间产生视觉空间感。

4. 增强视觉表现力

在设计中我们可以对卡片进行异形设计,用来达到我们想要的风格表现。当然在一个页面内尽量不要太多,尽量使用页面中的首个卡片进行差异化处理,让整体表现出一点不同即可。

5. 增强可点性

卡片式设计产生的空间感,让每个模块更加突出,相比扁平式的处理方式,卡片式从视觉感官上会较为突出,从感官上更具可点击感知。

缺点及建议

任何一种设计方式都会有其利弊,最终选择某一种其实不过就是当下最适合而已,而在尝试中我也总结了几点卡片式设计存在的一些缺点,当然只是个人的思考而已。

1. 横向空间利用率降低

卡片式设计的存在左右边距,因此在有限的屏宽内内容横向区域相比于拉通式设计有所减少,在内容较多的情况下可以适当调小卡片左右边距。

2. 避免过多的层级

从整体来说,卡片式的设计本身就是增加了基础背景的层级表现,其视觉层级相比拉通式更为丰富,因此不建议在卡片上再二次叠加块状式设计,避免造成层级复杂。在项目中也会遇到内容层级需要多层级的表现,从中总结了2种方式:

  • 利用不拉通分割线;
  • 利用浅色背景底色。

3. 不适合长文或内容多的表达

若在设计上使用了卡片式的设计风格,但在一些长文表现的界面建议去除卡片。长文章的页面更强调阅读的沉浸感,用户需要更多的专注于文字,这时候无边的体验更适合。

4. 把握好界面的分区,避免过于拥挤的排版

卡片设计具有独特的视觉空间感,但卡片与卡片之间也会有分隔,因此在设计时更应该对内容进行归纳,避免产生过多的小块卡片而导致排版过于拥挤、凌乱或者内容不够宽度展现。

总结

无论是卡片式或者拉通平铺的方式,其最终的目的都是为了服务于内容,我们在做设计的过程中只是选择适合于呈现我们内容的一种方式。根据具体的内容情况给出合理/合适的设计判断才是我们需要不断提升的关键点,切莫流于形式而忽略了内容设计本身的重要性。

文章来源:优设

B端产品的设计理念

鹤鹤

这篇文章主要是从什么是B端产品,B端产品与C端产品的差异性,以及如何从设计角度切入B端产品等做具体说明

前言:在当下的市场环境中,企业内部的运营管理效率问题因为团队规模迅速扩张而逐渐凸显。此时,B端产品的助力就显得尤为重要。这篇文章主要阐述了B端的定义和方向,以及与C端产品的差异性,并且如何从设计角度切入B端产品等方向做具体说明。


什么是B端产品?

B端产品也叫2B(to Business)产品,使用对象一般为企业客户或组织。B端产品帮助企业或组织通过协同办公,解决某类管理问题,承担着为企业或组织提升效率、降低成本、控制风险从而提高企业收入,减少企业内部损耗的重要职责。B端产品的工作是合理实现企业需求,提高产品核心竞争力,并提升市场价值。


B端产品有哪些方向?

根据B端产品的服务对象,我们归纳为三个方向:

1:业务平台方向  

2:办公协同方向

3:商家管理方向

这三个方向基本上涵盖了企业对内及对外的经营活动及业务运营的工作范围。接下来我会一一详细介绍。


1:业务平台方向

业务平台方向是指供业务平台使用并且对这些产品提供支持。其中再细分则包括垂直业务线、基础服务产品线、交易平台产品线。



举两个常见的例子:


CRM:客户关系管理(Customer Relationship Management)。广义上的CRM包括从客户开发、管理、营销、服务的客户全生命周期管理;狭义的CRM是指给销售人员使用的销售过程管理软件。是通过以客户为中心的管理模式,提高企业的销售力量来达到为企业赚钱为目的。


通过CRM系统我们可以知道: 

1:我们的客户在哪里?(售前市场调查)

2:哪个产品更畅销

3:针对客户进行分析

4:销售结果预测等等


ERP:企业资源计划(Enterprise Resource Planning)是针对物资资源管理、人力资源管理、财务资源管理、信息资源管理集成一体化的企业管理软件。例:ERP以一项计划为出发点,该计划可以是市场的一个大订单,或者是企业的一个战略目标,那实现该订单需要企业的多项的资源的支持,则需要用到人力,生产资源,设备,财务,采购,客户资源等。ERP是通过对这些资源的有效计划利用,公司高层通过掌握、管理、控制等手段来实现预期目标。适合大企业或者成熟的企业应用。



2:办公协同方向

支持企业内部办公管理运转的业务系统,属于办公协同产品。

例:OA,即办公自动化(Office Automation)。是比较常用的办公软件,基于工作流概念,使企业内部人员方便快捷地共享信息,协同工作。


3:商家管理平台

平台型互联网公司为商家提供了交易的平台。为了保证平台的持续、良性运转,公司需要对入驻的商家进行资质审核和服务管理,这就需要设计并开发企业内部使用的商户管理系统;同时公司需要给商家提供一套强大的经营管理后台,方便商家进行自主管理。从业务管理视角来看,商家管理方向大致分为图下所示的两大系统。

小结:上述所列分类为大类区分,有的产品即可归属于交易,又可归属于基础服务,所以不必严格按着分类走,还需根据公司具体情况做具体分析。



B端产品的特点?

1:B端产品大都有行业特性或场景特性,目标用户一般是群体。

B端产品用户群体是某个业务团队或组织,需要共同协作来完成工作,所以需要B端产品来帮助他们实现分工协作。


2:B端产品业务逻辑复杂,子业务多样化。

B端产品背后的业务复杂度高,人员、分工、协作、流程、规则随时可能调整,这就需要我们有非常强的抽象能力和逻辑思维,寻求看似散乱无章的业务共性,进行合理整理和设计。


3:效能第一

B端产品的目标是解决组织的某类业务问题,因此聚焦于流程,提升业务效能是最重要的。



B端产品和C端产品的差异性

1:需求来源不同

C端产品的需求来源于用户,使用C端产品的是独立的个人。而B端产品需求已经存在,来源于公司内部或外部。


2:产品设计不同

C端产品经理通常关注产品的点击率,转化率,增长率等。而设计B端产品的本质是提升企业内部工作效率,所以更注重优化用户操作流程,提能。


3:收益量化不同

C端产品关注的核心指标主要包括DAU、UV、PV、CVR等,任何功能的设计都可以明确考核指标,容易量化和评判项目收益。

B端产品要支持、解决业务问题,但业务成效的影响因素非常多,很多时候并非取决于B端产品设计的好坏。


4:核心功能点不同

C端产品有核心功能点,B端产品的功能多且每个功能都具有必要性。



面对B端产品如何分析和入手?

1:了解业务流程和产品定位

在做B端产品之前,我们需要对即将做的业务有一个充分的理解和认知,不同部门使用的产品不同,则相对应的设计方案也不相同,这就需要我们充分了解业务流程,针对性的进行梳理。

例:如果我们要做报税系统,那么我们要知道报税的流程有哪些,这样可以帮我们规避许多不必要的问题。


2:功能流程归类

把杂乱的功能整理清楚,提高用户效能。


3:让产品落地并不断生长(价值体系搭建)

这是整个产品中最核心的点。何谓价值体系?对于B端的产品而言,客户最关心它能为实际的工作带来哪些便利,所以对于一个B端产品,解决问题的价值就是最好的推广。


4:整合设计,迭代优化

对于设计部门,我们需要考虑设计的功能点有没有遗漏?交互框架搭建的过程中,随着产品发展,是否考虑到了其更多功能的扩展性。



提高B端产品的品质,需要考虑的方向

1:功能引导

功能引导是产品降低用户学习成本最通用的手段之一。简单说就是使产品学习起来简单,易用,用最快最清晰的方式触达产品核心,可划分为内嵌式和互动探索式两类。


来源:语雀(内嵌式)


来源:Teambition (互动探索式)


设计要点:

1: 文案精准,通俗易懂

2: 与品牌风格保持一致

3: 增加趣味性

4: 挖掘合适的出现场景,在最终呈现上做到简洁克制


功能引导最重要的是要契合产品本身,在合适的时机,以恰当的方式,在不剥夺用户探索权利的情况下,去引导用户更好地使用这款产品。



2:认知减负


帮助用户认知减负的常见手段有可读性优化、复杂性简化等。

可读性优化上,可以通过关键词提炼,可视化图表等方式,降低用户阅读大块内容时的产生的心理压力和抵触感。


例:图一中列表1和列表2的对比,通过数据可视化的方式让用户更为有效的查看数据,从而对业务有更加直观的了解。

图一:来源:某广告平台(可读性优化)


图二 来源: Teambition(可视化图表)



复杂性简化上,可以通过减少页面上不必要的功能信息,减少干扰信息。


例如teambition的登陆页面,点击“更多登录方式”则可以看到相对不常用的元素。将不常用的元素收起来,减少页面上低频率使用的功能,减少视觉上的混乱。

来源: Teambition 登录界面(复杂性简化)


设计要点:

1: 避免不必要的元素

2: 利用普遍的设计模式

3: 减少不必要的任务

4: 最小化可选项

5: 保证可读性


3:学习模式

对于一些面向固定人群使用的产品(比如企业数字化平台、智能工厂系统等),面对复杂的系统,有时简单的新手教程并不能解决业务复杂性的本身带来的操作门槛,此时向专业用户提供帮助文档或教学视频等学习工具,就变得尤为重要。

来源: 用友(教学视频)


结尾:以上就是对B端产品的初略思考,其实想说无论是B端还是C端,每个产品都有自己相应的价值,我们在设计的过程中需要根据具体的业务和场景进行具体分析。


日历

链接

个人资料

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

存档