最近在读《聆听音乐》这本书。忽然觉得音乐的创作和UI设计存在着很多相似性，一些基本的创作原则是共通的。

对于音乐来讲，一个非常重要的方面就是曲式，也就是乐曲的结构，无论是流行音乐还是古典音乐，曲式都是非常重要的一个方面。从简单的二段式、三段式，到主题与变奏、回旋曲直至篇幅更大、结构更为复杂的奏鸣曲—快板曲式，其中一个重要的创作手法就是重复。我们经常可以很容易的发现，一个主题在整个乐曲中不断地再现，这种再现有时是简单的重复，但大多数时候是变化后的重复。

那么为什么要重复？一首乐曲可不可以从开始到结束完全不重复？从一段乐思开始不断地进行线性的发展，从始至终完全是新的旋律？当然可以，虽然这样的曲式运用的并不多。浪漫主义时期根据诗歌谱曲的艺术歌曲会见到这样的例子，通常把这种没有明显重复，旋律和和声总在不断变化的作品，称为通谱体。

但从大量的乐曲上来看，重复的创造手法，无疑具有巨大的价值。原因就在于重复能够让整个作品更有统一感和完整性，它更符合人类审美心理上的需求。人类会本能地对未知事物的整体进行细分，将其梳理为更小的结构，便于理解和认知。对于毫无头绪，错综复杂完全理不出结构的内容，会本能地加以排斥，如果在结构上不能很好的认知，会觉得缺乏秩序和美感。

这样的心理放在UI设计上也是同样的道理。一个好的设计作品抛开功能性先不谈，从视觉审美上来讲无疑和音乐作品一样，需要传达一种情绪和感受。当然，相较于视觉领域的设计，音乐的这种目的并不是总是那么直接，尤其在浪漫主义时期以前。而对于设计来讲，这种情绪和感受往往是力度越强效果越好。

因此，在设计方案的构思中，为了更好的表达情绪，通常先要确立一种风格，这样才能更好的为设计提供明确的方向。之后就是在大的风格框架内不断运用重复的设计手法，持续的加强设计的力度，让期望的某种情绪表达的更加充分。因此无论是排版、配色、形状还是质感，都需要不断重复。

我们以下面这个设计作品为为例，对设计中重复的手法进行具体的说明。

从整体情绪上来看，这个设计给人干净柔和的感受。这是和版式上大面积留白的不断重复运用直接相关的。突出的表现在每个信息区域的顶部，也就是它的标题部分。

拿banner下面的第一个信息区域来讲，和通常的设计相比，这里有意识的和banner区域留出了更多的间距。标题处的单行主标题和两行副标题垂直相叠，字号拉开差距，小范围进行对比增加层次感后向左对齐，在右侧留出了非常大的空白区域。

同样的，在内页的设计中也重复的运用了这样的设计手法。无论标题是向左对齐还是居中对齐，每个区域之间的留白空间非常大，但每个区域内的元素的间距都相对紧密，否则在板式上会显得过于松散，这样有张有弛的结构，形成了紧-疏-紧-疏的节奏，这和乐曲中A-B-A结构的曲式有着异曲同工之妙。

再来看色彩方案。很明显，这个设计采用了补色的色彩搭配方案，其中橙色为主色，而青色处于相对次要的位置。这样的配色突出表现在banner区域，可以观察到，图片中山崖及房屋部分为橙色，占据大约2/3的面积，作为图片背景的森林为青色，占据1/3的面积。需要特别指出的是，图片上的色彩大概率经过了后期处理，尤其是青色的森林树木，在原片更偏绿色的基础上将色相向蓝色方向调整了一些，目的是和橙色更加搭配。

页面中除了最显眼的banner图片，还有很多图片，如果不在色彩上进行重复，会让设计变得杂乱不堪，因此可以看到，无论任何一张图片，都重复的运用了这个色彩方案，拿右下角的建筑图来说，天空和建筑的部分色彩上虽然纯度很低，但明显偏向橙色。那么青色在哪里？仔细观看就能发现图片右下角部分的路面是呈青色的，面积虽然很小，但依然和整体的色彩方案保持一致。另外前面讲到的留白也在图片上得到了重复，首页的四张小图顶部都保留了纯净的天空，使得图片主角突出，并强化了干净的设计感受。但不得不说一句，内页的设计明显可以看出不如首页用心，无论在色彩的重复上还是图片的选择上控制不够，因此相较于首页，内页稍显杂乱。

除了色彩上的重复，在形状上，也可以观察到这样的重复。可以看到圆角矩形在设计中不断地出现。无论是图片还是按钮，都使用了圆角元素。相较于直角，圆角更加柔和，并且显得干净。这和我们期望在旅行中得到舒适、周到、温暖的服务的感受其实是有关联的。

