首页

洞察体验之美|消费决策场景下的行为设计与体验思维(一)

ui设计分享达人

体验经济的时代已经到来,无论是实体产业或是虚拟产业越发依赖于服务和体验带来的经济效益,作为互联网从业者,深刻认识到体验的重量,从尊重用户体验到掌握体验思维,于大多数角色而言都是一门必修课。


“附近的火锅店味都差不多,不过A家服务员态度好好,而且还有好多免费小吃,吃完还能做美甲,吃它!

“下班一起去新开那家咖啡馆打卡不?朋友圈看到装修好有格调,甜点看起来也超精致,特别适合拍照呢!

“周末那家密室剧情挺一般的,不过场景氛围还不错,挺刺激的,关键是npc好帅,小姐姐也好美,还想去!

“师傅,麻烦稍微快点我赶时间估计要迟到了,“小伙子放心,坐稳了”,8分钟后,迟到前5分钟,打卡成功。
——仅以此条向重庆全体出租车师傅致敬」

...


很熟悉吧?还有数不清类似的场景充斥在我们的身边,近些年来,消费者对事物的评判标准有了翻天覆地的变化,一家餐厅对于顾客的价值,决定性因素不再是单一的菜品口味;服务员的颜值、装修的格调、菜品是否精致、拍照好不好看、服务态度如何、有无明星打卡经历,甚至是吃饭免费做美甲这样的边际体验都加入了顾客对餐厅的价值评判标准中,餐厅的效益与顾客的粘性甚至取决于这些边际体验;市场的高强度供给和国民经济效益的提升,为消费者带来了更大的选择空间,解决刚需不再是人们的唯一追求,“品质“一词开始走进大众群体的生活,相比果腹而言,服务与体验这类精神消费需求成为了新世代消费者所追逐的对象,同时也成为了评判事物价值的新机制。


当下市场,商家、消费者与互联网平台形成新的内容产业链,消费者通过平台及商家不断收获各类峰值体验,更有甚者还能以此获利,而商家和平台则收获流量和经济效益,在人货场的概念中形成生态闭环,可谓互相成就。而如何满足顾客的精神消费需求以及怎样制造更多更好的边际体验,成为企业的“新基建“,其带来的效应让人着迷,在资本逐利的市场中,不乏企图通过这样的手段筑起高楼的群体。





“在当下这个时代,消费趋势从购买东西转向了购买体验。生产自动化导致东西越来越不值钱,买回家还占地方。很多高级消费在于购买体验,比如旅游、参加音乐会,到现场观看重大比赛。对于商家来说,用户体验就是商机,其带来的最直接的好处就是提升黏性,产生利润。”(《行为设计学》节选)


从刚需到服务,消费趋势如此,用人趋势也如此;在内卷对互联网行业深度渗透的环境下,设计师理应保有危机意识,单向的刚需能力不再满足于企业对设计师的价值认可,如何打造自身对企业的“体验”和“价值”成为大部分人的课题;我个人向来不主张设计师朝着所谓的“高复合性、UXD、全栈“等风尖能力看齐(高阶人才请掠过),而精,精而深,深而广,这样的“以单向能力为主的树形扩张则更适用于大多数站在塔尖下的设计师(个人认为),以UI\UX设计师为例,如何以单向核心能力拓展分支技能呢?本文将以我的实际工作案例进行深度剖析,围绕体验思维和行为设计等分支技能如何在设计中实践应用,并以此构建更具广度和深度的设计解题能力。


(一) 被设计的体验

案例:内容电商产品,商品详情页迭代

方法:结合线下购书场景体验,预测用户行为,设计用户行为动线。

路径:寻找症结>场景预测>产出>复盘


第一步,理解购买流程

工欲善其事,必先利其器。第一件事,站在用户视角和平台视角分别对购买流程进行拆分对比,以此加深各个环节所对应业务场景的理解认知。

用户视角购买流程:种草->品类决策->商品决策->购后交流;此流程会随不同的用户类型进行变化,例如带有意向商品进入APP的用户则省去种草、品类决策两个环节;

平台视角购买流程:售前->售中->售后3个阶段,售前对应种草,售中聚焦商品决策。




第二步,场景的本质

商品详情页是用户发起购买行为的重要途径,其本质是售中环节的商品决策工具,是通过人工干预的手段,提高商品与消费者的连接与匹配效率,从而为产品获得更高的收益;在满足用户基础产品体验的同时,也承载着平台流量分发后的关键转化任务。


广义上的消费决策场景,大多聚焦在售中环节的商品决策,场景为用户通过外部场景进入到商品详情页,判断一个意向商品是否值得购买,决策的结果是收藏、加购或立即购买,当然也可能直接离开;由此得出,商详场景的核心体验是通过有效的信息陈列,帮助用户了解商品与价值判断后积极的进行购买决策,而同时也是连接用户与作者以及其他关联商品的流量桥梁。 在理解场景的本质后目标变得清晰起来,为用户设计一个好用的决策工具,为平台设计一个有用的信息容器。


为用户造工具,第一件事是剖析用户:通过线上平台购买商品,用户的消费决策过程是怎样的?(常规)




结论:用户通过对商品的认知了解、价值判断建立相关的购买意愿后进行购买决策。

售中环节的信息构建是用户了解商品与自身匹配率并建立购买意愿的核心途径,场景所具备的信息传达能力对用户的最终决策起到决定性作用;为给用户带来更好的购物体验,我通过还原线下购物场景获取灵感,构建线上购书的行为模型,从而对商详进行优化,力求带给用户一个符合习惯认知的、高效、有效的决策工具,同时思考为用户带来体验效益的情景下,提前洞察可能出现的问题以及对业务场景进一步支撑的同时能否主动推进业务的发展。


第三步,设计行为模型

分析消费者线下购书行为,通常为逛书店-拿起书-翻开书-查和问-做决定等五个阶段。




分析消费者在线下的购物行为,结合业务场景构建具有可行性的行为模型,通过行为模型教育用户进入商详场景后基于动线进行浏览,将信息获取效率最大化,并以此提高商品与用户的匹配效率。


undefined



第四步,行为模型塑造购物体验

现状评估:基于行为模型,从信息关注度、信息传达能力两方面对框架结构进行体验测评。

首屏是用户对场景建立认知的核心方式,当前商详第一屏呈现的信息维度较多且落点分散,用户的注意力被大量分散,无法引导其完成对商品和场景的快速认知。


undefined



归纳前文有效信息,分别站在视觉与交互的视角对存在的问题进行归类并提出对应策略:

