《ui界面设计》课件全套 项目1-4 UI图标设计 -网页UI界面设计

UI界面设计USERINTERFACE项目1UI图标设计实训任务1.1UI图标基本规范与风格1.创意2.视觉流程清晰3.网页版式4.标志与形象栏5.色彩6.文字7.网页图标画画什么是图标？具指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。网页图标A图标在界面中的分类展示图标——不可点击尺寸：24×24、28×28、32×32按钮图标——可点击尺寸：44×44、48×48、56×56、64×64不可点击的展示图标

可点击的按钮图标网页图标网页中的按钮图标icon的尺寸一般选择4的倍数，这样有利于在成倍缩放的时候，不会造成半像素的情况。例如48×48的icon，缩小2倍的时候24×24；而34×34的icon，缩小2倍的时候是17×17。在图标中应尽量避免出现单数。图标的尺寸图标的设计原则更具识别性图标本身的功能便是第一时间传递信息。因而我们需要使用更加具象的视觉语言，使得信息传达更为准确。更具一致性使图标一致性是一套图标系统成功的关键之一。在这里的统一性不是指所有的图标里面都要用一模一样的元素，而是图标的线粗细、断点的距离、元素的大小、切割的距离、同样的色调、风格的一致。当所有的图标都用一样的元素在里面时，会造成辨认困难。适度的情感化体现作为一个金融产品，在用户使用界面时，我们想更改从前用户对金融产品严肃气质的认知，采用更为丰富的造型与颜色使页面更具亲和力。CBA保持相同的大小与间距；方圆处理图标的风格时下流行的图标可以归纳为：线性图标、面性图标、线面结合图标。至于mbe风格、断线风格、色块风格、渐变风格、半透明风格、双色搭配风格等等，都是基于以上三种来进行风格设计。下图为在dribbble上看到一些比较好看的icon设计，作者ID均备注在右下角，在此仅供参考。除了在dribbble、站酷、花瓣、优设、iconfont等找好看的图标以外，还可以参考市面上主流的那些app中的图标。图标的风格图标风格参考手绘风格图标网页图标彩绘风格图标网页图标像素风格图标网页图标扁平化图标拟物化与扁平化扁平化中的色块扁平化图标网页图标网页图标实训任务1.2图标设计1.创意2.视觉流程清晰3.网页版式4.标志与形象栏5.色彩6.文字7.网页图标画画网页设计基础1.创意2.视觉流程3.网页版式4.标志与形象栏5.色彩6.文字7.网页图标常用的画图标软件有三个：AI、PS、sketch。AI的好处是矢量，网格比较规范，容易处理图标的线面转换，其中直角一键转圆角功能非常好用，缺点就是调色非常的难用，只能处理普通色块，复杂的色彩会耗费很多时间。PS的好处是调色功能强大，形状剪切中规中矩，缺点是做线性图标的时候需要用布尔运算，描边功能操作起来没有AI方便。Sketch的好处是矢量，调色十分智能，并且现在做界面多数用sketch，应用起来十分便捷，缺点是它的造型没有AI和PS严谨，一些转角的位置不够流畅，小图的时候不易察觉，放大后就能看到不流畅的线条。我可以三者结合来画图标：首先用AI构造基本的形状。如果是要发作品做展示，就拉到ps里面进行调色和展示；如果是放在界面中使用，就拉到sketch调色使用。参数设置与参考线的绘制步骤（1）参数设置与参考线的绘制步骤（2）参数设置与参考线的绘制步骤（3）图标的分类图标可以归纳为：线性图标、面性图标、线面结合图标。至于mbe风格、断线风格、色块风格、渐变风格、半透明风格、双色搭配风格等等，都是基于以上三种来进行风格设计。图标复杂规范参考线参考线的使用用复杂规范的参考线画到熟练的时候，就可以用较简单的参考线去限定，因为你已经十分熟悉体量感的控制了。简单的画法：只需要画三个正方形，线性选择颜色是灰色，描边选择0.25pt。小口诀：长物体上下超左右不超、扁物体左右超上下不超、方物体要比圆物体小。图标的简单规范图标简单规范参考线实训任务1.3图标绘制1.创意2.视觉流程清晰3.网页版式4.标志与形象栏5.色彩6.文字7.网页图标画画网页设计基础1.创意2.视觉流程3.网页版式4.标志与形象栏5.色彩6.文字7.网页图标如何画图标PS中绘制图标的简单规范1PS中绘制图标的简单规范2PS中绘制图标的简单规范3在画布中用描边0.25pt来画好参考线，然后选中参考线，右键-建立参考线。如何在AI建立参考线来复用画一个44×44的正方形，颜色调为灰色，描边选择0.25pt（在此补充一个知识点，72ppi下的1pt是等于1px的，具体请自行百度），然后然后画一个42×42的正方形居于其中。这个42×42的界线为安全界线，图标不要画超过这个界线，避免在切图的时候贴边切，导致图标出现不自然的边界。上图详细展示画参考线的步骤。参考线的建立AI中建立参考线复用步骤（1）参考线的建立步骤（2）参考线的建立步骤（3）参考线的建立步骤（4）参考线是为了限定图标的大小，从而达到整体的美观与规范。TIPS：a.提炼物体形状后，在不影响辨识度情况下，可以适当改变一下形状，把高的或者扁的物品，画成比较饱满的样子；b.当物体形状不适合画得饱满时，可以尽量上下或者左右撑满，然后旋转45度，以增加画面的饱满感如何各种形状的图标如何在参考线中统一长物体变饱满倾斜增加体量感绘制过程要点改变图标大小的时候，要两边同时缩放，不造成半像素。使用内描边来进行线性图标的绘制，更容易对齐网格，但是内描边只要使用钢笔加点来断点的话，就会自动变成居中描边。使用内描边的时候怎么进行断点？可以把描边进行对象-扩展，转为形状，然后用布尔运算来剪切。由于太麻烦，一般使用居中描边（不推荐居中描边是因为在手机界面中的线性图标一般是3像素，居中描边怕出现半像素，影响清晰度），但经过检验，只要注意把线拖动对齐网格，不会影响清晰度。TIPS：手机界面中的图标，线性一般是用3像素，因为2像素太细，4像素又显得太笨重；当2倍图的时候用3像素，3倍图的时候就会变成4.5像素，所以3倍图的时候要手动把4.5调成4或者5像素。THANK

