首页

浅谈UI设计师

蓝蓝设计的小编

UI设计师遇到的最大困难就是创新。设计界面时，满足功能很容易，要想在满足功能的同事，界面出新很难。

评论(0) 浏览(3564)

在这个火热的8月，正在流行这3种网页设计趋势

资深UI设计者

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

设计趋势总会在你迷茫的时候，给你一点灵光。在合适的时候，恰到好处地「跟风」，借助流行的趋势帮你作出更合时宜的好设计。炎热的8月即将到来，我们观察到三个设计的趋势，当下正在流行。

1. 以白色和浅色为主的配色方案

虽然以白色和浅色为主的配色方案似乎哪里都有，但是在最近，这种趋势体现的非常的明显。

色彩的运用一直都是诸多设计趋势当中，最为醒目的组成部分。这种以白色和浅色为主的色彩美学，似乎在和之前所流行的高饱和度霓虹色的流行做对抗，柔和的灰色，相对清冷的色调，甚至是显得没有足够温度的粉色，这些色彩都在力图淡化之前配色方案中浓稠的情感和激荡的氛围。

Verho

以白色和浅色为主的配色方案，相对而言是没有那么醒目的，设计师在采用这种配色方案的时候，常常会结合其他的元素，来丰富整个设计的视觉感，这样就避免了出现「过于普通」的视觉感受。这种配色设计还包括了使用片拍的图片素材，就像 Verho 这个网站。

Omega Yeast

Alexandra Elise

不过图片和色块并不是唯一的实现这种配色的方案，采用视频或者插画元素同样可以做到，比如 Omega Yeast 和 Alexandra Elise 这两个网站，它们同样足够吸引人。

这一设计趋势可以搭配风格相对清爽、情绪比较清浅的网站主题，在炎热的夏季显得尤为有感觉。页面中的文本内容只需要采用相对较深色彩的字体，即可确保良好的可读性。

在按钮和为数不多最为重要的元素上，可以采用明亮的色彩，以示强调，整体风格则可以保持极简。

如果你喜欢极简主义的设计，并且打算运用这一趋势，这篇文章别错过了：

2. 数据可视化

数据可视化将数据的直观性提到了一个全新的层次，它使得跨行业的数据展示和信息呈现变得更加有价值，也更加可靠，而大规模的可视化的数据呈现并不是奇怪的事情。

不过也正是因为数据可视化让数据变得更加亲民，设计师开始更多地将图表和数据加入到日常的设计当中来，结合交互式动画，让数据在整个网页设计当中，开始发挥更多的作用。借助可视化的设计，数据信息更轻松地为用户所理解，整体设计也开始显得更加富有吸引力。

而这种设计趋势需要设计师花费更多的精力来处理数据，尽量多借助现成的数据可视化的工具来进行设计。

在网页设计当中，将数据以可视化的方式嵌入进去有很多不同的方式，而这一趋势最吸引人的地方也是交互式的动态信息展现。

Tree Tree Tree

Tree Tree Tree 这个网站就很好的利用了数据可视化来展示天气，当你输入你感兴趣的地方的时候，它会使用可视化的树木来呈现当地风力大小。此外，你还能和底部的交互式的地图进行互动。

Tomorrow’s World

Tomorrow’s World 这个网站则始于一项调研，而网站最终会将一系列的调查使用可视化的方式呈现出来，帮助用户了解周围的世界。

Qravity

Qravity 在网站中加入了多个数据输入点，用户可以通过滚动交互来调整时间轴，信息的呈现也会随之发生改变（比如日期和事件），这比起简单的列表要好懂得多。

3. 多边形2.0

多边形元素从2017年开始成为设计师们的心头好，作为一种持续流行的、泛用型的设计趋势，一直流行到现在。有意思的是，多边形元素也不再维持以往常见的样子，开始在外观和视觉上发生改变。现如今的多边形不再是以往小巧玲珑、成群结队的样子，设计师开始有意识地挑选一些多边形，赋予它们超大的外观造型，而不再是简单的点缀和堆砌。

