后端也要自学基本上的UI结构设计准则与课堂教学拳法
序言
有的是人可能将说，我是控制技术研制相关人员，UI的事他们项目组内所有其它人去念旧这个，我就行了控制技术方可。
在一天之前，我也是这么真的的，但我今天听了二进制的《给合作开发看的UI结构设计》这节课外，真的一个后端技师也是要具有一定的UI结构设计潜能的。
倚赖市售的模块库已经不能让商品维持在好用的状态了，还须要将一些结构设计原素加进进来，才能让他们合作开发的经典作品，达到一个更快的层级，给于使用者最合适的新体验。
你的项目组可能将没UI老师，也可能将有UI老师，但不一定专精，他们时常会是BizTalk相关人员，UI得出的结构设计稿通常只是动态文档，是某一可视化锐角的，很多的可视化控制技术细节都充分体现不出来，在小厂中，许多的B端商品是没现职UI配角的，后端可能将要对商品最终呈现的型态负责。
结构设计中最重要的事——交货机能
辅助工具：最合适用的Chalancon——excaildraw
他们只须要单纯粗略地的结构设计大框就能，结构设计控制技术细节能前面在补足，在结构设计UI的这时候总有一天不要忘了，他们归根到底还是要以实现需求，机能优先选择。
能使用其它结构设计辅助工具去画蓝本图（figma），但我真的做为合作开发者，简单纯单的就能，一切以方便快捷为主要结构设计单纯的、完备的机能
以MVP版机能来做为结构设计目标
MVP：Minimum Viable Product，最精简可实行商品简而言之先让格斗游戏开始，他们合作开发在做结构设计的这时候，优先选择把主要就情景结构设计完成，有迅速插值能力就能了，正简而言之不须要太多譬如，保持结构单纯，机能完备就好。
结构设计准则
结构设计准则——层级
层级——是他们可能将惟一要重视的准则
层级区分，更是他们最须要掌握的准则和技巧。
一个商品要好用，就要让使用者很容易的抓住展品重点在重点里，使用者能自在地进入沉浸式阅读，和使用的转台当使用者想探索其他内容时，ta能轻松的识别网站的次要板块还有哪些，焦点能迅速转义，并迅速沉浸辅助提示信息，精确而又不会打扰各主要就板块的呈现结构设计准则——一致性
使用者在站点的各个角落，观察到的颜色、间距、阴影、位置、字体和字重的运用，都在一套有限的框架里，一套能迅速建立起亲切感的框架内。
当页面中，主要就的可视化、视觉原素都采用同一主题色来表示时，使用者能迅速知道：
页面中哪些原素的能可视化的我须要的提示信息在哪结构设计准则——《写给大家看的结构设计书》
单纯介绍一下《写给大家看的结构设计书》四准则：
对比：如果两个原素内涵不同，请让它们截然不同重复：结构设计的视觉要素应当在整个经典作品中重复出现亲密性：彼此关联的原素应当靠近放置在一起对齐：任何原素都不能随意安放，应当总与另外至少一个 原素有视觉上的关联这四个准则其实就对应着上面的一致性和层级。
层级：就是亲密性+对比的目标，让使用者抓重点、切视线，又快又稳。一致性：就是对齐+重复，克制使用者实现所感受的尺度，迅速与网站结构设计语言建立熟悉感。结构设计体系
结构设计体系——布局
最基本上的布局技巧，内容居中放。
多列布局：
主要就内容弹性收缩（能有最小宽度），次要列固定宽度结构设计体系——间距
保证原素间有基本上的间距，是最基本上的结构设计技巧。
间距——多留白
这是一个技巧：安排原素时先大大的留空，要从松到紧的调试间距。
间距是远比色块、边框、分界线之类的更适合用来表达关联关系的辅助工具。值得多加练习运用。结构设计体系——文字
文本是站点的主要就内容载体，字体的结构设计自然也是重中之重。
结构设计体系——色彩
谁人不喜色彩？
你选择的色彩库要有10种左右的灰色度供你使用（黑–>白），要有主题色，机能色等。
要学会使用色盘，来微调，使得你的颜色对使用者使用的影响更快
注意事项：
颜色虽好，使用不当会打破页面层级平衡色盲消费不了颜色颜色在不同文化中可能将有不同的含义结构设计体系——深度
就是他们常用的阴影感实用技巧
实用技巧——图片上的层级
图片上的色块斑驳不一，难以找到合适的前景色。咋办？
增加蒙层，对比度不就上来了。能给文字加上阴影，增加文字部分的对比度，不影响整张图片。实用技巧——明晰的使用者头像
上传头像的情景，如何清晰的展示内容？
加点内阴影实用技巧——干掉分界线
阴影能替代边框，不通的背景色块也能。
间距清晰的话，也就不须要分界线了。
最后
听完了这节课真的真的挺有用的，虽然说讲的是结构设计理念，没一丝css代码在其中，可是我真的我的css潜能上升了一个层面~
最后留下这份笔记，留给以后的自己进行梳理，也顺便分享出来给更多的后端小伙伴们，让更多之前与我一样的人了解到，后端也要懂UI。
