尊敬的设计师,您有一份设计地图还没领取Recommanded by editor
1年前Publish
这份地图就是一个基础知识清单,可以帮助你快速查找一些基础的知识点


大家提出来有误的地方已经修改


1. 设计地图的初衷


很多设计平台、或是自媒体上,你都会看到很多设计基础相关的文章,但都是很细化、小模块的,当你想用到的时候又得去搜索,为了解决此问题,便想到了把所有的基础知识放在一张图中。

设计地图概念来自于运营行业的一张运营地图,把所有的基础知识集合在一张图上,可以清晰明了的展现出绝大部分相关知识点。

设计地图中的所有知识点均来自网络,来自各个设计师辛苦输出,我这里只是做了总结,真正要感谢的是那些默默分享的设计师们。

设计地图仅仅是一个抛砖引玉的制作,希望后面有更多的人输出更完整、更高质量的设计地图内容,去帮助到更多的设计师。




2基础规范


2.1 移动端设备适配

物理像素(设计师使用,也指分辨率,单位:px)
逻辑像素(开发使用,iOS 单位为pt,Android单位为dp)
倍率=物理像素/逻辑像素(常见有1x、2x、3x)

1x,一倍图,1pt=1px
2x,二倍图,1pt=2px
3x,三倍图,1pt=3px

2.2 网页删格

屏幕分辨率(目标用户屏幕情况)

列宽、水槽(常见pc端12列,平板8列,手机端4列)
( A x n ) - i = W



网页端列宽大多数情况为60-80px


水槽常见为20px
列宽、水槽宽度都不是绝对,仅常见参考


2.3 iOS规范

Flat Design
中文:苹方,英文:San Francisco,数字:Helvetica Neue
最小触摸区域 44x44 pt
iOS的开发单位:Pt(“points”的缩写,点)1pt=1/72英寸

官方网站:https://developer.apple.com

375 x 667:iPhone7/8/SE二代
375 x 812:iPhone11 Pro/XS
414 x 736:iPhone7 Plus/8 Plus/XS Max
414 x 896:iPhone11/11 Pro Max



2.4 安卓规范


Material Design
系统默认中文:思源黑体/NOTO,英文、数字:Roboto
最小触摸区域 48x48 dp,最小点击区域 24x24 dp

官方网站:https://material.io/design


主要尺寸:360x640 @3x =1080 主流机型

2.5 各平台规范地址

iOSAndroidMacOSWin-desktop appWin-UWP小程序antdesignelement




3. B端产品

基础定义:为组织或企业提供商业价值的产品或服务,也包括为个人或小团体提供服务的后台产品


OA系统(OFFICE AUTOMATION,办公自动化)


便捷的共享信息、提高协同工作效率、实现迅速、全方位的信息采集和处理,为企业管理和决策提供合理科学的依据



ERP系统(Enterprise Resource Planning,企业资源计划)


是指针对货物资源、人力资源、财务资源、信息资源形成一体化的企业管理软件



CRM系统(Customer relationship management system,客户关系管理系统)


以客户为核心、利用信息技术,实现营销、销售、服务等活动自动化,并建立一个客户信息的收集、管理、分析、利用的系统,帮助企业实现以客户为中心的管理模式



SAAS系统(Software-as-a-Service,软件即服务)


商家将系统部署在自己的服务器上,客户根据自己的需求,按照时间长短或者系统服务的多少,向商家订购对应的服务,客户不用参与系统的维护





4. 数据大屏



关键词:FUI \ HUD \  SCI-FI


图表工具:echarts、hichcharts
原生开发:HTML5、JS、CSS、WebGL、unity
第三方开发工具:datav数据可视化、腾讯云图、百度智能云等



常见的大屏有拼接屏(避免重要内容处于接缝处而产生分裂感,常见的有1.7mm缝隙、3.5mm缝隙)、LED屏等设计时需要了解大屏的物理尺寸及视频输出分辨率,如果大屏为高分辨率屏,优先选择1:1尺寸进行设计




5. 黑暗模式


黑暗模式不等同于夜间模式,黑暗模式需要满足无障碍阅读(WCAG)AA级的标准,是产品模式的一种补充。


5.1 Android系统


黑暗模式称为 Dark Theme 


背景色值 #121212



文本色值:


最高级文本:87%透明度白色
中等级文本:60%透明度白色
不可点击文本:38%透明度白色



官方网站:https://material.io/design/color/dark-theme.html


5.2 iOS系统