YOU!谢谢谢谢UI界面设计USERINTERFACE项目2移动端App界面设计实训任务2.1手机界面设计基础规范画画App界面的

COMPONENTSOFTHEINTERFACE状态栏标签栏主显示区导航栏手机界面规范App界面控件规范界面规范文字参数手机界面基础手机界面基础AB字号中文：思源黑体

英文：robot

偶数单位24pt,28pt,36pt等字体：App安卓界面中文字参数（1）打开【PS】，新建【1080*1920】的画布，并划分出【状态栏】、【标签栏】、【导航栏】，如图所示App安卓界面制作步骤-1（2）给【状态栏】和【标签栏】填充颜色，并绘制【状态栏】和【标签栏】的内容，如图所示。App安卓界面制作步骤-2（3）将广告图片和功能图标【复制】到Banner区域。（4）添加【主显示区】的其它元素。（5）绘制【导航栏】按钮和图标。App安卓界面制作步骤-31.重要性：色彩往往给人以鲜明的第一印象。2.色彩三属性:色相、明度、纯度3.色彩情感和视觉感受4.配色方案：同种色、同类色、邻近色、对比色等5.色彩策略实训任务2.2UI配色方案

色彩是一个品牌给人的第一印象。营销界有个著名的“7秒定律”，即消费者在7秒内就可以确定是否有购买商品的意愿。如果第一眼没有被吸引住就很难对产品有进一步了解的欲望。而在这短短7秒内，色彩的决定因素占到67%。大部分初次接触产品的消费者会在90秒内决定是否购买，而这个评估中62%-90%是基于颜色。“7秒定律”色彩重要性色彩三属性——色相、明度、纯度色彩情感和视觉感受色彩是富于情感的色彩情感和视觉感受红色黄色色彩情感和视觉感受蓝色绿色色彩情感和视觉感受橙色紫色色彩情感和视觉感受黑色灰色色彩情感和视觉感受咖啡色金属色实训任务2.3App顶部导航栏设计

