DIUDIU设计小学手把手教你学交互设计

DIUDIU设计小学开学啦！交互设计ABC#由浅入深教你学交互九堂课大放送细微设计，点滴感动维特根斯坦说：一切已有的哲学问题最后都是语言问题。

禅宗一向认为：事情就是事情本身，不是语言能描述的。

DIUDIU Design认为细微之处的积累是感动你我的前世因缘，“细微设计，点滴感动”是在设计中追求的核心价值，不浮躁，不急功近利，希望用一己之力一点点去改变，点滴感动终将汇成心灵的震撼！DIUDIU设计小学则是希望人人在设计中怀着稚趣的心去体会设计，从基础开始，从这里出发！对齐？这不是强迫症么#交互设ABC纸上得来终觉浅，绝知此事要躬行——陆游《冬夜读书示子聿》亲身实践，不在纸上谈兵才是深刻领悟一件事的终极武器，就像在原型中的文字、图片等对齐一样，原型本不是最终效果图，还有视觉同学的后续加工，对齐又有何用？对齐？Of course！对齐让原型更好看像上图那样，对齐可以让层级关系、信息分类更加明确，减少用户的理解时间，特别是在冗长的列表、表单信息中，对齐可以轻松减缓烦躁感对齐可以让你观察得更细微看一下上边的这三张图不同的对齐方式，第一张的图标和文字分别对齐，第二张仅对齐图标，第三章则仅对齐文字，如果你有强迫症，那么后两张则是不堪入目如果接到的设计项目是多人共用交互文档，那么严谨的对齐更为重要，因为可能你的一个细微的对齐瑕疵，别人会因没有注意到而多次复用，导致原型质量的整体下降需要强调的是：这里指的对齐可不是简单的用快捷键对齐就好，需要的是像素级别的对齐；比如涉及到文字还要考虑文字的物理空间和视觉空间的关系，重要的是视觉上对齐，当注意到这些的时候，审美水准也会逐渐的有所提升，会不自主的去观察设计中的细节总结一下对齐的秘密吧用对齐来划分层级在不同的层级之间对齐方式或许有差异，但在层级内部对齐方式多数情况下一致像素级别的对齐这个世界只有偏执狂才能生存，当做一件事做到极致的时候就是一种突破，就会站在更高的地方观察这个世界，所以，做到吧！物理对齐？视觉对齐！有时仅仅是物理对齐也无济于事，视觉对齐才会让强迫症患者稍感舒适，视觉对齐主要涉及到文字、图片、符号、按钮等元素混合在一起的时候，根据具体环境，选择合适的分层级对齐《字》让世界更美好#交互设计ABC字如其人...小时候老师不止一次的这样教育，当长大后字还是写的不忍直视，可自己却不愿承认“字如其人”，隐隐的自尊心此时在作怪，在原型中，如果有人说你用的字有问题，估计也会很火大吧怎么把字运用好呢，这里涉及到多个因素，如字的大小、字体、对齐方式、颜色等，这里先暂不考虑在不同平台的字体物理大小大小有学问，字体要规矩在上图是一个普通的评论列表，在这里需要注意的是头像色值相同且对其方式统一，是因为在视觉上比较抢眼，将这些元素首先对齐可以大幅提升整体感，其次是用户名色值相同，并且在评论列表对齐，和灰度更低的评论形成对比，让信息更具有层次，此外的按钮根据所述信息区域的不同分别进行了适配字体的大小是划分层级的一种方式，常见的便是在一个区块信息中区分标题和内容，此外字体一般一致，因为差异过大的字体会产生视觉冲突，没有整体感；在原型中常常采用一些感情色彩低的字体，比如英文的Helwoodica，中文的Droid Sans和Hiragino Sans，这些字体做为信息的主体展现形式会比较中性杂志般的对齐方式上图虽然只有一个单词，但是感觉界面并不空洞，那是因为有单词来作为视觉的着陆点，所以再空的界面，即使只有几个文字，也可以使界面在视觉变得充实，在杂志上文字信息较少时，通常也会使用类似的方式，最近看到优衣库的“AIRism”的宣传册内虽然文字、图片较多但却整齐、清晰有时会因为文字信息太多，视觉上会感觉杂乱，此时把文字信息做为一种特殊的图片来处理，灵活的对齐标题信息会产生意想不到的效果，上图优衣库将活动的解释语句形成规则的区块并放置在右下角起装饰补足的作用，不会过于抢眼增加认知压力多彩？低调！文字的颜色要慎用，特别是在原型中，尽量主体色使用灰色系，除非遇到需要必须强调的地方，比如“立即购买”“付款”之类的按钮需要强调指引总结起来，运用好“字”这个元素需要使用有限的字体，巧妙精细的对齐方式，并且将字体色彩同其他元素融为一体，自然的呈现界面将“字”运用到如火纯青的境界标志是“字如其人”....小题大做！艾伦和巨人不得不说的故事#交互设计ABC艾伦的狂野进化、三笠的风刃杀戮同巨人形成了一部完美的暴力美学动漫From：进撃の巨人/Attack on Titan很多情况下极端的对比才会形成引人入胜的情节，比如战神、雷神，甚至是猴子大战如来佛，在原型中也是如此，有对比才出彩拉开差距，破除平原型中一样大小的元素，不管怎么细心对齐也始终摆脱不掉一坨的初始印象，将比例适度的拉开形成不同的风格，主要在于大胆心细，敢去尝试，当然由于时间有限，上图仅作吐槽之用在上图左边是某网站的新闻列表样式，右边则是改动后，改动的主要依据是将想要展示给用户的信息强调、再强调，图片在有限的空间内越大则越具吸引力，同时将发布时间等次要信息弱化、再弱化；但是多数情况下会更复杂，因为还有PM的把关，还有一群指点江山的神，但是只需要记住一点：用设计将你自己的想法表达出来，并且尝试向别人解释你的设计想法。