这些超大的多边形元素可以在不同的设计风格之下良好地运作，结合不同的样式和色彩，发挥作用。它们可以作为整个设计模式中的一员，作为装饰元素也可以用来作为强调特定内容的容器（比如图片和文本）。

多边形元素的有点在于，它们造型多变，可以区别于常见的原型和矩形，更容易吸引用户的注意力。这种不同的使用方式，我们姑且称之为 多边形 2.0。

The Alan Turing Institute

多边形的特征、角度可以随着你的设计需求来灵活选择，比如 The Alan Turing Institute 这个网站会在右侧露出三角形的一部分，Evoluted 这个网站则将简单的线条和多边形搭配在一起，互相叠加营造出聚合的感觉，而 Iqor 这个网站则更加倾向于使用多边形来承载内容。

Evoluted

iqor

多边形和不同的色彩搭配，所带来的视觉体验和强调效果都是非常突出的。不过要将内容和多边形结合起来，设计师还是得花点心思。

更多多边形元素的玩法看这里：

结语

对于设计趋势而言，它是存在时效性的，它之所以在特定的阶段流行有诸多因素的影响。当你在设计的时候没有想法的时候，设计趋势能够给你的不仅仅是当下设计方向上的选取，也为你提供了一个可供参考的选择。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(3783)

js控制form提交

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

form表单提交，之前有个下载的项目接口，需要上url上边传超级多东西，但是 url是限制长度的 每个浏览器限制的url长度还不一样，所以就想到用form表单的action提交表单。

form标签 定义和用法 详细了解请点击

标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。（我们要用到的）

form提交数据用法

在这里我就写个用js调用事件提交表单。表单不在页面上显示的例子。

下面这段代码 form标签的属性 method 就是请求方法 跟 jquery的ajax一样这里我使用post请求、 form标签的属性 enctype 规定发送表单数据之前如何对其进行编码、form标签的属性 target=”_blank” 就相当于在新页面打开 我这里做的是下载 所以要在新页面打开。 

 <form method="post" enctype="application/x-www-form-urlencoded" id="form-submit" target="_blank">
   <input type="hidden" name="account" value="多毛大叔爱萝莉"/>
   <input type="hidden" name="password" value="7758521"/>
</form>
<button type="button" id="go">go</button> //这里的name就是相当于post属性的参数 value就是你传的值 type是hidden 是因为我不想再页面上看到他所以让他隐藏了
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    •

接下来我们用js调用事件 动态给 form 添加 action 属性让form知道我们要让他请求拿个位置。 

// js 获取form表单 var form_submit = document.getElementById('form-submit'); // js获取按钮 var go = document.getElementById('go'); // 当点击go时执行事件 go.addEventListener（'click',function(){ // 动态给form表单设置请求位置 form_submit.active = "http://www.daxuehua.cn"; // 让form表单提交 form_submit.submit()
}）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。


评论(0) 浏览(2877)

UI设计师必备技能

蓝蓝设计的小编

手机端用户界面设计中你是否会遇到一些问题？手机屏幕小？用户体验不好？今天小编为你搜集了手机界面设计几个需要注意的点，快来补课~

评论(0) 浏览(3323)

原生js实现移动端touch事件，解决穿透问题

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

四种touch事件

touchstart: //手指放到屏幕上时触发

touchmove: //手指在屏幕上滑动式触发

touchend: //手指离开屏幕时触发

touchcancel: //系统取消touch事件的时候触发 
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches: //当前屏幕上所有手指的列表

targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX / clientY: //触摸点相对浏览器窗口的位置

pageX / pageY: //触摸点相对于页面的位置

screenX / screenY: //触摸点相对于屏幕的位置

identifier: //touch对象的ID

target: //当前的DOM元素

注意：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。 

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no"> 
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    •

2.禁止滚动

preventDefault是阻止默认行为，在touchMove事件中使用可阻止默认行为滚动。

event.preventDefault();

3.解决穿透 
在touchStart事件后添加touchMove事件的监听，在touchMove事件里添加touchEnd事件的监听，在touchEnd事件中移除touchMove和touchEnd的事件监听，即可解决穿透问题