黑暗模式称为 Dark Mode
背景色值 #000000
文本色值(分为初级,次级,三级和四级)
默认模式:初级(#000000,100%),次级(#3C3C43,60%),三级(#3C3C43,30%),四级(#3C3C43,18%)
黑暗模式:初级(#FFFFFF,100%),次级(#EBEBF5,60%),三级(#EBEBF5,30%),四级(#EBEBF5,18%)


系统参考色:





6. 交互基本原则



6.1 格式塔原理



网络上有很多版本,这里仅采取5项的版本

1. 接近性:距离、位置相近的元素趋向于一个整体
2. 相似性:在某一方面(如大小、颜色、形状等)相似的元素具有整体性
3. 连续性:视觉上是连续的、而不是离散的
4. 封闭性:构成闭合造型的元素趋向于一个整体
5. 简单性:具有对称、规则、平滑等特征的元素具有整体性





6.2 尼尔森十大可用性原则



1. 可视性原则:系统状态有反馈,等待时间要合适。
2. 不要脱离现实:使用用户语言而不是开发者语言,贴近生活实际而不是学术概念。
3. 用户有自由控制权:操作失误可回退。
4. 一致性原则:同一事物和同类操作的表示用语要各处保持一致。
5. 有预防用户出错的措施:关键操作有确认提示,及早消除误操作。
6. 要在第一时间让用户看到:识别胜于回忆,提供必要的信息提示(可视&易取),减少记忆负担。
7. 使用起来灵活且高效:为新手和专家设计定制化的操作方式,快捷操作可调整。
8. 易读性:减少无关信息,体现简洁美感。
9. 给用户明确的错误信息,并协助用户方便的从错误中恢复工作
10. 必要的帮助提示与说明文档:无需文档就能流畅应用当然更好,一般的文档很必要,而且也提供便利的检索功能,面向用户任务描述,列出具体实现步骤,并且不要太冗长。

6.3 设计的四大基础原则

对比:避免元素太过相似,如果元素不同,就让他们截然不同
重复:视觉要素在作品中重复出现,增加条理性和统一性
对齐:页面上任何元素都不是随意排布,应当有一条明确的对齐线使他们对齐
亲密:彼此相关的项归组在一起,组成一个视觉单元

6.4 交互设计原则

菲茨定律:目标离的越远,到达就越是费劲。目标越小,就越难点中
希克定律:一个人面临的选择越多,所需要作出决定的时间就越长
7±2法则:人类头脑最好的状态能记忆含有7(±2)项信息
接近法则:当对象离得太近的时候,意识会认为它们是相关的
泰思勒定律:任何系统都存在固有的复杂性,无法减少;唯一的问题是谁来处理它
防错原则:大部分的意外都是由设计的疏忽,而不是人为操作疏忽
奥卡姆剃刀原理:如无必要,勿增实体
转向定律:0° 方向最易操作,120°方向最难操作,宽度低于14PX的Touch体验最差
帕累托定律 (8/2原则):任何大系统中,大部分的效果仅有少数几项变量决定
伯斯塔尔法则:对发送的内容保持谨慎,对接收的内容保持自由
相似法则:相似的元素倾向于被视为一个组
简洁法则:为了更方便地理解这个世界,人类会将接受到的大量信息进行过滤和简化
连通性:视觉上相连的元素倾向于被感知为具有更强的相关性
冯·雷斯托夫效应:当存在多个相似的物体时,与众不同的那个更容易被记住
帕金森定律:任何任务都会拖延,直到所有可用时间都用完为止
系列位置效应:用户更容易记住系列中出现的第一项(首因效应)和最后一项(近因效应)
多尔蒂门槛:系统需要在 400ms 内对使用者的操作做出响应,这样才能够让使用者保持专注,并提高生产效率
同域原则:如果元素处在一个具有明确边界的区域内,那么在用户的感知中,这些元素倾向于成组
雅各布定律:用户将大部分时间花在别人家的网站(产品)上,而不是你的。这意味着他们希望你的网站(产品)跟别人的有相同的操作方法和使用模式
美即好用定律:当界面被设计得足够美观时,用户往往会容忍一些较为轻微、影响较小的可用性问题
古登堡图表:当元素平均分布、性质相同,或者是设计包含大量文字资料时可以考虑使用古登堡图来协助设计版面内容。古登堡图表主要是把界面分为四个部分分别为:主视觉区(左上角)、终端区(右下角)、高闲置区(右上角)、低闲置区(左下角)

6.5 界面阅读原则

阅读模式,从上到下、从左到右,F模式,Z模式




7. 个人能力



7.1 专业能力

用户研究:访谈、用户观察、问卷、用户画像、竞品分析等
设计理论、方法:心理学、设计原则、用户体验、使用场景、体验地图等
用户测试、数据分析:可用性测试、启发式评估、数据埋点、数据基础分析、A/B测试、点击分析、页面分析、漏斗模型
用户场景的通用结构是:谁?在什么情况下?想要什么?做了什么?结果如何?他的想法如何?
执行能力:多研究竞品,学习别家产品是如何设计的
总结能力、管理能力、驱动能力

7.2 横向能力

商业、产品、用户研究、视觉、技术、运营、市场、营销等
传播能力:传播的形式有很多,设计作品、文章、视频、音频等,通过各个渠道提升自己的影响力。




设计地图


undefined

原文链接:https://mp.weixin.qq.com/s/V9cmQaTXmq2ze193t9KWgw
64
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
杭州 | 设计爱好者
Article information
文章标签
收录收藏夹
更多收录此文章的收藏夹