语言是人类文明的载体,是交流思想、传递情感的复杂系统,其丰富的媒介形式为文创设计打开了全新的创作维度。从自然语言的口语、文字、手语,到人工语言的编程符号、数学公式,再到涵盖听觉、视觉、触觉等的非语言形式,每一种语言媒介都蕴含着独特的文化内涵与设计价值。当语言媒介与新文创设计碰撞融合,不仅让文化传播有了更多元的表达,更让文创产品兼具实用性、艺术性与文化性,成为连接传统与现代、文化与生活的桥梁。本文将从语言媒介的分类出发,结合经典设计案例,全面解析语言媒介如何成为新文创设计的灵感源泉。
初入设计行业时,B 端与 C 端产品的概念仅停留在字面,面对实际设计工作时,常常不知该从何切入才能打造贴合需求的产品方案。经过多年的实战积累,对 B 端产品的体验设计有了更具象的理解,也逐渐梳理出一套适配其特性的设计思路,在此与行业同仁分享
我们平常会使用很多APP,久而久之我们会发现一些APP的设计非常的相似;一个有新意、精致的APP界面可以让用户产生很深的影响,对产品的形象也有一定的帮助;本文由兰亭妙微UI设计公司分享了关于如何提升UI设计的高级感的方法,我们一起来看一下。
一个App设计是否精致,是否富有设计感,在于它的细节,这就意味着我们在进行设计的时候,要从细微之处着手,从多方面去钻研如何创造出打动人心的UI设计。
本文总结了12个简单直观的提升设计感的小细节,一起来学习。
在对UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比;单纯使用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。

每种颜色都有一个视觉权重,这有助于在内容中建立层次结构;通过使用颜色的深浅,为元素赋予不同的重要性。
如果可以的话,你甚至可以采用两到三种颜色:

类似的,在UI设计的时候,通常两种不同的字重足以营造出优秀的层次感:

▲主标题字重为600,其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于400,因为这一部分字体本身尺寸已经较小,低于400会使得可读性不佳。
如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理:

不要在有色背景上使用灰色的文本,在白色背景下,将黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不错的淡化其视觉效果的做法。

但是在彩色背景下,想要降低和背景色之间的对比,通常有两种方法:
一是降低白色文本的不透明度;二是让文本逐步接近背景色,而不是改为灰色。

▲左图设计师职位信息为白色文字降低不透明度,右图为和背景同色相高明度的颜色
其次当涉及长篇内容时,大面积的深色粗体字会给人一种沉重感,而且很跳跃;通过选择类似深灰色(#4F4F4F)这样的颜色可以很容易地解决这个问题,使文字更容易被识别。

选择一种基础色,再调整色调和颜色深浅来增加均衡;设计时避免用过多的颜色。如果项目允许,只需使用固定的色板,通过调整基础色的饱和度和明度,利用这种简单的方式为设计增加一致性。

阴影是UI设计中最常见的视觉表现手法,它可以增加元素的深度,使其从背景中脱颖而出,引起用户的注意力,同时也能增强画面的视觉层次感。
相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。

这种轻柔的阴影呈现出的干净,增加了画面的精致;如果阴影的范围太小或颜色太深,位置也没有偏移,而是聚集在元素的四周,就会让画面更加扁平,让视觉变得厚重,呈现出不精致的画面感。

阴影不一定是黑色的,还有一种扩算阴影是模拟元素本身的颜色投射在背景上,由于阴影与元素的色调一致,因此呈现出十分融洽的画面感。
在UI设计中,这种手法不宜过多使用,否则呈现出的各种色彩搭配会让人眼花缭乱。
合格的设计师能够绘制风格统一的图标,而优秀的设计师能够创造风格独特的图标。
我们能否在追求大小一致,圆角一致,线宽一致和配色一致的同时,为它的视觉表现力加入更多的创意呢?例如下面这组图标设计,无论是在图形上的创新,还是颜色搭配上都呈现出无与伦比的创意。

标签栏作为一个App的全局导航起着至关重要的作用,它的设计影响着整个产品的视觉风格。
通常,大多数App都是使用iOS规范的设计样式(默认灰色,选中填充品牌色),这样的设计太普通,太常见了;要想让标签栏图标设计精致和富有个性,可以丰富每一个选中态图标的视觉表现,例如给图标加上背景和表情,即显得生动有趣,又增加了用户的好感,给人留下深刻的印象。

3D立体图标设计是近几年来的流行趋势,看上去十分精致、华丽,但是看久了会让人产生轻微的视觉疲劳,同时因其复杂的结构会增加用户的认知成本,一般在外卖美食类应用中比较常见。

Tab是App设计中最常见的控件之一,它源自Material Design的设计规范;现在很多iOS产品当中也开始使用这种导航栏样式来进行设计,而原本属于iOS规范当中的分段选择器变得不那么常见了。
在视觉表现形式上,Tab和标签栏同样也分为选中态和未选态,它的设计较为简单,通常是使用一组文字标签,通过颜色或在标签下加上小长条来区分两者的状态;因为它简单,却越难设计出彩,要发挥极大的设计想象力,跳脱出设计规范的限制,才能找到完美的方案。
例如虾米音乐的Tab选中态是一段音频波线,再配合文字的大小对比,一个富有设计感又符合产品特征的Tabs就被创造出来了。

我们还可以从品牌基因中获取灵感,品牌作为用户熟知的形象是个绝佳的来源。
从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条,这样就建立起视觉上的联系,让用户产生由内而外的一致感受;例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上,既让界面视觉独一无二,又进一步强化了用户对品牌形象的认知。
在UI设计中,有许多的装饰元素,如卡片的边框、列表的分割线等,虽然边框,分割线是分隔两个元素的好办法,但是它不是唯一的方法;使用过多会让整个布局的设计感降低,或多或少都会干扰用户浏览的视线,让信息内容失去注意力,因此可以减少不必要的装饰元素。
我们可以通过以下几个方法来划分元素的视觉层次,让画面变得干净,整齐:
1)使用阴影
阴影同样可以营造出边界感,而且相比边框分割线更加微妙,并不会显得突兀,不会分散用户的注意力,让内容更聚焦。

2)使用不同的背景色来区分
通常,相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分;所以,你所需要做的就是在不同的区块采用不同的背景色,并且尝试删除分割线,因为你根本不需要它。

3)增加额外的留白
创建元素之间的分离效果,并不一定要通过线框来表现,只要增加留白,让它们分隔开就行了,通过留白和间距来实现元素分组是UI设计中的常用手法。

在App中的每一个界面都有许多元素,那些同类的元素应保持统一的设计样式。
通常个人中心的标签栏图标是一个人形剪影,它代表着用户,因此可以在展示用户头像和用户形象的界面中延续使用。
如果图形拥有独特的外观,如椭圆矩形,也可以作为视觉符号的一种,延续到其他界面中,成为图形或按钮的外观;这样,整个界面就被统一的设计元素联系起来了,给用户始终如一的一致感。

选择符合产品气质的字体,可以与产品的定位相吻合,传递给用户正确的情感意识。
虽然默认字体可以满足大多数App 的设计需求,但会出现一个问题就是——系统字体的普适性并没有什么特色,在一些特定的情境下就显得收效甚微;例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉,换成系统字体后,整体感觉在气势上就变弱了很多。

大多数App都支持三方登陆,他可以减轻用户注册的时间成本。
通常是在注册登陆页的底部展示第三方图标入口,这也是设计师最常忽略的内容,往往是直接将第三方图标调整一致大小和摆放整齐位置,没有针对它们再设计;一个设计精致的App不应漏过任何的细节,我们可以以自家App的图标风格为依据,对第三方图标进行优化设计。

App中优美的图文设计,能带给用户如沐春风的视觉享受,它非常重要。我们经常看到文字叠加在图片背景上的设计样式;为了减少复杂图片背景对文字的干扰,通常的做法是叠加半透明度的黑色蒙版,让白色文字清晰可见,但这不是最优的办法。
我们可以从图片中提取主色调用于叠加背景的填充色,这样就使文字、色块和图片融入到一起了,画面变得高级和富有设计感。

图片的质量影响着整个App的格调和用户的情绪,高品质的图片给人愉悦的视觉享受,产生美好的联想;而低品质的图片会瞬间拉低App的质感。
在App设计中,一张漂亮的图片从收集到上线,需要经过裁剪,调色等过程才能被使用;即使是普通的商品图片,我们将它抠图后调整成统一大小,再加上干净的背景,就能立刻提升商品的美感,界面视觉也会变得美观、整洁。

现在的UI界面设计中,卡片式设计已经是一种非常常见的设计形式,它有利于信息分层和整合,划分出更加清晰的组织结构,实现复杂内容的简化处理,提高空间利用率;同时卡片式设计通常很依赖视觉元素,很强的视觉元素正是卡片式设计的一种优势,也是提升设计品质感的良方。

转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

让用户在使用产品时不产生混淆、可快速获取所需信息,是产品设计时应当考虑的重要层面,而这需要团队在设计时预先做好方案,去掉无关事物,清晰地呈现信息,提升产品的易用性与用户体验。兰亭妙微 UI 设计公司始终以 “精简信息、提升信噪比” 为设计核心,本篇文章里,作者结合实战经验,介绍了提高信噪比的设计技巧,一起来看一下。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。


兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

