教程作品展示
第一次Ui练习作品
拿起Adobe XD，切切实实设计Ui，最终还是没有扭过自己，正式进入这个自己不擅长的领域。
之前，我面对一困局，懂Ui理念，但不必实现出来，算是懂Ui吗？
以前，我觉得算懂。如今，坚持不认为这是懂。如果是真懂，就请实现出来。
好，那我就实现出来。
照虎画猫，第一次Ui作品练习总算完成了，最大的体会，一头雾水。设计背后的太多“为什么”，糊涂得紧！
心情忐忑，发给一朋友给指点一二。
1、设计工具
设计软件是采用Adobe XD，Adobe 家族的一款轻量化设计软件，专门针对移动端Ui而设计的，比PS、AI确实要方便很多，尽管如此，Adobe XD 可以视之为一款“模仿”之作，模仿的正是Mac 平台上的SKetch。
官网：Adobe XD
2、她人点评
朋友火眼金睛，我稿件刚发过去，一堆截图立即飞回来，每一图都对应我设计中的失误，我给轰炸了半天，不死心，还是追问了一句：第一次练习，我那样子算是合格吗？
“绝对合格！”
哈哈，开心了半天。
“小姐姐”朋友明确点出，我有两项基本功要学习：第1、配色；第2、版式。
配色与版式，理念上我懂，第一次做练习时，我就试图去运用栅格系统了，结果完全不会运用，一头雾水！
第1次练习截图
懂理念，不代表会运用，纸上得来总是浅啊！
栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
（from维基百科）
栅格系统举例
直白一点解释栅格系统，就是利用页面上有规律的格子来辅助设计。
Adobe XD在这方面还比较弱，不能随心所欲“创造独特的格子”来提升设计质感。
配色先不详谈，我早就知道自己的配色较弱。
2、字体问题
第2次练习时，突然奇想，页面语言换为中文，会怎么样？那料想，引出字体这个麻烦的话题。
两个英文字体设计的基本概念
英文字体设计中，两个基本概念，基线和X高度。
基线：字母坐落在一条不可见的线上，是所有字母的基线、基础线，所有的大写和小写都是基于这条线来进行排列的。
X高度：x字高，是指字母的基本高度。这里的X，是指小写字母X。
X高度越高，字母越高，辨识度越高，反之，辨识度越低。
英文单词，组成词汇的字母数量不一，每个字母高度不一，在基线和X高度的控制下，英文字体排版，是统一中（X高度恒定），又富有变化（单词长度和字母的高度），所以英文单词自带节奏变化，视觉感非常好。
而汉字的设计，则不是这套规范，汉字是方块字，有自己独特的设计思路。
“Lato字体”下的中文
Lato字体为英文设计，放在中文上，自然不合适，所以迅速更换字体。
“微软雅黑”字体
“苹方”字体
“思源黑体”字体
综合比较，还是选用了“思源黑体”作为标题的字体。
如果要改正字体，其实就是把“纽”字的右半边“丑”字，稍微调节一下，当然调节起来，不是那么容易。
3、眼光不对
设计的特性，是带着枷锁跳舞，任何设计都有对应的限制条件。一味按照自己的思路去设计，忽视“限制条件”，不是真正的设计！
视觉上合理了，但前端技术的实现呢？
看到那个紫色的80.9吗？
那个紫色的80.9，代表那个按钮，距离右边页面边距是80.9像素，居然出现了小于1像素的距离，这不是为难小前端小哥哥去实现吗？
前端小哥哥当然可以使用比例去实现出来，但这个数字不是整数，计算比例时，会耗费更多的时间，给其他岗位的同事平添了很多麻烦，如果现实中真是这样子，不专业！
所以第1次练习时，我就试图利用网格系统来约束自己，那料想我是假懂网格系统，没有运用好！
另外一个问题，做练习时，我暂时容忍了自己，那就是眼光问题。
显然，这个Ui界面是民宿行业，做练习时，到底是以自己的眼光为主，还是以市场的眼光为主，产品是为了市场而用，自然以市场的眼光为主。
那么，民宿行业对APP、公众号、小程序之类的Ui，是怎么认知的？如果不了解，一味按照自己的喜好去设计，抱歉，不专业！
虽然Ui设计师的工作，承接自产品经理，但不了解行业，不了解市场，不了解用户，不了解行业运作基本规律，就开始动手设计Ui，估计是离题万里！
之前，我曾对一起合作的Ui设计师一再提及，不要仅从视觉角度去考虑Ui，会害了你，到了一定程度上，想提升自己的水准，可能会非常困难。
我自己呢，急着去掌握Ui设计的技巧，练习完毕，小思一会，自己都忽视了前置限制条件，这才叫：别人犯得错误，我愉快冲了过去！白痴！
国内某民宿APP截图
对比之，练习作品中的各种市场元素是否到位呢？
第1次练习到此为止，纵使一头雾水，无所谓，继续练习下去。
教程链接：https://www.xdguru.com/adobe-xd-tutorial-travel-app/
注：教程内容需要科学上网。
教程图片
小姐姐朋友对这教程的评价：
原版并没有达到极致。
so，只适合拿着它来练习使用Adobe XD，不要作为Ui练习的教程。
<第1次练习，完结>
网友评论