从这个案例，我们可以看到，从色彩到版式，设计中应用了大量的重复的手法，无论是音乐还是设计，重复是创作中非常重要的方面。深刻的理解重复的原则，对于设计的提升是必不可少的。

美国普林斯顿大学经济学教授马尔基尔曾说过，绝大多数人这一生犯的最大错误就是没有充分利用复利。

什么是复利？简单地说就是利滚利。也就是上一年（或任何计息周期）的本金所产生的利息计入到下一年度的本金之内再计算利息。这样的计息方式威力巨大。相信我们大部分人都听说过背上了被称之为“驴打滚”的高利贷无法摆脱债务的故事。这里俗称的所谓“驴打滚”的高利贷，其实就是复利。复利的力量在于随着时间的推移，收益或者债务会越来越多，呈几何数的增长。

我们举个简单的例子来直观的感受复利的力量。如下图所示，假设你有1万元本金，按照复利年化收益8%计算，那么在第9年的时候本金就可以翻倍。而越往后，增长的幅度越来越大。到第15年，本金就可以增长超过200%。

关于计算翻倍增长，我们通常使用更简单的七二法则。也就是用72除以复利年化收益来计算本金翻倍所需要的时间。同样也可以用时间长度来推算每年的收益率，比如打算用10年时间让本金翻倍，那么就用72÷10，那么你需要在这10年中保持年化收益7.2%。

我们可以用这个公式来计算一下近10年房产的年化收益。假设一套100平米的房子，10年前房子的单价是5000元每平米，10年后上涨到18,000元每平米，房子的总价从50万元增长到180万元。那么按照复利计算的话，年化收益接近14%。这个收益率已经跑赢了市场指数的平均收益，按照复利计算下来，我们就能很明显的看到，房子就是近二十年中收益最好的投资产品。可以这么说，在中国房地产市场飞速发展的这二十多年中，我们每个普通人多多少少都主动或被动的参与了一场关于复利的投资活动。

但目前来看，显然这场活动已经进入下半场。房地产投资这条已经到后半段的鱼，也许还有肉吃，但被刺扎到的概率也在不断增加，是时候将目光转回到资本市场了。在经历了19年和20年的高收益后，21年的资本市场逐渐价值回归，在忍受了漫漫一年的寒冬后，开始进入了可以春播的时段。

而在资本市场，债券和股票是主要的投资产品，它们也都是复利的，是我们每个人都可以参与投资的，几乎没有门槛。但长期以来，我们大多数人却总是无法通过它们获得长期的复利收益。其中根本的原因就在于市场波动太大，无法做到长期持有，虽然市场长期向上，但由于剧烈的涨跌总是让我们拿不住，而一但我们离开了市场，也就错失了利用复利让财富不断增长的机会。

有人就说了，既然长期是上涨的，那就拿着呗，长期持有有什么难的？长期持有的难度有多大，我们举例来说明。

假设你非常看好一家企业并买入了它的股票，如你所愿，不到一年时间，这只股票上涨了40%，看到如此好的收益，你信心满满继续持有，认为它之后还会有更好的表现，但不幸的是随后的一年中，这只股票却下跌了近30%。你坚持价值投资，继续持有，果然随着企业经营状况的改善，第二年这只股票迎来大涨，收益接近100%。此时你开始考虑是不是需要止盈卖出了，因为很明显这只股票已经逐渐恢复走向高估，之后股价回撤的几率将会越来越大。但你最终选择了继续坚持持有，你的考虑是一方面是这只股票的估值还不算高，你觉得短期内的回撤幅度是可以忍受的，另外一方面你不想错失获得复利收益的机会。但不幸的是此后的大半年时间，股价一路下滑，伴随着该公司利空消息频出，这只股票居然又回到了三年前的价格。而你眼睁睁地看着曾经翻倍的收益化为乌有，三年的涨涨跌跌，坚持到最后坚持了一个寂寞。而这只股票的名字叫格力电器。

如果18年下半年买入，3年时间格力电器的股价又回到了原点

个股波动大，指数也不例外。拿沪深300指数来举例，2016年全年的回撤幅度接近10%。2018年股灾之年，全年的回撤幅度达到22%以上。虽然接下来的2019年和2020年上涨幅度都在30%以上，但如果我们计算一下近5年沪深300指数的复利年化收益率，大概也就是10%多一点。这样的收益率和如此巨大的波动幅度，残酷的考验着人性，没有几个人能在这样的波动面前无动于衷，保持良好的心态。而在这样的巨大波动面前，要想保持持续的年化收益更是一件非常艰难的事情。

那么我们该怎么做才能够一直呆在市场中，获得长期的复利年化收益？答案很明显，就是要降低波动。不把波动降下来，我们是无法做到长期持有的，那么又该如何降低波动呢？简单的做法就是做好股债配比。和股票相比，债券有更稳定的收益，大概每年4%左右，看起来不高，但是却很稳定，适合用来做资产打底，再搭配股票来提高收益是一个切实可行的办法。

