无码人妻,国产无遮挡免费观看视频,精品久久久久久久久久香蕉

312018-5

根據(jù)json文件生成動(dòng)態(tài)菜單

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

                [plain] view plaincopy
                
                <span style="font-family:SimSun;font-size:16px;">admin.json</span>

[plain] view plain copy

[

 {

 "image": "glyphicon glyphicon-home",//菜單前的圖標(biāo)

 "name": "設(shè)備管理",

 "submenu": [

 {

 "image": "glyphicon glyphicon-cloud",

 "name": "設(shè)備分類",

 "submenu": [

 {

 "image": "glyphicon glyphicon-off",

 "name": "電源管理",

 "url": "html/Node/creditCardPower.html"

 },

 {

 "image": "glyphicon glyphicon-lock",

 "name": "門禁管理",

 "url": "html/Guard/guardList.html"

 },

 {

 "image": "glyphicon glyphicon-folder-open",

 "name": "物品管理",

 "url": "html/goods/goodsList.html"

 },

 {

 "image": "glyphicon glyphicon-facetime-video",

 "name": "視頻管理",

 "url": "html/monitor/monitorList.html"

 }

 ]

 }

 ]

 },

 {

 "image": "glyphicon glyphicon-cog",

 "name": "系統(tǒng)設(shè)置",

 "submenu": [

 {

 "image": "glyphicon glyphicon-heart",

 "name": "用戶管理",

 "submenu": [

 {

 "image": "glyphicon glyphicon-align-justify",

 "name": "用戶列表",

 "url": "html/User/userList.html"

 },

 {

 "image": "glyphicon glyphicon-random",

 "name": "組織機(jī)構(gòu)",

 "url": "html/dept/framework.html"

 }

 ]

 },

 {

 "image": "glyphicon glyphicon-wrench",

 "name": "設(shè)備管理",

 "submenu": [

 {

 "image": "glyphicon glyphicon-edit",

 "name": "設(shè)備參數(shù)",

 "url": "html/Device/DeviceList.html"

 },

 {

 "image": "glyphicon glyphicon-edit",

 "name": "物品庫",

 "url": "html/equgoods/equGoodsList.html"

 }

 ]

 }

 ]

 },

 {

 "image": "glyphicon glyphicon-list",

 "name": "日志管理",

 "submenu": [

 {

 "image": "glyphicon glyphicon-list-alt",

 "name": "登入日志",

 "url": "html/Log/loginlog.html"

 },

 {

 "image": "glyphicon glyphicon-tag",

 "name": "設(shè)備日志",

 "url": "html/Log/hardwarelog.html"

 }

 ]

 },

 {

 "image":"glyphicon glyphicon-list",

 "name":"設(shè)備管理",

 "submenu":[

 {

 "image":"glyphicon glyphicon-list-alt",

 "name":"設(shè)備管理",

 "url":"html/mechanism/mechanism.html"

 }

 ]

 }

]

2、讀取json文件的service層實(shí)現(xiàn)

[java] view plain copy

package com.dskj.service.impl;



import java.io.File;

import java.util.Scanner;

import org.springframework.beans.factory.annotation.Value;

import org.springframework.core.io.Resource;

import org.springframework.stereotype.Service;



import com.dskj.common.util.StringUtil;

import com.dskj.service.ReadJsonService;



@Service

public class ReadJsonServiceImpl implements ReadJsonService{

 @Value(value="classpath:json/admin.json")

 private Resource dataAdmin;

 @Value(value="classpath:json/user.json")

 private Resource dataUser;



 public String getData(String fileName){

 if(StringUtil.isEmpty(fileName)){

 throw new NullPointerException();

 }



 String jsonData = null;



 try {

 File file = null; if(fileName.equals("admin.json")){

 file = dataAdmin.getFile();

 }else{

 file = dataUser.getFile();

 }



 jsonData = this.jsonRead(file);



 } catch (Exception e) {

 e.printStackTrace();

 }

 return jsonData;

 }

 /**

 * 讀取文件類容為字符串

 * @param file

 * @return

 */

