首页

UI设计教程!如何提升你的设计水平

蓝蓝

最近半年尝试性的收了一个小徒弟,因为他今年毕业,我以为教起来会很顺利,因为他是平面设计专业而且PS软件基础还不错。但是实际上却遇到了不少的问题不少的弯路。我把它们整理了下来,总结了一下。分享给刚入门的Ui设计师们希望能帮到初学UI的你。

前端框架Bootstrap的使用

seo达人

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

1. 下载Bootstrap

下载地址:https://v3.bootcss.com/ 
进入后下载这个标题的Bootstrap 
这里写图片描述 
下载完成后,将所需的css,js复制到工程中即可

2. 拷贝官方的模块文件

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好,世界!</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

3. 页面添加组件

图片

  • 下面一个按钮为例:

    • 喜欢的样式
<button type="button" class="btn btn-primary">(首选项)Primary</button>
    
  • 1

这里写图片描述

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    
  • 1
  • 2
  • 3
  • 4
  • 5

这里写图片描述 
然后将二者结合即可:

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>
    
  • 1
  • 2
  • 3
  • 4
  • 5
- 最后的结果如下:
Left Middle Right

这里写图片描述

至此你就可以简单的用前端框架做出美观的界面了!

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

2018年12条移动端用户体验设计趋势

分享达人


在移动应用领域,事物正飞速发展。要想在用户体验设计领域获得成功,设计师必须有远见,并为即将到来的新挑战做好准备。

 

为了简化这个任务,我列出了2018年最重要、最有影响力的趋势,而且很有可能远不止如此。



设计流程与产品分析

蓝蓝

为什么近期市场上会出现大片的方法论呢?究其原因:是一种坏的学术风气或普通群众的跟风心里导致的。


互联网兴起初期,没有相应的专业或产品设计的学派,大部分设计师的出发点基本围绕「解决问题」的角度来做产品设计。当时唯一的理论点就是现在所谓的「竞品分析」。

CSS3弹性布局怎么兼容IE(11)?

seo达人

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

弹性布局(Flexbox)确实为我们构建复杂、灵活的布局带来了很大的便利,但是它的兼容性确实让人很头痛,下面是我遇到的一个问题:

理想效果:

IE11效果:

html大概结构:

[html] view plain copy
  1. <div class="box">  
  2.     <div class="input-container">  
  3.         <input />  
  4.         <div class="tooltip"></div>  
  5.     </div>  
  6.     <button></button>  
  7. </div>  

这里大致说一下css,input-container宽高没设死,由input决定,并设置position: relative;相对定位,并采用display: flex;弹性布局。tooltip设置绝对定位,通过top调整垂直位置,由input-container的弹性布局属性设置水平居中(是不是觉得我很作死,为什么不直接用绝对定位就把垂直水平都搞定了。哈哈,一切源于一颗装B+傻B的心,不过,能实际体会一下flexbox带来的问题,我觉得也挺好的)。


结果在chrome下正常,IE11下就成上图那样了,我上MDN Web看了一下,说弹性布局是支持IE11的(下图),但是从上图来看,IE下垂直方向是对的,但是水平方向却不对,说明flexbox还是没被支持,我也尝试着添加了各种前缀,还是不行。

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

UI是什么,涉及面有多广!

蓝蓝

UI(User Interface)即用户界面,人机交互设计,不仅指用户和界面,还包括用户和界面之间的关系。具体指人机交互、操作逻辑、界面美观的整体设计,好的UI不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

html模糊查询

