首页

根据json文件生成动态菜单

seo达人

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

[plain] view plain copy
  1. <span style="font-family:SimSun;font-size:16px;">admin.json</span>  
[plain] view plain copy
  1. <span style="font-family:SimSun;font-size:16px;">[  
  2.     {  
  3.         "image": "glyphicon glyphicon-home",//菜单前的图标  
  4.         "name": "设备管理",  
  5.         "submenu": [  
  6.             {  
  7.                 "image": "glyphicon glyphicon-cloud",  
  8.                 "name": "设备分类",  
  9.                 "submenu": [  
  10.                     {  
  11.                         "image": "glyphicon glyphicon-off",  
  12.                         "name": "电源管理",  
  13.                         "url": "html/Node/creditCardPower.html"  
  14.                     },  
  15.                     {  
  16.                             "image": "glyphicon glyphicon-lock",  
  17.                         "name": "门禁管理",  
  18.                         "url": "html/Guard/guardList.html"  
  19.                     },  
  20.                     {  
  21.                         "image": "glyphicon glyphicon-folder-open",  
  22.                         "name": "物品管理",  
  23.                         "url": "html/goods/goodsList.html"  
  24.                     },  
  25.                     {  
  26.                         "image": "glyphicon glyphicon-facetime-video",  
  27.                         "name": "视频管理",  
  28.                         "url": "html/monitor/monitorList.html"  
  29.                     }  
  30.                 ]  
  31.             }  
  32.         ]  
  33.     },  
  34.     {  
  35.         "image": "glyphicon glyphicon-cog",  
  36.         "name": "系统设置",  
  37.         "submenu": [  
  38.             {  
  39.                 "image": "glyphicon glyphicon-heart",  
  40.                 "name": "用户管理",  
  41.                 "submenu": [  
  42.                     {  
  43.                         "image": "glyphicon glyphicon-align-justify",  
  44.                         "name": "用户列表",  
  45.                         "url": "html/User/userList.html"  
  46.                     },  
  47.                     {  
  48.                         "image": "glyphicon glyphicon-random",  
  49.                         "name": "组织机构",  
  50.                         "url": "html/dept/framework.html"  
  51.                     }  
  52.                 ]  
  53.             },  
  54.             {  
  55.                 "image": "glyphicon glyphicon-wrench",  
  56.                 "name": "设备管理",  
  57.                 "submenu": [  
  58.                     {  
  59.                         "image": "glyphicon glyphicon-edit",  
  60.                         "name": "设备参数",  
  61.                         "url": "html/Device/DeviceList.html"  
  62.                     },  
  63.                     {  
  64.                         "image": "glyphicon glyphicon-edit",  
  65.                         "name": "物品库",  
  66.                         "url": "html/equgoods/equGoodsList.html"  
  67.                     }  
  68.                 ]  
  69.             }  
  70.         ]  
  71.     },  
  72.     {  
  73.         "image": "glyphicon glyphicon-list",  
  74.         "name": "日志管理",  
  75.         "submenu": [  
  76.             {  
  77.                 "image": "glyphicon glyphicon-list-alt",  
  78.                 "name": "登入日志",  
  79.                 "url": "html/Log/loginlog.html"  
  80.             },  
  81.             {  
  82.                 "image": "glyphicon glyphicon-tag",  
  83.                 "name": "设备日志",  
  84.                 "url": "html/Log/hardwarelog.html"  
  85.             }  
  86.         ]  
  87.     },  
  88.     {  
  89.         "image":"glyphicon glyphicon-list",  
  90.         "name":"设备管理",  
  91.         "submenu":[  
  92.             {  
  93.             "image":"glyphicon glyphicon-list-alt",  
  94.             "name":"设备管理",  
  95.             "url":"html/mechanism/mechanism.html"  
  96.             }  
  97.         ]  
  98.     }  
  99. ]</span>  

2、读取json文件的service层实现