1.产品吸引力(氛围、质感、信息传达能力

2.优化信息结构(信息关注度、信息深度):教育用户行为,降低用户消费决策中的行为阻力,提高商品与用户的匹配效率

3.设计最小可行性方案,将实施资源最小化,在业务规则的限制下得出最优解。


undefined



第五步,方案演示

结论:在新的场景中,基于行为模型对框架的优化,信息结构变得清晰,高效的信息传达能力让用户在最短时间内完成与商品的匹配决断,缩短了用户购买决策的体验路径;同时页面的视觉质感得以提升,用户在决策过程中的愉悦度也得以相对提升,提高了产品吸引力。


详解——信息关注度、传达能力:通过调整首屏信息陈列的亲密度主动对用户注意力进行分配,清晰的信息结构会引导用户的视线按照行为模型获取信息,当用户进入商详场景后,会快速聚焦到头部信息对商品进行基础了解,并完成第一阶段的决策(购买意愿);


详解——信息深度、行为阻力、降噪:将详情信息字段双行展示调整为7行极限展示,减少了首屏信息维度的数量,以此降低用户首次进入场景后接触到的信息噪音,同时降低了展开收起功能的操作频率,满足了部分用户的阅读需求,为决策中期可能产生的行为阻力做了减法。


详解——产品吸引力:新增彩色背景提高了整体氛围感,加上信息亲密度的调整,界面整体视觉质感的友好度和精致度都有不错的呈现,同时决策按钮的配色调整也企图在调动用户积极心理的能力上得到提升。

展示——设计结果(仅对首屏作展示):


undefined



衡量指标,设计自证

结合数据表现与体验评估,整体体验诸如商品认知能力、匹配效率等得以提升,但关键转化仍然不理想:


· 信息关注度:对用户完成商品基础了解建立购买意愿后的浏览动机存疑,决策中期的信息构建仍有调整空间
· 信息的质量:现有内容策略缺乏说服力,无法满足用户对商品价值的深度评估,促进用户决策的能力显得不足
· 心智模型:表现力上,新版商详带给用户的心智模型呈现为“类阅读产品”,缺少有关交易属性的信息,且信任力不足,导致了商品的不确定性。


从数据看:1-12s内无法对首屏信息进行有效浏览吸收,表现出用户对此处信息关注度较低,第二阶段的详细信息处字段冗长,满足部分用户阅读需求的同时也引起了其他用户的阅读负担,在一定程度上挑战了用户耐心,信息露出需要平衡。


基于行为模型设计的导航策略过于线性、理想化,在用户实际进行购买决策时心理路径存在线性和非线性两种群体,所关注的信息也不尽相同。


undefined


(二) 消费决策,心理探寻

方法:通过ELM(详尽可能性模型)探索用户的消费决策心理路径,以此对方案进行调整优化。

ELM模型认为,人类被说服的模型有两种,即中央路径和边缘路径:


在中央路径下:当个人的动机和能力比较强的时候,人们会理性思考、仔细评估之后做出决策,知识水平较高或有相对性需求时往往倾向于理性的选择;


在边缘路径下:当个人的动机和能力比较弱的时候,人们满足于当下的认知,通常不愿耗费精力对信息加以分析,且对信息内容的真实性无法判断,只能通过一些信息的外围因素来决定该信息的可信度,从而涵盖了感情因素,更容易被表面因素说服;


举个例子:小明和小黄逛街时看到一家环境老旧却不便宜的冷饮店,本应嗤之以鼻的小明看到门口排起的长龙和精美的饮品包装设计,让他放下顾虑立即拉着小黄参与排队购买饮品,他相信,大家都在买的就是好的;而排队过程中,小黄则仔细观察店内环境卫生以及店员的操作手法,同时上网查询该冷饮店的资料和口碑,经过对收集到的信息和眼前所看到的场景进行评估后,小黄觉得这个饮品不卫生,决定放弃购买。在这个例子中,本应嗤之以鼻的小明受到外在因素(生意好排长龙、他人行为、包装好看)影响,做出了不理智的决策,是典型的快思维(边缘决策路径)。而小黄经过亲身观察和上网查阅的手段对饮品卫生做出的决策,也就是前文提到的慢思维(中央路径)


undefined



两条路径处理的信息不同,在中央路径处理的都是与信息质量相关的线索,而在边缘路径中,处理的则是一些表象信息内容。

结合场景梳理用户决策的思考过程中的关注点:


undefined



依据结论,需完善同时满足两种决策模式下用户所需的信息:

主要体现在信息质量与表象信息两个维度,并且在界面的信息传达中突出商品属性,增加商品感。


内容共建,决策参考:当用户产生购买行为时,首先是需要被说服的,无论是被他人说服,被广告说服,还是被自己说服。讨论区的建设,在交易场景连接了内容侧的业务,同时推动产品内容质与量的发展,并试图通过言论促成“用户说服用户”的决策模式,同时满足了中央路径、边缘路径两种用户的信息供给。


强调心智,情绪体验:将原本处于第二屏的交易信息前置,矫正整体用户对界面认知的心智模型,同时让用户了解商品信息后第一时间感知到购买权益及相关配送体验,完善首屏的信任力、保障确定性,让用户具备“放心买”的心理;界面视觉的质感优化仍然以提高用户愉悦度为主,企图在决策过程中带给用户更好的边际体验,让用户在表象层面提升对产品的好感度,以信任力\好感度\平台和用户的内容共建等方式在人因决策之外发挥促进购买决策的最大因果。


undefined



结语

以上案例部分内容以倒推形式进行复盘,是脱离数据之外的解题思考方式;希望我的文章能够为感兴趣的同学带来新的思考,也期望体验思维与行为设计能够被更多设计师所熟知应用。


设计源于生活,无论是购物、玩游戏或事社交,打破线上线下的场景壁垒进行观察、思考,解题方式不乏在你身边的生活场景中,人的行为始终具有参考价值。

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

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



文章来源:站酷  作者:秋思野

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

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


设计体系的响应式设计

ui设计分享达人

本篇文章横向调研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企业级产品设计体系的响应式设计部分,从设计策略、设计模式、实施模式、设计方案四个层面大致归纳了一些信息,旨在对响应式设计有一个笼统的了解。

关于 Adaptive Design 与 Responsive Design先厘清两个概念,关于响应式设计通常会有两个普遍认识,即 Aaron Gustafson 与 Ethan Marcotte 分别在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 与 Responsive Web Design (RWD) 概念,它们的核心区别在于 AWD 针对不同的设备或屏幕尺寸定制化设计多个固定布局的尺寸,而 RWD 是同一套代码做弹性的适应,本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题,本篇所指的「响应式设计」 概念包含了两者,不做明显区分,关于 Adaptive 与 Responsive 设计怎么界定以及具体的规则本篇也不进行展开。


移动优先设计策略

提响应式设计不得不提「移动优先」设计策略,移动优先的概念最早是 Google 在 2010 年世界移动大会上提出来的一种产品策略,基于 Google 对未来趋势中移动设备将会逐渐拥有核心地位的判断。后来「移动优先」更多被提及是作为一种在响应式设计中应用的设计策略,它认为在响应式设计中优先为屏幕限制更大的移动设备设计,再扩展到大屏幕的 PC 端是一种更有效的设计方法。

例如 Alta、Lightning、Fiori 均在设计体系中明确采用「移动优先」的设计方法,Fiori 尤其指出「移动优先」专注核心功能,专注增强而非降级,提前考虑移动端更多的独特特性以及异常情况,能提供更好的体验。Material Design 可能算是移动优先的最佳实践,它本身就诞生于 Android 平台,而后再通过大量响应式规则扩展到桌面及 Web 端,使得 Material 在多端都拥有一致贯穿的良好体验。

(Material Design 的响应式设计)


「移动优先」本质上是基于一种「增强」的设计思想,一个产品如果要同时适应于不同的设备,一直以来有两种策略:优雅降级 vs. 渐进增强,后者认为先从最小和最受限制的低级设备(移动设备)入手,再为更高级的设备(桌面设备)增强信息和交互,这意味着在更多限制下,迫使设计考虑如何减少、汇总,分组信息,有利于聚焦核心信息以及为更多限制考虑。

然而移动设备已不再是「低级设备」,Fiori 尽管强调「专注增强而非降级」,但它同时提出的「提前考虑移动端更多的独特特性」却与渐进增强的设计思想相悖,让「移动优先」沦为了某种形式化的概念而难以执行。

例如下面这个报告界面的场景里,移动端仅展示汇总的报告图表信息,但汇总图表并没有「扩展」到 Tablet 里而是用明细数据替换图表,而在桌面端同时包含了明细数据与图表两部分信息,这看上去并不像是一个「增强」的设计思路,更像是在全量需求下基于设备限制所采用的「降级」策略。

(Fiori 报告界面的 Adaptive Design)


因此「移动优先」并不一定是形式上优先设计移动端,它被广泛接受和应用的是背后的渐进增强的核心思想。我认为在移动设备高度发展的当下,「移动优先」不再适合作为单独概念提出来,而渐进增强的设计思想应该体现在更细分的场景中,例如在布局、信息排版以及交互反馈中,我们应该优先考虑限制更大的移动端;在一些交互方式上,优先考虑限制更大的鼠标操作。甚至在复杂业务场景里,优先满足核心业务流程顺畅也属于渐进增强的策略范畴。


设计模式

这里讲的设计模式是指设计师在具体业务中针对不同的情况可以采用的通用性设计方案,这些设计模式除了单独应用外,有时候也可以多种模式结合应用。Fluent 归纳了 6 种对应不同情况的响应式设计模式,非常全面地涵盖了其它设计体系中的绝大部分方案,分别是:调整大小、重新定位、重新排列、显示/隐藏、替换、重新构建。

Resize – 调整大小

调整大小是最基础的设计模式,是一个容器默认的响应式模式,通常有等比缩放、固定高度、或是在不同尺寸下按不同比例规格缩放三种形式,即便在无响应式设计的体系里,容器跟随屏幕尺寸而变化也是一个常见的应用方式。

(Resize) 


Reposition – 重新定位

改变 UI 元素的相对位置,以充分利用不同尺寸的空间。重新定位在响应式应用里多见在框架上,或是在组件里对一些特定元素的处理,例如 Material 的全局浮动按钮与浮动的下拉菜单以 Reposition 的形式分别在桌面端与移动端处于不同的位置。


(Reposition)


Reflow – 重新排列

改变 UI 元素的排列方式,这在内容弹性布局里较常见,通常是基于某种排列规则自动向下折行,并结合调整大小与栅格系统应用在响应式布局方面,例如 Carbon 的 Fluid Grid。



(Reflow)

Show / Hide – 显示 / 隐藏

基于屏幕空间、设备不同特性、特定情况等显示或隐藏 UI 元素,例如大多数设计体系的框架设计应用在小屏幕上会隐藏侧边菜单。Material 在组件响应式行为里提到的 Expand 也属于 Show / Hide 的延伸。



(Show / Hide)

Replace – 替换

针对不同尺寸的屏幕采用不同形态的组件,通常应用在对具体的组件做针对性响应式设计中,但需要注意用户面对变化时的认知成本。



(Replace)

Re-architect – 重新构建

折叠或拆分信息架构,这种模式在 Web 端较难实现,通常出现在一些 Native App 的场景。



(Re-architect)

Density – 内容密度

除了上述 6 种模式以外,我把内容密度也归纳为一种设计模式,Fiori、Material Design、 以及 Atlassian 都提出了内容密度的概念。Fiori 基于移动优先在移动端采用默认密度,而针对大屏幕的 Web 端则提供紧凑密度的方案,他们认为移动端手指交互所需的空间要求更高;Material 则是针对很多组件都定制了 Default、Comfortable、Compact 三种密度的视觉表现。通过被动响应式或主动控制内容密度很好的解决了不同尺寸屏幕的信息获取效率问题。

(Material Design 的内容密度示例)


值得一提的是 Atlassian 通过栅格系统的间距来控制密度而非对内容密度本身进行设计,越紧凑的布局栅格间距越小,这看上去很合理,却很容易造成内容密度增加的同时整体信息获取效率反而降低的问题。Material 也有关于栅格空间的定义,但在内容密度的处理上和 Atlassian 恰恰相反,它认为高密度内容适用更宽松的栅格空间,相对是一个更合理的设计。在信息密度的问题上,我们的核心目的其实是提升信息效率而非单纯提高视觉密度,因此解法上需要更完善的考虑。

(Atlassian 与 Material 的栅格密度对比)


实施模式

实施模式是指设计体系为实现具体设计方案而定义的一系列基础规则、解决方案或技术手段,经过整理总结为相对尺寸单位、屏幕断点、弹性布局、栅格系统 4 个方面。

Rem – 相对尺寸单位

几乎所有应用于 Web 的设计体系的技术方案中都采用 rem 相对单位,Material、Fiori、Carbon 和 Lightning 均沿用了浏览器默认的 root 尺寸,即 1rem = 16px,Alta 默认采用是 14px 的规格,并允许基于不同应用选择 12px 或 16px 的规格,默认情况 Alta 采用更小规格的单位会在小屏幕电脑上有更好的表现,这也许和他们的产品特性相关。

相对尺寸单位是非常具有实施价值的,它使产品能在保持信息节奏的情况下根据不同的情况等比例缩放内容,这使得设计能更方便地调整内容密度,或许还可以配合 Media Queries 解决部分跨端的尺寸适配问题,且几乎没有前端成本。

国内的前端业界包括我们自己的前端同学更多将 Rem 运用在移动端,主要为了两个目的:方便计算尺寸、在不同宽度的设备上等比缩放内容,这样的用法是出于前端工程师解决屏幕兼容性的一种技术手段,在使用上本身也存在一定争议,而在响应式设计领域我们还没有发挥出 Rem 应该发挥的作用,甚至很多设计师还并不了解相对尺寸单位的使用方法,广泛应用 Rem 能为我们带来哪些实际价值是接下来需要继续研究的。

Breakpoints – 屏幕断点

屏幕断点是响应式设计的基础依据,它决定了我们要适配到什么样的设备或屏幕规格,并通过 Media Queries 这样的技术实现不同 Breakpoint 条件下的不同 UI 表现。一般情况 Breakpoints 都是基于 Phone、Tablet、Desktop 的维度来设计的,包括考虑了移动设备的横评竖屏情况,关于详细的规格设置其实并没有太大参考价值,设计体系都是根据自身定位以及设备覆盖的情况来制订的,例如 Material 的断点在低分辨率范围分得非常细,是因为 Material 主要服务的 Android 平台有着数量繁多的设备分辨率。在满足自己需求的前提下,屏幕端点不需要太多,无论怎样基于数据驱动的屏幕断点设置将会是一个更科学的方法。


(屏幕断点分布) 

Fiori 的断点设计比较有意思,在设计文档中仅有基本的布局规则,没有明确的 Breakpoints 规则,Fiori 对于不同的组件会设计不同的 Breakpoints,例如在 Table 这个组件中定义了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的规格,而在 Form 的组件中,Breakpoints 变成了 0 < 600 < 1024 < 1440 < ∞,从这点上看出 Fiori 认为不同的组件有不同的表达模式,因此应该针对性对组件进行优化。

(Fiori 的 Table 组件适配情况)

(Fiori 的 Form 组件适配情况)


Flex Layout – 弹性布局

Flex 布局是 CSS3 提供的强大布局能力,从更自然更具语义化的角度实现界面元素的自适应。应用于 Web 的设计体系基本上都在组件代码里广泛采用了 Flex 布局,Lightning 还将栅格与 Flex 布局结合定义了自己更完善的布局方法。在响应式设计中,Flex 布局通常结合 Breakpoints 使用,在两个 Breakpoints 之间让界面做更平滑的过度。除此之外其它平台也都有类似的弹性布局能力,例如 Fluent 在 windows 采用 XAML 构建布局系统。

无论是 Flex 还是最近兴起的 Grid 布局都是 CSS3 的基本布局能力,响应式设计要解决布局的问题将会深度依赖这些基础技术手段,本篇不进一步展开。

Grid System – 栅格系统

栅格系统是所有设计体系必备的,我们通常将页面横向分为 N 列,定义每一列的尺寸与间距,这为界面布局提供了一致性和成本便利。传统的栅格系统在响应式方面的应用主要是结合 Breakpoints 与一些 Responsive Token 来实现的,通过给 UI 元素指定不同的栅格数来决定他们分别在不同屏幕下占多少列,同时一些设计体系还提供了可见性相关的 token,来控制界面元素在不同屏幕的显示与隐藏。

Fluent、Fiori、Lightning、Material 以及大多数设计体系都采用了 12 栅格系统,因为 12 的因数够多,能满足足够多的布局细分同时又不至于太复杂,Carbon 的做法更加 geek 一些,他们的「2x grid」采用了 16 栅格系统,布局粒度更细但放弃了 3,6 这样的因数。 Ant Design 为了满足复杂的业务情况,采用了 24 栅格系统,24 栅格提供了更高的灵活性的同时,也大大增加了复杂度,面临栅格系统的响应式设计 24 栅格是否适用还有待商榷。

另外 Material、Carbon 还明确提出了「Fluid Grid – 流体栅格」的概念,核心思想是在较小的屏幕上降低栅格数量,将多余的栅格自动折行弹性布局。


(Carbon 的栅格定义) 

在屏幕尺寸变化时,栅格主要有两种响应模式:Fluid、Fixed


(Fluid)


(Fixed) 


这种将栅格系统与弹性布局相结合的方式基于一些简单的规则设置,在不需要特定响应式的场景中不再需要指定繁琐的 token,且能满足大部分高频且通用的情况,在一定程度上降低了成本。


组件应用

除了通用的响应式规则以外,设计体系在具体组件中的响应式方案还有许多值得挖掘,能为我们的组件设计提供参考价值,本篇不再一一展开,仅提两个典型的应用情况:

框架

(Carbon 的框架设计)


框架算是一个特殊的组件,在不同的设备中界面框架的适用有非常大的差异,几乎提到响应式的所有设计体系都给出了框架响应式方案,例如 Alta 将界面框架分为四块,以 Off-Canvas 和 Reposition 两种方式在不同尺寸的屏幕中显示或隐藏以及通过特定的方式展开或呼出。

通常情况下设计体系的框架组成按形式可以分为:

  • Header – 通常情况下常驻

  • Sidenav – 分为左侧右侧两种情况,一般用于放置导航,在不同设备会有展开,收缩,隐藏三种状态

  • Content – 内容区,通常由 Grid 控制布局

  • Footer – 如有,固定在页面底部

  • Float – 浮动框架,用于临时状态,通知或弹窗等

设计体系通过对框架的定义,以及控制不同部分基于什么样的模式响应屏幕尺寸来实施对框架的响应式设计。


(Material 的响应式框架) 


组件

Fluent 或 Material 在设计文档中更多基于基础的网格,布局,设计模式来阐述通用性的响应式规则,因此他们的响应式设计有非常好的延续性,组件的响应式方案基本上都遵循这些规则。

而 Fiori 以及 Lightning 在通用性响应式设计模式上的定义上没有那么全面,他们侧重于在组件层面对所有组件都考虑了针对性的 Responsive 或 Adaptive 的方案。例如 Fiori 在响应式表格的组件里,在桌面端与移动端分别是 table 和 list 的模式,这个方案并不是通过全局抽象规则得出来的,而是基于对组件的针对性设计,正如他们为不同的组件设计了不同的 Breakpoints,这种针对性也适用于特定的 UI 解决方案。

(Fiori 针对 Table 的响应式设计) 

在一定程度上抽象规则的同时,如果我们能够为每一个组件都考虑到不同场景的响应式,当然就会提供更精细化的体验。在一个完备的设计体系里,在设计每一个组件资产时都以渐进增强的设计策略,考虑到不同的设备及屏幕适配是非常有必要的。

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

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



文章来源:站酷  作者:Ant_Design

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

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


JS实现数组去重,显示重复元素及个数的方法示例

前端达人

本文实例讲述了JS实现数组去重,显示重复元素及个数的方法。分享给大家供大家参考,具体如下:

<script>
var arr = ['土豆','土豆','茄子','土豆','茄子','土豆','紫红色'];
function qc(arr){
    var resultObj = {};
    var result = [];
    var result2 = [];
    for(var i=0; i<arr.length; i++){
      if(result.indexOf(arr[i]) == -1){
        result.push(arr[i]);
      }else{
      if(result2.indexOf(arr[i]) == -1){
        result2.push(arr[i]);
      }
      }
    }
    var obj = {}
    arr.forEach((v,k)=>{
      if(obj[v]){
        obj[v]++;
      }else{
        obj[v] = 1;
      }
    });
    resultObj.result = result;
    resultObj.result2 = result2;
    resultObj.obj = obj;
    return resultObj
}
console.log(qc(arr));
</script>

使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行结果:

双层for循环遍历


<script> var a=[1,2,3,4,5,3,5,42,0,2,3,0]
function qc(arr){

var result=[];
    for(var i=0; i<arr.length; i++){
      for(var j=i+1;j<arr.length;j++){
        if(arr[i] === arr[j]){
          j=++i
        }
      }
      result.push(arr[i])
    }
    document.write(result)
}
qc(a);
</script>

使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行结果:




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

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


转自:站长之家
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

outlook邮箱签名制作总结

前端达人



最做了邮箱签名的需求,想着之前做过两次签名也不是很难   于是开始了本次outlook签名的超长途旅行



v2-b00fc49c597e5fc2449663399df0d5df_1440w.jpg

本次总结不到位的或者不正确的地方 还请大神指正





首先手撸一个table出来 写内容


1.邮件使用table+css布局

2.邮件主要部分在body内部,所以样式一定要写成内嵌的,不能在head标签中写style,也不能外联。

如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table border="0" cellspacing="0" cellpadding="0" style="font-family:'微软雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%">
     <tbody>
                <tr>
                    <td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;">
                    <table width="100%" border="0" cellpadding="5" cellspacing="0" >
                            <tbody>
                                <tr>
                                    <td>
                                        <p style="margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;margin-bottom: 20px"><br>                          尊敬的开发者:<br>                        </p>
                                        <p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;"><br>                         “xxx”在此次的‘网络友好度测试’评级:<span style="color:#F44336;">4颗星</span>(最高5颗星)。<br>                        </p>
                                    </td>
                                </tr>
                            </tbody>
                    </table>                                                          
                   </td>
              </tr>
                
   </tbody>
</table>           

3.不能用浮动的方式定位。position:absolute;float:left;等都不行,float在qq邮箱客户端中可以识别,但是在outlook中无法识别。

4.表格的border,使用table上的border属性,可以在qq浏览器中兼容,但是在outlook中打开是没有边框的,这种情况,我么只能给每一个td加一个border,在table中使用border-collapse:collapse;来合并重复的边框。

如:

1
<table width="90%" border="1px" style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">

这样设置border会在outlook中显示不出border;

5.为了保证兼容性,需要把邮件的宽度设置为600px,最大600px;

6.少用img,因为很多邮箱客户端默认不显示图片,所以,如果需要图片的话,一定要写好alt和title;

7.背景图片,尽量用background-color使用纯色背景,如果一定要用背景图片,使用background属性,

1
<div background=”http://image1.koubei.com/images/common/logo_koubei.gif”></div>

8.邮件不支持javascript,flash以及一些特殊的标签。







因为不能浮动 定位 等  一些设计笔记复杂的内容 需要横向排列的  只能多撸几个table了 暂时我是这样解决的 比较麻烦



在outlook签名中最难处理的行高,line-height属性,outlook的这个属性只能支持在块上设置,比如可以给td标签设置line-height,但是不能给span设置line-height,否则行高设置是不起作用的。

     具体内容可以根据实际情况改写。修改签名文件后,最好关闭outlook重新打开一下,要不然outlook里面会有缓存,造成显示错误。
v2-253613b5dd4140a046b5b24bf8f3c5d7_1440w.jpg

紧接着 在图片引用上遇到了问题
https的图片调用 outlook竟然给屏蔽了, 需要用户开启权限才能显示 非常影响用户体验,

于是我就把图片换成base64格式引用, 同样遇到了问题, base64格式下 outlook无法使用style操控图片尺寸,这就使图片的宽高变成非常小,同样清晰度也大大降低, 
而且outlook在引用base64格式图片情况下  如果图片过小 还会出现部分黑边 十分的麻烦
目前暂时没找他其他的方案处理,有大神帮忙指点下
v2-185fffb8ff50312a5c65e46d36484086_1440w.jpg

最总边学边做的情况下完成了这个签名, 虽然一路坎坷 还算比较满意的完成了这次签名
记录一下 继续学习

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

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


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

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

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


原来设计规范要这样理解,早知道就好了!

seo达人


@彩云Sky:Hi,我是彩云。经常在读者群里看到有人讨论,面试时被问到设计规范相关问题,不知道怎么回答才好。是不是要回答设计规范的具体尺寸,再把各种适配规则全背下来呢?今天彩云就和大家一起探讨下,到底要如何理解并运用设计规范。

 

1.什么是设计规范?

设计规范是一个老生常谈的话题了,网上相关的文章也非常多,但我相信有很多设计师对设计规范的理解还是比较模糊,认为设计规范指的就是字体,颜色,控件规范那些,这种理解其实是比较狭隘的。

于我而言,设计规范用一句话总结就是:设计规范是针对特定产品所制定出来的一整套产品标准,包括流程标准,技术标准,设计规则等等。通过这套标准,能减少错误发生率并提高设计质量和输出稳定性。

举个例子,我在做QQ的3D厘米秀项目的时候,一开始合作方提交的设计资源正确率很低,风格也各不相同。然后为了解决这个问题,我在项目中定义了流程标准,资源标准,cp合作标准等等。通过这些规范让多个不同设计团队能合作到一起,提升了整体协作的效率和质量,这些标准就成了设计规范的一部分。

图片

可以说,每个项目因合作方式,人员习惯,落地形式的不同,所形成的规范是有区别的。所以,设计规范更应该是针对项目来说的,除非是问你Android或iOS这种已经广泛适用的平台级规范。不然是很难有标准答案的,回答更应该是一种思路的描述,比如你会如何定义一套规范、解决了哪些问题以及如何验证这套规范真的助力了产品的体验提升

 

2.设计规范的作用

1)遵守用户习惯,减少认知成本

