下意识就是打开自己的的Eagle

 软件产品案例     |      2021-03-04 15:05

编辑导读:信息卡片是产物的基本成果之一,用户能通过信息卡片相识产物的根基信息,而且信息卡片的雅观水平直接影响到用户对产物的印象。那么,如何设计一个悦目又实用的信息卡片呢?本文将从四个方面展开阐明,但愿对你有辅佐。

下意识就是打开本身的的Eagle

01  本期讲什么?

事情中我们常常会接到一些信息卡片的设计需求,在早期很长一段时间里都困扰着我。和大大都刚入门的小白一样,当打仗到这类需求的时候,下意识就是打开本身的的Eagle,找符合的参考,去警惕排版机关。可是其实最后只知道参考这样做悦目,对付作者的设计思路并不清楚。后头我实验去总结个中的纪律,也得出了本身的一些设计思路。

然后,恰好前段时间有位小同伴问了我雷同的问题。所以我抉择写这篇文章,把我已往总结的,关于信息卡片设计的思路分享给各人,假如对你有开导,就是对我最大的勉励。

下意识就是打开本身的的Eagle

02 这里讲的信息卡片是什么?

让我们先看下种种App中,一些较量不错的信息卡片长什么样:

下意识就是打开本身的的Eagle

03 一个信息卡片包括什么内容?

下意识就是打开本身的的Eagle

图片

图标

文字

标签

按钮

机关

1. 图片

图片领略很简朴,就是该卡片想表达的信息主体,可以是商品、风光、插画等,PGC内容图片凡是由运营把控,UGC内容为用户自行上传。固然上线后实际上传的图片,对付设计来说没有太多干系,但在设计稿中照旧需要严格节制图片质量(必然水平上也能提高过稿率)。

下意识就是打开本身的的Eagle

图片挑选需要留意如下:

高清无码

主体突出且简捷

配图与文字信息相关联

多图片环境下,视线保持同一程度线或同一角度

2. 图标

图标的呈现有以下几类:品牌特定logo、非凡字段图形化(如性别、定位、点赞、VIP、封锁等等,将字段图形化后可以淘汰该组件内的文本信息,利便设计排版的同时晋升整体阅读体验)、气氛遮盖(主要在于富厚卡片,晋升设计感来吸引用户留意)

下意识就是打开本身的的Eagle

图标设计需要留意如下:

清晰度:品牌图标制止过小,导致难以判别。

识别度:字段图形化后必然需要确保拥有足够的识别度,只管在公共认知范畴内。好比“+”可以代表添加和存眷、“x”代表封锁,“大拇指”和“爱心”代表点赞、“皇冠”代表VIP等等。

气势气魄一致:气氛遮盖图标在配色上,需要担保与产物调性一致,或在色彩情绪上,与该模块通报的感觉一致。尚有一些细节,好比线性图标描边粗细,圆头照旧方头端点,这类只管保持一致(虽然也可按照环境演变新的气势气魄,但留意气势气魄种类不宜过多)

3. 文字

文字即对图片的描写信息,凡是分为:标题、正文、帮助信息、优惠信息、数据信息(评分、价值、点赞评论数等)

下意识就是打开本身的的Eagle

文字信息处理惩罚需要留意如下:

比拟:需明晰页面信息权重,突出重点,便于有效通报信息。移动端常见比拟方法:非凡字体比拟、字号差比拟、色彩比拟、修饰元素(点线面)遮盖比拟。重点需要留意,制止在一个卡片中,回收过多差异巨细字号和颜色去表示信息层级,只管使层级精简与类型。

对齐:担保卡片内信息之间存在某种视觉接洽,信息布局清晰。对齐方法分类:左对齐(切合左到右的阅读习惯,阅读体验最佳)、右对齐(阅读类文本较量少见,一般是为了将分好组的信息填充卡片四角)、居中对齐(居中通报严肃、正式感,在移动端中较少见,适合信息较少的环境下利用)

亲密性:将信息通过留白、支解线、色块等方法来成组分别,制止信息狼藉。

4. 标签

标签指勾当通知、产物卖点、重要时间、优惠信息等这类需要突出的内容,标签按视觉层级由高到底依次分别为:异型标签、色块型标签、描边型标签3大类。

下意识就是打开本身的的Eagle

标签处理惩罚需要留意如下: