首页

如何做B端体验标准化:以数据可视化场景为例

seo达人


图片

业务背景

以我们 CCO 体验设计团队为例,主要服务阿里体系的消费者、商家、经济体等业务领域。随着业务不断扩大、用户角色多、体验复杂、设计师人力有限、定制化需求不断增加,设计面临严峻挑战。

1、业务多:30多个产品应用

2、角色多:覆盖消费者、客服小二、服务管理、业务运营、中台管理、客户  6大类用户群体。

3、体验复杂:设计师需兼顾用户和客户两个视角。

图片

从组织上,85% 设计师纵向支撑业务,15% 设计师横向做标准化,反哺业务设计师。标准化实质解决的问题是保障基础体验一致性。

图片

 

图片

标准化怎么做

核心通过页面梳理、抽象、分发、衡量,保障基础体验一致性。

图片

 

图片

案例实战

以数据可视化场景为例,讲述如何做标准化。

1、业务现状

共有11个应用,涉及89个页面。

图片

2、问题

体验不一致:各个工作台页面架构、组件、样式野蛮生长,缺少规范导致体验不统一。

低效:部分场景缺失,组件重复建设,大量定制;沟通协同内耗大,成本高。

图片

3、策略

体验统一:框架、组件、样式。

提效:代码化、工具、交付机制。

4、体验统一

包括框架、组件、样式。

图片

框架

(1) 现有页面收集

图片

(2) 用户场景分析

图片

(3) 页面归类

结合用户看数内容(例:概览、分析、详情)和交互形态(例:平铺、下钻),对页面进行归类。

图片

(4) 确定典型布局

通过统计高频复用形态,确定典型布局。

图片

组件

(1) 页面结构分析

组件的收敛,需要先对页面分析,确定模块层内容。例:模块包含页头、筛选、图表、表格。

图片

(2) 模块层分类

横向收集全部业务,将模块层分类。细分模块扩展形态,放到对应的篓子里。

图片

(3) 模块专项治理

接下来,需要对每一个模块进行专项治理。比如图表模块,再拆再抽象成指标、图表、单选、多选 4类场景。场景里再对主体和变体(也就是扩展形态)分类。

图片

图片

样式

(1) 确定优化内容

围绕视觉凌乱,要做的便是完善设计语言。设计师需要结合自身技术底层,补充缺失规范。例如布局、色板、字体、动效。

图片

(2) 确定组件范围

通过统计高频复用组件,确定需要梳理的组件范围。

图片

(3) 布局

图例位置:线上有9种,通过从业务场景按阅读顺序划分,最终收敛成2种。

图片

组件高度:真实线上情况,只能看2个指标,高度规范缺失。

图片

需要根据用户分辨率调研,提炼典型分辨率。比如用户是win系统,包含菜单栏、任务栏等默认高度,再减去本身页面页头等默认高度,得到 3 档。确定组件建议默认行高 240px。

图片

轴标签旋转角度:现状有顺/逆时针两种,通过分析标签类型,结合阅读顺序、轴与标签亲密度,确定默认角度为顺时针。

图片

(4) 色板

通过场景梳理,确定不同组件使用的色板类型及缺失色板。

图片

补充语义色板:从业务里抽象2类场景,指标和柱/饼/环场景,定义颜色。例如带正面语义,用绿色,比如升、已到岗、正常。带负面语义,用红色,比如降、旷工、失败。

图片

(5) 字体

结合自身业务场景问题,从场景、版权、风格、识别、极值共5个维度选择字体。

图片

举例场景一,纵向数据场景里,将市面上数据竞品用到的字体都横向铺开尝试,做排除法。比如din没版权,苹方非等宽字体,普惠102识别性弱。

图片

举例场景二,在核心数据呈现中,helvetica 品牌风格弱,普惠在1亿以上极值过宽。

图片

最终我们根据自身业务场景特征,用普惠和普惠102,运用在对应场景里。并同前端提炼规则。

图片

(6) 动效

首先,需要确定动效价值,明确动效需要解决的问题。这里围绕舒适度、活力、层级、反馈来讲。

图片

通过动效场景链路分析,确定优化范围。

图片

加载动效:围绕让用户认知过程更为自然。通过组件横向梳理、抽象图形、组合样式的思路,输出方案。比如这里共梳理17种组件类型,抽象成9类,包括点、线、面、饼、环、柱、文本、图标、词云,再进行组合产出方案。

图片

出场动效:通过业务分析、提炼场景、优化效果。比如这里共提炼 3类场景,有通用、监控、舆情。围绕过渡不自然、卡顿、缺少情感化表达来优化效果。

图片

图片

浏览动效:通过提炼场景,来强化元素之间的层级与空间关系。比如单个组件、联动、下钻场景下,围绕点击感知弱、重点不突出、缺少悬停态来优化效果。

图片

沉淀速度参数:将优化动效场景的速度参数,同前端约定规则沉淀组件库。

图片

5、提效

包含代码化提效、工具提效、机制提效。

图片

整体思路

从设计组内到技术产研的提效过程。

提效面向用户依次是:组件设计师、业务设计师、前端、产品。

搭建目前还在进行中,这里主要从交付-工具-代码化来分析。

图片

交付内容

1、业务设计师:sketch/figma物料 (样式、组件、区块、模板、规则 )

2、业务设计师:kitchen工具(样式、组件、区块、模板)

3、组件工程师:组件规范/组件官网

图片

交付机制

新需求:通过评估复用性、抽象、内审、沉淀物料。

现有业务:通过页面梳理归类、抽象、内审、沉淀物料。

图片

6、衡量

从物理到行为层,包括样式、组件、框架、组件交互 共4个维度。通过一致性评分衡量标准化覆盖的好坏。

图片

 

图片

总结

回归课程,在B类业务里,服务多个产品、多用户角色、体验复杂的场景下,在定制化+标准化团队阵型里,标准化实质解决的问题是保障60分基础体验一致性。

图片

总结:B端体验标准化包括物料的产出、交付以及衡量标准。

产出:包括框架、组件、样式的收敛来梳理、抽象页面。

交付:面向2类用户群体,业务设计,需交付物料和工具。组件工程师,代码化需提供组件规范,组件线上化需助力组件官网的建设。

衡量:一致性评分包括样式、组件、框架及组件交互。

图片

 

原文地址:AlibabaDesign (公众号)

作者:CCO 设计

转载请注明:学UI网》如何做B端体验标准化:以数据可视化场景为例

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


插画在 UI 场景中的趋势化探索

seo达人


一、呈现独具一格的 Banner 设计

插画运用到 Banner 设计中非常普及,不仅可以带来个性化的视觉风格,也可以避免运用图片带来的版权风险。因为插画有着丰富多样的风格,运用到设计中也会呈现风格多样的效果,插画也比较容易统一视觉规范,很多成熟的设计团队都会制定插画规范系统,满足项目各类场景的运用。

作为视觉设计师来说掌握插画的能力已经成为基本岗位需求,很多公司对于 UI 设计师也有同样要求,这也是提高产品设计视觉感的一个方向。

 

二、突出图标设计的风格差异

随着用户对于感官体验的升级,图标风格特征的差异化体验至关重要,而插画风格的融入可以提升图标设计的特征感。

插画风格运用到图标设计中,需要做简化处理,可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中,不仅可以使得图标具备差异化的视觉效果,也能烘托出整体设计的质量。

图片

 

三、强化区域背景的风格感

插画可以作为栏目区域背景来使用,以此增加该栏目的风格感和视觉感。相较于摄影图片来说,插画具备风格特征,可控性较强,能够满足更多氛围感的营造。

 

四、突出个人中心的情感化

个人中心的设计之前大部分采用单调的白色或者品牌色作为背景,近些年一些产品开始使用插画背景来增强情感化设计。有的产品还根据天气变化、节日主题、白天/夜间等场景设计不同的插画风格,带来的视觉感较强,也能吸引用户的关注度,提高用户对产品的感官体验。

 

五、强化空状态的情感化设计

空状态由单纯的文字提示演变到图文结合,感官层面越来越被重视。利用图形结合、IP 形象结合、小场景插画结合等,还有结合动效设计的案例,带来的设计体验感也是非常不错的。

图片

 

六、瓷片区的视觉感强化

插画风格被运用到视觉表现层面案例较多,特别是在瓷片区的发挥,呈现出了风格多样的优秀案例。可以使用全场景插画作为背景设计,也可以使用小场景插画作为局部强化,还有使用部分插画元素作为点缀设计,视觉表现力丰富多样。

图片

 

七、活动封面设计体现统一感

将插画形式作为活动或者服务栏目的封面设计,相较于其他形式来说风格统一性更强,也能更好的进行设计延展。就算使用不同风格的插画来进行封面设计,只要在配色风格上面把控好,也能做到有效的视觉感统一,对于设计师来说把控性很强。

图片

 

八、增强专题活动头部视觉感

插画形式运用到专题页设计中案例非常多,相较于合成图片来说,插画的风格感和驾驭度更灵活。插画形式带来的情感化体验更佳,通常被运用到专题页头部区域来增强视觉感,也有延伸到整个背景层设计中的案例。

根据特定活动主题创作插画对于设计师来说更容易,找到符合主题的摄影图片是很难的,自己拍摄成本又会比较大,插画形式是最经济实用的设计解决方案。

 

九、插画形式提高栏目品质感

插画形式可以作为一些代表成就感的配图设计,以此来提高该栏目的品质感。比如在打卡点亮城市成就的设计中,不同城市的邮票采用插画形式来表达,不仅可以展示出各城市的风格,也能做到视觉风格的统一。精美的插画提高了品质感,吸引了用户的参与度,带来的感官体验也是非常棒的。

图片

 

十、体现主题化的风格感

在主界面的设计中,不仅要体现出功能的操作体验,也要通过视觉的强化来吸引用户的关注度。一些产品在主界面设计中以插画作为背景来强化,结合动态的表达趣味性更佳,带来的关注度也是不错的。插画形式结合到功能模块中,带给用户情感共鸣和操作的体验度。

 

十一、插画形式的引导页设计

插画被运用到引导页设计中是相当普及的,也是非常有利于进行设计发挥的。插画元素表达的可控性可以满足引导页主题创意的需求,通常以轮廓束缚为主,满屏插画较少。基于焦点和轮廓造型进行插画元素装饰,对于插画基础薄弱的设计师更易上手。

 

十二、插画形式的闪屏设计

闪屏和启动页采用插画的形式也是可取的,启动页设计通常和引导页表现类似,不过运用品牌展示的相对多一些。

闪屏分为广告形式和主题展示形式,闪屏广告形式比较多,插画结合也是在广告活动中的发挥。一些节庆主题和特殊纪念日活动,也会以精美插画的形式表达,更容易表达主题和与用户产生共鸣感。

 

小结

插画作为设计师需要掌握的基础技能,被逐步运用到各类设计场景中,也影响了 UI 设计的趋势走向。随着产品设计感官体验的不断升级,风格化和差异化的设计才能满足更多用户的感官需求,而风格多样的插画形式首当其冲。

希望这些插画结合 UI 场景的案例可以作为抛砖引玉,让大家重视插画在 UI 设计中的表现力,不断加强并掌握插画设计的能力。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》插画在 UI 场景中的趋势化探索

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


如何在界面设计中融入品牌元素

博博

这篇文章,主要以常见界面为案例,粗浅聊聊品牌元素如何融入到界面设计中。

直播是2020年到2021年移动互联网的重要赛道,在以百度APP为核心的移动生态之下,缺少一个独立的直播APP去承载整个百度直播体系和被直播所吸引的用户。为了让用户“有出有进”,促成了这次的产品设计。


在这样的产品孵化阶段,我们希望产品在具有直播特性的同时,能够与其他泛娱乐类的直播产品打开差异化,并且有足够的记忆点让它在众多直播产品中被人们所记住并喜欢,那么品牌的塑造和品牌的融合就尤为重要。


所以,产品的设计围绕着泛娱乐直播进行,进行功能的设计和梳理,其中视觉设计便以品牌为中心。


上述的内容,准备以上下两篇文章来做阐述和展示。


这篇文章,主要以市场上的界面案例,来粗浅地聊聊品牌元素如何融入到界面设计中。


下一篇正在准备中,将以我刚来到百度时设计的一个独立直播产品为例,尽可能完整地呈现以强化品牌、IP应用为核心的产品设计过程。




百度网盘

在网盘团队去年的改版中,将积木的品牌概念,融入到icon的设计中,取得了巨大的成功和市场反响,苏大牙的那篇复盘文章,一直在产品设计上影响着我的思路。



2.谷歌系APP图标

谷歌如今统一了谷歌系产品的图标风格,充分地在颜色和风格上体现了谷歌的品牌意识,如今我们一见到此类的图标,第一反应便是,这是不是谷歌的APP?



3.映客直播

映客直播在启动页、tabbar,都把猫头鹰的元素融入进来,在运营设计中,也更多的使用猫头鹰剪影作为主体画面的承载。


4.最右

最右在登录相关的页面,使用IP+品牌色的方式,强化品牌意识,在下拉刷新中,融入IP进行趣味性的设计,很好地诠释了娱乐性、年轻化的产品应如何做情感化设计。



5.快手电丸

快手电丸在个人主页默认图、头像默认图、加载、页面中的功能引导,都加入了IP形象强化品牌。



5.躺平

躺平是在我最近的产品体验中,IP运用和品牌塑造最完整的产品,它成功的把“躺平”这个概念,应用到了IP形象上,再由IP形象对界面中的各处进行应用,延伸这个品牌概念。而且应用范围并不仅仅局限于弹窗、启动页、刷新等常规IP应用点,更是在界面之中做到了自然合理的应用。




小结:

在界面设计中,对于品牌的强化,除了将品牌理念抽象化进行icon等图形的设计,更多地产品喜欢采用具象的IP形象进行合理植入来进行品牌概念的传达。


在IP的应用中,启动页、加载动画、下拉刷新、弹窗装饰、默认图片等是常规的应用场景,除此之外,在卡片标题、功能入口、内容页装饰等地方出现IP的应用,更加能给用户带来惊喜感。


品牌在界面中的植入,在于小而有趣,而不在于多少,在合适和惊喜的地方出现,才能向用户传递出情感。同时可以看出,在界面中应用的IP形象,基本不会出现3D化的情况,在年轻化、娱乐向的产品中,IP本身也没有明显的性别倾向。


总结下,无描边、扁平、2D、无性别等特征,更加适合在界面中应用。少配色、轻渐变、结构简单、应用场景尺寸越小,IP使用比例越小,这些原则也更有利于IP应用的合理性。





作者:灵感大王NinE

转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

UI界面设计中的颜色基础

博博

获得专业配色方案的简单规则

Color是眼睛从光中感知到的感官印象,它以各种形式的概念和情感进行翻译。对于艺术家来说,正确的操作非常重要,因此在整个历史中,它已经以多种方式和不同的方法得到了理论化。


绘画,印刷,摄影,图形设计和界面设计使用色彩理论来唤起特定的思想和观念,并利用色彩的非语言能力,而不是其他较慢的交流形式。

在界面设计中,从增强品牌知名度到在购买按钮上产生更多点击,色彩心理被用来影响用户可能拥有的感知。其他重要结果,例如改进的可用性,也可以是良好的颜色掌握能力的结果。

在本文中,我将介绍设计界面时经常用于颜色选择的六个注意事项。


链接

特定的颜色与某些情感相关,但并非总是如此。自从我们出生以来,我们的眼睛就了解现实世界的色彩,随着时间的流逝,记忆会将这些色彩与某些体验和元素相关联。这种熟悉程度可以为用户提供有关界面目标的一些上下文。

当然,这不是绝对的,因为人类对现实的理解是非常不同的,并且不能以其所有形式进行概括。德国艺术家约瑟夫·阿尔伯斯在他有条不紊的书,彩色的互动,指出色的主强的特点就是相对论。西方国家的红色可能代表着危险和邪恶,但在中国,红色代表着幸福,欢乐和庆祝。尽管如此,他还指出,许多人以相同的方式感知某些颜色,例如与生态相关的绿色或粉红色代表着女性气质。


和谐

和谐的色彩使元素具有逻辑感。有很多方法可以创建色彩和声。其中之一是通过使用类似的颜色,即在色轮中彼此接近的颜色。

为什么类似的颜色具有吸引力?因为这是自然产生的色彩行为。日落使天空从橙色变成紫色,海洋从蓝色变成绿松石,彩虹将所有七种颜色融合在一起。我们可以得出结论,视线会以类似的颜色找到自然的愉悦感。


由于温度也会产生相当大的协调性,因此建议仅在暖色或冷色之间保持此颜色范围。还可以利用这些颜色的饱和度和亮度来创建类似物的使用深度。这完全取决于您要创建的效果以及界面显示的内容。


对比

色彩对比使界面更具动感。色彩补充的另一种形式是通过使用补色来实现的,补色是在色轮中彼此面对的补色。通过使用互补色元素,可以在设计中产生对比和动态效果。

对比颜色的好处包括,可以赋予界面能量和运动效果,以及增强一些我们希望用户注意的相关点。要使这些颜色和谐相处并不容易,因为它们的滥用会造成视觉混乱,并使眼睛不适。比例是关键。


要了解有关色彩对比的更多信息,我推荐瑞士人Johannes Itten撰写的《色彩的艺术》一书,其中介绍了七种对比类型的理论:色调,温度,明暗,互补,饱和度,同时和定量。无论我们选择哪种颜色对比,都应在整个Web /应用页面中进行维护,以确保设计的一致性。


规模

色阶可减轻认知负担。保持色调,但将闪电修改为不同的水平有助于分离元素,而不会使组合物过载。

UI设计中的色阶也受自然影响,不仅受树木叶子,天空或海洋等元素的影响,而且受物体和阴影的影响。人眼会感觉到相同颜色的许多变化,具体取决于照明,深度甚至纹理。人们期望UI颜色像他们在现实世界中一样就不足为奇了。


可以说,使用色标的目的是避免添加大脑必须处理和不必要理解的新颜色或色调。界面设计越容易理解和越快,它将为用户带来更多的乐趣。


比例

定义颜色比例可平衡组成。越来越多地使用颜色可以使样式更清晰,并避免不必要的颜色冲突。

颜色层次结构对于定义一种氛围非常重要,同时,它也是构成网络中所有元素的主要色彩。在当前的UI设计趋势中,白色是最受欢迎的颜色,因为白色可以保持界面干净,突出显示交互颜色并提高可读性。但是,如果要在特定页面上创建更具沉浸感和艺术感的效果,则选择更饱和的颜色确实会很好。


相互作用

交互颜色在执行过程中必须清晰且在界面中保持一致。号召性用语必须相对于背景具有足够的对比度,并且相对于其他组件必须具有足够的视觉重量,以便用户可以轻松识别它们。

但是,交互色并不总是以最饱和或最亮为特征,而是以其色调,形状,大小或对比度在屏幕上与其他元素脱颖而出。因此,交互颜色的有效性将通过用户识别交互区域并以较少的思想执行任务的速度来衡量。


另一方面,次要行动号召力更轻,并且在视觉上更接近信息元素。在我们的耐克应用示例中,配置和声音按钮指示这些是交互作用,原因是形状而不是颜色。按钮的这种层次结构很重要,因此用户可以对元素进行自然排序,并避免在每个屏幕上使用多个主要的号召性用语的不良做法。




总之,颜色是事物的重要影响者,它影响事物对环境的感知,并直接影响其他颜色甚至自身。尽管对其理论的深入研究可以改善我们对设计的掌握,但是创建专业配色方案的过程很大程度上取决于我们的视觉体验和对现实世界的感知。让我们开始训练我们的眼睛。


作者:美腻腻nii

转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


未来情感化界面设计

博博

情感化设计在我们的决策过程中起着至关重要的作用



情感化设计在我们的决策过程中起着至关重要的作用,因为加入情感化的设计可以改变与产品交互的人的整体现实。


人类是一种情绪驱动的物种,我们选择某些产品并不是因为它们有意义,而是因为我们认为它们会让我们感受到不一样的感觉。也正因如此,在未来的界面将在产品设计的基础上使用情感的概念,人们使用的经验将基于智商(IQ)和情商(EQ)。


本文试图展望未来,看看我们将在未来十年内设计哪些接口。我们将仔细研究三种情感化界面设计的互动:


  • 语音

  • 增强现实(AR)

  • 虚拟现实(VR)


未来情感化界面的实际例子


界面如何?即使我们还没有回答这个问题,我们也可以讨论接口可能具有哪些特性。在我看来,我确信我们最终将摆脱充满菜单,面板,按钮的接口,并转向更“自然的界面”,也就是情感化的界面。未来的界面不会被锁定在物理屏幕上,而是会集合五种感官的力量。因此,他们需要较少的学习曲线,理想情况下,根本没有学习曲线。


情商情绪在商业中的重要性


除了使体验更自然并减少学习曲线之外,为情感设计还为产品创造者带来了另一个好处:它提高了用户对产品的采用率。可以利用人类对情绪的行动能力来创造更好的用户参与度。


真实的语音界面


使用语音作为主要界面的产品正变得越来越流行。我们中的许多人使用Amazon Echo和Apple Siri进行日常活动,例如设置闹钟或预约。但是,目前市场上可用的大多数语音交互系统仍然具有自然的局限性:它们不会考虑用户的情绪。因此,当用户与Google Now等产品进行互动时,他们对与机器进行通信具有强烈的沟通感 - 而不是真正的人。系统可预测地响应,并且他们的响应是脚本化的,与这样的系统进行有意义的对话是不可能的。


但是目前市场上有一些完全不同的系统,其中一个是Xiaoice,一个社交聊天机器人应用程序。这个应用程序的核心是情感计算框架,该应用程序的基础是,首先与用户建立情感联系。Xiaoice可以动态识别情绪,并在与相关响应的长时间对话中吸引用户。结果,当用户与Xiaoice交互时,就像是与真人交谈一样。


Xiaoice的局限在于它是一个基于文本的聊天应用程序。很明显,你可以通过基于语音的交互来实现更强大的效果(人声具有不同的特征,例如可以传达强大的情感谱的音调)。


我们中的许多人已经在电影“她”(2013)中看到了基于语音的互动的力量。Theodore爱上了Samantha(一个复杂的操作系统)。这也使我们相信,未来基于语音的系统的主要目的之一将是用户的虚拟伴侣。这部电影最有趣的事情是西奥多没有萨曼莎的视觉形象,他只有她的声音。要建立这种亲密关系,必须产生反映一致性格的回应。这将使系统既可预测又值得信赖。


技术离Samantha这样的系统还有很长的路要走,但我相信语音优先的多模式接口将是语音接口发展的下一章。这样的接口将使用语音作为主要交互方式,并在创建和建立连接感的上下文中提供附加信息。


为Brain.ai设计的语音界面示例(图片来源:Gleb Kuznetsov)


AR体验的演变


增强现实(AR)被定义为现实世界之上的数字覆盖,并将我们周围的对象转换为交互式数字体验。我们的环境变得更加“智能”,用户对手指尖上的“有形”物体产生幻觉,从而在用户和产品(或内容)之间建立了更深层次的联系。


使用AR重新构想现有概念


AR的独特之处在于它为我们提供了与数字内容进行物理交互的非凡能力。它允许我们看到以前无法看到的东西,这有助于我们更多地了解我们周围的环境。此AR属性可帮助设计人员使用熟悉的概念创建新的关卡体验。


例如,通过使用移动AR,可以创建新级别的飞行体验,允许乘客查看有关其班级或当前航班进度的详细信息:


AR在空中客车A380的飞行体验中。(图片来源:Gleb Kuznetsov)


AR帮助我们找到通过空间的方式,并一目了然地获得所需的信息。例如,AR可用于为您当前的位置创建丰富的上下文提示。被称为技术SLAM(小号 imultaneous 大号 ocalization 甲 ND 中号 apping)非常适合此。SLAM允许实时映射环境,并且还可以将多媒体内容放入环境中。


为用户提供价值的机会很多。例如,用户可以将他们的设备指向建筑物,并在其屏幕上了解更多信息。它可以显着减少工作量,并通过允许导航和访问实现轻松的情感体验。


在上下文中提供其他信息(图片来源:Gleb Kuznetsov)


我们周围的环境(例如墙壁或地板)可以成为交互场景,过去仅限于我们的智能手机和计算机。


你在下面看到的概念正是如此; 它使用物理对象(白墙)作为通常使用数字设备传送的内容的画布:


交互式墙的概念 - 在现实世界之上的数字覆盖。(图片来源:Gleb Kuznetsov)


避免信息过载


我们中的许多人都看到了名为“超现实”的视频。在这段视频中,物理和数字世界已合并,用户被大量信息所淹没。



技术允许我们同时显示几个不同的对象。当它被误用时,很容易造成过载。


信息过载是一个严重的问题,对用户体验产生负面影响,避免它将成为AR设计的目标之一。精心设计的应用程序将使用AI的强大功能过滤掉与用户无关的元素。


高级个性化


当系统实时地根据用户的需求和期望来管理内容或功能时,就会发生数字体验的个性化。许多现代移动应用程序和网站使用个性化概念来提供相关内容。例如,当您访问Netflix时,您看到的电影列表会根据您的兴趣进行个性化。


AR眼镜允许创建新的个性化水平,即“高级”个性化水平。由于系统“看到”用户看到的内容,因此可以利用此信息提出相关建议或在上下文中提供其他信息。想象一下,你很快就会戴上AR眼镜,转移到你视网膜的信息将根据你的需要量身定制。



从增强现实走向虚拟现实,创造沉浸式体验


AR体验具有自然的局限性。作为用户,我们在内容和内容之间有明确的界限; 这条线将一个世界(AR)与另一个世界(现实世界)分开。这条线引起了AR世界显然不真实的感觉。


您当然可能知道如何解决这个限制,即使用虚拟现实(VR)。VR并不是一种新的媒介,但只是在过去的几年里,技术已经达到了允许设计师创造身临其境体验的程度。


沉浸式VR体验消除了现实世界与数字之间的障碍。当你戴上VR耳机时,你的大脑很难处理你收到的信息是否真实。关于VR体验如何在最近的将来看起来的想法在电影“Ready Player One”中有很好的解释:



以下是设计人员在创建沉浸式虚拟环境时需要记住的内容:


1.写一个故事


有意义的VR有一个强大的故事的核心。这就是为什么在你开始设计VR环境之前,你需要为用户旅程写一个叙述。一个称为“故事板”的强大工具可以帮助您。使用故事板,可以创建故事并检查所有可能的结果。当您检查故事时,您将看到何时以及如何使用视觉和音频提示来创建身临其境的体验。


2.与角色建立更深层次的连接


为了让用户相信VR中的所有内容都是真实的,我们需要创建与用户所扮演的角色的连接。最明显的解决方案之一是在虚拟场景中包含用户手的表示。这种表示应该是实际的手 - 而不仅仅是一个操纵的复制品。考虑不同的因素(如性别或肤色)至关重要,因为它会使交互更加真实。


用户可以看到他或她的手,看他们看起来像一个角色。(来源:leapmotion)


也可以将现实生活中的一些对象带到VR环境中以创建此连接。例如,一面镜子。当用户查看镜像并在反射中看到他们的角色时,它可以在用户和虚拟角色之间实现更真实的交互。


虚拟现实用户会查看虚拟镜像,并将自己视为VR环境中的角色。致谢:businesswire。


3.使用手势代替菜单


在设计沉浸式VR体验时,我们不能依赖传统的菜单和按钮。为什么?因为通过显示菜单来打破沉浸感相对容易。用户会知道他们周围的一切都不真实。设计师不需要使用传统菜单,而是需要依赖手势。设计界仍然在定义使用手势的通用语言,参与这项活动是有趣和令人兴奋的运动。棘手的部分是让用户熟悉并可预测手势。


Hovercast VR菜单试图将现有的交互概念重用于VR体验。不幸的是,这个概念可以打破沉浸感。新媒体需要新的互动模式。


4.与VR环境中的元素交互


要创建一个感觉真实的环境,我们需要让用户能够与该现实中的对象进行交互。理想情况下,环境中的所有对象都可以以允许用户触摸和检查它们的方式进行设计。这些物体将充当刺激,并将帮助您创造更加身临其境的体验。触摸对于探索环境非常重要; 婴儿在头几天获得的最重要信息是通过触摸获得的。


5.VR


VR中分享情感有一个真正的机会,成为一个新的社会体验水平。但为了实现它,我们需要解决一个重要问题,即将非语言线索带入交互中。


当我们与其他人互动时,我们获得的信息的重要部分来自肢体语言。惊喜,厌恶,愤怒 - 所有这些情绪都在我们的面部表情中,在面对面的互动中,我们从眼睛区域推断信息。当人们在VR环境中进行交互以创建更真实的交互时,提供此信息非常重要。


好消息是头戴式设备(HMD)将很快涵盖情感识别。几乎任何人与人之间的互动都将受益于VR中的面部表情。


在VR空间分享情感(来源:MITReview的 Rachel Metz )


6.为VR环境设计声音和音乐适合


音频是沉浸式体验的重要组成部分。如果不为环境设计声音,就不可能创造出真正身临其境的体验。声音既可以用作背景元素(即风的环境声音),也可以用作方向性的。在后一种情况下,声音可以用作提示 - 通过播放方向性(声音来自哪里)和距离(可以将用户的注意力集中在特定元素上)。


在为VR设计音频时,制作声音3D至关重要。2D声音不能很好地用于VR,因为它使一切都太平。3D声音是您可以在周围的各个方向听到的声音 - 前方,后方,上方和下方 - 遍布整个地方。您不需要专门的耳机来体验3D声音; 可以使用HMD的标准立体声扬声器来创建它。


头部跟踪是良好声音设计的另一个重要方面。让声音以逼真的方式表现至关重要。这就是为什么当用户移动他的头部时,声音应该根据头部运动而改变。


7.预防晕车


动是VR的主要痛点之一,这是一种在视觉感知运动和前庭系统的运动感之间存在分歧的情况,而让用户在体验VR时保持舒适至关重要。


有两种流行的理论导致VR中的晕动病:


  • “感觉冲突”理论:根据这一理论,晕动病的发生是由于预期的运动和实际经历的运动之间的感觉上的不一致。

  • “眼动”理论:在“ VR书:虚拟现实的以人为本设计 ”一书中,杰森杰拉德提到晕动病的发生是因为保持场景图像在视网膜上稳定所需的不自然的眼球运动。


以下是一些提示,可以帮助您防止用户接触到病箱:


  • 身体运动应与视觉运动相匹配。有时即使是小的视觉抖动也会对体验产生巨大的负面影响。

  • 让用户在移动场景之间休息(这在VR体验非常动态时尤为重要)。

  • 减少虚拟旋转。


结论


当我们考虑产品设计的现代状态时,很明显我们只是处于冰山一角,因为我们仅限于平面屏幕。


我们正在目睹人机交互(HCI)的根本转变 - 重新思考数字体验的整体概念。在接下来的十年中,设计师将打破玻璃(我们今天所知的移动设备时代)并转向未来的接口 - 复杂的语音接口,先进的AR和真正的沉浸式VR。当谈到创造一种新的体验时,必须要明白我们唯一的边界是我们的大脑告诉我们它必须始终如一。


如果您想了解更多的前瞻信息和权威专家普修的专业性建议,就留言联系我们吧!


来源:Gleb:Designing Emotional Interfaces Of The Future

https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/


<p style="margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;font-size:16px;line-height:32px;text-align:center;">
    <img src="https://img.zcool.cn/community/0186295d26b093a801214837432998.jpg" style="margin:22px auto 0px;padding:0px;outline:none;box-sizing:inherit;display:inline-block;vertical-align:top;max-width:100%;" /> 
</p>
<p style="margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;font-size:16px;line-height:32px;text-align:center;">
    用户调研 丨 HMI设计 丨 UE/UI设计 丨 HMI培训 丨 HMI评测 丨 体验咨询
</p>


作者:Pursuer设计

转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


原文链接:https://mp.weixin.qq.com/s/wOCLrT2bdBe_wx4usB8pvQ

大数据可视化界面设计总结

博博

项目可以简单得理解为是气象灾害等级地图展示系统,主要展示了图表、表格、灾害等级五色图分布地图


设计需求

1、逐步确认

项目的需求分析是通过客观的业务数据逐步展开,逐步确定的。首先根据常用的业务逻辑来把需要展示的内容做一个排序,比如:饼状图、柱状图、趋势图等,决定可视化图表与数据的结合。

2、从表格到一整张图

由于产品经理角色空缺,项目并没有原型线框图。所以为了项目有效开展,首先将数据展示的维度列出一个表格(内容标题、横纵坐标、有效信息等等),进行合理化的分析, 其次将现有的数据内容,结合表格中的横纵坐标,套在一个可视化的板式中,做出一个初步的原型设计。


设计过程 

1、设计风格

按照传统大屏的设计配色,深蓝色体现了丰富的科技感,仓储式仪表盘的布局模式,体现了数据可视化的大气。由于业务对象的原因,摒弃了太过花俏、复杂的边框跟元素。


2、设计交互