画画导航栏是指位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用。手机界面导航手机界面导航画画App导航栏作用？导航栏是用来帮助用户定位、导航、操作的基础组件;首页导航栏就是一级导航栏，由首页导航栏中点开的界面就是二级页面。手机界面导航整个导航栏通常分为左、中、右三部分，左侧和右侧主要用来放置功能控件，中间部分主要用来放置文字标题或者搜索，接下里展开分析左中右三部分的构成。一级导航栏中间经常能看到搜索框，然后搜索框左右两边放置其他的控件。当导航栏的内容太多，比如有文字标题、头像、按钮等控件，搜索栏和这些控件可能无法并排放置时，可以将搜索栏横向拉长，放在下一行单独展示。现在淘宝App首页的导航栏就做成了两行，上一行用来放置文字标题和功能图标，搜素栏集合扫码、拍照等功能单独作为一行。我们在使用产品的过程中会发现，App的导航栏或多或少都存在一些设计上的差异。二级导航常见的还有在中间使用加粗的文字作为标题，也可以使用主标题+副标题的形式来展示更多的信息。手机界面导航画画导航栏设计样式？导航栏样式分为通栏和非通栏，通栏就是通到页面最顶部的通栏。非通栏的设计是整个导航栏跟整Banner之间有明显分界。我们可以结合站在产品和用户客户的角度来看，思考整个导航栏。我们把导航栏做成通栏的时候，Banner更加细腻的，导航栏上的功能入口,比如扫一扫啊，搜索啊，包括消息视觉层面上变得更加弱了。手机界面导航手机界面导航App导航栏设计注意事项文字、搜索框和图标的大小尺寸与距离合理文字图标搜索框手机界面导航画画App导航栏文字字号文字字号，一级导航搜索框内的文字一般28像素，图标的文字18像素；二级导航标题文字，在两倍图750乘1334的作图尺寸下，我们会把它做成36像素；文字层级间隔大于4像素；手机界面导航画画手机界面导航画画App导航栏搜索框

手机界面导航画画App导航栏元素间距

