博文

目前显示的是 六月, 2021的博文

B端设计规范

图片
前言 刚入门产品没多久,就上手了画原型,通过学习,逐渐了解到一些B端的设计规范。在此记录下。 页面布局 一、常见的原型布局有以下4种: 上下布局 左T布局        比较适用于:Web后台产品,可以很好的展示产品的菜单导航,方便快速找到所需功能。 右T布局 国字布局        比较适用于:Web 用户产品,可以很好展示产品的各种内容,方便查阅网站的全部内容和结构。 二、设计尺寸 据统计,PC端用户屏幕分辨率占比排名前三的是:1920*1080、1366*768、1440*900。以1440来设计比较合适,向上和向下适配误差会比较小。 三、颜色 主色的选择,需要依据使用人群,目标用户,使用场景,产品属性等因素综合进行考虑,在颜色使用上B端与C端的目的并不相同,C端颜色使用更大胆自由一些,以抓人眼球为主。而B端端使用则是以辅助产品功能为主,需要遵循对比原则,提升产品易读性。 四、字体 用户的电脑一般是PC和Mac。PC的默认字体是:微软雅黑。Mac的默认字体是:平方。 1. 字号与字重 字体:选择以4为基数进行等差递增方式。 字号:默认采用偶数。 Mac 的3种规格字重(regular、Medium、Smlbold)。标题一般采用Medium,正文一律Regular,强调内容采用颜色区分(大于字重区分)。 五、分割与间距 参考现有的成熟系统以后,依据亲密性原则与格式塔原理,整理出符合现有业务的间距规范。 Tips: pt: 独立像素,iOS开发的基本单位(Point) px: 像素,设计基本都是用px来标注(Pixel),Axure 上的尺寸也是以此为单位。 亲密性原则: 彼此相关项应该靠近,归组在一起,如果多个项目之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。有助于组织信息,减少混乱,为用户提供清晰的结构。 格式塔原理: 格式塔源自德语“Gestalt”,意思为 ”整体、完形“格式塔理论也被称为完形理论。核心理论:我们习惯于以规则、有序、对称和简单的方式,把不同的元素加以简单的组织。一个不断组织、简化、统一的过程,正是这一过程,才产生出易于理解、协调的整体。 1. 横向间距 8px、12px、16px、或8的倍数 常用于组件内/组件与组件间距 2.竖向间距 2...

Chrome 常用插件

前言 Chrome:心中最好用的浏览器,目前没有之一。 换电脑时,账号的数据同步功能,再也不担心累积数据丢失问题。账号登录,数据都同步过来啦 强大的插件,覆盖方方面面。 主题美观,使用舒心。 接下来,记录下自己喜欢且常用的插件。 插件推荐 Adblock Plus         免费的广告拦截器。 应用商店地址 WhatFont         前端页面,方便查看字体相关信息。 地址 FeHelper        前端助手,里面包含若干小工具。 链接 Page Ruler Redux        前端开发者工具,量尺寸。 地址 Momentum         浏览器窗口的生产工具,可TODO、可设置基本信息、每天换壁纸。 地址 Axure RP Extension for Chrome         支持Axure rp文件预览。 地址     地址2 京价保        京东保价的一个插件,很好用。 地址