上图是用80%的债券搭配20%的股票做出的一个基金组合，从近10年的回测数据看，收益居然跑赢了指数，年化复利收益率达到9.35%，最关键的是，相较于指数，波动非常小，这样的产品才是我们的理想产品，只有先确保了低波动，我们才能长期呆在市场中，获得长期的复利回报。如果我们还能够接受10%以内的回撤幅度，那么通过购买股票仓位再高一点的产品，比如按照股3债7或者股4债6的比例搭配。那么我们就可以在承受波动幅度只有指数波动幅度一半的情况下，获得长期年化超过10%的收益。

一定不要嫌收益太低，要时刻牢记我们不是要追求一时的高收益，而是要充分利用复利来实现资产的持续不断地增长。另外不要高估了自己所能承受的波动幅度。如果有人说能够做到回撤50%都不为所动，那只能说明仓位太轻，仓位越重意味着你越不能忍受亏损。投入100块钱你可以连账户看都不看，投入1万元你就会三五天看看，投入100万你一定会忍不住每天打开帐户看看涨跌，几个点的涨幅就会让你欢欣鼓舞，而只需要一个点的亏损你就会揪心一整天。

因此客观的了解自己到底能承受多大程度的亏损，才是制定投资策略的前提条件。而我们一般人所能忍受的最大回撤，大概就在10%，这还是在有投资经验的前提下。因此适合我们一般人的长期持有的产品其实就在从保本的存款到混合债基之间，个股、指数基金、主动基金都只是短期或者作为配置的产品，并不适合重仓。我们要明白，投资的的成败，最终是看谁跑的更长，而不是跑得更快。

在网页设计中创建背景材质通常是根据设计方向展开设计的第一步，也是确定设计基调的重要环节。虽然大多数情况下，网页背景材质是非常细微和低调的，但是由于整个背景的范围较大，所以会给人强烈的心理感受。所以这篇文章中，我会就网页背景材质创建过程中常用到的方法做一总结，希望对于大家在设计中的开头步骤能够给与帮助的参考。

一、使用现成的图案来创建网页背景材质。​

1、下载现成的图案样式，或者自己动手创建图案，关于如何自己创建图案，之前我写的一篇文章《在 Photoshop 中创建多种样式的网格背景图案》以及《在 Photoshop 中创建不规则无缝拼接图案》可以作为参考。下载完或者创建好图案之后，在图层样式中选择图案叠加即可。虽然看起来是很简单的一个步骤，但是如果有了高质量的图案样式，效果非常显著。下面是我收集的一些经典的图案文件，其中包括五类图案样式。

2、如果下载的图案色调不符合设计要求的话，可以通过图层混合模式来进行调整。比如我们想要创建浅色的背景材质，但是手头的图案样式是暗色的，如果图案叠加的混合模式为正常的话，创建出来的效果如下图：

但是我想用这款图案做出浅色的背景来，该怎么做呢？这时候就可以通过调整图案叠加的混合模式来实现。在背景色不完全是白色的情况下，一般像上面的图案，通过调整混合模式到亮光就能得到如下图的效果。

3、还不满意的话，比如想要亮度再稍微再亮一点，还可以通过新建调整图层来实现。在这个例子中，使用色阶调整图层就可以实现我们的设计目标。你还可以通过添加黑白图层来给整个背景材质去色，通过色相饱和度图层调整背景材质的色相以及明暗值。

4、通过在图案图层上方新建一个颜色填充图层，调整该图层的图层混合模式，我们可以给图案图层添加一定的颜色。比如加一点黄色进去，或者加一点蓝色。当然这里我们依然可以通过添加色相以及饱和度调整图层来给本来是灰度的材质上色，具体方法就是在色相饱和度调整图层的对话框中勾选着色框，然后调整色相的滑动块来实现。

《在 Photoshop 中创建一个布纹材质的网页》可以作为这种方法的参考教程。

二、应用滤镜来创建网页材质背景。​

在使用滤镜来给网页背景添加材质的方法中，最常见到的莫过于使用滤镜中的添加杂色命令来实现需要的效果了。应用步骤为，先将图层转转为智能对象，目的是方便随时调整滤镜值。然后应用滤镜>杂色>添加杂色命令即可，非常简单。一般来说，添加杂色时，滤镜数值的设置非常低，一般使用 1%就够了，而且效果非常好，数值太大材质看上去不够自然。具体设置如下图所示：

杂色背景效果如下图：

三、使用笔刷来添加质感。​