Banner就是海报、招贴，直译通栏广告图2-8Banner效果图2-9Banner效果实训任务2.4App-Banner设计首先，我们要清楚我们的设计目的不论你做的多么漂亮，多么炫酷，多么华丽，多么￥#@……没用！设计是为了信息传达！用户高效得到信息才是设计的初衷2秒原则互联网上的广告图，只有2秒的生存时间。要么被忽视，要么被关闭，要么被点击。so...在2秒内把你想要说的事情说完！特别对于商城类的，用户没时间看你的大作，只是来买东西而已。Banner的结构2.2.2Banner的结构图2-10Banner的结构1.商品层—商品的清晰度图片质量对于网站的影响是很大的，特别是电商类的网站，图片要足够的清晰。要做到最基本的不变形、不模糊、不失真2.2.2Banner的结构图2-11商品清晰度图2-12商品鲜艳度2.商品层—展示角度我们一些设计总想创新，走不寻常路。但是不是什么时候都适合不寻常例如电水壶，永远都是正侧面，因为经过长时间的验证，这个角度是最容易辨认产品本身和最佳的视觉效果。其他角度的叫“闹着玩”！图2-13商品角度3.商品层—抠图问题有清晰轮廓的产品，可以做抠图处理轮廓不是很清晰或者不是很美观的产品，可保留角版处理图2-14抠图图2-15抠图4.文案层—视觉清晰度产品清晰，文案清晰，背景简洁属于高效的信息传达去色后，文案要很背景拉开明度距离，否则文字容易被阅读图2-16视觉清晰度图2-17视觉清晰度现在很多文案策划老嫌说的不够严谨，导致文案文字超级长，我们可以采用分段去做；当然也可以跟策划谈谈人生。文案不要超过8个字图2-19文案图2-20文案如果一个背景颜色足够深，那么写浅色字是比较好的，如果一个背景颜色足够的浅，写深色字是比较好的一个颜色不要同时出现黑色和白色（深色和亮色）图2-21文案颜色图2-22文案颜色搭配5.文案层—逻辑清晰度符合人类内心原欲的文案，往往更容易驱动人类行为。从众：已卖出100000件好奇：神奇手膜，神奇脚模利益：错过今天再等一年恐惧：消灭你家99.9%的细菌自我：这个表有点贵，但是很帅/我们不卖便宜的，只卖好的搞笑：老板不在，全场乱卖/美工辞职了，老板自己来网络流行语在电商上还是很受用的，比如任性，醉了，100块钱都不给我，洪荒之力之类文案核心是了解人性本身，而不是单纯了解你需要推销的本体。如果碰到什么新春特卖，型男必备，春游必备，新款上架，直接把运营或者文案策划掐死就行了。图文不符或者文案不清晰的广告，只能让用户望而却步图2-23图文相符真正的好文案，会击中你内心最薄的那层需求图2-24好文案图2-25好文案6.背景层—背景层分解图2-26Banner的背景层图2-27Banner的背景层1.垂直构图：可以充分显示产品和主体的高大与深度，因此多应用于单薄细长的产品。2.2.3Banner的构图图2-28垂直构图垂直构图图2-29垂直构图2.平衡式构图：平衡式构图可以给人一种完美、满足的感觉，常用于地产设计、茶具设计等。图2-30平衡式构图图2-31平衡式构图3.斜线/放射线构图：斜线具有运动、流动的感觉，常用在运动装备、细长的文具等产品上。图2-32放射线构图图2-33放射线构图图2-34放射线构图图2-35放射线构图4.对角线构图：巧妙利用了对角线的长度优势，使画面动感、活泼，达到吸引视线、突出主体、均衡视觉的效果。图2-36对角线构图图2-37对角线构图5.框架式构图：框架式构图能增加画面的纵向对比和装饰效果，产生深度感。图2-38框架式构图图2-39框架式构图6.九宫格构图：九宫格中的四个交叉点是放置主体的最佳位置，这种构图方式更符合人们的视觉习惯，使主体自然成为视觉中心。即突出了主体，又平衡了画面。图2-40九宫格构图图2-41九宫格构图112画画底部导航栏可以说是现在最流行的导航控件了，微信、支付宝、淘宝、网易云音乐等等，各种类型的APP都有应用。作用是为了做好内容分类，节省屏幕空间，等需要的时候更容易被人找到!实训任务2.5App底部Tab栏设计底部Tab栏是什么？WHATISIT?113手机界面Tab栏设计Tab常见布局根据Banner的位置和主题，选择以下构图屏幕等分减去左右间距后等分图标左右间距手机界面底部Tab栏屏幕等分：技术实现比较简单，市面上使用比较多的样式。计算方法：列宽=屏幕宽度/标签个数。手机界面底部Tab栏减去左右间距后等分：标签之间相对紧凑。手机界面底部Tab栏图标左右间距相等：多用在标签数量为3个的情况，因为用屏幕等分方式图标看起来会比较散，所以可以采用这种方法。117手机界面Tab栏设计Tab背景样式常见样式白色或浅灰黑色毛玻璃透明背景手机界面底部Tab栏白色或浅灰：最为常见的背景样式，它能够更好的突出标签内容，同时不会让底部显得过重。可以使用白色加投影或者底部加浅灰色分隔线的方式将其和内容区分开。手机界面底部Tab栏黑色背景：黑色背景往往用于一些特殊类型的APP，如运动、股票等，渲染氛围。手机界面底部Tab栏毛玻璃：在前2年比较流行，多用在IOS中，给人时尚的感觉，不过会耗费大量资源，目前使用的比较少。手机界面底部Tab栏透明背景：采用透明背景，可以让用户视觉更聚焦于内容本身。但这种方式会导致标签信息展示较弱，所以透明背景多用在内容为主的APP中，如抖音。手机界面Tab栏设计Tab栏展现方式常见样式图标+文字纯图标图标+文字+驼式按钮纯文字手机界面底部Tab栏图标+文字：最常见的标签展示样式，用图标吸引人的眼球，配合文字说明，更能凸显图标标签栏。手机界面底部Tab栏纯图标：采用纯图标样式比较简洁，但识别性较低，一般适用于小众产品中，如花瓣、Pinterest，这2个产品是设计分享类平台，用户群体比较小众且目标用户是互联网从业人员，对这些图标含义较为熟悉，采用这种方式会显得产品比较有气质。手机界面底部Tab栏图标+文字+驼式按钮：这种标签栏样式常见于社区类APP中，采用驼式按钮来突出功能点，引导用户发布内容。如闲鱼PP，点击加号按钮就可发布闲置，调动用户积极性。手机界面底部Tab栏纯文字：采用这种方式能够更直观的让用户进行操作，遵循简单易用的原则。但样式比较单一，适合用户群体跨度较大但产品，多用于直播类、内容类、简单工具类APP中，例如小红书、百度翻译。实训任务2.6移动端界面视觉流程设计画画视觉流程是什么？WHATISIT?视觉流程是通过设计引导使用者的眼睛，通俗的讲就是先看到什么，再看到什么，也就是视觉浏览的顺序。什么是视觉流程？引导使用者的眼睛,首先看到其次看到再其次看到......————————————————————————视觉中心次重点再其次信息点......画画为什么进行视觉流程梳理？WHYDOYOUDOIT?一个好的设计不仅仅是好看，更重要的是做出一个正确的设计，解决实际问题，将信息展示清楚。清晰的展示信息这是非常重要的一个设计理念。手机界面视觉流程如何理解清晰展示信息？HOWDOYOUDOIT?我么可以根据主题和甲方要求，按照信息重要性，着手进行视觉信息的依次梳理。在整个视信息按照重要性的等级排列觉的表现中，有最重要的信息，也有相对次要的信息，如果把这些出来，那么就是有层级。如果我们在做设计之前对信息的层级关系首先做梳理，然后再去设计，这样设计的作品就会产生极好的视觉流程。手机界面视觉流程表现视觉层级梳理信息层级遵循视觉习惯？首先我们要指导人类视觉习惯遵循从左往右、从上到下的轨迹。我们的界面设计要遵循视觉习惯来安排，将重对比法则要的信息放到视觉中心的位置，按照视觉规律来布局各种层级信息。手机界面视觉流程视觉习惯:遵循从左往右、从上到下的轨迹视觉习惯:页面上部比下部更引人注目视觉习惯:页面往往是左边比右边更引人注目信息元素的位置Position视觉流程赏析/遵循对比法则？对比主要分为：大小对比、粗细对比、色彩对比、明度对比。运用对比的法则，来展现各种层级的信息。手机界面视觉流程遵循对比法则遵循图片、图标和文字吸引度？我们需要了解文字、图片和图标的吸引度也是不同的。通常来说，三者的吸引度从大到小排列是图片>图标>文字。手机界面视觉流程吸引度：图片>图标>文字视觉流程清晰如何引导使用者的眼睛：信息元素的位置Position图片文字的吸引度Colour色彩Colour对比：大小粗细…设计/非设计视觉流程清晰图片文字的吸引度