 private String jsonRead(File file){

 Scanner scanner = null;

 StringBuilder buffer = new StringBuilder();

 try {

 scanner = new Scanner(file, "utf-8");

 while (scanner.hasNextLine()) {

 buffer.append(scanner.nextLine());

 }

 } catch (Exception e) {



 } finally {

 if (scanner != null) {

 scanner.close();

 }

 }

 return buffer.toString();

 }

}

3、controller對(duì)應(yīng)的代碼片段

[java] view plain copy

@RequestMapping("")

 public ModelAndView main() {

 ModelAndView model = null;

 String jsonFileName = null;



 SysUser currentUser = (SysUser) ContextUtil.getSession().getAttribute("currentUser");

 if ("admin".equals(currentUser.getUsername())) {

 model = new ModelAndView("header1");

 jsonFileName = "admin.json";//根據(jù)文件名判斷讀取具體json文件

 } else {

 model = new ModelAndView("headerUser");

 jsonFileName = "user.json";//根據(jù)文件名判斷讀取具體json文件



 }



 String menue = readJsonServiceImpl.getData(jsonFileName);



 model.addObject("menue", menue);

 return model;



 }

4、html頁面將jsonarray轉(zhuǎn)換成js對(duì)象

[javascript] view plain copy

$(function() {

 var menue = JSON.parse('<%=request.getAttribute("menue")%>');

 console.info(menue);

 createMenu(menue);//調(diào)用下邊的方法生成動(dòng)態(tài)菜單

5、對(duì)js對(duì)象遍歷 $.append動(dòng)態(tài)添加到對(duì)應(yīng)頁面

[javascript] view plain copy

function createMenu(menue){

 /* 一級(jí)菜單 */

 $.each(menue,function(i,v){

 var menu1 = '<li class="active"><a href="javaScript:;">';

 /* menu1 += ''; */

 menu1 += '' + '';

 menu1 += '' + v.name + '';

 menu1 += '</a>';

 menu1 += '<ul class="nav nav-second-level nps collapse in">';



 /* 二級(jí)菜單 */

 $.each(v.submenu,function(j,vJ){

 var menu2 = '<li class="active">';

 menu2 += '<a href="javaScript:;" class="">';

 /* menu2 += ''; */

 menu2 += '' + '';

 menu2 += vJ.name + '';

 menu2 += '</a>';

 menu2 += '<ul class="nav nav-third-level nps collapse in">';



 /* 三級(jí)菜單 */

 if(vJ.submenu){

 $.each(vJ.submenu,function(k,vk){

 var menu3 = '<li>';

 menu3 += '<a href="javascript:openUrl(\'' + vk.url + '\')">';

 /* menu3 += ''; */

 menu3 += ''+vk.name;

 menu3 += '</a>';

 menu3 += '</li>';



 menu2 += menu3;



 });

 }else{

 $.each(v.submenu,function(j,vJ){

 var menu4 = '<li>';

 menu4 += '<a href="javascript:openUrl(\'' + vJ.url + '\')">';

 /* menu3 += ''; */

 menu4 += ''+vJ.name;

 menu4 += '</a>';

 menu4 += '</li>';



 menu2 = menu4;

 });

 }

 menu1 += menu2;

 });



 $("#side-menu").append(menu1);

 });



 }

6、效果如下圖

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(4253)

312018-5

自我超越之旅的小記錄2018528

藍(lán)藍(lán)設(shè)計(jì)的小編

評(píng)論(0) 瀏覽(3163)

312018-5

看看老外的社交APP UI界面設(shè)計(jì)，不知道你能有啟發(fā)不？

藍(lán)藍(lán)設(shè)計(jì)的小編

社交軟件已然成為現(xiàn)今人們溝通交流的主要媒介，那什么樣的對(duì)話頁面更大家受歡迎呢？對(duì)話頁面的ui要怎么設(shè)計(jì)呢？下面列舉12個(gè)國外社交app ui設(shè)計(jì)案例供設(shè)計(jì)師盆友們參考。

評(píng)論(0) 瀏覽(4306)

312018-5

jquery原理的簡單分析

周周

jquery是一個(gè)輕量級(jí)的JS框架，這點(diǎn)相信大部分人都聽過，而jquery之所以有這樣一個(gè)稱呼，就是因?yàn)樗那呐艘患庖?，將自己給隱藏了起來。

/以下截取自jquery源碼片段
(function( window, undefined ) {
/* 源碼內(nèi)容 */
})( window );

上面這一小段代碼來自于1.9.0當(dāng)中jquery的源碼，它是一個(gè)無污染的JS插件的標(biāo)準(zhǔn)寫法，專業(yè)名詞叫閉包?？梢园阉唵蔚目醋鍪且粋€(gè)函數(shù)，與普通函數(shù)不同的是，這個(gè)函數(shù)沒有名字，而且會(huì)立即執(zhí)行，就像下面這樣，會(huì)直接彈出字符串。

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

可以看出來這樣寫的直接效果，就相當(dāng)于我們直接彈出一個(gè)字符串。但是不同的是，我們將里面的變量變成了局域變量，這不僅可以提高運(yùn)行速度，更重要的是我們?cè)谝胘query的JS文件時(shí)，不會(huì)因?yàn)閖query當(dāng)中的變量太多，而與其它的JS框架的變量命名產(chǎn)生沖突。對(duì)于這一點(diǎn)，我們拿以下這一小段代碼來說明。

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