交互的要点承接了业务需求的关系,整个大屏界面除了数据展示,还多了控制地图展示的下拉界面、查看灾情发生时间维度的控制轴以及播放动画的按钮等,是一个组合可交互的大屏展示,并不是只刷新数据那么简单。


3、投入产品思维

由于没有产品经理的空缺,设计承担了大部分产品思路,主要体现在重点内容布局,页面合理性逻辑性的一些考量。好在页面只有几张,不然整体的业务逻辑分析起来也增加了不少的思考时间。


4、改稿的心理素质

数据展示的内容与客户期望存在一定的差异,当客户没有需求提出时,就要出不同的方案来验证客户的需求,从最初的版本到开发,中间经历了7-8次改稿,很虐吧……

总结:

1、视觉与原型

从追求完美的角度出发,设计流程上应该有产品原型的体现,但是往往业务对接人员仅提供需求文字本身的情况下,设计师也要具备一定的产品能力,把视觉稿当成原型稿来做。


2、同质化与调研

大屏展示可视化一直都是层出不穷,怎样做到既能满足业务需求又要有独特感以及设计感,可以归结到项目开始的设计定位上,风格定位得越仔细,调研得越多,那么对设计亮点的融入会起到很大帮助!


作者:沐岚之城

转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


iOS人机界面设计指南 #2 启动&启动页

博博

翻译iOS人机界面设计指南。译文内容有删改,并增加了个人注解和案例补充说明, 仅供参考, 欢迎交流~

目录


一、设计理念 (Design Themes)   

二、设计原则 (Design Principles) 

[点我]以上部分见《iOS人机界面设计指南 #1》

三、应用框架(App Architecture)


    启动 (Launching)

        -提供一个启动页

        -考虑屏幕方向

        -不要提前询问设置信息

        -不要显示授权协议和免责声明

        -重启时恢复先前状态

        -尽量不要让用户重启

        -不要频繁地让用户给你的App评分


    启动页(Launching Screen)

        -设计一个与您的应用的首页几乎相同的启动页

        -避免在启动页上包含文本

        -弱化启动页

        -不要做品牌展示

        

        (原指南将“启动页”放到视觉设计中, 因与本节关联较大, 因此译者整合到在此处)



-------------------------------------


启动 (Launching)


启动体验很大程度影响用户对APP的感受。 无论使用什么设备,无论自从上次打开APP过了多久,启动体验都应该是快速,无缝衔接的。


提供一个启动页

应用启动时, 显示启动页,然后迅速变为应用的首页。 启动页的作用是在加载时给用户一种印象——该APP响应迅速. 为确保从启动页无缝过渡,请将启动页设计成与首页相似的、不会吸引关注的简单页面。


考虑屏幕方向

如果您的应用同时支持纵向和横向模式,则应使用设备的当前方向启动。 如果您的应用仅以一种方向运行,则应始终以该方向启动,并在必要时让人们旋转设备。 除非有令人信服的理由,否则无论设备向左还是向右旋转,处于横向模式的应用程序都应正确定位自己的方向。


不要提前询问设置信息

人们期望应用程序能够正常运行。 为大多数用户设计您的应用程序,让少数需要不同配置的用户调整设置以满足他们的需求。 尽可能从设备设置和默认设置,或通过同步服务(例如iCloud)获取设置信息。 如果您必须询问设置信息,请提示人们在首次打开应用程序时提供该信息,并让他们稍后在应用程序设置中对其进行修改。


不要显示授权协议和免责声明

在App Store显示授权协议和免责声明,以便人们可以在下载应用之前阅读它们。 如果您必须在应用程序中包含这些内容,请注意不要破坏用户体验.


重启时恢复先前状态

避免让用户手动返回之前的位置。保存和恢复APP的状态,让用户可以从他们上次的地方继续。


尽量不要让用户重启

重启需要花费时间,并且会让你的APP显得不可靠且难用。如果你的APP有内存或其他问题使其难以运行,你需要解决这些技术问题。除非是手机系统原因. 


不要频繁地让用户给你的App评分

安装后或在用户使用你的APP时过于频繁地弹出评分提示是很烦人的,你收到的有用反馈可能会反而因此减少。为了鼓励用户给出合理的反馈,你应该给用户一些时间让他们对你的应用形成自己的看法。并始终提供一种选择退出评分提示的方法,永远不要强迫用户对你的应用进行评分。


-------------------------------------


启动页(Launching Screen)


当你的APP启动时,启动页会立即出现,并很快被应用程序的首页取代,给人一种APP响应迅速的印象。启动页不是一个艺术表达的机会。它只是为了增强你的APP快速启动和立即准备使用的感觉。每个APP必须提供一个启动页。




不要在启动页面上使用静态图像。 如果您需要了解各种屏幕尺寸的尺寸以帮助您进行设计布局,请参见设备屏幕尺寸和方向。在iOS 14及更高版本中,启动屏幕限制为25 MB。



设计一个与您的应用的首页几乎相同的启动页


如果您添加的元素在应用程序完成启动时看起来有所不同,则人们可能会在应用程序的启动屏幕和第一个屏幕之间遇到不愉快的闪烁。 还要确保您的启动屏幕与设备的当前外观模式(浅色/深色)匹配.




避免在启动页上包含文本

由于启动页中的内容不会更改,因此任何显示的文本都不会本地化。


弱化启动页

人们重视是否让他们快速访问内容并执行任务。 设计类似于应用程序界面的启动页会给用户带来“应用程序立即启动了”的错觉。 快速的启动时间,结合这种设计方法, 会使您的应用程序响应迅速。对于游戏,启动页应正常过渡到游戏显示的首页。


不要做品牌展示