7 天点击率、退订率和收入动态变化,便于快速定位活动表现的起伏点,为营销决策提供有力依据,是分析邮件营销活动效果的重要方
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

| 复杂性类型 | 设计应对策略 | 典型案例 |
|---|---|---|
| 功能复杂性 | 模块化组织、渐进式披露 | 金山 WPS 企业版 |
| 流程复杂性 | 可视化工作流、状态实时追踪 | 明道云 |
| 数据复杂性 | 多维视图、智能筛选排序 | Tableau |
| 权限复杂性 | 角色矩阵、分级授权管控 | 钉钉 |
| 隐层复杂性 | 表面简化设计 | 最终用户体验 |
|---|---|---|
| 推荐算法 | 无限刷新信息流 | 内容精准匹配,提升使用粘性 |
| 内容理解 | 统一的信息卡片样式 | 不同形式内容一致呈现,降低视觉认知成本 |
| 兴趣预测 | 个性化内容排序 | 越用越懂用户,提升体验契合度 |
| A/B 测试系统 | 稳定的界面与交互 | 产品持续优化,用户无感知适配 |
| 设计维度 | B 端设计倾向 | C 端设计倾向 |
|---|---|---|
| 信息密度 | 高密度,减少页面跳转,适配专业操作 | 低密度,焦点明确,降低认知负荷 |
| 交互模式 | 专业、高效,标准化流程优先 | 直觉、有趣,轻量化体验优先 |
| 个性化程度 | 基于角色定制,匹配企业组织架构 | 基于行为偏好,实现千人千面 |
| 迭代速度 | 稳重、兼容性优先,保障业务连续性 | 快速、创新优先,贴合市场需求 |
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

UI设计有设计规范要遵循,同样的原型图也有自己的规范。
任何通过图形示意的东西一样,规范带来的最大的好处是提高信息传达效率。
人是视觉动物,好看的东西总喜欢多看两眼,混乱的东西给人最直白的感受就是逻辑混乱。
这就是「卷面分」。
这篇文章我们说下原型图的规范。
所谓的规范就是定规则,按照这一套规则作为标准进行执行,这里边包含元素规范、布局、颜色等等。
我对画原型图对规范的要求是:尽量向着规范靠近。
原型图不像UI图,不用去到像素级别去抠。
因为画原型我们需要考虑时间,考虑效率,我们需要将最大的精力去放到方案的产出,写需求文档上。
规范只是为了让我们有个标准,如果你想画的规范时,给你一个参考。
对于手机端、PC端、平板、车机等不同的产品形态,最大的区别是尺寸。
在画原型图之前,我们要做的就是先把页面原型尺寸给定下来。
可以参考的规范有:手机端首屏的尺寸设置为 375×667 px。
注:375 × 667 是首屏高度,也就是原型图的最小高度,并不是原型的固定高度,当内容很多时,直接把高度拉长到合适的内容即可。下边提到的PC端尺寸也是这个道理。
状态栏:375 × 20 px
导航栏:375 × 44 px
底部tab:375 × 49 px

这个规范的尺寸是使用的 iPhone8 的尺寸,产品经理火的那几年就是这个尺寸火,所以用这个尺寸的多。
你同样的也可以使用其他常用的手机端尺寸,这没有固定限制。
我比较建议用这个尺寸,因为很多Axure组件也都是按照这个尺寸去做的,适配的比较好。
对于PC端,尺寸可以按照 1440×900px。

虽然当前使用最多的屏幕尺寸是1920×1080。
对于原型图1440的宽度,如果是左边是原型图,右边写需求描述的话,在屏幕上可以正好展示出原型图+需求描述,不用左右滑动去看。

对于平板,建议直接使用 768×1024 px。

对于原型图的颜色,我们可以分别来看:
1)有UI设计师参与的
我们可以考虑使用中性色,中性色是指不强烈的色彩,常见的就是黑白灰。
在选择黑白灰时,我很推荐的是Axure色板中自带的颜色,在画原型时直接选取使用就行。

另外一些大厂规范中,都有自己的中性色定义,你也可以选择使用。不过我不建议你花费太多时间去处理颜色。
如下图,左边是用Axure中的黑白灰,右边是使用的Arcodesign的中性色,在画原型时,整体上影响并没有那么大。

虽然右边的更好点,如果你要用其它中性色,可以将颜色收藏进Axure的色板中,方便下次使用。

2)没有UI设计参与的
比如说后台,可以添加一些颜色。
后台一般都是内部使用,对样式没有太高要求,也不会让UI进行设计;
因为后台一般都是使用现成的UI组件进行开发的,比如Antdesign、Element等;
具体什么颜色,可以用万能的蓝色作为主色调,使用其他颜色作为辅助即可。

对于语义色,来表达成功、警告、错误语义,可以选择红绿黄进行使用即可。