Don’t make me think。大家都知道,好用得产品都是尽可能的减少用户思考,不断去贴近用户的使用习惯。比如在iOS系统里想返回上一个页面时,你会熟悉的去左上角找返回操作,但如果把返回操作放在右上角就会很不习惯;再比如对国内用户来说,他们习惯正确按钮用绿色,错误按钮用红色,如果你非要反过来制造所谓的差异化,用户就会感到困惑,误操作的概率也可能会大量增加。

图片

 

2)统一品牌性格

品牌性格不论是大到公司层面,还是小到具体某一个产品,都需要有一套品牌识别体系来约束,只有统一的视觉印象才能更好的让用户记住。这些品牌识别体系其实也是设计规范的一部分,在具体执行中,可以根据一些品牌核心概念规范快速做一些风格决策。

比如腾讯QQ的品牌形像风格关键词是青春、互动,叙事和干净,那么在选择画面配色的时候就可以根据关键词指导画面的选择,使得整体的画风得到统一。

图片

 

3)降低新人学习成本

这里所说的新人不单纯指刚入职场的设计新人,也包括刚参与到一个新项目的设计老手,设计规范是能够以最低的沟通成本实现快速上手。有成熟的控件资源和标杆的设计参考,就算是之前完全没做过的设计师也能搭建出一个还不错的页面。