這段代碼的運(yùn)行結(jié)果是Hello而不是ByeBye，也就是說閉包中的變量聲明沒有污染到外面的全局變量，倘若我們?nèi)サ糸]包，則最終的結(jié)果會(huì)是ByeBye，就像下面這樣。

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

由此就可以看出來，jquery的外衣就是這一層閉包，它是很重要的一個(gè)內(nèi)容，是編寫JS框架必須知道的知識(shí)，它可以幫助我們隱藏我們的臨時(shí)變量，降低污染。

剛才我們說了，jquery將自己聲明的變量全部都用外衣遮蓋起來了，而我們平時(shí)使用的Jquery和$，卻是真真實(shí)實(shí)的全局變量，這個(gè)是從何而來，謎底就在jquery的某一行代碼，一般是在文件的末尾。

window.jQuery = window.$ = jQuery;
這一句話將我們?cè)陂]包當(dāng)中定義的jQuery對(duì)象導(dǎo)出為全局變量jQuery和$，因此我們才可以在外部直接使用jQuery和$。window是默認(rèn)的JS上下文環(huán)境，因此將對(duì)象綁定到window上面，就相當(dāng)于變成了傳統(tǒng)意義上的全局變量，就像下面這一小段代碼的效果一樣。

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

很明顯，它的結(jié)果應(yīng)該是ByeBye，而不是Hello。因?yàn)槲覀冊(cè)陂]包中導(dǎo)出了temp局部變量為全局變量，從而覆蓋了第一行聲明的全局變量temp。

jquery最核心的功能，就是選擇器。而選擇器簡單理解的話，其實(shí)就是在DOM文檔中，尋找一個(gè)DOM對(duì)象的工具。

首先我們進(jìn)入jquery源碼中，可以很容易的找到j(luò)query對(duì)象的聲明，看過以后會(huì)發(fā)現(xiàn)，原來我們的jquery對(duì)象就是init對(duì)象。

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

jQuery.fn = jQuery.prototype;

jQuery.fn.init.prototype = jQuery.fn;
這兩句話，第一句把jQuery對(duì)象的原型賦給了fn屬性，第二句把jQuery對(duì)象的原型又賦給了init對(duì)象的原型。也就是說，init對(duì)象和jQuery具有相同的原型，因此我們?cè)谏厦娣祷氐膇nit對(duì)象，就與jQuery對(duì)象有一樣的屬性和方法。
很多時(shí)候，我們?cè)趈Query和DOM對(duì)象之間切換時(shí)需要用到[0]這個(gè)屬性。從截圖也可以看出，jQuery對(duì)象其實(shí)主要就是把原生的DOM對(duì)象存在了[0]的位置，并給它加了一系列簡便的方法。這個(gè)索引0的屬性我們可以從一小段代碼簡單的看一下它的由來，下面是init方法中的一小段對(duì)DOMElement對(duì)象作為選擇器的源碼。

// Handle $(DOMElement)
   if ( selector.nodeType ) {
/*    可以看到，這里將DOM對(duì)象賦給了jQuery對(duì)象的[0]這個(gè)位置  */
this.context = this[0] = selector;
this.length = 1;
   return this;
}