4.removeEventListener 
传入的处理事件函数一定是相同的函数，不能是匿名函数

案例 

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> <title>移动端触摸滑动</title> <meta name="author" content="rainna" /> <meta name="keywords" content="rainna's js lib" /> <meta name="description" content="移动端触摸滑动" /> <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no"> <style> *{margin:0;padding:0;} li{list-style:none;} .m-slider{width:600px;margin:50px 20px;overflow:hidden;} .m-slider .cnt{position:relative;left:0;width:3000px;} .m-slider .cnt li{float:left;width:600px;} .m-slider .cnt img{display:block;width:100%;height:450px;} .m-slider .cnt p{margin:20px 0;} .m-slider .icons{text-align:center;color:#000;} .m-slider .icons span{margin:0 5px;} .m-slider .icons .curr{color:red;} .f-anim{-webkit-transition:left .2s linear;} </style> </head> <body> <div class="m-slider"> <ul class="cnt" id="slider"> <li> <img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg"> <p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p> </li> <li> <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"> <p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p> </li> <li> <img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg"> <p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p> </li> <li> <img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg"> <p>海洋星球3重庆天气热得我想卧轨自杀</p> </li> <li> <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"> <p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p> </li> </ul> <div class="icons" id="icons"> <span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <script> var slider = { //判断设备是否支持touch事件 touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
    slider:document.getElementById('slider'), //事件 events:{
        index:0, //显示元素的索引 slider:this.slider, //this为slider对象 icons:document.getElementById('icons'),
        icon:this.icons.getElementsByTagName('span'),
        handleEvent:function(event){ var self = this; //this指events对象 if(event.type == 'touchstart'){
                self.start(event);
            }else if(event.type == 'touchmove'){
                self.move(event);
            }else if(event.type == 'touchend'){
                self.end(event);
            }
        }, //滑动开始 start:function(event){ var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值 isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动 this.slider.addEventListener('touchmove',this,false); this.slider.addEventListener('touchend',this,false);
        }, //移动 move:function(event){ //当屏幕有多个touch或者页面被缩放过，就不执行move操作 if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return; var touch = event.targetTouches[0];
            endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
            isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时，表示纵向滑动，0为横向滑动 if(isScrolling === 0){
                event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏 this.slider.className = 'cnt'; this.slider.style.left = -this.index*600 + endPos.x + 'px';
            }
        }, //滑动释放 end:function(event){ var duration = +new Date - startPos.time; //滑动的持续时间 if(isScrolling === 0){ //当为水平滚动时 this.icon[this.index].className = ''; if(Number(duration) > 10){ //判断是左移还是右移，当偏移量大于10时执行 if(endPos.x > 10){ if(this.index !== 0) this.index -= 1;
                    }else if(endPos.x < -10){ if(this.index !== this.icon.length-1) this.index += 1;
                    }
                } this.icon[this.index].className = 'curr'; this.slider.className = 'cnt f-anim'; this.slider.style.left = -this.index*600 + 'px';
            } //解绑事件 this.slider.removeEventListener('touchmove',this,false); this.slider.removeEventListener('touchend',this,false);
        }
    }, //初始化 init:function(){ var self = this; //this指slider对象 if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false); //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性 }
};

slider.init(); </script> </body> </html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(6160)

间距不会调？掌握这一个点，从此不再迷茫！

资深UI设计者


如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

之前一直觉得色彩，图形，字体是 UI设计的三大构成，任何设计都是从这三大元素开始的，所有的 UI设计都是由这些构成的，但是却忽略了界面中空间的运用，也就是我们常说的间距。今天我想分享下几年前从 Google 的 Material Design 以及 8 pt grid 中学到的关于间距相关的教程，这篇分享有助于我们处理好界面间距一致性问题，让设计更加统一，同时定义规范里面的原子设计方法，能完美融合。


间距无处不在，界面中的边距，距离上边，左边，右边，顶部等各种属性。因此作为一名设计师，我们需要很好的掌握各种间距规律，通过间距规律很好的组织好内容。