图片

 

4)提高开发效率

有了好的设计规范,开发就能把一些常用的样式进行封装,在需要复用的场景中直接调用。这样做,一方面可以通过调用的方式减少样式代码的复制使用,提升效率的同时降低软件包体积,另一方面也可以减少不必要的工作量,方便后期维护。

图片

 

5)保证设计的一致性

有设计规范的约束,能让团队在一个既定的框架内做设计,统一大家的输出质量,从而保证设计的一致性。

 

3.怎么学习设计规范

设计规范的学习肯定不是靠死记硬背,而是要讲究方法,从我自身的经验来说,我觉得大致可以有以下2个步骤:

 

1)在新手期,多去看一些大厂的设计规范,先建立认知,不要求全部记住。把这些规范当成字典,先大致了解一遍,等真正做的时候拿不准再去查阅就好了。这里推荐几个必看的大厂设计规范官网,建议收藏。

苹果iOS设计官网:https://developer.apple.com/design/human-interface-guidelines

谷歌Material Design设计官网:https://material.io/design

微软Fluent Design System设计官网:https://www.microsoft.com/design/fluent

IBM设计官网:https://www.ibm.com/design/language

Facebook设计官网:https://design.facebook.com

蚂蚁金服设计官网:https://ant.design/index-cn

图片