這一小段代碼可以在jquery源碼中找到，它是處理傳入的選擇參數(shù)是一個(gè)DOM對(duì)象的情況?？梢钥吹?，里面很明顯的將jQuery對(duì)象索引0的位置以及context屬性，都賦予了DOM對(duì)象。代碼不僅說明了這一點(diǎn)，也同時(shí)說明了，我們使用$(DOMElement)可以將一個(gè)DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象，從而通過轉(zhuǎn)換獲得jQuery對(duì)象的簡便方法。

評(píng)論(0) 瀏覽(3128)

302018-5

項(xiàng)目總結(jié)關(guān)于ionic3中的ion-segment的總結(jié)

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

目前做的項(xiàng)目是ionic3和angular4.0的結(jié)合，所以用到了很多關(guān)于ionic3中封裝好的標(biāo)簽，例如具有輪播效果的ion-slides和ion-slide等。那么這次就要總結(jié)一下另外一個(gè)標(biāo)簽ion-segment的用法了。
ion-segment這個(gè)標(biāo)簽以前用的很少，幾乎沒有用過。它主要是一組按鈕，有時(shí)稱為分段控件，之前都是用button按鈕，現(xiàn)在知道了，開始用ion-segment，因?yàn)樗凶詭У臉邮?，這樣就可節(jié)省很多時(shí)間，同時(shí)呢允許用戶與許多控件的緊湊組進(jìn)行交互。分段提供與標(biāo)簽相似的功能，選擇一個(gè)將取消選擇所有其他選項(xiàng)。當(dāng)您希望讓用戶在應(yīng)用程序的不同頁面之間來回移動(dòng)時(shí)，應(yīng)使用選項(xiàng)卡欄而不是分段控件。您可以使用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 在內(nèi)容里面使用

<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)"> <ion-segment-button value="friends"> Segment 在內(nèi)容里面使用 </ion-segment-button> <ion-segment-button value="enemies"> 可以綁定一個(gè)事件(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"> 表單內(nèi)使用 </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

蘋果顯示，如果要默認(rèn)顯示一個(gè)就把默認(rèn)的那個(gè)設(shè)置一個(gè)初始值比如要默認(rèn)顯示蘋果就把蘋果的value值設(shè)置成change也就是說，在定義change變量的時(shí)候，需要把哪個(gè)設(shè)置為默認(rèn)顯示就把哪個(gè)的value值賦值給change作為初始值 public change=”pie”;

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(6316)

302018-5

css的多行省略號(hào)處理

周周

在我們的頁面布局的時(shí)候，經(jīng)常會(huì)有這樣的需求，超過指定行文本的時(shí)候會(huì)進(jìn)行（省略號(hào)...）的處理，那么我們改怎么設(shè)置css呢？如下：

設(shè)置盒子的css為：

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

但是這樣只能顯示一行而不能實(shí)現(xiàn)指定行，所以還要其他的方法來實(shí)現(xiàn)指定行處理的。

WebKit瀏覽器或移動(dòng)端的頁面（大部分移動(dòng)端都是webkit）

可以直接使用WebKit的CSS擴(kuò)展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個(gè)不規(guī)范的屬性，它沒有出現(xiàn)在 CSS 規(guī)范草案中。

-webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)。為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性。
常見結(jié)合屬性：

display: -webkit-box; 必須結(jié)合的屬性，將對(duì)象作為彈性伸縮盒子模型顯示。
-webkit-box-orient 必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式。
text-overflow: ellipsis;，可以用來多行文本的情況下，用省略號(hào)“…”隱藏超出范圍的文本。

css 代碼:

overflow：hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;/*這里控制著顯示多少行*/
-webkit-box-orient:vertical;

評(píng)論(0) 瀏覽(3231)

302018-5

如何看懂UI效果圖

藍(lán)藍(lán)設(shè)計(jì)的小編

UI即User Interface（用戶界面）的簡稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

評(píng)論(0) 瀏覽(4512)

302018-5

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你！

博博

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

美麗的獲獎(jiǎng)網(wǎng)站

1. Feed

獎(jiǎng)勵(lì)：Awwwards當(dāng)日的場(chǎng)地（6/6/2015）