[java] view plain copy
  1. <span style="font-size:16px;">package com.dskj.service.impl;  
  2.   
  3. import java.io.File;  
  4. import java.util.Scanner;  
  5. import org.springframework.beans.factory.annotation.Value;  
  6. import org.springframework.core.io.Resource;  
  7. import org.springframework.stereotype.Service;  
  8.   
  9. import com.dskj.common.util.StringUtil;  
  10. import com.dskj.service.ReadJsonService;  
  11.   
  12. @Service  
  13. public class ReadJsonServiceImpl implements ReadJsonService{  
  14.     <span style="color:#ff0000;">@Value(value="classpath:json/admin.json")</span>  
  15.     private Resource dataAdmin;      
  16.     <span style="color:#ff0000;">@Value(value="classpath:json/user.json")</span>  
  17.     private Resource dataUser;    
  18.       
  19.     public String getData(String fileName){       
  20.         if(StringUtil.isEmpty(fileName)){  
  21.             throw new NullPointerException();  
  22.         }  
  23.           
  24.         String jsonData = null;  
  25.           
  26.         try {  
  27.             File file = null;     if(fileName.equals("admin.json")){  
  28.                 file = dataAdmin.getFile();  
  29.             }else{  
  30.                 file = dataUser.getFile();  
  31.             }  
  32.               
  33.             jsonData = this.jsonRead(file);  
  34.               
  35.         } catch (Exception e) {  
  36.            e.printStackTrace();  
  37.         }    
  38.         return jsonData;         
  39.     }  
  40.     /** 
  41.      * 读取文件类容为字符串 
  42.      * @param file 
  43.      * @return 
  44.      */  
  45.       private String jsonRead(File file){  
  46.             Scanner scanner = null;  
  47.             StringBuilder buffer = new StringBuilder();  
  48.             try {  
  49.                 scanner = new Scanner(file, "utf-8");  
  50.                 while (scanner.hasNextLine()) {  
  51.                     buffer.append(scanner.nextLine());  
  52.                 }  
  53.             } catch (Exception e) {  
  54.                   
  55.             } finally {  
  56.                 if (scanner != null) {  
  57.                     scanner.close();  
  58.                 }  
  59.             }  
  60.             return buffer.toString();  
  61.         }  
  62. }</span>  

3、controller对应的代码片段

[java] view plain copy
  1. <span style="font-size:16px;">@RequestMapping("")  
  2.     public ModelAndView main() {  
  3.         ModelAndView model = null;  
  4.         String jsonFileName = null;  
  5.           
  6.         SysUser currentUser = (SysUser) ContextUtil.getSession().getAttribute("currentUser");  
  7.         if ("admin".equals(currentUser.getUsername())) {  
  8.             model = new ModelAndView("header1");  
  9.             jsonFileName = "<span style="color:#ff0000;">admin.json</span>";//根据文件名判断读取具体json文件  
  10.         } else {  
  11.             model = new ModelAndView("headerUser");  
  12.             jsonFileName = "<span style="color:#ff0000;">user.json</span>";</span>/<span style="font-size:16px;">/根据文件名判断读取具体json文件  
  13.   
  14.         }  
  15.           
  16.         String menue = <span style="color:#3333ff;">readJsonServiceImpl.getData</span>(jsonFileName);  
  17.           
  18.         model.addObject("menue", menue);  
  19.         return model;  
  20.   
  21.     }</span>  

4、html页面 将jsonarray转换成js对象