一、为什么要统一间距？

是否大家和其他设计师在合作过程中，经常打开一个设计师源文件时候，发现各种间距大小，各种不一致地方，明明同一个页面，已经定义好规范，但是每个人使用的间距大小不一致。可能你们规范已经定义好了，最小单位是5，按照5的倍数去做设计，但是还是会出现各种奇葩的间距，10，12，18等等。或者说有的设计师是按照5来说的，间距会出现10，15，20，25，30，很难解释清楚哪种场景下用什么样间距规则。

不止是设计师，估计研发打开我们标注稿都是崩溃的。所以我们需要去统一间距规则，它的优点是能很好的让设计师之间合理的了解我们间距系统规则，同时开发在做设计开发时候，不需要每次都重复开发不同间距，导致整个 APP 风格混乱，那么我们如何去做呢？

二、它的价值是什么？

对于设计师：效率上，减少决策和思考，当我做一个需求时候，我不需要考虑到底用多大间距，同时能保持元素之间的节奏。

对于团队：设计师和开发之间沟通更加简单，开发人员能很好的按照最小单位按照增量递增去写间距，而不必每次都进行测量。

对于用户：他们信任的品牌有一致性的美感，在设备上没有模糊的像素偏移等，就和微信一样，说不出哪里好，但就是最好的。

三、站在巨人肩膀上思考

△ Material Design 在他的布局中有讲过，他们的间距，所有间距规则都是在8的倍数上进行递增，而且并不是毫无头绪的递增，只定义了几种增量关系，克制的有序的间距弹性，最小的是8，16，24，32，48，56，72。

△ 同样在 iPad端，间距规则也是有序的，克制的间距弹性，而不会出现我们日常设计中经常间距随意任选的使用，毫无规则乱用。

△ 在 Airbnb 的规范中，PC 和无线所有设计间距规范原则只定义了5种，8，16，24，48，64让规则更加简单，更好的统一了整个风格的一致性。

这些原则除了在元素和元素中运用，其实在按钮中，在按钮里面文字和上下左右的距离，都是有序的，我特别喜欢一句话，设计语言只有在有序的遵循和重复使用下才有用。

四、怎么做？

1. 定最小原子单位

这个最小间距规则可以是3的倍数，像蘑菇街、豆瓣一样，如果你希望产品留白比较多，也可以是5的倍数，例如 pinterest、亚马逊等，这个没有绝对的，一切根据你们产品内容丰富程度决定。

△ 亚马逊和 AliExpress 都是按照5为倍数来做间距增量

2. 确认间距弹性

大家都买过衣服或者鞋子，一般鞋子尺码，只会有固定几个（36，37，38，39，40，41，42，43）如果你需要的鞋子特别大，可能需要订制，包括衣服也是同样（XS,S.M.L.XL）。

在定义间距上同理，以往做设计规范的经验，在上一步定义好最小单位就完啦，然后设计师按照增量去设计就 ok，这样只是完成一半，如果按照4的增量（4，8，12，16，20，24，28，32，36，40….）这种带来问题就是任何间距都不可预测，提供的选择过于接近了，在什么情况下使用24，什么情况下使用28，我们很难去决策，如何去做。

之前在团队做过一个调研，我们问了设计师，也看了很多设计源文件，包括国外也有一个类似调查，就是在用4作为设计原子间距做设计时候，设计师使用最多的间距有哪些？结果很有意思，使用16的占一半，8和32的占一半，所以定义太多间距其实毫无意义，只会带来设计时候的不确定元素。

3. 根据业务场景，定义间距

正如前面所说，过多间距规则，只会带来设计师困惑，徒增界面复杂性，对开发，对设计师都是一种负担，所以我们在定义间距时候，一定要少，要让我们间距原则覆盖到绝大多数场景。可以从 XS，S，M，L，XL 为参考，小，中，大为纬度。

△ Airbnb 的间距规则 XS，S，M，L，XL 是最小为8，常用8，16，24，48，64，Airbnb 则更加克制，给设计师选择更少，反而更能保持设计次序。