Feed不僅是一個(gè)有趣的概念，它還有一個(gè)令人驚嘆的執(zhí)行過程，它挑戰(zhàn)了我們對(duì)網(wǎng)絡(luò)上的可能性的理解。通過動(dòng)畫和視頻的創(chuàng)意融合，該網(wǎng)站讓用戶沉浸在非常吸引人的體驗(yàn)中。作為一個(gè)非典型的網(wǎng)站，它還包含幾個(gè)獨(dú)特的可用性元素，其中包括一個(gè)導(dǎo)航，可以作為滾動(dòng)進(jìn)度條加倍。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你！

2. crypton.trading

獎(jiǎng)項(xiàng)：Awwwards當(dāng)日的場(chǎng)地（4/3/2018）

認(rèn)識(shí)你的機(jī)器人會(huì)計(jì)師crypton.trading。

Crypton.trading是比特幣等加密貨幣的交易中心，它使用人工智能來預(yù)測(cè)貨幣價(jià)值的變化并確定關(guān)鍵的購買和銷售機(jī)會(huì)。該網(wǎng)站因其開發(fā)和設(shè)計(jì)而被評(píng)為高，因?yàn)樗饾u向更多的下游游客滾動(dòng)，更多地解釋了開發(fā)者的方法。

這個(gè)屢獲殊榮的網(wǎng)站讓熟悉技術(shù)的訪問者在主頁上出現(xiàn)Crypt的問候時(shí)感到賓至如歸，每次只有一封信。

3. ETQ

獎(jiǎng)勵(lì)：Awwwards當(dāng)日的場(chǎng)地（5/19/2015）

ETQ采用非常簡約的電子商務(wù)方式，在精簡的網(wǎng)站上放置大量引人注目的產(chǎn)品視頻。簡單，平坦，基于顏色的背景伴隨著強(qiáng)大的印刷術(shù)，有助于將注意力集中在用戶到達(dá)的地方：鞋子。

4. Mikiya Kobayashi

獎(jiǎng)勵(lì)：Awwwards當(dāng)日的場(chǎng)地（7/4/2015）

Mikiya是一位產(chǎn)品設(shè)計(jì)師，擁有簡約的作品集，通過強(qiáng)大的攝影和微妙的動(dòng)畫展示了他的作品。他的全部網(wǎng)站最初是用日文創(chuàng)作的，然后翻譯成英文，這有助于展示他設(shè)計(jì)的國際可擴(kuò)展性。

5. Inside Abbey Road

獎(jiǎng)項(xiàng)：最佳音樂網(wǎng)站，2016年威比獎(jiǎng)

谷歌通過這個(gè)高度互動(dòng)的網(wǎng)站將它從公園打出來，讓用戶可以進(jìn)入Abbey Road Studios。輝煌的聲音設(shè)計(jì)，導(dǎo)航機(jī)制以及混合了通常的“Google風(fēng)格”的視覺效果都有助于吸引訪問者訪問這個(gè)制作精良的網(wǎng)絡(luò)媒體資源。

6. Citrix: The New Mobile Workforce

獎(jiǎng)：每日網(wǎng)站（11/23/2017），最佳網(wǎng)站圖庫

這個(gè)網(wǎng)站致力于紅牛與基于云計(jì)算軟件公司思杰的合作，這是非常了不起的。

新移動(dòng)員工隊(duì)是思杰旗下的一個(gè)網(wǎng)站，它使用全景攝影技術(shù)向觀眾展示思杰如何支持紅牛車隊(duì)的新賽車。即使你不是賽車愛好者，該網(wǎng)站的巧妙動(dòng)畫也可以解釋復(fù)雜的汽車技術(shù)，這一點(diǎn)很難忽略。

7. The History of Climate Change

獎(jiǎng)勵(lì)：Awwwards當(dāng)日網(wǎng)站（6/23/2015）

按照Luc Jacquet的腳步，Wild-Touch將帶您參觀關(guān)于全球氣候變化歷史的視覺和教育之旅。歷史媒體和獨(dú)特動(dòng)畫的混合有助于講述故事。

8. Beagle

獎(jiǎng)：每日網(wǎng)站（4/19/2015），最佳網(wǎng)站圖庫

