加入收藏 | 设为首页 | 会员中心 | 我要投稿 济源站长网 (https://www.0391zz.cn/)- 数据工具、数据仓库、行业智能、CDN、运营!
当前位置: 首页 > 创业 > 点评 > 正文

设计协同工作流:设计系统

发布时间:2020-03-01 19:14:44 所属栏目:点评 来源:做站长
导读:设计系统包括完整的设计价值观和原则、设计标准、场景定义 以及一套工具包,用于搭建和组合产品与服务。 为什么需要搭建设计系统?设计系统解决了以下问题: 1)设计高效率:快速了解产品设计全貌(包括设计原则、风格,样式、组件)多人协作如Google docs

对每个网站每人投票范围1-10,得分1表示“如果这是我们的网站,我就辞职”。得分10“如果这是我们的网站,我一定会欣喜如狂”。发起者考虑参与者感兴趣的视觉属性,比如:排版,颜色,密度,布局,插画风格和总体氛围。

快速将分数加起来,聚类结果。谈论得分最低的5个网站,得分最高的5个网站及争议最大的网站。发起者应该解释参与者为什么会被某个特定的网站吸引或排斥,并与团队一起解决意见上的分歧。

设计协同工作流:设计系统

3)基础构件

字体排版规范:

首先,了解产品需要支持哪些媒介:手机/平板/电脑/HMI车载屏等,其次,需要考虑如何定义Font-Color,Font-Size&Line-Height,Font-Size,Font-Family

  • Font-Color:关于安全色,如何保证文字的可阅读性,常常用的3个阅读色#333333#666666,#999999,可以通过该网站测试字体色与背景色的对比度是否能够保证可读性。
  • Font-Size&Line-Height:字号大小和行高的定义从用户特质(年龄特征、工作环境)及可阅读性来思考。(比如用户视力程度如何?是比较年轻的还是比较年长的?工作环境的光线如何?)
  • Font-Size:考虑字重级字体的粗细使用regular,medium,bold的使用与定义,字重的定义主要通过对比增加设计的层次与韵律。css支持字重与系统的字重如主light,regular,medium,bold,bolder会有差别,具体与研发调整再定义。
  • Font-Family:在项目上,了解大部分的用户使用系统及使用人群,方便系统快速识别。整个产品除了logo是vi字体,其余为web默认中英文。

设计协同工作流:设计系统

布局规范:

间距公式:

8 的倍数在 Sketch 里建立运用删格系统基于1366*768空间最大化利用y=8+8*n n>0 (eg:8,16,24,32,64px)对于诸如列表,表格,卡片,表格等常见内容区域存在一个或多个部分和面板组成的系统,这些部分共同协作以创建一致的视觉布局。

带侧边栏的≦1440像素屏幕的草图布局计算:

  • 画边宽度 – 边栏宽度 =内容区域
  • 内容区域- 边距*2 =总宽度
  • 边栏宽度+边距 = 偏移

带侧边栏的≦1440像素示例计算:

  • 1440px – 80px = 1360px
  • 1360px – 50px * 2 = 1260px
  • 80px + 50px = 130px

无侧边栏的≦1440像素屏幕的草图布局计算:

  • 画边宽度 =内容区域
  • 内容区域-边距*2=总宽度
  • 偏移 = 0 – 仅选择“居中”

带侧边栏的≦1440像素示例计算:

  • 1440px- 80px = 1360px
  • 1440px- 50px * 2 = 1340px

偏移 = 0 – 仅选择“居中”

设计协同工作流:设计系统

4)模式库

原子设计方法论:

组件的建立中,重点聊聊原子设计,原子设计方法论由五个不同的阶段共同工作,以创建界面设计系统深思熟虑的,等级分明的方式。

设计协同工作流:设计系统

原子Atoms:界面的基本元素,设计时需要考虑:

按钮的样式:

  • Background color背景色
  • Border radius圆角
  • Color字体颜色
  • FontSize字号
  • Font-weight字重
  • Font-family字体
  • Padding内边距
  • Margin外边距
  • Box-shadow阴影

交互状态:

  • Button/Primary/Default
  • Button/Primary/Hover
  • Button/Primary/Pressed
  • Button/Primary/Disabled
  • Button/Primary/Loading

大小层次:

  • Small
  • Medium
  • Large

按钮的层次:

  • Primary
  • Secondary
  • Thirdly

可扩展性:

是否固定padding值,据内容保持固定内边距自适应,或文字+图标扩展形式。

设计协同工作流:设计系统

一个好的设计系统需要设计师与研发工程师共同协作,建立统一认知的设计价值观,风格指南梳理设计原则,构建完善的组件库,协调研发规则与协作流程,立足于创建可维护的长远成功设计系统。基于未来的设计系统,创建适应性的,智能的能够感知上下文并自动结合,从而减少工作负荷,AI驱动设计。

 

本文作者:Emilychen;公众号:Design Thinker,UIUX设计师,从业6年+,关注设计思维及实践,核心宗旨:设计思维驱动下的设计沉淀。

本文素材来自互联网

(编辑:济源站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读