使用笔刷来创建网页背景材质也很简单，一般的步骤是，将前景色调整为白色，选择画笔工具，调整好大小，在新建的图层上随机添加一些笔刷效果，通过多建几个图层，调整不同图层的图透明度可以让添加的材质看上去更自然和真实。之后将图层的混合模式调整为叠加或者柔光让笔刷效果和背景更好的融合。下面的图片是添加了划痕和做旧效果的笔刷后，未更改图层混合模式之前和更改后的效果：

除了上面的做旧风格常用到这种方法外，笔刷方法的应用还常常出现在水彩风格的网页设计过程中，下面的这两个设计教程充分展示了笔刷在创建背景材质中的方法。

《在 Photoshop 中创建一个水彩风格的网页设计》

《创建一个做旧的，半透明的个人网页》

四、使用材质图片来创建网页背景​

比如我们要让网页背景看上去是纸质的感觉。当然可以通过添加不同层次的滤镜效果模拟来实现类似于纸张的材质，但是相较于直接把一张纸质材质的图片拖到文档中，通过调整图层的混合模式以及上面提到的各种调整图层来实现的话，后面的一种方法做出来的效果往往要更真实和自然。类似的还有木质的背景材质的实现。《在 Photoshop 中创建一个游戏界面窗口》这篇文章很好的阐释了这种背景材质设计方法以及上面几种方法的综合运用。

下面的截图展示了木质背景材质的效果：

五、总结​

实际上，在创建网页背景材质时，上面讲到的方法都会涉及到，只不过依据设计目标，有时只会用到其中的一种方法，比如杂色背景的话，应用添加杂色的滤镜命令往往就够了，有时却要复杂一些，可能上面的方法都会用得到。所以我们要依据总的设计目标来选择性的使用，但是这些方法不用说都是网页设计中必须要掌握的，这样我们的设计手法才能灵活多变。

从和客户沟通了解客户需求到画出草图进行构思和创意，直至打开Photoshop完成整个的设计，每一个网页设计师都在每一个新的设计项目中不断重复这个过程。整个看上去规范而流程化的工作方式似乎按部就班就能够顺利拿到让大家都满意的结果，但其实在每一个步骤中都存在难度，某一个方面没有做好，可能就会影响到最终设计稿的质量。因此在这篇文章中我就来结合自己的设计体会谈谈这其中存在的常见问题，以及我们应该如何有意识的避免或者解决它们。

这篇文章中的内容我已经在SDC的网页设计讲座中和大家谈到，这次算是对整个讲座内容的总结和归纳。关于网页设计中的问题，我总结了个人认为常见的六个，下面一一道来。

问题一 ：和客户沟通的不够充分，导致设计方向出现偏差。​

这个问题是在设计流程中出现最多，也最容易导致客户和设计师产生矛盾的问题。最终的结果是客户觉得怎么修改设计都不能让自己满意，而设计师却不胜其烦，认为客户太难说话，原因其实就出在双方的沟通上。

作为客户来说，很多时候他们对于期望的设计产品脑子里往往只有模糊的概念，只能交代给设计师一个过于粗略的设计方向，甚至有些客户提出"先做一稿出来我再看"的要求。遇到这种情况，设计师要清楚客户自己的设计需求是不明晰的，而作为设计师来说，这时就需要积极地引导客户，使他们明晰设计需求，从而避免由于双方未在设计目标和期许上达成一致，造成设计方向上出现偏差，而导致设计中大范围、不断的修改设计稿，甚至一遍一遍的推倒重来的结果。

要使双方对最终的设计都满意，就需要尽可能详细的沟通，客户和设计师之间理解程度越高，最后达成的一致性也越高，这两者是呈正相关的关系。要做到这一点，我个人的方法是在沟通的环节设计系统的调查问卷让客户作答，以帮助客户梳理、明晰设计需求。下面是我经常使用的调查问卷内容，其中需要客户作答7个问题，这些问题基本可以帮助客户和设计师明确设计方向，你也可以依据在和客户沟通中的具体情况修改或者完善这些问题。

当访问者访问你的网站的时候，你希望它们做什么？（比如购买某种产品、服务，或者展示企业的形象等）

网站的主体用户是哪部分人群？（白领年轻女性、有某方面需求的老年人等）

网站的整体风格是什么？当访问者进入你的网站，你希望他们有什么感觉？不希望他们有什么感觉？

举几个你喜欢的网站，并说明原因；例举几个你讨厌的网站，也说明原因。（请将网站链接或者截图粘贴在下方）

网站栏目有哪些？并提供具体信息内容（可粘贴在下方）

请提供网站设计的资料，包括logo，公司图片，产品图片等（打包以附件形式发送至设计师邮箱）

请提供您的联系方式。（QQ、手机或者邮箱）

问题二：跳过网站功能及信息架构上的研究，直接开始视觉创作。​