比格爾以一種簡單易懂的方式在視覺上和逐步地講述他們產(chǎn)品的故事方面做得非常出色。這對(duì)許多創(chuàng)業(yè)公司來說是一個(gè)重大挑戰(zhàn)，特別是當(dāng)他們將新概念引入現(xiàn)有市場(chǎng)時(shí)。人們想知道，“你的產(chǎn)品是什么？它是如何工作的？為什么我在乎？” 比格爾回答所有這些問題，同時(shí)展示他們的產(chǎn)品并強(qiáng)制用戶購買。另外，他們是實(shí)際上正確實(shí)施“滾動(dòng)劫持”的幾個(gè)網(wǎng)站之一。

9. Southwest: Heart of Travel

獎(jiǎng)：最佳視覺設(shè)計(jì) - 審美，2018年威比獎(jiǎng)

當(dāng)西南航空想要證明其客戶不僅僅是一個(gè)美元符號(hào)時(shí)，該公司創(chuàng)建了一個(gè)網(wǎng)站，其設(shè)計(jì)使用客戶航線的形狀進(jìn)行組裝。

這個(gè)名為“旅行之心 ”的網(wǎng)站甚至允許游客在他們計(jì)劃參加的旅行中創(chuàng)建自己的作品。這樣，西南航空的網(wǎng)站就是他們最忠誠的乘客的產(chǎn)品。

10. Woven Magazine

獎(jiǎng)：每日網(wǎng)站（4/4/2015），最佳網(wǎng)站圖庫

Woven是一個(gè)在線刊物，為藝術(shù)家，工匠和制作人員提供贊美。對(duì)我而言，他們代表了一種確認(rèn)，即出版物可以（也應(yīng)該）擁有美觀且引人入勝的網(wǎng)站，內(nèi)容易于閱讀。這個(gè)網(wǎng)站沒有像彈出窗口和突兀的廣告這樣的分心，而是關(guān)于內(nèi)容本身的體驗(yàn)。

11. JOHO's Bean

獎(jiǎng)勵(lì)：當(dāng)日FWA（2015年8月8日），網(wǎng)站獎(jiǎng)

JOHO's Bean的網(wǎng)站有令人難以置信的圖像，交互性，講故事，視覺設(shè)計(jì)，最重要的是音響工程。這些都聚集在一起，創(chuàng)造出一個(gè)引人入勝，情緒化和引人入勝的網(wǎng)站，講述咖啡豆之旅的故事。

12. NOWNESS

獎(jiǎng)項(xiàng)：最佳文化博客/網(wǎng)站，2017年威比獎(jiǎng)

Nowness可能是當(dāng)今互聯(lián)網(wǎng)上最酷的眾包視頻博客。那真是一口......所有這些意味著什么？

NOWNESS的“眾包”性質(zhì)是其獲獎(jiǎng)?wù)叩囊徊糠?。這意味著其大部分內(nèi)容來自獨(dú)立廣告素材 - 這是企業(yè)發(fā)布內(nèi)容的一種日益流行的方式。NOWNESS也是一個(gè)視頻博客，這意味著它的所有博客內(nèi)容都是視頻格式?？傊@些品質(zhì)有助于使Nowness成為各個(gè)品牌努力講述的故事的迷人中心。

13. Virgin America

獎(jiǎng)項(xiàng)：最重要的行業(yè)演變，2014 UX獎(jiǎng)

在一個(gè)已知航空網(wǎng)站充斥著主要可用性問題的世界中，維珍美國公司擁有推動(dòng)可用性，可訪問性和快速響應(yīng)設(shè)計(jì)的最佳網(wǎng)站之一。事實(shí)上，它被命名為第一個(gè)真正快速響應(yīng)的航空公司網(wǎng)站，這是該行業(yè)的一個(gè)新的先例。

14. World of SWISS

獎(jiǎng)項(xiàng)：最佳用戶界面，2015年威比獎(jiǎng)