seo达人

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

  1. <head>  
  2.     <meta charset="UTF-8">  
  3.     <title>模糊查询</title>  
  4. <style type="text/css">  
  5.     body{  
  6.         text-align:center;  
  7.     }  
  8.     #datas{  
  9.         display:none;  
  10.     }  
  11.     #txt{  
  12.         font-size:300%;  
  13.         width:80%;  
  14.         height:10%;  
  15.         margin-top:10%;  
  16.     }  
  17.     #msg{  
  18.         margin:0 auto;  
  19.         text-align:left;  
  20.         width:80%;  
  21.         border: medium solid #C0C0C0;   
  22.     }  
  23. </style>  
  24. </head>  
  25. <body>  
  26.   
  27. <form action="" method="post">  
  28. <!-- 搜索框 -->     
  29. <input type="text" id='txt' />  
  30. </form>  
  31. <!-- 模糊查询结果显示框 -->  
  32. <div id="msg"></div>  
  33.   
  34. <!-- 查询数据 -->  
  35. <div id="datas">  
  36. 城市,北京市,海淀区,东城区,西城区,宣武区,丰台区,朝阳区,崇文区,大兴区,石景山区,门头沟区,房山区,通州区,顺义区,怀柔区,昌平区,平谷区,密云县,延庆县,天津市,和平区,河西区,河北区,河东区,南开区,红桥区,北辰区,津南区,武清区,塘沽区,西青区,汉沽区,大港区,宝坻区,东丽区,蓟县,静海县,宁河县 ,上海,黄浦区,卢湾区,徐汇区,长宁区,静安区,普陀区,闸北区,杨浦区,虹口区,闵行区,宝山区,嘉定区,浦东新区,金山区,松江区,青浦区,南汇区,奉贤区,崇明县 ,重庆,渝中区,大渡口区,江北区,沙坪坝区,九龙坡区,南岸区,北碚区,万盛区,双桥区,渝北区,巴南区,万州区,涪陵区,黔江区,长寿区,江津区,永川区,南川区,綦江县,潼南县,铜梁县,大足县,荣昌县,璧山县,垫江县,武隆县,丰都县,城口县,梁平县,开县,巫溪县,巫山县,奉节县,云阳县,忠县,石柱土家族自治县,彭水苗族土家族自治县,酉阳苗族自治县,秀山土家族苗族自治县,新疆维吾尔自治区,乌鲁木齐,克拉玛依,石河子,阿拉尔市,图木舒克,五家渠,哈密,吐鲁番,阿克苏,喀什,和田,伊宁,塔城,阿勒泰,奎屯,博乐,昌吉,阜康,库尔勒,阿图什,乌苏 ,西藏自治区,拉萨,日喀则,宁夏回族自治区,银川,石嘴山,吴忠,固原,中卫,青铜峡市,灵武市,内蒙古自治区,呼和浩特,包头,乌海,赤峰,通辽,鄂尔多斯,呼伦贝尔,巴彦淖尔,乌兰察布,霍林郭勒市,满洲里市,牙克石市,扎兰屯市,根河市,额尔古纳市,丰镇市,锡林浩特市,二连浩特市,乌兰浩特市,阿尔山市 ,广西,南宁,柳州,桂林,梧州,北海,崇左,来宾,贺州,玉林,百色,河池,钦州,防城港,贵港,岑溪,凭祥,合山,北流,宜州,东兴,桂平,黑龙江,哈尔滨,大庆,齐齐哈尔,佳木斯,鸡西,鹤岗,双鸭山,牡丹江,伊春,七台河,黑河,绥化 加格达奇,五常,双城,尚志,纳河,虎林,密山,铁力,同江,富锦,绥芬河,海林,宁安,穆林,北安,五大连池,肇东,海伦,安达,吉林,长春,吉林,四平,辽源,通化,白山,松原,白城,九台市,榆树市,德惠市,舒兰市,桦甸市,蛟河市,磐石市,公主岭市,双辽市,梅河口市,集安市,临江市,大安市,洮南市,延吉市,图们市,敦化市,龙井市,珲春市,和龙市,辽宁,沈阳,大连,金州,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛,新民,瓦房店,普兰,庄河,海城,东港,凤城,凌海,北镇,大石桥,盖州,灯塔,调兵山,开原,凌源,北票,兴城 ,河北,石家庄,唐山,邯郸,秦皇岛,保定,张家口,承德,廊坊,沧州,衡水,邢台,辛集市,藁城市,晋州市,新乐市,鹿泉市,遵化市,迁安市,武安市,南宫市,沙河市,涿州市,固安..定州市,安国市,高碑店市,泊头市,任丘市,黄骅市,河间市,霸州市,三河市,冀州市,深州市,山东,济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,菏泽,滨州,章丘,胶南,胶州,平度,莱西,即墨,滕州,龙口,莱阳,莱州,招远,蓬莱,栖霞,海阳,青州,诸城,安丘,高密,昌邑,兖州,曲阜,邹城,乳山,文登,荣成,乐陵,临清,禹城,江苏,南京,镇江,常州,无锡,苏州,徐州,连云港,淮安,盐城,扬州,泰州,南通,宿迁,江阴市,宜兴市,邳州市,新沂市,金坛市,溧阳市,常熟市,张家港市,太仓市,昆山市,吴江市,如皋市,通州市,海门市,启东市,东台市,大丰市,高邮市,江都市,仪征市,丹阳市,扬中市,句容市,泰兴市,姜堰市,靖江市,兴化市,安徽,合肥,蚌埠,芜湖,淮南,亳州,阜阳,淮北,宿州,滁州,安庆,巢湖,马鞍山,宣城,黄山,池州,铜陵,界首,天长,明光,桐城,宁国,浙江,杭州,嘉兴,湖州,宁波,金华,温州,丽水,绍兴,衢州,舟山,台州,建德市,富阳市,临安市,余姚市,慈溪市,奉化市,瑞安市,乐清市,海宁市,平湖市,桐乡市,诸暨市,上虞市,嵊州市,兰溪市,义乌市,东阳市,永康市,江山市,临海市,温岭市,龙泉市,福建,福州,厦门,泉州,三明,南平,漳州,莆田,宁德,龙岩,福清市,长乐市,永安市,石狮市,晋江市,南安市,龙海市,邵武市,武夷山,建瓯市,建阳市,漳平市,福安市,福鼎市,广东,广州,深圳,汕头,惠州,珠海,揭阳,佛山,河源,阳江,茂名,湛江,梅州,肇庆,韶关,潮州,东莞,中山,清远,江门,汕尾,云浮,增城市,从化市,乐昌市,南雄市,台山市,开平市,鹤山市,恩平市,廉江市,雷州市 吴川市,高州市,化州市,高要市,四会市,兴宁市,陆丰市,阳春市,英德市,连州市,普宁市,罗定市,海南,海口,三亚,琼海,文昌,万宁,五指山,儋州,东方,云南,昆明,曲靖,玉溪,保山,昭通,丽江,普洱,临沧,安宁市,宣威市,个旧市,开远市,景洪市,楚雄市,大理市,潞西市,瑞丽市,贵州,贵阳,六盘水,遵义,安顺,清镇市,赤水市,仁怀市,铜仁市,毕节市,兴义市,凯里市,都匀市,福泉市,四川,成都,绵阳,德阳,广元,自贡,攀枝花,乐山,南充,内江,遂宁,广安,泸州,达州,眉山,宜宾,雅安,资阳,都江堰市,彭州市,邛崃市,崇州市,广汉市,什邡市,绵竹市,江油市,峨眉山市,阆中市,华蓥市,万源市,简阳市,西昌市,湖南,长沙,株洲,湘潭,衡阳,岳阳,郴州,永州,邵阳,怀化,常德,益阳,张家界,娄底,浏阳市,醴陵市,湘乡市,韶山市,耒阳市,常宁市,武冈市,临湘市,汨罗市,津市市,沅江市,资兴市,洪江市,冷水江市,涟源市,吉首市,武汉,襄樊,宜昌,黄石,鄂州,随州,荆州,荆门,十堰,孝感,黄冈,咸宁,大冶市,丹江口市,洪湖市,石首市,松滋市,宜都市,当阳市,枝江市,老河口市,枣阳市,宜城市,钟祥市,应城市,安陆市,汉川市,麻城市,武穴市,赤壁市,广水市,仙桃市,天门市,潜江市,恩施市,利川市,河南,郑州,洛阳,开封,漯河,安阳,新乡,周口,三门峡,焦作,平顶山,信阳,南阳,鹤壁,濮阳,许昌,商丘,驻马店,巩义市,新郑市,新密市,登封市,荥阳市,偃师市,汝州市,舞钢市,林州市,卫辉市,辉县市,沁阳市,孟州市,禹州市,长葛市,义马市,灵宝市,邓州市,永城市,项城市,济源市,山西,太原,大同,忻州,阳泉,长治,晋城,朔州,晋中,运城,临汾,吕梁,古交,潞城,高平,介休,永济,河津,原平,侯马,霍州,孝义,汾阳,陕西,西安,咸阳,铜川,延安,宝鸡,渭南,汉中,安康,商洛,榆林,兴平市,韩城市,华阴市,甘肃,兰州,天水,平凉,酒泉,嘉峪关,金昌,白银,武威,张掖,庆阳,定西,陇南,玉门市,敦煌市,临夏市,合作市,青海,西宁,格尔木,德令哈,江西,南昌,九江,赣州,吉安,鹰潭,上饶,萍乡,景德镇,新余,宜春,抚州,乐平市,瑞昌市,贵溪市,瑞金市,南康市,井冈山市,丰城市,樟树市,高安市,德兴市,台湾,台北,台中,基隆,高雄,台南,新竹,嘉义,板桥市,宜兰市,竹北市,桃园市,苗栗市,丰原市,彰化市,南投市,太保市,斗六市,新营市,凤山市,屏东市,台东市,花莲市,马公市 ,特别行政区,香港:中西区,东区,九龙城区,观塘区,南区,深水埗区,黄大仙区,湾仔区,油尖旺区,离岛区,葵青区,北区,西贡区,沙田区,屯门区,大埔区,荃湾区,元朗区,澳门:花地玛堂区,圣安多尼堂区(花王堂区),望德堂区,大堂区,风顺堂区(圣老楞佐堂区),离岛,氹仔,路环,  
  37. </div>    
  38. <script type="text/javascript">    
  39.     function handle(){    
  40.         var data = datas.split(",");  
  41.         var word = document.getElementById('txt').value;  
  42.         var value = "";  
  43.         for(var i = 1;i < data.length;i++){  
  44.             if(word!="" && data[i].match(word+".*") != null){  
  45.                 value += "<a onclick=add('"+ data[i] +"') href='#'>" + data[i] + "</a><br/>";  
  46.             }  
  47.         }         
  48.         document.getElementById('msg').innerHTML=value;  
  49.     }   
  50.     function add(city){  
  51.         document.getElementById('txt').value=city;  
  52.     }  
  53.     //firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。     
  54.     if(/msie/i.test(navigator.userAgent))    //ie浏览器     
  55.         {document.getElementById('txt').onpropertychange=handle     
  56.     } else{//非ie浏览器,比如Firefox     
  57.     alert(1)  
  58.         document.getElementById('txt').addEventListener("input",handle,false);     
  59.     }  
  60.     var datas = document.getElementById('datas').innerHTML;  
  61.   
  62. </script>    
  63.   
  64. </body>  
  65. </html>  
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