其实网上很多设计规范,原理之类的文章,源头都来自于这些大厂规范,想获得一手信息,最好是自己去这些网站多看看

这也就是我为什么不写具体规范数值的原因,因为网上的资料实在是太多太详细了,写一些重复的知识实在是没多少价值。学知识的路上一定不要什么都等别人喂给自己,需要更多的主动性,这样才能提升自己的学习能力和解决问题的能力

 

2)根据自己要做的模块,有针对性的找市面上大厂的应用作为参考,直接截图标注,自己总结规律印象会更加深刻

我开始做UI的时候就这样学习的,不知道字体该用多大,间距用多大,颜色怎么用,就直接去找相类似的界面截图参考,量它们的尺寸,吸它们的颜色,然后就这样一步步的把规范经验积累起来了。

比如从QQ的动态tab页面中,我们可以借鉴到很多信息,比如列表的高度,列表左侧的图标尺寸和圆角,间隔线高度和配色,右侧的箭头大小和配色,列表文字的字号和配色,用户头像大小和结合的样式,图标与文字的间距等等。这些借鉴并非是抄袭,要你做的跟这个界面一模一样,只是参考这里面的某几个属性然后结合自己的产品综合运用,减少出错

图片

发现了吗?一个优秀的界面设计,上面的任何信息其实都可以拿来参考,就看你会不会用了。

需要强调的是,这些参考来的标准,并非是标准答案,还是要根据自己的实际项目做调整,只是至少知道一个范围,在这个范围内不大会犯错

这就像刚开始做设计时一样,去参考这些规范相当于做临摹的练习,这种临摹是需要的,临摹的过程中不断加入自己的思考,然后通过总结,变成自己的知识体系

 

4.怎样定义出设计规范

随着对设计规范理解的加深,自身设计能力的不断提高,就要开始从设计规范的使用者转变为规范的制定者了。如何制定针对项目的设计规范呢?我的经验是在项目过程中把做的好的和踩坑后的正确解法进行总结,并形成文字,积累多了就形成了规范要把每一次遇到的问题都当成是一次改进流程和规范的机会。

我自己是有随时记录的习惯,项目中一旦发现问题就会赶紧把它记录下来。有时候甚至还蛮期待出现问题的,因为出了问题才能找到优化的机会,自己也能从中找到解决问题的成就感

曾经在QQ的3D厘米秀项目中遇到过非常多的坑,然后从填坑的过程中慢慢总结出各种设计规范,去帮助项目减少错误率,提升设计质量。从最终的产出和结果来看,自身的进步是可观的,对产品的帮助也比较大,所以很值得去做。

图片

 

5.使用规范会影响设计的创意性吗?

刚掌握设计规范的时候,干活是特别舒服的一件事,因为做需求可以很快,好像拼拼组件就能完成。但稍微做久一点时间,又会觉得好像没啥进步,天天拼组件,担心影响设计的创意性,真是挺矛盾的。

其实,规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化,又要在设计的过程中给用户制造惊喜。比如,整个UI的配色和字体需要保持统一,但在一些图形,动效上可以做出亮点,让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程

 

总结

设计规范绝对不需要死记硬背,而是要充分理解并灵活使用,才能发挥它的价值。随着UI行业的不断成熟,设计工具的简单化,各种组件化资源和思维越来越普及,可以预见的是未来一般的UI界面会高度组件化,设计师单纯在界面上花费的时间可能会越来越少。

这从行业的发展来说,减少了很多体力劳动,让设计和开发有更多的时间去打磨产品细节,肯定是好事。但对设计师自身来说,省下了以前那种常规设计需求的时间后还能做些什么,设计师的价值又在哪?值得每个设计师去思考

 

原文地址:彩云译设计(公众号)

作者:彩云Sky

转载请注明:学UI网》原来设计规范要这样理解,早知道就好了!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


一篇文章搞定UI文字设计规范

seo达人


小编:Sketch视觉稿到了开发实现,字号和对应行间距会出现不一致的情况,这样会导致还原度出现问题。今天我们来讲讲如何避免这种问题以及有什么解决方法,文末有福利大赠送哦,千万不要错过哈~一起来看看一篇文章搞定UI文字设计规范吧!

 

前言

UI设计中,文字设置是必不可少的一环。

文字设置过程中涉及到字体类型、字号、字重、行高、行宽以及颜色等。

本文讲述的文字设计规范,包含以下部分:

1、类型

2、字号

3、字重

4、行高

5、行宽

6、颜色

 

1、类型

iOS设备的系统默认字体,中文为苹方,英文&数字为SF UI Text。

Android设备系统默认字体,中文为思源黑体,英文&数字为Roboto。

 

2、字号

不同的使用场景,文字的字号也不相同。文字的主使用场景分为:一级标题、二级标题、三级标题、正文和提示文字 。

文字最小字号一般为11。也有特殊情况,例如标签里面的文字,字号为10甚至可能更小。

 

3、字重

字重就是指字体笔画的粗细。字重的等级是用来标明同一字体家族中不同粗细笔画的字型。

UI设计中,常用的字重有两个,一个是常规(Regular),另一个是中黑体( Medium)。

正常文字使用常规体(Regular)。当需要突出层级展示,增加对比时使用中黑体( Medium),中黑体( Medium)常用于标题。

 

4、行高

字号大小等于文字高度,如下图所示,字号为16时,行高设置为16,那么其行高也是字体本身的高度(16pt)。

行高= 字号 + 行间距。

如下图所示:行间距距离文字上方为3pt,行间距距离文字下方也为3pt。字体高度为16pt。

行高(22)= 字号(16) + 行间距(3+3)。
在界面过程中,需要规范字号大小和对应的行高。不然的话会存在设计布局问题。

举个例子,设计一个标签时,当字号为14时,行高为20,那么为了保持视觉上字体到四周距离相同,那么上下间距为4,左右间距为8。

因为行间距的存在,不能将上下间距和左右间距设置相同。

如果行高设置为14(文字本身大小),那么上下间距应该也为8pt,而非4pt。

如下表格为iOS设计指南建议字号和对应的行高对照表。

下图是Sketch默认字号和行高对照表:

可以看出iOS建议字号行高的对照表和Sketch默认的不一样。
 
Sketch视觉稿到了开发实现,字号和对应行间距会出现不一致的情况,这样会导致还原度出现问题。
解决行高无法完美开发还原的办法有两个:
1、将行高设置为字号大小,这样的话,就不存在行间距的问题,可以保证完美还原。但是由于一倍行高会导致有些机型的字被切掉。
2、使用字体插件,这样它可以自动修复Sketch文档中的字体行高,做到Sketch中字体行高与开发中字体行高100%还原。
 

5、行宽

行宽=字体宽度+两侧距离字体的宽度

行宽作用于文本范围,如下图所示:
将行宽拉长,代表着设置了文本内容范围,文本距离右侧语音图标为12pt,表示当文字内容距离语音图标12pt时,文字打点或截断展示。 

 

6、颜色

字体颜色有两种规则定义做法,一种是直接使用色值,如图所示:

另一种做法是通过不透明度实现,通常以#000000为基准,设置不同的不透明度,如下图所示:

综合而言,使用不透明度的方法,使用场景更加广泛一些。


原文地址:Echo的设计笔记(公众号)

作者:Echo

转载请注明:学UI网》一篇文章搞定UI文字设计规范

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


iOS14:交互上这5点变化,值得细细研究

seo达人



一直很喜欢苹果系统的交互设计,因为绝大多数设计点都考虑得周到且成熟,体现出苹果作为顶级大厂的范儿。研究优秀的设计,学习他们的方案,会使我们也更优秀。下面就带大家看看,苹果系统这次更新,在交互上值得细说的5个功能点。

 