网站的功能和信息架构是网站的核心，一个网站不是单纯的让访问者去感受视觉上的美观，美观永远是第二位的，而功能性却是第一位的。一个企业网站是为了展示企业的形象、售卖企业的产品和服务；一个门户网站是为了更好的提供信息内容，一个个人博客是为了分享个人的观点，树立个人品牌等等，保证了这些功能更好的实现了之后才应该去考虑视觉上是否美观的问题。

我在之前的一篇文章《从千鸟志看网页设计中的功能性》中分析过千鸟的个人博客在功能性和用户体验方面的优点，虽然初次打开该博客并不会被它看上去似乎没怎么设计的灰白界面所吸引，但这个网站良好的用户体验却一定会让你记忆深刻。

更重要的是，网站功能以及它的信息架构对于视觉是有非常重要的影响的，这点我在《网页核心内容对视觉表现的影响》这篇文章中有较为详细的论述，在这里就不再展开了。

问题三：缺乏对网站整体风格的思考和把握，做到哪里算哪里。​

这个问题也非常常见，以下是一个设计师发给我的问题及我的答复，应该说非常典型的反映了这个问题。

"想请教你一下，一个学校的网站，客户说要做活泼一点，怎么搞呀？我设计了一个头部，我发给你看一下啊！指点一下 但是下面我就不知道怎么布局了，现在头都想大了。"

答复：这是一个没有系统的考虑整体风格而急于动手的例子。问题主要由以下几个方面：

一、布局上，Banner割裂的边缘限制了视线的拓展，显得死板而不够透气。其他元素也是大框套小框的思路。总体的布局思路没有逃脱条条框框的限制，看得出来，整个设计是思路没有打开却急于动手的表现。要做到活泼的设计，不是用一张现成的关于儿童的图片放上去就行了，要让各个设计元素往这个方向走，比如布局，比如色彩，比如质感，比如插图和图标的使用，比如字体的选择等等，所以你的问题是完全没有系统的思考这些问题，还没找到答案就急于往前走，结果肯定是刚刚开始就感觉无所适从。

二、再来说说具体的问题，Banner的设计在整个页面中通常起到非常重要的作用，是视觉的焦点，先不说你选的这个图片方向对不对，但这个设计看上去过于小气，原因是图片中的元素视觉比重都差不多，没有重点，没有主次。其次是Logo文字以及宣传语文字的设计，感觉太散、太单薄，需要加强他们的视觉比重和气氛感受。Banner底部的弧形边缘不仅没有起到给整个气氛加分的效果，反而割裂了Banner的设计，看上去很不美观。

如何避免盲目开始，途中无从下手的问题出现？很简单，画草图。虽然我个人有时候也会省略画图的步骤，但每次至少会在 PS 中做一个主页的设计方案，其中包括需要放置的信息内容、排版、色彩方案以及设计方案的说明文字。但我发现相较于纸和笔来说，这样的方式还是限制了创意的拓展。所以还是强烈建议大家在开始设计之前画草图。很难想象，不通过画草图的方式能做出来下面的设计效果。

但是纸和笔的方式也有它的缺陷就是在设计排版方面不能精确的定位元素的空间。所以为了弥补这个缺憾，建议大家使用960像素网格系统的草图稿纸。纸和笔的自由保证了创意的拓展，而不用纠缠于实现方面的技术问题。

另外，在平时的学习积累中，多从整体风格上分析优秀的设计作品是如何考虑和实现的，可以尝试从以下几个方面分析网站风格：一、概念元素：背景、修饰图形等；二、具象元素：文字、照片、插图、图标图形；三、关系元素：方向、位置、空间、重心；四、交互方式：节奏、运动方式；五、色彩方案。

问题四 ：设计过程中遇到困难，随意调整设计方向。​

画好了草图就要按照设计方向坚决执行，这样才能保证前期的创意阶段的工作不被浪费。很多设计师前期的创意构思都很有想法，但是一旦开始设计，途中遇到寻找素材或者技术方面的困难，或者突然发现某一个素材很不错，很漂亮，马上抛弃前面的整个创意，开辟一条新路从头开始，但往往做到半中间就再做不下去了，导致设计总是半途而废，情绪上不断受挫，焦躁不堪。而我们如果看过高手的设计过程，比如文子的光大银行的设计视频，我们就会发现高手从来都不轻易的改变已经设定好的设计方向，并且总能把我们看来完全用不着的素材变废为宝，从而拥有化腐朽为神奇的本事。千万不要花费大量时间去寻找完美的、拿来不用调整就能用的设计素材，能找到这样的素材的几率比中彩票还要低，而是要不断提高我们将看上去和整体设计毫不搭边的素材融合进整体设计的能力。

问题五 ：细节不够讲究，显得粗糙。​