[javascript] view plain copy
  1. <span style="font-size:16px;">$(function() {  
  2.     var menue = JSON.parse('<span style="color:#ff0000;"><%=request.getAttribute("menue")%></span>');  
  3.     console.info(menue);  
  4.     createMenu(menue);//调用下边的方法生成动态菜单</span>  

5、对js对象遍历 $.append动态添加到对应页面

[javascript] view plain copy
  1. <span style="font-size:16px;">function createMenu(menue){  
  2.             /* 一级菜单 */  
  3.             $.each(menue,function(i,v){  
  4.                 var menu1 = '<li class="active"><a href="javaScript:;">';  
  5.                 /* menu1 += '<span class="glyphicon glyphicon-home"></span>'; */  
  6.                 menu1 += '<span class=' + '\'' + v.image + '\'' + '>' + '</span>';  
  7.                 menu1 += '<span style="margin-left: 10px;">' + v.name + '</span><span class="fa arrow"></span>';  
  8.                 menu1 += '</a>';  
  9.                 menu1 += '<ul class="nav nav-second-level nps collapse in">';  
  10.                   
  11.                  /* 二级菜单  */  
  12.                     $.each(v.submenu,function(j,vJ){                      
  13.                         var menu2 = '<li class="active">';  
  14.                         menu2 +=        '<a href="javaScript:;" class="">';  
  15.                         /* menu2 +=         '<span class="glyphicon glyphicon-cloud" style="margin-right: 10px;"></span>'; */  
  16.                         menu2 +=            '<span class=' + '\'' + vJ.image + '\'' + 'style=' + '\'' + 'margin-right: 10px;' + '\'' + '>' + '</span>';  
  17.                         menu2 +=             vJ.name + '<span class="fa arrow "></span>';  
  18.                         menu2 +=        '</a>';  
  19.                         menu2 +=                '<ul class="nav nav-third-level nps collapse in">';                             
  20.                               
  21.                         /* 三级菜单 */  
  22.                         if(vJ.submenu){  
  23.                             $.each(vJ.submenu,function(k,vk){  
  24.                                 var menu3 = '<li>';  
  25.                                 menu3 +=        '<a href="javascript:openUrl(\'' + vk.url + '\')">';  
  26.                                 /* menu3 +=             '<span style="margin-right: 10px;" class="glyphicon glyphicon-off">'; */  
  27.                                 menu3 +=            '<span stype=' + '\'' + 'margin-right: 10px;' + '\'' + 'class=' + '\'' + vk.image + '\'' + '';  
  28.                                 menu3 +=            '</span>'+vk.name;  
  29.                                 menu3 +=        '</a>';  
  30.                                 menu3 +=    '</li>';  
  31.                                   
  32.                                 menu2 += menu3;  
  33.                                       
  34.                             });  
  35.                         }else{  
  36.                             $.each(v.submenu,function(j,vJ){  
  37.                                 var menu4 = '<li>';  
  38.                                 menu4 +=        '<a href="javascript:openUrl(\'' + vJ.url + '\')">';  
  39.                                 /* menu3 +=             '<span style="margin-right: 10px;" class="glyphicon glyphicon-off">'; */  
  40.                                 menu4 +=            '<span stype=' + '\'' + 'margin-right: 10px;' + '\'' + 'class=' + '\'' + vJ.image + '\'' + '';  
  41.                                 menu4 +=            '</span>'+vJ.name;  
  42.                                 menu4 +=        '</a>';  
  43.                                 menu4 +=    '</li>';  
  44.                                       
  45.                                  menu2 = menu4;   
  46.                             });  
  47.                         }  
  48.                             menu1 += menu2;  
  49.                     });  
  50.                       
  51.                     $("#side-menu").append(menu1);  
  52.                 });  
  53.                   
  54.             }</span>  

6、效果如下图

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

看看老外的社交APP UI界面设计,不知道你能有启发不?

蓝蓝

社交软件已然成为现今人们沟通交流的主要媒介,那什么样的对话页面更大家受欢迎呢?对话页面的ui要怎么设计呢?下面列举12个国外社交app ui设计案例供设计师盆友们参考。

jquery原理的简单分析

周周

       jquery是一个轻量级的JS框架,这点相信大部分人都听过,而jquery之所以有这样一个称呼,就是因为它悄悄披了一件外衣,将自己给隐藏了起来。

      /以下截取自jquery源码片段
      (function( window, undefined ) {
      /*    源码内容    */
       })( window );

      上面这一小段代码来自于1.9.0当中jquery的源码,它是一个无污染的JS插件的标准写法,专业名词叫闭包。可以把它简单的看做是一个函数,与普通函数不同的是,这个函数没有名字,而且会立即执行,就像下面这样,会直接弹出字符串。

      (function( window, undefined ) {
         alert("Hello World!");
       })( window );

       可以看出来这样写的直接效果,就相当于我们直接弹出一个字符串。但是不同的是,我们将里面的变量变成了局域变量,这不仅可以提高运行速度,更重要的是我们在引用jquery的JS文件时,不会因为jquery当中的变量太多,而与其它的JS框架的变量命名产生冲突。对于这一点,我们拿以下这一小段代码来说明。

     var temp = "Hello World!";
        (function( window, undefined ) {
         var temp = "ByeBye World!";
        })( window );
        alert(temp);

       这段代码的运行结果是Hello而不是ByeBye,也就是说闭包中的变量声明没有污染到外面的全局变量,倘若我们去掉闭包,则最终的结果会是ByeBye,就像下面这样。

      var temp = "Hello World!";
        //    (function( window, undefined ) {
         var temp = "ByeBye World!";
      //    })( window );
       alert(temp);

       由此就可以看出来,jquery的外衣就是这一层闭包,它是很重要的一个内容,是编写JS框架必须知道的知识,它可以帮助我们隐藏我们的临时变量,降低污染。

       刚才我们说了,jquery将自己声明的变量全部都用外衣遮盖起来了,而我们平时使用的Jquery和$,却是真真实实的全局变量,这个是从何而来,谜底就在jquery的某一行代码,一般是在文件的末尾。

window.jQuery = window.$ = jQuery;
       这一句话将我们在闭包当中定义的jQuery对象导出为全局变量jQuery和$,因此我们才可以在外部直接使用jQuery和$。window是默认的JS上下文环境,因此将对象绑定到window上面,就相当于变成了传统意义上的全局变量,就像下面这一小段代码的效果一样。

      var temp = "Hello World!";
      (function( window, undefined ) {
         var temp = "ByeBye World!";
         window.temp = temp;
       })( window );
       alert(temp);

       很明显,它的结果应该是ByeBye,而不是Hello。因为我们在闭包中导出了temp局部变量为全局变量,从而覆盖了第一行声明的全局变量temp。

        jquery最核心的功能,就是选择器。而选择器简单理解的话,其实就是在DOM文档中,寻找一个DOM对象的工具。

        首先我们进入jquery源码中,可以很容易的找到jquery对象的声明,看过以后会发现,原来我们的jquery对象就是init对象。

         jQuery = function( selector, context ) {
          return new jQuery.fn.init( selector, context, rootjQuery );
         }

         jQuery.fn = jQuery.prototype;

         jQuery.fn.init.prototype = jQuery.fn;
        这两句话,第一句把jQuery对象的原型赋给了fn属性,第二句把jQuery对象的原型又赋给了init对象的原型。也就是说,init对象和jQuery具有相同的原型,因此我们在上面返回的init对象,就与jQuery对象有一样的属性和方法。
很多时候,我们在jQuery和DOM对象之间切换时需要用到[0]这个属性。从截图也可以看出,jQuery对象其实主要就是把原生的DOM对象存在了[0]的位置,并给它加了一系列简便的方法。这个索引0的属性我们可以从一小段代码简单的看一下它的由来,下面是init方法中的一小段对DOMElement对象作为选择器的源码。

      // Handle $(DOMElement)
       if ( selector.nodeType ) {
            /*     可以看到,这里将DOM对象赋给了jQuery对象的[0]这个位置  */
            this.context = this[0] = selector;
            this.length = 1;
           return this;
        }

       这一小段代码可以在jquery源码中找到,它是处理传入的选择参数是一个DOM对象的情况。可以看到,里面很明显的将jQuery对象索引0的位置以及context属性,都赋予了DOM对象。代码不仅说明了这一点,也同时说明了,我们使用$(DOMElement)可以将一个DOM对象转换为jQuery对象,从而通过转换获得jQuery对象的简便方法。

项目总结关于ionic3中的ion-segment的总结

seo达人

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


目前做的项目是ionic3和angular4.0的结合,所以用到了很多关于ionic3中封装好的标签,例如具有轮播效果的ion-slides和ion-slide等。那么这次就要总结一下另外一个标签ion-segment的用法了。 
ion-segment这个标签以前用的很少,几乎没有用过。它主要是一组按钮,有时称为分段控件,之前都是用button按钮,现在知道了,开始用ion-segment,因为它有自带的样式,这样就可节省很多时间,同时呢允许用户与许多控件的紧凑组进行交互。 分段提供与标签相似的功能,选择一个将取消选择所有其他选项。 当您希望让用户在应用程序的不同页面之间来回移动时,应使用选项卡栏而不是分段控件。 您可以使用Angular的ngModel或FormBuilder API。 
下面来看一段代码:

Segment 在头部使用

<ion-header> <ion-toolbar> <ion-segment [(ngModel)]="icons" color="secondary"> <ion-segment-button value="camera"> <ion-icon name="camera">带iocn</ion-icon> </ion-segment-button> <ion-segment-button value="bookmark"> 头部使用Segment <ion-icon name="bookmark"></ion-icon> </ion-segment-button> </ion-segment> </ion-toolbar> </ion-header>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

Segment 在内容里面使用

<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)"> <ion-segment-button value="friends"> Segment 在内容里面使用 </ion-segment-button> <ion-segment-button value="enemies"> 可以绑定一个事件(ionChange) </ion-segment-button> </ion-segment>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Segment 在表单里面使用

<form [formGroup]="myForm"> <ion-segment formControlName="mapStyle" color="danger"> <ion-segment-button value="standard"> Standard </ion-segment-button> <ion-segment-button value="hybrid"> 表单内使用 </ion-segment-button> <ion-segment-button value="sat"> Satellite </ion-segment-button> </ion-segment> </form>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
Segment 配合ngSwitch使用
<ion-segment [(ngModel)]="change"> <ion-segment-button value="apple"> 苹果 </ion-segment-button> <ion-segment-button value="pie"></ion-segment-button> </ion-segment> <div [ngSwitch]="change"> <div *ngSwitchCase="'apple'">
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
苹果显示,如果要默认显示一个就把默认的那个设置一个初始值比如要默认显示苹果就把苹果的value值设置成change也就是说,在定义change变量的时候,需要把哪个设置为默认显示就把哪个的value值赋值给change作为初始值 public change=”pie”;


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

css的多行省略号处理

周周

      在我们的页面布局的时候,经常会有这样的需求,超过指定行文本的时候会进行(省略号...)的处理,那么我们改怎么设置css呢?如下:

设置盒子的css为:

  • overflow:hidden;;
  • text-overflow:ellipsis;
  • white-space:nowrap;

       但是这样只能显示一行而不能实现指定行,所以还要其他的方法来实现指定行处理的



     WebKit浏览器或移动端的页面(大部分移动端都是webkit)

        可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个不规范的属性,它没有出现在 CSS 规范草案中。



        -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
       常见结合属性:
  • display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

     css 代码:

  • overflow:hidden;
  • text-overflow: ellipsis;
  • display: -webkit-box;
  • -webkit-line-clamp:2;/*这里控制着显示多少行*/
  • -webkit-box-orient:vertical;


如何看懂UI效果图

蓝蓝

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

2018年的20个最佳网站设计启发你!

博博


番茄匠APP 2018-05-18 15:07:48

美丽的获奖网站

1. Feed

奖励:Awwwards当日的场地(6/6/2015)

Feed不仅是一个有趣的概念,它还有一个令人惊叹的执行过程,它挑战了我们对网络上的可能性的理解。通过动画和视频的创意融合,该网站让用户沉浸在非常吸引人的体验中。作为一个非典型的网站,它还包含几个独特的可用性元素,其中包括一个导航,可以作为滚动进度条加倍。

2018年的20个最佳网站设计启发你!

2. crypton.trading

奖项:Awwwards当日的场地(4/3/2018)

认识你的机器人会计师crypton.trading。

Crypton.trading是比特币等加密货币的交易中心,它使用人工智能来预测货币价值的变化并确定关键的购买和销售机会。该网站因其开发和设计而被评为高,因为它逐渐向更多的下游游客滚动,更多地解释了开发者的方法。

这个屡获殊荣的网站让熟悉技术的访问者在主页上出现Crypt的问候时感到宾至如归,每次只有一封信。

2018年的20个最佳网站设计启发你!

3. ETQ

奖励:Awwwards当日的场地(5/19/2015)

ETQ采用非常简约的电子商务方式,在精简的网站上放置大量引人注目的产品视频。简单,平坦,基于颜色的背景伴随着强大的印刷术,有助于将注意力集中在用户到达的地方:鞋子。

2018年的20个最佳网站设计启发你!

4. Mikiya Kobayashi

奖励:Awwwards当日的场地(7/4/2015)

Mikiya是一位产品设计师,拥有简约的作品集,通过强大的摄影和微妙的动画展示了他的作品。他的全部网站最初是用日文创作的,然后翻译成英文,这有助于展示他设计的国际可扩展性。

2018年的20个最佳网站设计启发你!

5. Inside Abbey Road

奖项:最佳音乐网站,2016年威比奖

谷歌通过这个高度互动的网站将它从公园打出来,让用户可以进入Abbey Road Studios。辉煌的声音设计,导航机制以及混合了通常的“Google风格”的视觉效果都有助于吸引访问者访问这个制作精良的网络媒体资源。

2018年的20个最佳网站设计启发你!

6. Citrix: The New Mobile Workforce

奖:每日网站(11/23/2017),最佳网站图库

这个网站致力于红牛与基于云计算软件公司思杰的合作,这是非常了不起的。

新移动员工队是思杰旗下的一个网站,它使用全景摄影技术向观众展示思杰如何支持红牛车队的新赛车。即使你不是赛车爱好者,该网站的巧妙动画也可以解释复杂的汽车技术,这一点很难忽略。

2018年的20个最佳网站设计启发你!

7. The History of Climate Change

奖励:Awwwards当日网站(6/23/2015)

按照Luc Jacquet的脚步,Wild-Touch将带您参观关于全球气候变化历史的视觉和教育之旅。历史媒体和独特动画的混合有助于讲述故事。

2018年的20个最佳网站设计启发你!

8. Beagle

奖:每日网站(4/19/2015),最佳网站图库

比格尔以一种简单易懂的方式在视觉上和逐步地讲述他们产品的故事方面做得非常出色。这对许多创业公司来说是一个重大挑战,特别是当他们将新概念引入现有市场时。人们想知道,“你的产品是什么?它是如何工作的?为什么我在乎?” 比格尔回答所有这些问题,同时展示他们的产品并强制用户购买。另外,他们是实际上正确实施“滚动劫持”的几个网站之一。

2018年的20个最佳网站设计启发你!

9. Southwest: Heart of Travel

奖:最佳视觉设计 - 审美,2018年威比奖

当西南航空想要证明其客户不仅仅是一个美元符号时,该公司创建了一个网站,其设计使用客户航线的形状进行组装。

这个名为“旅行之心 ”的网站甚至允许游客在他们计划参加的旅行中创建自己的作品。这样,西南航空的网站就是他们最忠诚的乘客的产品。

2018年的20个最佳网站设计启发你!

10. Woven Magazine

奖:每日网站(4/4/2015),最佳网站图库

Woven是一个在线刊物,为艺术家,工匠和制作人员提供赞美。对我而言,他们代表了一种确认,即出版物可以(也应该)拥有美观且引人入胜的网站,内容易于阅读。这个网站没有像弹出窗口和突兀的广告这样的分心,而是关于内容本身的体验。

2018年的20个最佳网站设计启发你!

11. JOHO's Bean

奖励:当日FWA(2015年8月8日),网站奖

JOHO's Bean的网站有令人难以置信的图像,交互性,讲故事,视觉设计,最重要的是音响工程。这些都聚集在一起,创造出一个引人入胜,情绪化和引人入胜的网站,讲述咖啡豆之旅的故事。

2018年的20个最佳网站设计启发你!

12. NOWNESS

奖项:最佳文化博客/网站,2017年威比奖

Nowness可能是当今互联网上最酷的众包视频博客。那真是一口......所有这些意味着什么?

NOWNESS的“众包”性质是其获奖者的一部分。这意味着其大部分内容来自独立广告素材 - 这是企业发布内容的一种日益流行的方式。NOWNESS也是一个视频博客,这意味着它的所有博客内容都是视频格式。总之,这些品质有助于使Nowness成为各个品牌努力讲述的故事的迷人中心。

2018年的20个最佳网站设计启发你!

13. Virgin America

奖项:最重要的行业演变,2014 UX奖

在一个已知航空网站充斥着主要可用性问题的世界中,维珍美国公司拥有推动可用性,可访问性和快速响应设计的最佳网站之一。事实上,它被命名为第一个真正快速响应的航空公司网站,这是该行业的一个新的先例。

2018年的20个最佳网站设计启发你!

14. World of SWISS

奖项:最佳用户界面,2015年威比奖

另一家航空公司?发生什么事?!是的,瑞航的航空公司建立了一个令人难以置信的身临其境的网站,讲述他们的故事,并描述与他们一起飞行的感觉 - 而且他们的工作太过繁重,无人理睬。强大的视觉效果和动画将用户介绍到网站的不同部分,这些部分除了通常的销售和市场营销信息外,还包含了今天如此常见的信息。

2018年的20个最佳网站设计启发你!

15. Reductress

奖项:最佳幽默网站,2018年威比奖

在互联网上嘲笑别人并不难,我们在网上阅读和消费的东西很多都是为了娱乐。但是对于大量观众来说,很难一致地做到这一点。Reductress是一本讽刺杂志,其头条和一般阅读体验是幽默部门的 - 使网站本身成为一个高质量的财产。

2018年的20个最佳网站设计启发你!

其他酷网站设计

16. Minimums

Minimums采用非常大胆的方式展示他们的内容,利用基于网格的网站设计,大字体和全幅高质量图像。他们的网站是如何正确执行网格结构,同时在设计中保持良好的视觉层次结构的一个非常好的例子。

2018年的20个最佳网站设计启发你!

17. Guillaume Tomasi

作为蒙特利尔的摄影师,Guillaume Tomasi建立了一个真正适合他的独特而令人敬畏的摄影作品。他超现实的照片风格与简单,平坦,空洞,简约的组合设计并列,将所有的焦点放在作品本身上。

他独特的系列导航加上艺术画廊风格的作品介绍和完美的滚动互动让人联想到真实画廊的体验。

2018年的20个最佳网站设计启发你!

18. The District

这家品牌代理机构认真对待它的形象,它应该 - 为客户处理所有媒体渠道。该地区的网站,是通过一些你见过的最美丽的艺术品和摄影的旅程。

当你探索网站时,这些挑衅性的瓷砖变化很快,而且他们看起来更加奇特,对你学习过去的工作越感兴趣。

2018年的20个最佳网站设计启发你!

19. Tej Chauhan

Tej Chauhan通过这个有趣的网站将印象派艺术品变成了商业模式。该产品开发人员主页上的每张图片都会滑出以覆盖上一张图片,从而为您现在在您面前看到的物体提供很少的背景信息。

但是,是不是缺乏正确的背景知识,让你想了解更多?标语“近期未来的纪念品”表明这些物品是他们产品线的一部分 - 这是您将这些创新物品带入您的生活的机会。

2018年的20个最佳网站设计启发你!

20. Amanda Martocchio Architecture

一家建筑公司可能并不专注于网站开发,但其网站仍应展示其对视觉上令人愉悦的设计的承诺。这个华丽的网站让阿曼达·马托基奥把它放在心上。

Amanda Martocchio Architecture喜欢它的作品并不是什么秘密- 它网站主页上的每张图片都是公司设计的房屋的迷人镜头。该网站标出了每个房屋的滚动条件,以及各种建筑物的各种角度。

2018年的20个最佳网站设计启发你!

Dribbble 界面设计灵感 33

博博


UI设计爱好者 2018-05-03 16:58:07

作者:设计达人(ID:shejidaren888)

这次 Dribbble UI 灵感主要精选网页、APP 以及一些后台管理界面,每个精选出来的界面设计的赞数都是几百+或者几 K ~

PS:当你看中某作品时,你可以点击作者名称来查看该设计师更多作品。(微信公众号不支持外链,只能点「阅读原文」来查看所有链接)

Dribbble 界面设计灵感 #33

Dribbble 界面设计灵感 33

个人主页设计 by Mike

Dribbble 界面设计灵感 33

CRM 管理系统界面设计 by Divan Raj

Dribbble 界面设计灵感 33

EverDo 应用界面 by Jakub Reis

Dribbble 界面设计灵感 33

接上,EverDo 界面的一些表单元素 by Balkan Brothers

Dribbble 界面设计灵感 33

随机实验 by Nick Franchi

Dribbble 界面设计灵感 33

Coindesk by uixNinja

Dribbble 界面设计灵感 33

一套 UI 素材:Planguru by Patryk Pustol

Dribbble 界面设计灵感 33

酒店 APP 后台(iPhoneX) by Divan Raj

Dribbble 界面设计灵感 33

B3Sound 网站着陆页设计 by Outcrowd

Dribbble 界面设计灵感 33

Smart Security Camera App by Ionut Zamfir

Dribbble 界面设计灵感 33

Iterable 插画草图 by Ramotion

Dribbble 界面设计灵感 33

后台界面 by uixNinja

Dribbble 界面设计灵感 33

Dating 应用项目 by Divan Raj

Dribbble 界面设计灵感 33

Benti by Jakub Dziedzic ♠️

Dribbble 界面设计灵感 33

Surf Guide Mobile Swipe Distort by Nathan Riley

Dribbble 界面设计灵感 33

C / Sen Design Lab by Mike | Creative Mints

Dribbble 界面设计灵感 33

Chripcase 后台界面 by Goutham

Dribbble 界面设计灵感 33

Raika Plant by Nicola Baldo

Dribbble 界面设计灵感 33

网页聊天应用界面 by Michal Parulski

Dribbble 界面设计灵感 33

网页版的音乐 UI by Giga Tamarashvili

Dribbble 界面设计灵感 33

Music UI by Giga Tamarashvili

Dribbble 界面设计灵感 33

Blockсhain revolution by Dmitrii Kharchenko

Dribbble 界面设计灵感 33

USB Types by Gal Shir

Dribbble 界面设计灵感 33


23个使用大背景的全屏网页设计作品

博博


UI设计爱好者 2018-05-07 11:31:09

在2013年的时候使用全屏背景或者大图片的网页开始流行起来,到了今年,还是经常看到这类风格的页面出现,可见这个趋势还是很流行的,值得运用。

一张大图再配合一个优秀的排版布局,这样一个美丽的页面就形成了,比起视差网页、动效网页成本低了很多,但视觉效果还是能令人满意的,下面精选一些优秀的大背景网页设计作品给你欣赏,也行会给你带来更多灵感哦!

这于高清图片素材建议大家去设计导航里面的免费图片素材上查找。

Nike – Geç Kendini

23个使用大背景的全屏网页设计作品

查看网页

Edwin Europe

23个使用大背景的全屏网页设计作品

查看网页

Esprit Cox

23个使用大背景的全屏网页设计作品

查看网页

Feed

23个使用大背景的全屏网页设计作品

查看网页

Truth Labs Portfolio

23个使用大背景的全屏网页设计作品

查看网页

Natural Food & Beverages

23个使用大背景的全屏网页设计作品

查看网页

La Plus GRANDE Cave À Bière Du Monde

23个使用大背景的全屏网页设计作品

查看网页

Ice And Sky : The History Of Climate Change

23个使用大背景的全屏网页设计作品

查看网页

Fivefootsix

23个使用大背景的全屏网页设计作品

查看网页

For Better Coffee

23个使用大背景的全屏网页设计作品

查看网页

Brdr. Krüger

23个使用大背景的全屏网页设计作品

查看网页

The Boat

23个使用大背景的全屏网页设计作品

查看网页

Beagle – Better Proposals

23个使用大背景的全屏网页设计作品

查看网页

Webdesign Agency Weblounge

23个使用大背景的全屏网页设计作品

查看网页

Words Can Save

23个使用大背景的全屏网页设计作品

查看网页

Well Storied

23个使用大背景的全屏网页设计作品

查看网页

Fabrica

23个使用大背景的全屏网页设计作品

查看网页

Alexander Engzell Portfolio

23个使用大背景的全屏网页设计作品

查看网页

Cartelle Amsterdam

23个使用大背景的全屏网页设计作品

查看网页

Printemps Du Polar

23个使用大背景的全屏网页设计作品

查看网页

Ashworth GOLF/MAN

23个使用大背景的全屏网页设计作品

查看网页

HBM FiberSensing

23个使用大背景的全屏网页设计作品

查看网页

The | Marmalade

23个使用大背景的全屏网页设计作品

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档