研究发现人们会花极少的时间来阅读大部分页面，大部分情况下，用户通过扫描来寻找注意力的吸引点。其中图标和图像比文字更具有吸引力。视觉的吸引度之图片和文字图标图片>文字视觉流程清晰色彩的吸引度Colour有颜色的比无色的设计元素更具吸引力。视觉流程清晰强对比形成吸引力对比越强，越能吸引注意力。对比可以是色彩、大小、形状、曲直、明暗的对比。大小Size上，大图比小图更具吸引力；大字比小字更吸引人的注意力；对比Contrast对比可以是色彩、大小、形状、曲直、明暗的对比视觉流程清晰设计元素的吸引力设计过的图形和文字更具有视觉吸引力手机界面视觉流程对比法则遵循图片、图标和文字吸引度遵循视觉习惯实训-APP界面视觉流程改版APP界面视觉流程改版实训中，根据前面讲到的方法，分析界面需要改变的地方，然后进行界面改版。手机界面视觉流程改版前界面手机界面视觉流程手机界面视觉流程做好布局的层级：将页面信息按照重要性排序，在视觉上需要有轻重关系，重要信息的部分就要做得更加吸引人，其次重要信息的需要稍弱化一些，以此类推。通常来讲，手机端Banner区域位置是视觉上最具有吸引力的位置，其次是下方的金刚区域，一般叫做磁片区域。磁片区域可以根据品牌和用户的需求放置运营内容、促销内容或者图标。THANK