一些设计师给我发来个人作品让我给说说建议，我发现其中共同存在的问题就是设计中细节做的不好。渐变和高光过于生硬、阴影的距离和不透明度太高、对齐方式偏差几个像素、上下左右边距距离太小、元素和背景的反差不够造成元素清晰度不够等几个问题是常见的设计毛病。这些问题虽然也涉及到技术的问题，但是最重要的我认为还是用心不够、认为做到差不多就行了的态度问题。这里我向大家推荐Dribbble 和PremiumPixels这两个网站，这其中的设计作品无论哪一个细节都是非常完美、无可挑剔的，下面是我随手从这两个网站中拿出来的作品，大家应该能从这里理解网页设计就是细节的艺术这句话的含义。

问题六 ：技术不过关，创意无法得到实现。​

这个无需多说，只有通过大量的设计和练习才能尽可能多的掌握具体的技术。但是无论是跟着网上的设计教程学习，还是通过研究别人的PSD文件也好，不能做过一遍就过去了，拿我之前翻译的《在photoshop中制作一个飘浮于空中的茂盛的"树屋"》这篇文章来说，你需要通过这篇教程掌握的是如何处理手头的素材，将其融合于整体的场景之中的思路的方法，看看高手是如何通过使用调整图层、自由变换、色彩范围选择等一系列的技术去实现需要的效果，而不仅仅是按照教程做一遍就完了，下次遇到需要自己动手创建场景的时候依然无所适从。如果你已经有了一定的PS基础，我建议多练习些图标和场景的创建，例如下面这个精致的西红柿图标和几个场景的创建，认真研究，你一定能学到很多东西。

问题​

如下图：有两个 VStack 容器，高和宽分别为 100 和 150，容器的上方是文字标题，标题下方分别有一个红色矩形和一个蓝色矩形，请用红色矩形将标题下方的容器填满，将蓝色矩形的高宽设置为容器的二分之一，放在距容器左侧 10 个单位，距顶部 10 个单位的位置。

思路​

使用 GeometryReader 读取父容器的尺寸，依此来定位矩形的位置。

解答​

struct ContentView: View {
    var body: some View {
        VStack{
            VStack {
                Text("矩形一")
                    .padding(.top)
                Rectangle()
                    .fill(Color.red)
            }
            .frame(width:250,height: 200)
            .border(Color.black)
            VStack{
                Text("矩形二")
                    .padding(.top)
                //GeometryReader会读取父容器的尺寸，然后根据父容器的尺寸设置矩形的大小及位置
                GeometryReader{geometry in
                    Rectangle()
                        .path(in: CGRect(
                            x: 10, y: 10, width: geometry.size.width/2, height: geometry.size.height/2
                            )
                    )
                        .fill(Color.blue)
                }
            }
            .frame(width:250,height: 200)
            .border(Color.black)
        }
    }
}

一、韵沣茶叶

二、金茗鼎肆

三、瓦舍

四、茶仙生

五、云里雾里

六、茶舍

七、听风

八、千家寨

九、 冬凌仙草

十、 如是·素品

十一、无杂

十二、七尺茶叶

十三、本来

十四、小的盈满

十五、茶百道

十六、千茶记

十七、藏湘

十八、茗田茶饮

十九、小茶仙

二十、茶诱惑

二十一、拾寅

二十二、壹茶

二十三、道然茶叶

二十四、黑苦荞茶

二十五、龙归山茶

二十六、同泰春

二十七、满堂红

二十八、茶说

二十九、绿歌

三十、茶日子

三十一、鸣溪茶叶

三十二、初寻

三十三、山海绿

三十四、藏心茶语

三十五、达观茶坊

三十六、德艺堂

三十七、友居茶楼

三十八、天醇茶坊

三十九、云茶商盟

四十、一杯茶

四十一、一缕清香

四十二、乌沃

四十三、一日三茶

四十四、清铧铁观音

四十五、壹拾叁月

四十六、卧云山房

四十七、茶末

四十八、GreenTea Extreme

四十九、TeaCup

五十、Kinesiska Tecompagniet

五十一、茗人名岩

五十二、Tea Lab

五十三、TeaPond

五十四、Tea Peddler

五十五、Swan Tea

五十六、DrinkDelight

五十七、Kinesiska Tecompagniet

五十八、Master Tea

五十九、Kimite

问题​

假设我们从服务器获取了一个 JSON 类型的数据如下：

{"name": "Jone","age": 17}

请使用 swift 将其转换为结构体类型的数据，其中年龄转换为整型数据，并打印出来。

思路​

首先将此 JSON 数据定义为字符串类型的数据，将其转换成 Data 型。

然后定义一个结构体类型的数据模型，使其遵守 Codable 协议，只要遵守这些协议才能进行 json 与模型之间的编码与解码。

接下来我们就可以进行讲 json 解码并映射成模型，打印出年龄值。

解答​

//将 json 数据转换为字符串类型的数据，方法是使用三个双引号包裹，属于多行字符串，引号中什么样，打印出来就是什么样，格式都不会变。
let res = """
{
"name": "Jone",
"age": 17
}
"""