△ quickbooks 的间距规则 XS，S，M，L，XL 是最小为4，常用8，16，20，40，60能很好满足各种业务场景，包括各种的间距场景都是在此基础上去拓展。

△ 那么界面中所有的间距地方，全部运用8，16，20，40，60这几个原则来做设计，保证页面统一性。

△ 包括页面中的元素高度，比如 banner 高度也是按照间距增量去设计高度，那么整个页面就更加有系统性和科学性。

△ 这也是我们在做系统设计时候经常用到的，通过增量来做设计。

△ 同理，在国外很多优秀产品中，我们不难发现这种规律的使用，更好的提升了设计效率。

总结

统一简化间距规则，通过这些规则，构建一致性界面，所有边距，元素空间都遵循规则时候，对于视觉设计和开发人员来说，都能很好解决一致性和效率问题。

在我们刚开始设计时候，可能会觉得没有真正的好处，但是当项目越来越复杂时候，团队规模越来越大，每天处理各种设计原子和设计分子时候，你会发现，当你使用固定的间距，它会比之前随意的间距规则有更好的效果。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。


评论(0) 浏览(4298)

banner的“分层设计”

ui设计分享达人

在话题展开前我想提出一个怪现象：为什么现站酷，简书上这么多人分享板式设计，banner设计，字体设计其中不乏一些工作十年以上的资深前辈，但是还是有很多人当设计页面的时候还是脑袋空空，只能素材网站搬运，然后修修改改草草了事，长此以往。



评论(0) 浏览(3715)

UI界面超逼真！Magic Leap One曝光2款虚拟现实新应用

蓝蓝设计的小编

据悉，Magic Leap近日将公布关于Magic Leap One的2D和3D用户界面，有关媒体还在该公司的开发人员文件中发现了包括Landscape和Immersive在内的应用程序。

评论(0) 浏览(3967)

设计你的设计生涯

蓝蓝设计的小编

你首先要考虑的问题是：你是否喜欢从事设计工作？这很重要，若果答案是否定的，现在换一种职业还不算晚。因为并不是每一个人都喜欢或者适合做设计，可能是很偶然的原因学习了设计。你过去学习设计的经历并不会浪费，它对于你从事市场、广告、营销或其他管理工作是一种宝贵的财富，也许由于你的放弃，世上少了一个平庸的设计师，多了一个优秀的管理人员。你要知道，一个懂得设计的管理者比一个设计师更加难得。

评论(0) 浏览(3293)

一看就懂，详解大厂ui设计制作规范步骤

博博

一看就懂！详解大厂UI设计规范制作步骤

小小设计控 2018-07-30 09:34:38

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里


小小设计控 2018-07-30 09:34:38
一看就懂！详解大厂UI设计规范制作步骤

一、提取设计原则关键词

一看就懂！详解大厂UI设计规范制作步骤

1. 提取一级关键词

一看就懂！详解大厂UI设计规范制作步骤

第一步，先要去提取出关键词，这个关键词怎么来，有几种方式获取，第一个从整个公司战略出发，任何一个产品一定有他的战略，品牌战略，商业战略。举个例子，假设我们是 eaby，公司今年战略是全球化，高品质，正品，那么这个就是一级核心关键词，所有的设计语言一定要和公司战略结合起来，可以理解为战略关键词是整个设计语言顶部金字塔。

二、运用情绪版提取二级关键词

一看就懂！详解大厂UI设计规范制作步骤

有了一级关键词后，需要去思考，那么什么样的设计能给人全球化的感受呢，什么样的感觉能有高品质，正品应该传递什么样的感觉呢？此刻需要用到第二个方法就是情绪版，通过情绪版去把符合这些关键词感受的图形具体化。

三、高品质特征是什么？

下图是一组日本的花茶设计，那么在这组设计中，设计师是如何体现高品质呢？

一看就懂！详解大厂UI设计规范制作步骤

△ 首先包装很精美耐看，设计简约

一看就懂！详解大厂UI设计规范制作步骤

△ 做工精量，整个产品包装，都是在富士山脚下