YOU!谢谢谢谢UI界面设计USERINTERFACE项目3移动端主题界面设计实训任务3.1手机主题锁屏界面设计画画全球范围内作品招募，所有获奖作品将在全球范围内发布和销售！具体设计要求：设计符合主题创意的锁屏样式和锁屏墙纸。华为“百变解锁”可以实现各种各样的样式，锁屏界面上可以支持音乐播放、显示天气预报；并支持直接解锁到达相机、短信等各个应用，因此请自由发挥想象力和创造力。需考虑锁屏操作时会发生的变化，比如解锁的手势、解锁时引发的界面动画、充电时的提示等；建议配以文字说明。解锁界面墙纸尺寸规格：1080x1920像素；2021华为全球主题设计大赛()画画华为手机主题获奖作品手机主题锁屏

2022vivo全球主题设计大赛e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3DMAGICAT/THECITYOFTHESKY/2.5DILLUSTRATIONDESIGN

/天空之城/2.5D插画设计提报CONTENTS主题分析设计元素

／

风格表现

／

人员分工草图方案头脑风暴／

素材收集

／

草图绘制e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D

CLICKTODISCOVERe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D主题分析SubjectAnalysise7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D草图方案SketchScheme

CLICKTODISCOVERe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D头脑风暴根据任务要求组织小组讨论发散思维联想素材收集主题元素分析素材资源收集明确设计方向草图绘制结构比例分析初稿设计绘制草图优化设计e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D头脑风暴埃舍尔——矛盾空间纪念碑谷2.5d

太空系太空元素

e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D素材收集

太空系e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D草图绘制方案优化中

太空系草图优化草图初稿设计方案SketchScheme

CLICKTODISCOVERe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.谢谢实训任务3.2手机主题内页设计e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3DMAGICAT/THECITYOFTHESKY/2.5DILLUSTRATIONDESIGN

/天空之城/2.5D插画设计提报空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.图标设计案例一级图标：新手福利/邀友有礼/私人定制/积分兑换/高效灵活/平台数据二级图标：会员中心/我的订单/我的拼团/消息中心/地址管理/分享有礼实训任务3.3手机主题图标设计THANK

YOU!谢谢谢谢UI界面设计USERINTERFACE项目4网页UI界面设计什么是视觉流程？引导使用者的眼睛,首先看到其次看到再其次看到......————————————————————————视觉中心次重点再其次信息点......实训任务4.1网页设计流