//使用字符串.data()方法对字符串进行转换转换之后打印显示 32bytes
let data = res.data(using: .utf8)!

//Codable 协议其实就是遵守一个关于解码的协议和一个关于编码的协议，只要遵守这些协议才能进行 Json 与模型之间的编码与解码。

struct Student : Codable{
let name : String
let age : Int
}

//接下来我们就可以将 json 解码并映射成模型
let decoder = JSONDecoder()

//!的意思是强制解码，因为我们知道 data 中有值
let stu = try! decoder.decode(Student.self, from: data)

//可以看到，stu.age 已经成为整型。
print(stu.age)

问题​

使用 HStack 和 VStack 来实现计算器的界面。

思路​

任何复杂的界面都可以将其分解为单一的 HStack 和 VStack 来实现，计算器界面也一样，先用 HStack 将横排的按钮组合，然后再将 HStack 放入到 VStack 中。

步骤一：按照界面元素从上到下的顺序开始写起，使用 HStack 和 VStack 组织好界面。

步骤二：通过创建自定义视图 View 和自定义 ViewModifier 将重复的控件（Text()）和修饰符合并，简化代码。其中计算器数字部分“0”的样式，通过在 ViewModifier 中设置布尔值加三元运算符的方法来实现。

步骤三：由于自定义的 ViewModifier 有三种，分别对应计算器按钮的三种不同样式，还需要进一步合并，接下来使用双重数组加 ForEach 语句，并通过定义枚举数据类型将计算器按钮数据归类来完成合并。

解答​

import SwiftUI

//计算器界面的主视图。
struct ContentView: View {
    var body: some View {
        VStack(spacing : 20){
            Text("0")
                .frame(maxWidth: .infinity, maxHeight: 200, alignment: .trailing)
                .padding(.trailing, 50)
                 //系统自带的文字大小
                .font(.system(size: 60))
                .foregroundColor(Color("resule_fg"))
            ForEach(0..<calcu_text.count){ i in
                HStack{
                    ForEach(0..<calcu_text[i].count){ j in
                        CustomButton(calcu_text[i][j])
                //这里是每个按钮的视图。
                    }
                }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color("calc_bg"))
            //注意顺序
            .edgesIgnoringSafeArea(.all)
    }
}


//使用View协议，生成一个CustomButton复合视图，这个视图生成了每个按钮的内容和样式。
struct CustomButton : View {

    let type : CalcButtonType

    init(_ type : CalcButtonType) {
        self.type = type
    }

    var body: some View{

        Text(self.type.text)
            .modifier(CalcModifier(type:self.type))

    }
}


//使用View协议，生成一个CalcModifier复合修饰符来修饰每个按钮。
struct CalcModifier : ViewModifier {

    let type : CalcButtonType
    //让结构体的类型为枚举型

    func body(content: Content) -> some View {
        content
            .frame(width: 80,height: 80)
            .font(.title)
            .background(self.type.bg_color)
            //从固定的样式，变为动态样式
            .foregroundColor(self.type.fg_color)
            .cornerRadius(40.0)
    }
}


//使用枚举类型数据，对复合修饰符和内容进行操作。
enum CalcButtonType{
//因为要给按钮设置三种样式，那么将之前数组类型的数据定义为枚举型，更方便使用。

    case number(_ text:String)
    //number是枚举的成员，关联值是一个字符串类型
    case calc_opterator(_ text:String)
    case calc_s_opterator(_ text:String)

    var text : String {
    //定义一个属性，这个属性直接返回text.

        switch self {
        case let.number(text) :
            return text
        case let.calc_opterator(text) :
            return text
        case let.calc_s_opterator(text) :
            return text

        }

    }

    var fg_color : Color{

        switch self {
        case .number(_) :
        //如果匹配number，那么返回Color("darkgrey_operator_fg")
            return Color("darkgrey_operator_fg")
        case .calc_opterator(_) :
            return Color("yellow_operator_fg")
        case .calc_s_opterator(_) :
            return Color("s_operator_fg")

        }

    }