一看就懂！详解大厂UI设计规范制作步骤

△ 采摘环境很透明，值得被信任

一看就懂！详解大厂UI设计规范制作步骤

△ 整个品茶的过程也特别让人向往，很有仪式感

一看就懂！详解大厂UI设计规范制作步骤

△ 整个的设计很完整，很有设计感在里面

一看就懂！详解大厂UI设计规范制作步骤

通过以上案例拆解，我们能对这个高品质的关键词有更加进一步的理解，高品质原来在情感层面是一个这么抽象的感觉，但是很多同学会问，那么这二级词汇也很抽象，如何靠这个来做设计，很难去理解及表达，别着急，还有下一步。

1. 高品质设计表现形式？

关于高品质在视觉形式上如何来体现了，哪些设计感觉能代表高品质呢，这个时候就需要我们去寻找一些设计参考，这些案例要能代表高品质。

一看就懂！详解大厂UI设计规范制作步骤

△ 清晰的有品质的图片

一看就懂！详解大厂UI设计规范制作步骤

△ 牛皮癣，不精致不可取

一看就懂！详解大厂UI设计规范制作步骤

△ 优雅的排版和留白，文字清晰，杂志感受

一看就懂！详解大厂UI设计规范制作步骤

△ 图文密集，缺少版式不可取

一看就懂！详解大厂UI设计规范制作步骤

△ 精致的布局，栅格的体系，给人品质感

一看就懂！详解大厂UI设计规范制作步骤

△ 缺乏版式及设计感

一看就懂！详解大厂UI设计规范制作步骤

△ 有设计细节的

一看就懂！详解大厂UI设计规范制作步骤

△ 无细节不可取

一看就懂！详解大厂UI设计规范制作步骤

△ 合理的配色，简单清晰

一看就懂！详解大厂UI设计规范制作步骤

△ 山寨的配色不可取

一看就懂！详解大厂UI设计规范制作步骤
一看就懂！详解大厂UI设计规范制作步骤
一看就懂！详解大厂UI设计规范制作步骤
一看就懂！详解大厂UI设计规范制作步骤
一看就懂！详解大厂UI设计规范制作步骤

△ 设计的延续性和完整性

2. GOOD CASE

一看就懂！详解大厂UI设计规范制作步骤
一看就懂！详解大厂UI设计规范制作步骤

3. BAD CASE

一看就懂！详解大厂UI设计规范制作步骤

四、设计分层

以上就是我们从一个战略关键词逐步推导到一级关键词，到二级关键词，到设计手法，以及对应设计表达，推导的一个全过程。

  • 本能层：清晰的，有设计感的，做工精致
  • 行为层：完善的，值得信任的，用心的
  • 精神层：让人向往的，值得期待的
一看就懂！详解大厂UI设计规范制作步骤

五、总结

以上大概为一个设计关键词的全部推导过程及到设计手法的确定，也是设计语言里面最难的部分，后面的关键词也是类似的思考方法和思路，最终通过推导我们需要得出每个关键词的情绪图，以及对应设计特征，最终需要在界面中展示的形色字构质，一个完整过程。

一看就懂！详解大厂UI设计规范制作步骤
一看就懂！详解大厂UI设计规范制作步骤
一看就懂！详解大厂UI设计规范制作步骤

比如国际化，同样通过前面思路，我们需要去思考国际化如何在设计中体现，去提炼出代表国际化的象征物，如地标，国旗，邮戳，货币等等，包括如何在界面中融于国际化元素，以及人物和节日场景。

结语

希望大家可以通过我这期的分享，能够详细理解到如何从公司战略层提取到核心一级关键词，到二级关键词，以及对应的设计手法，对应到形色字构质，大家可以依据此方法去拿你现在手上的界面去做一次体系化的推导。

最后，依据推导出来的原则，以及对应的设计手法去做概念，去在界面中运用，最终完成设计语言第一步，设计关键词和设计手法定义。

图片素材作者：Tran Mau Tri Tam ✪



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务



评论(0) 浏览(3951)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档