UI及平面设计教程

释放双眼,带上耳机,听听看~!

不顾一切的向前冲!致敬黑泽明

1910年,黑泽明出生在日本东京的一个武士家庭,从小家教很严,父亲不但让他学剑道,还逼着他学书法,而他却对绘画非常感兴趣,同时也鼓励孩子们看电影。第一次接触电影是在7岁时,父亲带他看的多是西部片和武打电影。黑泽明小时智力发育较晚,上小学时一度成为老师奚落的对象,甚至要坐到远离同学的地方。不过他很快展示了自己画画的天分,并立志要当一名画家 。

1923年,正在上中学的黑泽明学习了西方绘画,理想是成为一名艺术家。期间他参加过一个叫做“无产者艺术家联盟”的组织(该组织经常谈及革命话题),并参与了《无产者新闻》这份报纸的相关工作。后来因为不想让父亲担心,而离开了该组织  。初中毕业后,黑泽明仍然热衷于绘画,甚至有作品参加全国性美术展览,17岁入选日本画界新人展“二科会”。但当时以画家为职业收入微薄,非常艰难,黑泽明对此没有信心。黑泽明必须负起家庭重担,单靠画画不能维持生计 。20岁时,黑泽明接到征兵通知书。因征兵检察官是他父亲的学生,悄悄让他免除了兵役。

1934年,黑泽明在报纸上看到PCL电影公司(东宝映画的前身)的招聘广告,就投递了一份电影论文,结果取得了面试机会,后来拜导演山本嘉次郎为师,学习导演和编剧。在山本嘉次郎的培养下,黑泽明很快从第三副导演晋升为第一副导演,并能胜任B班导演、剪辑、配音导演等工作。积累一些经验后,山本嘉次郎要求黑泽明动手写剧本。

黑泽明电影里的人物,大部份是悲观生命里的积极者,他们的价值观从来不会被现实的社会污染,当中的人物不时为更崇高的理想作出牺牲,令人伤感,但始终维护着人类的希望,是一种有份量的影响 。(导演徐克评)

黑泽明的电影大多从社会问题的角度出发,深层次地剖析原因,并且其电影中融合了丰富的社会文化和民族精神,使得其电影恢宏磅礴的画面往往蕴含了丰富的文化底蕴,从而使得其作品成为经典  。(《电影文学》评)

在黑泽明的电影中,很多人物有着激烈的情绪对抗,这些对抗场面都被赋予了张力十足、力度到位的电影语言,达到了意想不到的效果。在电影《罗生门》中,黑泽明运用纯电影化的手法揭示了真理的相对性和主观性,而每一个人物见证的相对真实性又必须由观众来作出判断。这种真理的相对性和主观性,体现在视听语言中,就是黑泽明对构图和场景的诗意性的运用 。

APP的状态栏,导航栏、操作栏,主菜单栏高度用矩形工具绘制相应高度的矩形,按规定高度做辅助线。

AI中复制到PS中的图标,复制图形可以编辑瞄点,不要复制智能对象不能编辑瞄点。

更多内容区可以用白色渐变遮罩。

UI及平面设计教程

尊敬的设计师,您有一份设计地图还没领取

这份地图就是一个基础知识清单,可以帮助你快速查找一些基础的知识点

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

1. 设计地图的初衷

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

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

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

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

2.  基础规范

2.1 移动端设备适配

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

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

2.2 网页删格

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

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

UI及平面设计教程

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

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

2.3 iOS规范

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

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

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

UI及平面设计教程

2.4 安卓规范

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

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

UI及平面设计教程

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

2.5 各平台规范地址

iOS、Android、MacOS、Win-desktop app、Win-UWP、小程序、antdesign、element

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%)

系统参考色:

UI及平面设计教程

6. 交互基本原则

6.1 格式塔原理

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

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

UI及平面设计教程

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 横向能力

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

设计地图

UI及平面设计教程
企业产品宣传册,单页

UI及平面设计教程

UI及平面设计教程

UI及平面设计教程

1. 250g白卡纸附膜,30本打印店能制作(彩色打印,墨,CMY三色黑也能接受)。小样品一般纸张,试印三次共三本。

2. 宣传册250g白卡纸附膜,100本印刷厂制作(印刷,油,纯色黑,灰,cmy必须都为0,k在0-100之间)。

3. 可以要求印刷厂彩色打印而不是印刷,印刷油混合时黑色,灰色若是彩色混合而成会脏,源文件是很深的蓝色,印刷出来可能很浅,印刷抓色不稳,所以对稿时候要求严格。背景灰色必须是单色,不然影响背景上单色的元素。

4. 同样都是黑体单色黑比三色黑细。

人已赞赏
平面设计

书籍画册设计欣赏

2020-9-11 12:41:00

平面设计

为什么我做的画面总是不平衡?

2020-9-12 16:24:09

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索