一. 桌面小组件

这次iOS最大的更新,莫过于这个桌面小组件了。
说白了,就是把app的一个功能拿出来,直接展示在桌面上。这样用户不用进入应用,也能看到需要的信息。
 
其实这个小组件,在安卓和Windows Phone上已经存在许久了。
但苹果一出手,还是能把这个老掉牙的功能做得更有精致感。
这一点不得不服。
 
沐风分析了一下,产生这种精致感,主要有两个原因:
1. 小组件的尺寸是固定的3种:
 
并且这3种尺寸的小组件,边缘都与系统中的app边缘对齐。
 
这种整齐划一比安卓的随意放任,制造了精致感。
 
2. 小组件的动效流畅,且交互细节完整。
例如,下面是待办应用Things的小组件。点击其中的“读书”事项,则小组件展开为全屏,并且“读书”事项背景色发生变化,暗示刚刚点击过。
从底部上划,则页面从全屏收起为小组件形态。
整个过程如德芙般丝滑。
 
顺提一句,这个动效中,被点击条目的背景色变化这个细节设计得十分出色:
  • 由于用户明确点击了“读书”,按照该应用里的逻辑,读书选项应该被标记为完成;
  • 但小组件本身不承载那么重的操作,所以点击后是打开应用;
  • 此时被点击的条目背景色变化,提示用户该条目刚刚点击过,是十分必要的反馈。否则点击某个条目,却打开的是整个应用,前后的对应关系不吻合。
从这个细节,可以看到Things应用设计师的用心。
小组件还有个交互细节:它们可以叠放。
当把一个同样尺寸的小组件,放到另一个小组件上方,它们就叠放在一块了。
 
完成叠放后,沐风紧接着产生了一个疑惑:叠放在一起的小组件,默认只能看到最上面的一个,而且也没有任何“多个数量”的提示。
那我怎么知道哪个组件是叠放的,哪个是只有一个呢?
经过探索,我在这里找到了答案:

当用户在不同页面之间划动时,有叠放的小组件,右边会展示出小圆点(随后立即消失),提示这里有多个小组件:

不得不说,这个细节反馈还是考虑很周到的。
   

二. 资源库

刚开始看新闻时看到这个功能,觉得这个功能没什么稀奇,体验了之后才发现它对我使用手机的帮助还挺大。
具体来说,资源库的逻辑是这样神儿的:
  • iPhone 上安装的所有应用都会被整合进 App 资源库,系统会对这些应用进行自动分类,放在不同的文件夹当中。
  • 其中第一个和第二个,一定是建议和最近添加;后面的是各种分类,如社交,工具等等。
值得一提的是,这个资源库页,排在手机所有页面的最后。也就是说,要想到达这个页面,需要在iPhone里不断向后划。
这对于我这种重度app使用者,手机里有12页应用,是有点崩溃的:
 
所以一开始,我不太理解这个功能到底解决了什么问题:
为什么要有个资源库?我要找什么应用,直接在任意屏幕向下划动,呼出搜索不就行了吗?
 
后来,随着研究的深入,这个功能真正的价值才渐渐浮出水面:
资源库可以存放那些不常用、又舍不得删的应用,提高iPhone屏幕的使用效率。
证据有2:
1. 在iOS14里,删除应用时,多了一个“移至App资源库”的选项
 
在设置-主屏幕选项中,增加了将新下载的 App 仅保存在 App 资源库中的选项:
并且还可以设置 App 资源库中的应用是否显示通知角标。
这些新的设置选项,都在帮助用户清理屏幕上不常用的应用。
 2. 如果觉得app 太多,一个个删除太麻烦,则长按主屏幕,点击 Dock 栏上方的一行白点,还能直接隐藏某个页面(团灭的节奏???),同样达到简化主屏的目的。
经过以上的分析,现在我可以理解资源库为什么在最后一页了:常用的app都在前面,所有的应用都在最后的资源库里。
原来是按照使用频率分的。
懂了。
 

三. 权限使用提醒

iOS14对用户的隐私进行了升级式的保护:手机里的应用在使用手机的哪些权限,现在变得更一目了然。
比如,当我在用微信语音时,发现屏幕右上角多了一个橙色的小圆点,从小圆点位置下滑,则展示了“麦克风icon + 微信”,提示微信正在使用麦克风。
小圆点占据一行,略显孤单。
但从前后的逻辑来看:权限使用详情(“麦克风icon+微信”)只能展示在控制中心,而控制中心又是从右上角向下划动后出现。
所以小圆点展示在右上角,是必然的合理选择。
同时,权限的提醒又不会做得太重,所以展现形式上就是一个小小的圆点。
 

四. 来电提醒轻量化

过去几年,iPhone一直只有全屏来电模式。来电默认拥有系统最高优先级,但这导致大家在玩游戏时,会被来电打断,影响了用户体验。
此次 iOS 14 更新,加入了来电提醒的通知栏模式。
当 iPhone 处于锁屏状态时,来电和之前一样,会全屏显示;
当手机是正在使用状态,来电则会以顶部通知栏的方式呈现。
另外,如果不想接听,也不想挂断,将通知栏往上一滑即可忽略,对方还是处于拨打状态,而你完全不受影响。

 

五. 新增的交互方式:轻点背面

此次更新,增加了“轻点背面”的操作方式。用户可以设置轻点手机背面两下或者三下后,自动执行一个功能操作。
这里沐风为大家推荐一个功能:屏幕朗读。
屏幕朗读可以把屏幕上的文章都读出来,很适合坐车、做家务、走路这些场景。解放双手,值得拥有。?
下面是具体的设置方法:
 
设置好了之后,连续敲两下手机的后背,屏幕朗读的功能就被自动激活了。
是不是很方便。
 

总结

以上为大家分析了iOS14更新中,5个交互设计点:
  1. 动效流畅、交互细节完备的桌面小组件;
  2. 帮大家清理手机屏幕的资源库;
  3. 细致的权限提醒;
  4. 轻量化的来电提醒;
  5. 使用的轻点背面交互方式。

 

原文地址:沐风与体验设计(公众号)

作者:小哥哥沐风

转载请注明:学UI网》iOS14:交互上这5点变化,值得细细研究

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


做设计有一道及格线,标准肯定是“它”

seo达人



很多设计师容易犯一个错:设计不明确

设计一旦不明确,就容易让用户产生疑惑,甚至认为出现了bug!

我的原则就是,要么不做变化,要做咱就做的彻底一点,明确一点!

我从以下方面举几个例子:

1.间距

2.大小

3.样式

4.颜色

 

1.间距

当信息内容需要区隔的时候,最常用的两种方式:

一种是加一条细细的分割线;

另一种是加一条粗粗的分割块:

我们有一次在加分割块的时候就出现了一个小失误,把分割块设定为4pt:

这样会存在什么问题?

会让用户怀疑,这是粗一点的线条?还是细一点的色块?

所以为了避免这样情况的发生,线条就细点0.5pt,色块就粗点10pt(反正稍微大一点就行),明确一点:

再比如之前有一个小案例,大概的信息是这样排版的:

不细看也没啥大问题,但是仔细观察就会发现,在间距方面有一定的优化空间。图上有六条信息,实际是三组,如果间距不做彻底,就会让人感觉是独立的六组,但如果把间距做的彻底一点:

这样就可以很明确看出,这是三组信息,而不仅仅只是六条信息。

所以要么就不分组,既然分了,就分的彻底一点!

 

2.大小

界面内信息有很多,这么多信息,有些需要强调,有些可以弱化。

很简答一个例子,有时候大字后面需要跟一个小字,如果你没区分开就是这样的效果:

这样就很不明确,到底是做了大小变化?还是出现了bug?

所以尽量把二者区分开,比如大小对比、颜色区分、粗细变化:

这样就可以很明确!

 

3.样式

前短时间有位读者朋友发我一组图标,图标源自追波,我觉得整体做的还可以,但是有一个样式上的小细节可以优化下。

整体图标样式都是有厚度的,但是邮件这个图标看起来就有些犹豫,想表达厚度,但是又没表达清楚:

图标源自追波

所以可以让厚度的宽度加大,并且把侧面的颜色和正面区分开,这样就可以把厚度更明确的表达出来。

再比如之前做过一个引导页,需要做一个影带,最开始做的是这样的:

不知道的还以为是个手表带,所以必须要仔细观察影带的特征,并将其明确的表达出来,比如两边的孔是方形的,整体材质要软一下等等:

这样表达才明确,用户才不会困惑!

 

4.颜色

下面两组颜色:

左面这组可以很好的突出一个颜色,而右面这组就很难突出某一个颜色。

在界面设计中,有很多场景下,会有多个按钮,我们需要强调其中一个,就需要采用这种彻底的对比方式:

而不是让人模凌两可,分不清主次的方式:

明确一点,用户就不困惑了。

我们再来一个例子!

其实工作上有很多优化需求都是基于“明确”这个点展开的,前一阵子做的一个排行榜奖牌标识的优化,我们看看原来的样式,就是因为颜色对比度不够,产生数字看不清的情况:

在这样的背景下,我们就可以拉大颜色对比度,让数字更清晰、更明确:

这就是基于“明确“这个点,进行的需求优化。

 

总结

今天讲的都是做设计不够明确的小案例,也是很多朋友容易忽略的问题。

ios有一条设计原则就是清晰,清晰的本质就是做的足够彻底,该强调的强调,该弱化的弱化,比如他们超级醒目的大标题:

当我们能把设计做的足够明确、足够有节奏感的时候,就可以减少一定的稚嫩,使设计更稳更成熟!

 

原文地址:菜心设计铺(公众号)

作者:菜心设计铺


转载请注明:学UI网》做设计有一道及格线,标准肯定是“它”

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

阿里腾讯设计师生存指南.docx

seo达人


经常有同学咨询我,明明尽心尽力工作,在公司考核绩效却不好,感觉很委屈,为什么努力得不到应有的回报?也有同学焦虑作品集投递出去总是石沉大海,没有反馈也不知怎么提升,今天就给大家分享一些我的思考。在星球里同样还有500+精华文章,100+设计干货,我们坚信水滴石穿的力量,请看今天的分享。

a

1.不要太把KPI当回事 

图片

很多公司都是有KPI的,但是大家应该都经历过,把项目和数据都做出了不错的结果绩效却一般,也没有得到晋升涨薪机会,反而那些能力一般,但和领导关系处的好的人升职加薪了。这是因为中国是个人情社会,很多时候,工作能力只是一方面,你的为人处事,和领导相处的方方面面都很会影响到。

图片

但我还是建议大家不要太看重公司的考核,不要觉得在公司考核一般,就否定了自己的能力。我曾经也有过绩效不好的时候,当时主管告诉我:这只是职业生涯中很小的一个坎儿,今天的绩效好坏,只是在公司这几十个人里面的竞争结果。

图片

不要过于在乎一个阶段的成败,让自己失去信心,我们更应该把自己放在大的市场环境下,看看当前对设计师标准是什么,市场对设计师的要求是什么,如何去做好,这个才是更值得我们努力的方向。让自己看的更远,不要被当前的规则束缚自己,有句话叫人挪活,树挪死。

w

2.停下来去观察生活 

图片

想问下大家,你有多久没有抬头看天上的太阳、月亮了?你每天按时吃早餐么?我想大多数设计师都是,每天早早的出门,然后匆匆忙忙到公司后开始从早忙到晚,半夜10点多打车回家。每天陪伴你最多就是sketch,ps或者手绘板,电脑和手机,我们已经逐渐被数字化了,但是请不要忘记我们是设计师,设计师是需要有洞察力,需要去观察生活的。

图片

之前在北京上班时,没事就会去国贸商场看看,逛逛香奈儿,LV等奢侈品牌店,当然我不是为了要满足购物欲,只是去看看这些奢侈品店是怎么包装的,今年流行色怎么玩,以及今年最新款包包用了什么元素,有木有一些设计上能借鉴的。

图片

这是LV之前一组店内海报设计,然后我在网上找到了高清图,我们是不是可以学习下他们的板式、构图、字体,以及他们为了体现奢侈品调性是怎么做的,假如今年你要做一个电商设计,需要设计出高级感,同样也可以去学习下他的配色、字体,以及整体元素运用。

图片

同样这组设计,是我之前在旅行时候看见的,他们将LV品牌做成了一个爆炸的效果,再结合彩虹渐变颜色,显得非常高级,那这些我们是不是也可以运用到营销页面中去。

现在的我们设计思维大多被电脑,数字化限制,当没有灵感的时候,建议设计师可以出去看看摄影展,大牌店,美术馆,或许灵感就在你身边。

图片

之前有人问乔布斯苹果是如何创新的,乔帮主很有洞见:他并没有死磕创新这个字眼。他理解的创新,是一种整合能力。所以作为设计师,我们需要多去观察生活,观察生活中的设计,让自己不要被数据时代给吞没。

q

3.早期作品再做一遍 

图片

相信有很多设计师有这个困惑,工作久了,想找工作,发现平时项目根本拿不出手,要么风格太旧,要么当时设计受局限,导致上线实际页面惨不忍睹,拿这些作品找工作,肯定没有什么优势。那么为什么不可以重新再做一遍呢,这次你做3年前的作品,是不是能更快,更准确,同时能比之前的风格更成熟呢。

图片

dirbbble上有个设计师就在不断更新他之前设计的redesign,同样需求今天重新再设计,在功能和设计细节上再创新。

图片

你们公司之前的官网,VI,网页,线上线下都可以拿来当需求重新再做一遍,做的时候抛弃一些限制,目标简单化就是要做的更好,那么做好后,是不是就可以和之前项目从网站,品牌到线上线下包装成一个整体,放在你的项目中去。这样不就有完整项目作品么?是不是比没有目的的概念练习要好呢。而且面试时候,你也能说出他的背景和项目改版原因。

w

4.多听听其他声音 

图片

勇敢晒出你的作品,让你的作品得到反馈,很多设计师不敢公开发表自己的作品,害怕被人耻笑质疑,越是不敢发,你得到的反馈越少,从而你的设计进步就更小了。做设计很容易陷入自嗨状态,今年画了一个很有质感页面,然后就觉得自己很厉害,自以为是,须不知,这个风格或许过时了。

图片

有时候我们也会掉进设计误区里面,当别人有设计建议过来时,容易反弹不接受的情绪,我见过很多初入职场的设计师,他们做设计前不和领导对焦方向,就开始投入去设计,费尽力气,结果设计评审被说方向不对,需要推翻重做,然后就开始有更严重的反弹情绪,觉得领导不懂设计,不懂审美,否定你的劳动成果。其实不是,很多时候,是我们忘记寻求反馈,忘记寻求他人意见,掉入设计旋涡里面了。

图片

正确做法应该是:尝试从对方视角去提出问题,看看你是否能给出合理解释,这样的好处是能帮助你更全面的审查设计稿。设计完成后,先拉产品来对,看看产品逻辑是否很好的传递出来,设计目标是否通过视觉体现出来;再找交互对,看看交互逻辑,页面跳转有木有问题;再找其他设计师看,看你的设计是否在公司大的设计框架内,是不是和主流设计趋势吻合;结合多方面意见进行权衡。

e

5.学会捍卫设计,经得起捧杀 

图片

特别设计是一个很感性的职业,任何人都可能对你的作品指手画脚,如果没有一个强大的内心,是很容易被打击到的。从你做设计那天开始,就你要让自己内心变的强大。

遇见不懂设计的对你设计提出一些很不合理的指点也是很经常的事,这个时候需要做的就是每个设计元素都能解释出来为什么?为什么用这个颜色?为什么用这个版式?为什么要这样设计?只要你都能说出原因,他们才会慢慢认可你的专业性。

图片

阿里有句老话,要做一个皮实的人,经得起捧杀,也经得起跌倒。无论做设计也好做产品也好,包括我写文章也一样,总是有人吐槽或者丢锅,我们要做的不是怼回去,而且心态开放,只要对方说的有道理,就去接受,如果没有道理就忽略。你心中要给自己建立一道网,不要让这些不合理的声音影响到自己。

图片

当然,假如你职场一直顺风顺水,加薪升职无压力,无所不能也不都是好事,天天被同事喊大神,大佬;那你可能会失去自我变得骄傲自大,有朝一日出去后被社会打击的体无完肤,所以学会让自己变得强大,同时也要让自己有过滤外界干扰的能力,这样你才能成长更快。

z

6.逆向思维思考现状 

图片

今年疫情原因,工作难找,经济也不太好,大家都很担心裁员或者工作踩坑。包括我自己,裸辞做设计内容,都是一个未知数。那么我们如何保证不被裁员,如何提前规避自己呢,这里一个方法分享大家。

图片

假如说今天你被裁员,你觉得会是那几个原因?提前在纸上把这些原因写出来,比如:

1.不会看数据

2.不了解业务

3.不会动画,设计风格太单一

4.不会和领导搞好关系,和同事关系太好……