每一个成功UI设计师的辛酸背后

蓝蓝

每当夜深人静,我们已经憨憨入睡的时候,可能还有一群人还坐在电脑前,寻找着灵感,为的是第二天要交稿的设计更有创意而不停的改来改去。他们就是那些苦逼的UI设计师。

清除浮动的八种方法

seo达人

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

浮动是什么?

浮动元素会脱离文档流进行左浮或者右浮,直到碰到父级元素或者其他的浮动元素。

为什么清除浮动:浮动会导致父元素高度坍塌,因为浮动脱离文档流,浮动以后不占文档流的位置,撑开的父元素高度肯定会坍塌。

清除浮动的八种方法:

1、父级div给出固定的高度。手动定义height,这样就解决了父级元素获取不到高度的问题。

优点:代码量少,简单容易掌握。

缺点:只适合高度固定的布局,如果高度和父级div不同会出现问题。

2、overflow,设置overflow:hidden。

优点:代码少,浏览器支持。

缺点:会把超出的部分隐藏起来,而且不能配合position使用

3、额外标签,添加一个新的标签,如div,或者br,并且设置标签的属性clear:both;清除浮动,让父级能自动获得高度。

优点:代码少,浏览器支持,不会各种问题。

缺点:会有很多空的div或者br。

4、使用单伪类after和zoom,使用方法:

.clearfloat:after{

  content:"";//设置内容为空

  height:0;//高度为0

  line-height:0;//行高为0

  display:block;//将文本转为块级元素

  visibility:hidden;//将元素隐藏

  clear:both//清除浮动

 }

  .clearfloat{

 zoom:1;为了兼容IE

    }

优点:浏览器支持好,大型的浏览器都在使用,建议使用。

缺点:代码多,需要after和zoom都要使用才能兼容主流的浏览器。

5、双伪类清除浮动。使用方法:

.clearfloat:before,.clearfloatafter {

                 content: "";

                 display: block;

                  clear: both;

             }

            .clearfloat {

                 zoom: 1;

           }

缺点:不严谨不建议使用

6、父级div跟着浮动,所有代码一起浮动就会形成一个整体,

缺点:会产生新的问题,不建议使用。

7、父级定义display:table;将div属性变成的表格。

缺点:产生新的问题,而且影响布局。

8、overflow:auto;需要设置width,不设置height,浏览器会自动检测浮动区的高度。

缺点:容易生成滚动条。

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





Behance上总结的 2018年​最酷的设计趋势

分享达人


2018年,智能手机依然是我们主要的信息承载工具,更为有效且颇具趣味的响应式图标必将得到关注。同时,鲜艳丰富的色彩,精彩纷呈的插图设计都会博得用户眼球。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档