另一家航空公司？發(fā)生什么事？！是的，瑞航的航空公司建立了一個(gè)令人難以置信的身臨其境的網(wǎng)站，講述他們的故事，并描述與他們一起飛行的感覺 - 而且他們的工作太過繁重，無人理睬。強(qiáng)大的視覺效果和動(dòng)畫將用戶介紹到網(wǎng)站的不同部分，這些部分除了通常的銷售和市場(chǎng)營銷信息外，還包含了今天如此常見的信息。

15. Reductress

獎(jiǎng)項(xiàng)：最佳幽默網(wǎng)站，2018年威比獎(jiǎng)

在互聯(lián)網(wǎng)上嘲笑別人并不難，我們?cè)诰W(wǎng)上閱讀和消費(fèi)的東西很多都是為了娛樂。但是對(duì)于大量觀眾來說，很難一致地做到這一點(diǎn)。Reductress是一本諷刺雜志，其頭條和一般閱讀體驗(yàn)是幽默部門的 - 使網(wǎng)站本身成為一個(gè)高質(zhì)量的財(cái)產(chǎn)。

其他酷網(wǎng)站設(shè)計(jì)

16. Minimums

Minimums采用非常大膽的方式展示他們的內(nèi)容，利用基于網(wǎng)格的網(wǎng)站設(shè)計(jì)，大字體和全幅高質(zhì)量圖像。他們的網(wǎng)站是如何正確執(zhí)行網(wǎng)格結(jié)構(gòu)，同時(shí)在設(shè)計(jì)中保持良好的視覺層次結(jié)構(gòu)的一個(gè)非常好的例子。

17. Guillaume Tomasi

作為蒙特利爾的攝影師，Guillaume Tomasi建立了一個(gè)真正適合他的獨(dú)特而令人敬畏的攝影作品。他超現(xiàn)實(shí)的照片風(fēng)格與簡單，平坦，空洞，簡約的組合設(shè)計(jì)并列，將所有的焦點(diǎn)放在作品本身上。

他獨(dú)特的系列導(dǎo)航加上藝術(shù)畫廊風(fēng)格的作品介紹和完美的滾動(dòng)互動(dòng)讓人聯(lián)想到真實(shí)畫廊的體驗(yàn)。

18. The District

這家品牌代理機(jī)構(gòu)認(rèn)真對(duì)待它的形象，它應(yīng)該 - 為客戶處理所有媒體渠道。該地區(qū)的網(wǎng)站，是通過一些你見過的最美麗的藝術(shù)品和攝影的旅程。

當(dāng)你探索網(wǎng)站時(shí)，這些挑釁性的瓷磚變化很快，而且他們看起來更加奇特，對(duì)你學(xué)習(xí)過去的工作越感興趣。

19. Tej Chauhan

Tej Chauhan通過這個(gè)有趣的網(wǎng)站將印象派藝術(shù)品變成了商業(yè)模式。該產(chǎn)品開發(fā)人員主頁上的每張圖片都會(huì)滑出以覆蓋上一張圖片，從而為您現(xiàn)在在您面前看到的物體提供很少的背景信息。

但是，是不是缺乏正確的背景知識(shí)，讓你想了解更多？標(biāo)語“近期未來的紀(jì)念品”表明這些物品是他們產(chǎn)品線的一部分 - 這是您將這些創(chuàng)新物品帶入您的生活的機(jī)會(huì)。

20. Amanda Martocchio Architecture

一家建筑公司可能并不專注于網(wǎng)站開發(fā)，但其網(wǎng)站仍應(yīng)展示其對(duì)視覺上令人愉悅的設(shè)計(jì)的承諾。這個(gè)華麗的網(wǎng)站讓阿曼達(dá)·馬托基奧把它放在心上。

Amanda Martocchio Architecture喜歡它的作品并不是什么秘密- 它網(wǎng)站主頁上的每張圖片都是公司設(shè)計(jì)的房屋的迷人鏡頭。該網(wǎng)站標(biāo)出了每個(gè)房屋的滾動(dòng)條件，以及各種建筑物的各種角度。

評(píng)論(0) 瀏覽(3746)

302018-5

Dribbble 界面設(shè)計(jì)靈感 33

博博

UI設(shè)計(jì)愛好者 2018-05-03 16:58:07

作者：設(shè)計(jì)達(dá)人（ID：shejidaren888）

