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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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("待办事项")
        }

每一张图片的色彩都有自己独特的个性，即使是表现同样主题的两张图片，比如秋日里森林的早晨，虽然可能都是偏褐色色调的，但色相、纯度、明度、搭配方法还是会有很大的不同，而这正是设计中从图片中提取色彩方案的魅力所在。如果将这些色彩应用到设计中的话，那每一个设计都可以做到绝对的个性化，起码在配色方面如此。因此在这篇文章中，我挑选了10张情绪上不同的图片，提取出它们的色彩方案，并进行分析，希望对于大家在配色方面有所帮助。

一、安静、温暖​

使用PS中"存储为Web和设备所用格式"的方法，将图片保存为png格式，颜色选择为8种颜色得到的色彩方案。由一组不同亮度、中饱和度的黄色和一个中饱和度和亮度的黄绿色搭配而成，给人安静、温暖的心理感受。

二、柔美、春天、女性​

花团锦簇、春意盎然的画面由两个明度偏低的黄色和一组明度较高的紫红色组成，这种色彩方案属于跨度较大的近似色搭配，两组不同的颜色在色环上跨度越大，画面会越生动，反之会越稳重。

三、纯净、简洁​

冬日里的白桦林图片中提取出的色彩是由一组低纯度、甚至于接近灰色的、不同明度的蓝色组成的色彩方案。使用这样的纯冷色调的搭配做出的设计会让人感受到一阵阵的寒意，但同时也给人纯净、简洁的感觉。

四、欢乐、节日​

节日般欢乐的色彩方案，由一组不同层次的天蓝色加上亮度、纯度很高的红色、绿色、紫色搭配而成，属于全色相的色彩搭配方案，适合表现欢乐、愉快的气氛。

五、明亮、爽朗​

这个图片给人明亮、爽朗的感受，提取出的色彩是蓝色和橙色的互补色方案，蓝色由一组纯度、明度由浅到深的色彩组成，搭配纯度、明度都稍低一些的橙色和与橙色接近的红色。补色的色彩方案由于两种互补颜色的冲撞，对比单一色相的色彩方案要显得更加有活力。

六、自然、质朴​

图片给人自然、质朴的感受，提取出的色彩方案是一组范围从黄色到绿色的近似色，黄色纯度偏低，绿色纯度偏高，因此绿色要更显眼一些。由于色相上的接近，这组色彩方案感觉平稳紧凑，反之色相上越跳跃，会加强冲突分离。

七、安静、神秘​

即将坠入黑夜的湖面景色透露出安静、神秘的气氛。一组不同明度的紫色、一组不同明度的红色加上一个浓浓的黑色构成了这幅图片的配色方案，值得注意的是，无论是哪种色彩，在自然界中很少有100%纯度的，就像这张图片一样，色彩的纯度都在中间甚至偏低一点的范围内，这也正是为什么过高纯度的色彩我们会觉得不舒服的原因。

八、平稳、柔和​

此插画的色彩方案以白色为背景色，采用了黄色和绿色的近似色搭配，色彩饱和度偏低，整体上给人平稳、柔和的感受。

九、忧郁、复古​

偏橙的红色和偏黄的绿色的配色方案，由于色彩的饱和度偏低，好似褪色的感觉，绿色的明度较低，感觉比较阴郁，整体上画面体现出一种忧郁和复古的味道。

十、清新、富有生机​

不同明度的黄绿色组成的一组色彩，属于同一色相的配色方案，给人清新、富有生机的心理感受。