    var bg_color : Color{

        switch self {
        case .number(_) :
            return Color("darkgrey_operator_bg")
        case .calc_opterator(_) :
            return Color("yellow_operator_bg")
        case .calc_s_opterator(_) :
            return Color("s_operator_bg")

        }

    }

}

prefix operator %
prefix operator -
prefix operator +

prefix func % (right : String) -> CalcButtonType{
    return .calc_s_opterator(right)

}
prefix func - (right : String) -> CalcButtonType{
    return .calc_opterator(right)

}
prefix func + (right : String) -> CalcButtonType{
    return .number(right)

}
//将数据定义为枚举类型。
let calcu_text : [[CalcButtonType]] = [[%"AC",%"+/-",%"%",-"+"],[+"7",+"8",+"9",-"x"],[+"4",+"5",+"6",-"2"],[+"AC",+"+/-",+"%",-"2"],[+"0",+"+/-",-"="]]


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

好的 Logo 设计最重要的方面不是看视觉上多么漂亮，而在于在表意上是否足够准确和直接。准确要求抓住产品和概念的特点进行抽象和提取，而直接则要求以简单直白的方式表达，要让人能看得懂，起码稍动脑筋就能明白。

就拿下图苹果的三个应用程序的图标举例来说，这三个图标视觉上看来都非常漂亮，细节很丰富，拟真感很强，但如果从表意的角度上来看的话，Numbers 的设计要优于其它的两个图标设计。虽然其他两个图标在概念上也基本抓住了应用程序的功能诉求，但还略显模糊，尤其是 Pages 墨水和钢笔的设计。

当然，虽然我们强调第一位的表意上的准确，但是视觉上的准确和美观也并非可有可无。这篇文章里，我收集了 33 个以圆形为基础的 logo 设计，虽然并非全部了解其中所表达的含义，但是起码在视觉设计上能给大家以启发和帮助，让我们看到如何在以圆形的基础上进行 Logo 的设计创作。

问题​

创建如下图所示的待办事项列表视图，并将标题数据传递到待办事项中。

思路​

每一项待办事项所包含的数据都是一样的，因此我们可以通过创建一个 class 类型的数据，其中包括字符串数据类型的标题、日期类型的时间和布尔值类型的选框，然后使用 SwiftUI 中的 ForEach 语句对数据进行遍历，从而完成数据的传递。

解答​

import SwiftUI

//让类从NSObject, NSCoder继承功能，保证下次打开APP时，数据还在
class Todo : NSCoder{

    //每一个事项的标题
    var title : String = ""
    //每一个事项的日期
    var dueDate : Date = Date()
    //每一个事项是否打勾
    var checked : Bool = false
    //i用来记录某一待办事项是列表中的第几个待办事项
    var i : Int = 0

    init(title: String, dueDate: Date, checked: Bool){
        //self.title代表类里面的title等于初始化函数里的参数title，如果这样写就好理解很多：
        //self.title = a
        self.title = title
        self.dueDate = dueDate
        self.checked = false
    }
}

//var emptyTodo : Todo = Todo(title: "", dueDate: Date())

var exampleTodos: [Todo] = [
    Todo(title: "看电影", dueDate: Date(), checked: false),
    Todo(title: "看话剧", dueDate: Date(), checked: false),
    Todo(title: "完成swiftUI", dueDate: Date(), checked: false),
    Todo(title: "完成Sketch四个界面", dueDate: Date(), checked: false),
    Todo(title: "洗锅", dueDate: Date(), checked: false),
    Todo(title: "画画", dueDate: Date(), checked: false)
]

NavigationView{
            ScrollView{
                ForEach(0..<exampleTodos.count){todoIndex in
                    VStack{
                        HStack{
                            Button(action: {

                            })
                            {
                                //左边的部分，包括蓝边、项目标题及时间
                                HStack{
                                    //蓝边
                                    VStack{
                                        Rectangle()
                                            .fill(Color.blue)
                                            //frame就是元素的大小
                                            .frame(width: 8,height: 74)
                                    }

                                    //项目标题及时间
                                    VStack{

                                        //项目标题
                                        HStack{
                                            Text(exampleTodos[todoIndex].title)
                                                .font(.headline)
                                            .foregroundColor(exampleTodos[todoIndex].checked ? .gray : .blue)
                                            //把标题挤到左边
                                            Spacer()
                                        }
                                        //时间
                                        HStack{
                                            Image(systemName: "clock")
                                                .resizable()
                                                .frame(width: 12,height: 12)
                                            Text("2020/1/21")
                                                .font(.subheadline)
                                            //不设置frame，无限大，把时间挤到左边
                                            Spacer()
                                        }
                                        .foregroundColor(Color.gray)
                                    }
                                        //padding是元素和frame之间的边距
                                        .padding(.leading,5)

                                }

                            }
                            Button(action: {

                            })
                            {
                                VStack{
                                    Image(systemName: exampleTodos[todoIndex].checked ? "checkmark.square" : "square")
                                        .resizable()
                                        .frame(width: 24, height: 24)
                                        .foregroundColor(Color.gray)
                                        .animation(.easeInOut)
                                }
                                .padding()
                            }

                        }
                        //冒号前面表示checked为真时的背景色，后面为否时的背景色
                            .background(Color(exampleTodos[todoIndex].checked ? "SingleItemBgChecked" : "SingleItemBg"))
                        .cornerRadius(10)
                        //元素内边距
                        .padding(10)
                    }
                }
            }
        .navigationBarTitle("待办事项")
        }