对于文字,涉及到字体、字号、粗细、行间距等。

字体
可以使用 Arial,也就是Axure默认的字体。
同样的,也可以使用苹方、微软雅黑,这两个字体则需要单独安装。
不过当你通过Axure打包发布出去时,如果对方没有安装对应的字体,将则不会展示为苹方/微软雅黑字体进行展示。
对方查看的效果和你看的效果会不一样,我正在找处理方案,目前还没找到。
字号、字重
也就是字体大小、字体粗细,对于字体大小、粗细,还有颜色,影响的信息层级关系。
我们直接看规范:
一级标题:20px、加粗,颜色#000000
主标题:18px、选择性加粗,颜色#000000
次标题:16px、选择性加粗,颜色#000000
小标题:14px、选择性加粗,颜色#000000
正文:14px、选择性加粗,颜色#000000/#333333
辅助文字:14px/12px,不加粗,颜色#333333/#555555
次级文字:12px/10px,不加粗,颜色#555555/#7F7F7F
注:对于文字的大小,前提是在 375×667、1440×900 的页面尺寸下的。如果你使用的尺寸过大,对应的字号也需要加大。
这个规范不用记,可以用字号 14 作为标准,层级高的字号+2,加粗、颜色加重即可,层级低的字号就-2,不加粗,颜色浅一些。

行间距
在原型中不重要,Axure时会根据字体大小自动调整行间距,如果文字内容过多时,可以手动进行加大间距。

原型中如果是「图标+文字说明」一起出现,不用管图标,直接使用圆形或矩形代替即可。
占位符太丑,不建议用。
颜色不要使用太深的中性色。如下图示例:

如果只有「图标」,可以选择能表达具体含义的图标。
从iconfont、iconpark中搜索复制svg格式粘贴到Axure使用即可。
如下图中的扫一扫、设置、播放图标。

如果你觉得使用圆形或矩形表达图标的意思不明显,或者是不想找图标,就在加个「icon」文字,或者直接用写文字。
如下图的扫一扫、设置、播放,直接使用文字说明即可。
对于头像、图片等,都可以加个文字说明。

如果是没有UI介入设计,当需要确定图标时,则需要产品经理确定,同样的去iconfont、iconpark中找到图标,按前端要求提供过去即可。
图片在原型中不需要使用真实图片,直接使用矩形代替即可。
Axure中自带的图片元件太丑了,不建议用。
可以再加上文字说明,来表达这是图片,比如加个img,或者根据图片特性,如封面、头像,都是可以的。

原型中的图片规范可以按照宽高比,比如 4:3,3:2,16:9,1:1。
当然这个没那么严格,如果你想规范些,可以这样用。

圆角在原型中不重要,如果你想使用圆角,可以按照2的倍数调整。
圆角在UI中的作用很大,而且规范还挺多,原型中就无所谓了。

阴影不重要。如果想使用阴影,可以将阴影使用纯黑色号000000,透明度30%,模糊5。
对齐是版式设计的基本原则,使用工具进行对齐即可。
具体采用「左对齐、右对齐、上对齐、底对齐、居中对齐」,你可以按照布局来,比如靠右的元件,使用右对齐。

分布是指将页面内容使用水平分布、垂直分布的方式进行平均分布,来保证页面元素之间的间距相同。
当相同的元素多次出现时,我们可以使用分布快速调整,让页面更规范。

间距没有那么重要,但是规范的原型一定要有会有间距。
间距分为上下左右间距,分为模块与模块间的间距,子模块与子模块的间距,元素与元素之间的间距。
对于整个移动端来说,可以使用 5 的倍数调整间距。
对于尺寸较大的PC端原型,可以按照 10 的倍数调整间距。
也可以直接将元件结合「对齐、分布」直接调整,不用关注具体间距。
根据我们之前提到的设计原则「亲密性」,属于同组的内容间距小,不同组的内容间距大。
组件是就是可以直接拿过来的元件组合。

对于每个组件都是通过基础的形状、文字、颜色、尺寸、间距等进行组合形成的。

就是UI设计中的原子化设计。
当完成基础的形状、文字、颜色、尺寸、间距等规范确定后,进行基础元素的组合即可得到规范的组件。
你可以基于上边的规范去制定自己的产品组件库,可以快速使用规范的组件。
在画原型时,可以将原型中的内容尽量填写为真实内容,使用极值状态,将内容最多、数据最多的情况画出来。


规范建立好是为了使用,我们了解清楚原型的规范后,可以在画原型时往规范上靠,慢慢的养成好习惯。
一个规范好看的原型图在求职面试、评审的时候,会是个加分项。
当然,不要过度遵循规范,原型图不是UI图,重要的是使用原型将功能表达出来。
对于刚入门的产品经理来说,原型图是日常的基本工作。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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