這次 Dribbble UI 靈感主要精選網(wǎng)頁、APP 以及一些后臺(tái)管理界面，每個(gè)精選出來的界面設(shè)計(jì)的贊數(shù)都是幾百+或者幾 K ~

PS：當(dāng)你看中某作品時(shí)，你可以點(diǎn)擊作者名稱來查看該設(shè)計(jì)師更多作品。（微信公眾號(hào)不支持外鏈，只能點(diǎn)「閱讀原文」來查看所有鏈接）

Dribbble 界面設(shè)計(jì)靈感 #33

Dribbble 界面設(shè)計(jì)靈感 33

個(gè)人主頁設(shè)計(jì) by Mike

Dribbble 界面設(shè)計(jì)靈感 33

CRM 管理系統(tǒng)界面設(shè)計(jì) by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

EverDo 應(yīng)用界面 by Jakub Reis

Dribbble 界面設(shè)計(jì)靈感 33

接上，EverDo 界面的一些表單元素 by Balkan Brothers

Dribbble 界面設(shè)計(jì)靈感 33

隨機(jī)實(shí)驗(yàn) by Nick Franchi

Dribbble 界面設(shè)計(jì)靈感 33

Coindesk by uixNinja

Dribbble 界面設(shè)計(jì)靈感 33

一套 UI 素材：Planguru by Patryk Pustol

Dribbble 界面設(shè)計(jì)靈感 33

酒店 APP 后臺(tái)（iPhoneX） by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

B3Sound 網(wǎng)站著陸頁設(shè)計(jì) by Outcrowd

Dribbble 界面設(shè)計(jì)靈感 33

Smart Security Camera App by Ionut Zamfir

Dribbble 界面設(shè)計(jì)靈感 33

Iterable 插畫草圖 by Ramotion

Dribbble 界面設(shè)計(jì)靈感 33

后臺(tái)界面 by uixNinja

Dribbble 界面設(shè)計(jì)靈感 33

Dating 應(yīng)用項(xiàng)目 by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

Benti by Jakub Dziedzic ??

Dribbble 界面設(shè)計(jì)靈感 33

Surf Guide Mobile Swipe Distort by Nathan Riley

Dribbble 界面設(shè)計(jì)靈感 33

C / Sen Design Lab by Mike | Creative Mints

Dribbble 界面設(shè)計(jì)靈感 33

Chripcase 后臺(tái)界面 by Goutham

Dribbble 界面設(shè)計(jì)靈感 33

Raika Plant by Nicola Baldo

Dribbble 界面設(shè)計(jì)靈感 33

網(wǎng)頁聊天應(yīng)用界面 by Michal Parulski

Dribbble 界面設(shè)計(jì)靈感 33

網(wǎng)頁版的音樂 UI by Giga Tamarashvili

Dribbble 界面設(shè)計(jì)靈感 33

Music UI by Giga Tamarashvili

Dribbble 界面設(shè)計(jì)靈感 33

Blockсhain revolution by Dmitrii Kharchenko

Dribbble 界面設(shè)計(jì)靈感 33

USB Types by Gal Shir

Dribbble 界面設(shè)計(jì)靈感 33

評(píng)論(0) 瀏覽(3015)

302018-5

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品

博博

UI設(shè)計(jì)愛好者 2018-05-07 11:31:09

在2013年的時(shí)候使用全屏背景或者大圖片的網(wǎng)頁開始流行起來，到了今年，還是經(jīng)?？吹竭@類風(fēng)格的頁面出現(xiàn)，可見這個(gè)趨勢(shì)還是很流行的，值得運(yùn)用。

一張大圖再配合一個(gè)優(yōu)秀的排版布局，這樣一個(gè)美麗的頁面就形成了，比起視差網(wǎng)頁、動(dòng)效網(wǎng)頁成本低了很多，但視覺效果還是能令人滿意的，下面精選一些優(yōu)秀的大背景網(wǎng)頁設(shè)計(jì)作品給你欣賞，也行會(huì)給你帶來更多靈感哦！

這于高清圖片素材建議大家去設(shè)計(jì)導(dǎo)航里面的免費(fèi)圖片素材上查找。

Nike – Ge? Kendini

23個(gè)使用大背景的全屏網(wǎng)頁設(shè)計(jì)作品