精细？当然！拉开差距是第一步，在这个基础上再精细化是尤为重要的，主要涉及到字体、颜色、图片大小、元素块的区分等上图的左边将图片和文字分为两个信息区域，并组成一个信息单元，这样会增加信息单元内的复杂程度，同时也会增大视觉的认知难度；而右边则是将文字与图片信息重叠，这样减少了单元内的信息区分，融合为整体更易理解总结一下，当处理不同类型信息时，根据重要程度进行大小的区分，之后再进行细节上处理，比如优化单元信息内的复杂程度，单元之间的视觉关系处理，总之界面信息理解难度低才是最终的目标钢铁侠和超人的故事#交互设计ABC#Iron man vs Super man大家都知道钢铁侠是个高富帅，有碉堡的装备、帅掉渣的R8；而超人只有他的内裤相伴；他们之间的最大差别在于使用的武器不同，钢铁侠借助外力，而超人借助自己的超能力，在原型的制作过程中我们经常会使用不同的工具，比如Axure、AI、PS、VISO等，还有很多其他的原型工具，但在这里篇幅有限，仅讲述一下具有代表性的Axure、AI、PS、VISO当然大多数设计师有用的是钢铁侠的装备，只有少数设计师即使只有内裤一样的工具也可以做出酷炫的原型...下面将从快捷、延续、质量和效果这几个方面来讲述他们的故事五秒真男人！Axure！快捷☆☆☆☆☆延续☆☆☆☆质量☆☆效果☆☆☆在速度方面，Axure有灵活的控件库，可以快速输出原型，并且在后续的迭代中可以在原基础上进行修改，输出图片和网页形式，可以简单的模仿页面跳转等缺点便是在于原型的质量度不高，例如没有多样的元素吸附功能，方便对齐和调整位置；没有对字体的微调；没有路径的功能使得调用的控件没有延续性，且在控件需要迭代时耗费更多的精力；而且仿真DEMO针对移动设备没有优化，效果较差；没有针对图片的特殊效果等。