启动页不是品牌机会。不要设计得看起来像品牌刊登页或“关于”窗口。 除非品牌标志或其他品牌元素在应用首页也固定出现,否则请勿包含徽标或其他品牌元素。 如果您的游戏或其他沉浸式应用在过渡到第一个屏幕之前显示纯色,则可以创建仅显示该纯色的启动屏幕。


//然而事实是, 几乎所有应用都会在启动页展示品牌logo. 只有apple官方的应用将“快速响应”的思路坚持到底. 我的看法是, 可以适当融入一些品牌元素, 但依然要考虑与首页过渡, 避免闪烁感和等待焦虑,  尽量简单、不引起注意, 从而带来“快速响应”的启动体验. 



----------------------------------------


下篇预告       

 3.2 新手教程 (Onboarding) & 加载(Loading)


作者:子胖

转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


原文链接:https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/launching/

突破瓶颈之——界面设计

博博

界面设计设计文章



作者:凌度_Lee

转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


APP-IOS与Android界面设计与切图

博博

【APP设计】:1、界面设计、;2、切图;3、标注


做一全套的APP设计,流程是:


1、界面设计:设计IOS界面;设计Android界面。

2、切图:切IOS的2倍图和3倍图;切Android的hdpi,xhdpi,xxhdpi这三个尺寸的图。

3、标注:以px为单位标注IOS界面的尺寸;以dp为单位标andriod的尺寸。



----------------------------------------------------------------------



IOS端_界面设计


————————


一、界面设计:


1、【界面分类:IOS有 iphone5/5s/5c、 iphone6\6 plus、iphone7\7 plus、iphone8\8 plus、iphoneX等分辨率。

2、【设计方法】: 以iphone8为标准进行界面设计,让开发进行适配。即750px*1334px以基准(72像素\英寸)。

3、【设计标准】:750*1334界面——状态栏40px; 导航栏88px;标签栏98px;工具栏88px;文字最大34px; 最小18px;常用28px。





————————




二、切图:(所有开发写不出来的都得切,如icon, 默认头像,背景图等)



1、切图尺寸】:IOS 只用切【二倍图】和【三倍图】。注意:有些button, 需要更改颜色,切一个“被点击的状态”(如btn-xxx-pressed@2x,btn-xxxx-pressed@3x)。

2、切图命名】:如btn-xxxx@2x,btn-xxx@3x(按纽); img-xxx@2x,img-xxxx@3x(图像); bg-xxx@2x,bg-xxx@3x(背景图)

3、方法一】:photoshop图层-右键-导出为...】

 设置大小(@1x+@2x);设置好icon的画布尺寸(如导航栏上的几个icon的画布尺寸应保持一致)

4fbe596ed93ea8012193a33bdfab.jpg

0520596ed941a8012193a3b2faea.jpg

     

       


【方法二】:sketch-选中icon-右下角-make exportable

(如需切相同尺寸的icon,需建立相同尺寸的画布,并选择整个画布整体导出)



————————



三、标注: 


1、【标注内容】:颜色\长宽\字号\距离;

2、【标注单位】:IOS的标注以px为单位进行标注。(注意:数字最好为偶数)

3、【标注软件一】: 标注神器-parker/markman,标注前请在“设置”里将单位改为px; 

 




标注软件二(强烈推荐)】:zeplin软件——无需标注,只需将界面导入zeplin,开发直接访问zeplin,即可查看所有的尺寸、间距、色值、字体、字号等。

下载地址:https://zeplin.io/,软件图标和界面如下:


671c596eed16a8012193a3cb6800.jpg

                                          

                           





Android设计:



————————



一、界面设计:


1、【界面分类】:Android的尺寸非常多,非常杂。总的说来,就分为这几种模式:idpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi。

2、【设计方法】:以xhdpi为基准进行界面设计,让开发进行适配。即以720px*1280px为标准(72像素\英寸)。

3、【设计标准】: 720px*1280px界面——状态栏50px, 导航栏96px,标签栏96px,工具栏96px,实体键96px;文字最大36px;最小18px;常用28px。




————————




二、切图:


1、【分类】:Android 的切图需要切三个尺寸的:hdpi, xhdpi, xxhdpi。

2、【方法一】:切图神器-cutterman,也可以一键切出hdpi, xhdpi, xxhdpi三个尺寸的图, 而且还可以切出“点九图”。  

    【法二】:photoshop、sketch、illustrator皆可直接导出icon。


————————


三、标注:


1、【单位】:Android的标注以dp为单位。(parker里, 在“设置”里将单位改为dp)

2、【标注软件】:同上,推荐zeplin软件(建立文件夹时需选择安卓版本)








----------------------------------------------------------------------




补充 _ 2019/4/10:


目前流行的是以【一倍图】的分辨率来进行设计,也就是sketch、PS、AI上给的分辨率:

iPhone 8的分辨率是750*1334,而sketch、PS、AI上iPhone 8给的分辨率是375*667.


意思是设计平台鼓励设计师用一倍图来设计,一方面是因为开发环境是以一倍图的环境来开发的,因此一倍图的设计稿无需开发再进行换算。


另一方面是icon导出时:@2x就是iPhone 8的尺寸、@3x就是plus的尺寸。利于icon尺寸的整数换算。


所以推荐大家用【一倍图】的分辨率来设计。icon切图分别导出2倍图和3倍图供开发使用。(而且sketch提供的IOS控件也是1倍图的尺寸啊~~)


作者:Hmyu

转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

网页界面设计——界面分辨率 取其之道 舍其鸡肋

博博

主要针对以下几点展开讨论及总结:
1、界面尺寸
2、界面布局
3、界面背景
4、界面黄金比例
5、总结




作者:郑每每

转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

日历

链接

个人资料

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

存档