提前把未来会发生不稳定的因素写在纸上,然后尝试去提升去解决。让自己变的强大,这个方法不仅仅可以用在设计上,在商业上,生活上也是如此。比如,你工作后一直单身,如果你一直找不到对象,你觉得原因是有那几个?是因为社交圈子太少了,还是平时不爱说话,还是什么原因,那么有这个逆向思维后,我们就可以去用行动改变,来最终改变结果,希望这个逆向思维可以帮助到你。

f

7.招聘网站是找不到好工作的 

图片

我工作10 年,从月薪3000到百万年薪,除了刚毕业那会找工作依靠招聘网站,其它几乎都没有通过网站找,简历海投,每一家公司都是同一份作品集,这不是投简历,是买彩票。

如果你对某一家公司感兴趣,就应该去找到这个公司的设计师,去走内推,比如通过脉脉,社群,或者QQ,站酷上这个设计师留下的方式,总之,只要你想找,都能够找到,然后去找他帮你内推。

图片

你以为HR在招聘时候,是打开一个招聘网上从上到下看简历么。你错了,HR一般是筛选学历之类的关键词,比如阿里招设计师,会优先考虑海外背景、美院,然后一些知名互联网公司,再通过筛选栏,挑选符合需求的候选人。

筛选完可能就只剩下10份简历了,有的招聘网站是可以通过设置自动推送,符合条件的人选才会发到他的邮箱里,如果你的作品集没有他要的关键词,即使你投再多次,也不会被看见,所以通过企业内部人员推荐的简历,俗称内推,通过概率比海投机会至少大很多倍。

图片

所以,要去打开你的社交圈子,今天我们不讲破圈,我们先在自己圈子里面把人脉积累好,大的公司就那么多,现在很多大厂设计师也会写公众号,发站酷和UI中国,你想联系一个人其实是很容易的,只是一定要注意,让别人内推的前提是你作品集足够专业,人家有推荐的价值,不然会消耗对方人脉。

图片

另外一个小技巧,我相信很多设计师加了很多大佬,平时不去维护,也不说话,那你这个时候找人推荐是很唐突的,加了人家后,如果不知道如何开口,也可以间接多点赞朋友圈,多评论混个脸熟的方式,平时以请教帮忙的方式去沟通,提问也是种学问,记得对方帮助你后,发个红包,或者请喝杯星巴克,这样礼尚往来增进沟通建立联系。

·

8.失败是最好的老师 

图片

我们做设计没提升,通常是因为不知道做不好的原因在哪里,很难从中去进行改进。在心理学中有一个犯错学习法,当你犯错的时候你会对这个错误记忆非常深刻,如果加以纠正对这个犯错的几率就会少很多。

所以,在我们平时的训练中,不要担心犯错,犯错也不要怕别人知道,要敢问,才能让我们更好的解决问题。另外,做设计难免会出错,但有些错误是可以修改的,完全不用慌,后面去改着即可。

r

9.成为一个能打的人 

图片

有很多同学和我说,刚去一个公司,感觉和团队很难融入,很难融入我觉得是社交能力不够,你和大家关系处理不好,情商不够高。我早期工作也是这样,性格很内向,怕吃亏,怕领导,平时吃饭大家都不叫我,平时团建能躲开就躲开。结果呢,绩效好没你份,加薪升职和你没关系,每天干着最苦逼的活儿,最后还得当背锅侠。

图片

人和人之间的关系,都是靠自己实力争取的,靠一个一个牛逼项目证明出来的,世界本身就是弱肉强食。换到职场上更是如此,如果你专业不够牛逼,技术不够厉害,那你就很容易成为跑龙套的,相反你实力够强,再不合群,性格再差,大家都能容忍你。

图片

之前公司有个同事,性格比较孤僻,平时不怎么和人说话,能力却很出色,平时的设计总是新潮大胆,比如做出很多水晶效果的界面,比如做出超复杂的变形金刚设计;当时公司一些很出彩的首页效果图就是他设计出来的,这样的人在团队理所当然受到重视,原因就是:实力。

x

最后 

在职场上要成为一个能打的人,就应该让自己变的足够强大,让那些看你不爽的人,把不爽咬碎了,吞肚子里。

原文地址:我们的设计日子(公众号)

作者:sky
 

转载请注明:学UI网》阿里腾讯设计师生存指南.docx

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

详解|图标设计,精致的体力活儿!

seo达人


对于一套图标来说,能让用户记得住,源于图标的与众不同;而能让用户觉得有专业感,其实是源于图标的整齐划一。图标设计本身也有自己一套规范,在设计图标的过程中遵循一定规范去工作,不仅可以使图标看起来更美观,而且还可以体现出设计师的专业和价值。作者在本文中以1024px下的设计规范给出详细的说明和解释,欢迎大家讨论。

 

很多设计平台都推荐设计师在 1024 X 1024px 的网格中绘制组件,且圆角的大小保持 8 的倍数关系。例如 Ant Design 给出的图标绘制网格规定:

图片

关于图标设计,你大概也有思考过这样的问题:

  • 为什么图标要使用 1024 X 1024px 的网格进行绘制?
  • 设计页面的时候,如果需要的图标大小是 16 X 16px,为什么不推荐直接使用 16 X 16px 的网格绘制图标呢?

对于这类问题,本文解答如下 ——

 

1 . 可以「精确」绘制细节

下面这张图你可以很清楚的看到网格的用法:图中放大的圆圈中的一个蓝色的小方格是 32 X 32 px,也就是说,这个蓝色小方格里面还是一个 32 X 32 的格子盘:

图片

你可以想象,当你在绘制一个图标时,其实是在一个布满了小格子的纸上进行绘制,这样做我们在绘制图标的时候可以很精确,每一个圆角的大小、每一根线条的粗细、每一个斜线的角度等等,都有严格的数量规范,以确保图标造型的统一和精确

关于图标的精确规范,我们以 Ant Design 的图标系统中的部分细节规范为例:

 

(1)圆角:

圆角的规格采取 8 的倍数原则,最常用的尺寸是 3 种,分别是 8px、16px、32px,它们之间是两倍数的关系。而图标内部空间的圆角则保持直角(0px)的处理方式。

图片

 

(2)点的直径:

点是非常常用的元素。Ant Design 对于点的尺寸选择上会保持 16 的倍数这一原则。在点的选择中常用四种尺寸,分别为 80px、96px、112px、128px。当出现特殊尺寸的需求时,会按照 16 的倍数进行延展。

图片

 

(3)线宽:

Ant Design 的线条宽度之间的关系采用 8 倍数原则,从小到大以 8 的规律递增。常用的规格也是 4 种,分别为 56px、64px、72px、80px。

图片

你会发现,在 16 X 16px 的画板中肯定是可以画出来图标的,只是图标的形状并不是单一的圆形或是方形,一旦出现多种样式的线和点,你是无法精确控制绘制的规律的。

当然,1024px 也并不是绝对的数值,你也可以在 800 X 800px 或是 960 X 960px 的网格中进行绘制,网格数量越多,你的绘制就会越精确。

 

2 . 图标造型「灵活性」更高

使用 1024 X 1024px 的网格时,可以预留有效的“出血”位置。比如,Ant Design 在 1024 x 1024px 的画板边缘预留了 64px 的出血位,也就是说,真正用来画图标的常用画板尺寸是:1024-64-64 = 896,即:896 x 896px。

图片

在图标的设计过程中预留出血位,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地,为图标赋予更多灵活性

图片

 

而如果你使用的是 16 X 16px 大小的网格绘制图标,则很难设置出有效的出血位。

 

3 . 「缩放」游刃有余

按照上文所述,当你在 1024 X 1024px 的网格中画好图标后,再将图标等比例缩小,就变成了我们通常看到的界面上的图标。通常情况下,界面上使用的图标的大小不会超过 1024 X 1024px,因此基本上都是对图标进行缩小变换,在缩小图像时可以保持锐利的边缘和正确的对齐方式。

图片

而如果你使用的是 16 X 16px 大小的网格画出来的图标,如果需要放大的场景,在图标放大之后会有很多细节无法处理和补充。

 

4 . iOS 平台标准

以苹果公司为例, iOS 7 及之后版本 iOS 的图标网格均采用 1024 X 1024px 的网格作为基准。向 App Store 应用商店提交的 iOS 应用图标必须使用 1024 X 1024 分辨率的高清图标。Retina 视网膜屏幕也为高清图标带来极佳的显示效果,更好的考虑到用户的体验感受。

图片

本文讲解的问题看上去很基础,但很多同学其实都是“揣着糊涂装明白”。绘制图标其实是一个“精致的体力活”,一套真正优秀的图标,在细节上是值得放大 10 倍来进行推敲的。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》详解|图标设计,精致的体力活儿!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

日历

链接

个人资料

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

存档