So Easy! VISO快捷☆☆延续☆☆质量☆☆效果☆☆VISO的简单操作、上手容易使得也有很多设计师采用，但是其效果却不尽如人意，如果对最终原型效果没有过多要求的同学可以采用，毕竟其才做难度低，但是在熟悉后对于质量和速度的提升却没有效果图层！还是图层！PS！快捷☆☆☆延续☆☆☆质量☆☆☆☆☆效果☆☆☆☆PS的精髓在于图层，将任何复杂的事物简单的进行组合，但是在制作原型时速度也是考虑的重要方面，且输出的文件为像素文件，在不同大小移动设备上则需要更多的后期调整工作，且在别人接手时需要一段时间理解内部图层的结构，同样的建立合理的图层结构也需要耗费时间五星好评！AI快捷☆☆☆☆延续☆☆☆☆质量☆☆☆☆☆效果☆☆☆☆在原型制作工具中AI是最为推崇的，拥有PS的多种效果、路径、文字工具，但是又不必像PS 那样担心图层的问题，同时在处理图片、文字、路径的无损耗处理也使得在后续中更容易修改，多种吸附方式、高效的操作以及可以和PS媲美的精致效果对于原型制作来说堪称完美，同时可以导出具有AI编辑功能的PDF格式，可以方便的给别人阅览，并且是矢量文件不会失真，此外在制作PPT时可以直接从AI中拖拽部分界面到PPT界面，并且同样是矢量图片随意拉伸；丰富的矢量图标资源，在原型制作时增加几个图标做点缀则会极大提高原型的美观度没有使用AI作出原型的人是无法体会到AI的精美之处的，希望大家尽量去使用，可能刚开始比较困难，但是熟悉后就会深知其便利性了有再好的兵器，如果空无武艺也是白搭，使用AI制作原型时需要注意以下几点：精益求精，善用icon有了好刀，更需要对自己的技艺进行提升，前几堂课所讲的对齐、字等因素更是要有深刻的理解和运用；善用icon则会帮助你在美观度上加分突出重点尽量用灰色系，少用色彩，可以保证整体的一致性，更重要的是千万不要用描边，要用纯色来区分信息区，利用高亮度来强调，例如将背景设置为灰色，用白色来代表图片，这样可以起到很好的对比效果，又能与AI的纯色背景进行区分不要描边再说一遍，新人在刚开始使用时为了突出某个元素，就是喜欢用描边来强调，但这是万万不可取的，使用描边后会增加界面的复杂程度不要分图层在AI基本用不到图层的功能，所以尽量在一个图层中完成所有工作，这样有利于最后的归档修改，同时在制作操作流程图的时候也会很方便君有疾在腠理，不治将恐深！肿么把概念一股脑儿倒进设计方案扁鹊的执着和蔡桓公的自负形成了明显的对比，做为设计师的你如果还在为怎么做出更好的布局而困惑，那么说明和蔡桓公一样需要转变一下想法了想做出跟别人不一样的设计是每一位设计师梦寐以求的事情，可是怎么才能做到就会比较困惑了，个人感觉主要有两种方式：拍脑门和练习思维方法，拍脑门来的最快，但是这次可行，下次就不一定了，所以从上而下，自高而低的去想设计才是持久之计，不治将恐深啊概念导入设计更多的是指将一种设计方向或者设计形式导入到现有的设计项目之中，在另外一个维度将问题解决在工业设计中设计理念分为以下几种：形式形态导入设计；问题导入设计；需求导入设计；概念导入设计；情感导入设计，由于在交互设计中展现维度较之工业设计更加狭窄，比如只能在界面、逻辑和动态这三个维度来展现设计的结果，所以快速产生新颖设计的方式多为概念导入设计例如我们现在需要做一个视频类的APP，其主要功能是让用户自拍来贡献内容和浏览他人的视频内容首先我们先将与用户最为直接的需求开始做，便是浏览他人的视频内容，此时我们想到的是先去做精品分析，看一下现有的这类APP是怎么做的，但是现在的此类APP多数是将图片作为视频内容的入口来吸引用户，但是我们这里想要做的是将一个新的概念导入到此设计中，此外我们还发现用户自己上传的内容多数质量不高，所以期望使用精美别致的界面和情感因素来提高内容质量和增加用户粘性这个概念便是遮罩的概念，在电影海报中，甚至是PS/AI中也经常使用到这种功能，将几张图只展现一部分并且排列起来，在更小的空间内展现更丰富的信息，并且给人留下悬念遮罩的概念便可以同视频想组合形成新的视频信息独特的展现形式：将三个视频作为一行，一屏显示两行，此时界面已经有着遮罩的样式，并且为了更好的吸引用户，我们将在当前显示的六个视频中随机抽取两个展现短暂的3S~5S的视频片段，以增加界面的活力。