相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

中台系统基础知识- 系统布局

沉默·聆听发布于:2019-12-13 10:44 |原作者: Neo__|
沉默·聆听
天津市 河东区 建筑/环艺设计师
发私信 + 关注
简介: 本篇文章将分享Web端系统布局,从基本布局初识、网格、布局模块到栅格进行完整链路内容整合,以简单易懂的案例与大家进行探讨。



可控性:当用户看到界面时应直观有效传递内容,如界面中模块区域明确、内容组织明确、表意明确都能使得用户快速理解。界面需要简单直白,让用户快速识别,减少用户记忆负担。

3、适配方案

在设计过程中,为了减少设计师们的日常沟通和理解成本,在设计内部我们统一了一套设计画板尺寸为1280。经过我们官方调研得出在中台系统中用户使用的电脑屏幕主流分辨率分别为:1440*900、1366*768、1920*1080、1280*800,而1280是主流分辨率中最小且最为保险的的一个尺寸,在设计页面时设计师如果能够在1280尺寸下,缩小宽度或拉升页面宽度都能保证没有遮挡或挤压问题,那么设计是合理的。在我们的规范中页面再小于1280时需要吊起系统的横向滚动条。在中台系统中考虑到用户效率问题很少做响应式,所以常规情况下设计师会限定界面的一个最小值。如果设计师把画板设置为1440或者1366时可能会存在其在画板中页面大小正好合适,但是页面上线以后缩小浏览器可能会发生遮挡或挤压的情况。所以我们建议设计师们使用1280宽度画板画图。

中台系统基础知识- 系统布局 飞特网 设计理论

4、框架

首先先分析一下界面框架,我们将页面的用户操作行为进行层级区分。我们至下而上将元素进行层级分层,目的是把用户界面模块化。界面可分成背景区域、内容层、全局控制层、内容弹层,每一层都具备独特性,将界面中所有的信息层级提取分类并且按结构属性分层,目的是能够使得页面视觉和交互逻辑符合用户的习惯认知。之前我们有提到过视觉层次、格式塔理论和信息框架,设计师在创建这一步的时候可以用来指导搭建一套合理的页面信息层级,一个内容模块都属于一个容器,容器可以承载各种内容元素。

中台系统基础知识- 系统布局 飞特网 设计理论

4.1 背景层

背景层样式固定,在界面中永远置于界面底部,并且一般会给予背景层中性色,作用是方便突出内容层和全局控制层。

中台系统基础知识- 系统布局 飞特网 设计理论

4.2 内容层

视图结构中最核心和复杂的一层,他与业务强相关,内容层的容器承载了业务场景的用户需要获取的核心信息以及辅助核心任务的操作。容器承载了内容,从Material Design中的Elevation(海拔)概念中可以了解到,它属于第二层级内容,基本布局结构有平行结构或者父子结构。如下图卡片属于容器,卡片中承载了数据图表等内容,整个卡片+内容就属于内容层。

中台系统基础知识- 系统布局 飞特网 设计理论

4.3 全局控制层

全局控制层我们定义他在内容层之上,属于页面第三层级内容,一般在业务场景中对整个网站的控制以及导航功能如:Header menu、Sidebar menu组件,如下图中Header menu浮在内容层之上。

中台系统基础知识- 系统布局 飞特网 设计理论

4.4 内容弹层

当前任务或者内容相关的临时出现层,优先级高于内容层,一般承载当前需要临时处理的任务或者需要进行内容补充说明等功能。如:Modal(Dialog各个平台叫法不一致)、Tooltip、Popover、Notification等组件 。其中Modal是以滑出或者弹出的形式展现给用户。Modal它包括两种类型,一种是模态内容层不可操控,被蒙版遮罩禁用,比如在业务中需要较为聚焦的分支流程操作时使用。另一种是非模态,吊起弹出层后不印象内容层操作。当然,Tooltip、Popover、Notification都属于非模态,反馈较轻,不干扰用户使用界面。如下图的页面中的内容弹层使用了Popover,在次页面它的功能就是加以补充说明。

中台系统基础知识- 系统布局 飞特网 设计理论

网格基础

1、单位

随着科技高速发展,屏幕分辨率也越来越多样化对于UI/UX设计师来讲必须熟练的基本知识方便日常工作所需。首先我们先了解一下屏幕中的一些单位。

【PX】pixel,像素,大多数电子设备成像的基本单元,同样尺寸的屏幕成像单元越细小、越密集的屏幕,分辨率就越高;

【PT】 point,点,这个单位,就同时出现在 iOS、CSS、还有传统的平面设计里,与px相比px是相对单位而pt绝对单位,如在设计稿中如果导出一倍图1px=1pt那么导出二倍图就是2px=1pt,它是一个绝对长度,为1/72英寸;

【PPI】pixel per inch,每英寸像素数,决定电子设备的物理显示尺寸,只有涉及到显示才有意义。该值越高,则屏幕越细腻;

【DPI】dot per inch,与PPI一致,唯一区别是它表示每英寸多少点,该值越高,则图片越细腻;

【DP】density-independent pixel,是安卓开发用的长度单位,1dp等于屏幕像素密度为160ppi时1px的长度,因此dp在整个系统大小是固定的。

【SP】scale-independent pixel,安卓开发用的字体大小单位,可以认为SP=DP。

24

好评
23

差评

刚表态过的朋友 (47 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

沉默·聆听
天津市 河东区 建筑/环艺设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计