<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

012020-3

【Web前端開發】第二課、HTML基礎之HTML概述

文章目錄

一、HTML的概述

什么是HTML？
HTML的標簽、元素、屬性
標簽、元素
標簽、屬性

附：補充上一節課網站和網頁的筆記：

附：img標簽的詳細介紹

一、HTML的概述
什么是HTML？

HTML指的是超文本標記語言（Hyper Text Markup Language）

HTML 不是一種編程語言，而是一種標記語言 (markup language)

標記語言是一套標記標簽 (markup tag)

HTML 使用標記標簽來描述網頁

HTML不區分大小寫
HTML的標簽、元素、屬性
標簽、元素

由尖括號包圍，比如 <title>

通常是成對出現的

<title>百度一下，你就知道</title>

其中，<title> 為開始標簽

中間的 “百度一下，你就知道” 為內容

</title>為結束標簽，我們可以清楚的觀察到，標簽結束是有 “/”。

則標簽和內容，構成了網頁的元素。

標簽的嵌套關系，如下列例子，你品

<html><body></body></html>

<html><body></html></body>

標簽的嵌套縮進

如圖所示<html>為外層標簽，稱為父元素，<head>和<body>為內層標簽，稱為子元素。其中<head>與<body>又互稱為兄弟元素

<!DOCTYPE html>

聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。

聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。

<!DOCTYPE> 聲明沒有結束標簽。

<!DOCTYPE> 聲明對大小寫不敏感。

在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：<!doctype html>

我們學習的是HTML5，所以我們不過多對HTML4的聲明做過多解釋。

如果上述對<!doctype html>的概述不清楚的話，

那記住以下兩點即可，1. 不分大小寫，2.在HTML的網頁<html>標簽之前加上<!doctype html>就可以啦。

圖示為 HTML DOM樹，DOM：Document Object Model（文檔對象模型）

2. 標簽、屬性

一個標簽可能有多個屬性，屬性先后與順序無關

“=” 為賦值符號

屬性與屬性之間用空格隔開

附：補充上一節課網站和網頁的筆記：

HTML網頁的編碼為 utf-8

網站可以理解成一個文件夾，而網頁就是一個個的文件

網頁的文件后綴常見的有：htm、html、jsp、php、asp

網站的文件結構通常包含 images文件夾，css文件夾，js文件夾，

一個簡單的網頁，的文件目錄通常由 images、css、js，作用顧名思義，就是存放相對應的文件資源

附：img標簽的詳細介紹

<img> 標簽有兩個必需的屬性：src 和 alt。

注釋：從技術上來說，圖像并不會插入到HTML頁面中去，而是通過 src的值(URL) 鏈接到HTML頁面上的，<img>標簽的作用是為被引用的圖像創建占位符。

<img>標簽常用的屬性有src、alt、width、height、title

src和alt為 img 標簽的必需元素。

話不多說，看圖，為你們講解代碼。

看網站的演示圖和代碼圖，想必大家都很清楚了吧。

（為了更直觀的看到效果，我寫了div和div的樣式，1px粗的紅色實線邊框，這里的代碼以后再具體詳解）

title和alt 的區別別，體現在第 11 行和第 14 行，想必大家就能看出來了吧

i. alt 屬性是在圖片不能正常顯示時出現的文本提示。

ii. title 屬性是在鼠標在移動到元素上的文本提示。

width和height的作用，用來規定圖像的寬度和高度，單位為像素（px）

src路徑，由于我的文件夾結構為 index.html文件和 images 文件夾。

所以 src 的路徑為 src="images/圖片.后綴"，即src="URL"

URL即（Uniform Resource Locator,統一資源定位符，在WWW上，每一信息資源都有統一的且在網上唯一的地址。

簡單的理解URL，就是網址，地址

如果圖片路徑引用錯誤，都會導致網頁中的圖片無法正常顯示！如，第 14 行和第 20 行代碼。

以上為img標簽的常見用法。在我們寫網頁的時候，建議img寫上 src、alt、width、height這四個屬性，是否需要 title 具體看網站的功能。

以上就是，第二課、Web前端開發之HTML基礎的全部內容了，感謝閱讀

————————————————

版權聲明：本文為CSDN博主「MineChen」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/MineSu/article/details/104549536

評論(0) 瀏覽(2538)

012020-3

vue框架漸進性的理解和mvvm模式的理解

引言

現在市場很多前端開發的招聘崗位都或多或少的要求你要掌握vue，可以說vue在國內是非常的火爆的，下面我給大家介紹一下vue框架吧！

vue是漸進式框架

vue的核心是一個視圖模板引擎，但是這并不能說明vue不是一個框架，如上圖所示在聲明式渲染（視圖模板）基礎上，vue可以添加組件系統component，vue-router客戶端路由，vuex的狀態管理，vue-cli構建工具來構建一個完整的框架，更重要的是這些功能相互獨立，你可以任意選用你項目需要的部件，不一定非要全部整合在一起（就像是vuex它是一個很好的可以管理組件之間共享狀態的部件，但非必須在你的每一個項目中使用它，如果說你的項目相對簡單，組件之間的通信相對簡單你完全可以不使用它），可以看到漸進式，其實就是vue的使用方式，同時也能看到vue的設計理念
vue是mvvm模式
為什么說vue是mvvm模式呢？這個大家首先要知道mvvm是什么。mvvm是Model-View-ViewModel的簡寫，即模型視圖視圖模型。模型是指后端傳過來的數據，視圖是指我們看到的頁面，視圖模型是mvvm框架的核心，他是連接view和model的橋梁，它有兩個方向，第一將后端傳來的數據轉換成頁面可以看到的視圖，第二，將用戶在頁面上的交互轉化成為后端數據，我們稱之為雙向綁定。
總結mvvm模式的視圖和模型是不能直接通信的，它們通過ViewModel來通信，ViewModel通常要實現一個observer觀察者，當數據發生變化，ViewModel能夠監聽到數據的這種變化，然后通知到對應的視圖做自動更新，而當用戶操作視圖，ViewModel也能監聽到視圖的變化，然后通知數據做改動，這實際上就實現了數據的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解為是ViewModel，它可以實現dom監聽和數據綁定
vue的數據綁定原理

當你把JavaScript對象傳入vue實例作為data選項，vue會遍歷此對象的所以屬性，并使用Object.defineProperty把這些屬性轉換為getter和setter，每一個組件都有一個watcher實例，它會在組件渲染過程中，把接觸過的數據記錄為依賴，當依賴的setter被觸發是，他會通知watcher，重而使關聯的數據重新渲染，以下是代碼展示。

<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
    get () {
        // obj設置了一個myname屬性，當訪問obj.myname屬性會執行get方法
    },
    set (data) {
        // 當修改myname屬性會執行set方法
        // data會得到你修改的值
        obox.innerHTML = data
    }
})

object.definePeoperty有一下缺點： {
1：無法監聽es6的set，map變化
2：無法監聽class類型的數據
3：屬性的新增和刪除也無法監聽
4：數組元素的新整和刪除也無法監聽
}

評論(0) 瀏覽(2846)

012020-3

html5+css3實現2D-3D動畫效果實例

html5+css3實現2D-3D動畫效果實例

主要實現的功能就是一些2D、3D的動畫效果，如平移、縮放、旋轉等等。

文章目錄

html5+css3實現2D-3D動畫效果實例

2D變換

3D變換

2D中應用實現案例

3D中應用實現案例

css3動畫

2D變換

是在一個平面對元素進行的操作。

可以對元素進行水平或者垂直位移、旋轉或者拉伸.

1

2

*2d對下面面坐標系簡單分析如下：

（1）.默認狀態下，x軸是水平的，向右為正。

（2）.默認狀態下，y軸是垂直的，向下為正，這與傳統的數學坐標系不同。

3D變換

2d場景，在屏幕上水平和垂直的交叉線x軸和y軸
3d場景，在垂直于屏幕的方法，相對于2d多出個z軸

下面首先需要了解2D、3D中的功能函數：

位移 translate()
translateX() 方法，元素在其 X 軸以給定的數值進行位置移動
translateY() 方法，元素在其 Y 軸以給定的數值進行位置移動
縮放scale()
scaleX()：相當于scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認值是1。
scaleY()：相當于scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認值是１。
旋轉rotate()
rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉
rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉
正數”是順時針，“負數”是逆時針，單位為“deg”。
傾斜skew()
一個參數時：表示水平方向的傾斜角度；
兩個參數時：第一個參數表示水平方向的傾斜角度，
第二個參數表示垂直方向的傾斜角度
3D中多了Z軸，其他屬性值不變

2D中應用實現案例
位移 translate()
效果圖：

 position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*過渡時間*/
    transform: translateY(-320px);

.box3:hover .box3_h2{
    transform: translateY(0px);
}

<!-- 盒子3：實現位移 -->
        <div class="box3 box">
            <img class="img_3" src="../16/images/3.png" alt="">
            <div class="box_mm"></div>
            <h2 class="box3_h2">Taylor Swift</h2>
            <p class="box3_p1">I'm so glad you made time to see me. How's life, 
                tell me how's your family? I haven't seen them in a while. 
                You've been good, busier then ever. 
                We small talk, work and the weather Your guard is up and I know why...</p>
        </div>

/* 公共樣式 */
.box{
    width:350px;
    height: 300px;
    position: relative;
    transform: 1s;
    margin: 20px 20px;
    float: left;
}
img{
    display: block;
    width: 350px;
    height: 300px;
}
/* 鼠標滑過覆蓋上方的白色部分 */
.box_mm{
    width:350px;
    height: 300px;
    transform: 1s;
    background-color: #fff;
    position: absolute;/*設置定位，擋住box，*/
    top: 0;
    opacity: 0;/*透明，0全透明*/
}
h2{
    font-size: 20px;
}

/* 盒子3 */
.box3{
    overflow: hidden;
}
.img_3{
    transition: 2s;
}
.box3_h2{
    color: #fff;
    position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*過渡時間*/
    transform: translateY(-320px);
}
.box3_p1{
    font-size: 14px;
    width: 320px;
    position: absolute;
    left: 20px; bottom: 80px;
    transition: 2s;
    opacity: 0;
}
/*交互樣式*/
.box3:hover .img_3{
    transform: translateY(-10px);
}
.box3:hover .box3_h2{
    transform: translateY(0px);
}
.box3:hover .box3_p1{
    transform: translateY(-50px);
    opacity: 1;
}

————————————————
版權聲明：本文為CSDN博主「weixin_43513126」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43513126/article/details/104570062

評論(0) 瀏覽(3405)

012020-3

Web開發期待的CSS的一些功能

著名的 Web 設計網站 CSS-tricks.com 最近組織了一次調查，請15名頂尖的 Web 設計師對 CSS 提出自己的期望，15名設計師包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。

調查結果顯示，最被期待的 CSS 功能是 CSS 圓角，其它期待的功能包括跨瀏覽器漸變與陰影，類似 Photoshop 的層融合效果，更一致的聲明簡化語法以及對條件判斷的本地支持。這些期待中一部分已經包含在未來的 CSS-3 中，但更多的仍然只是一些夢想。

WebMonkey 的編輯們將這個 Wishlist 發表在他們的網站并讓 WebMonkey 的讀者投票選出最熱門的項目，以下是按投票多少排列的 CSS Wishlist 部分列表（只選取最熱門的項目）。新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。

CSS 圓角

by Webmonkey

標準的，直接基于 CSS 的圓角是很多人的期待，這樣，就不必再費盡心機只為了顯示一個圓角。

垂直居中

by michael lascarides

針對 block 對象的更容易的垂直居中設置。（div + css 讓人既愛且恨的一個重要原因就是垂直居中，讓一個對象垂直居中顯示在 block 容器中，且兼容所有主流瀏覽器簡直就是一個噩夢 - 譯者）

兼容所有主流瀏覽器的 CSS 2.1 與 CSS 3

by Erik

能兼容所有主流瀏覽器的 CSS 2.1 與 CSS 3 是 Erik 的夢想，但其中的某些功能在某些瀏覽器中總是磕磕絆絆。

更好的嵌入字體

by Webmonkey

不要 sFIR, 不要圖片，要真正的字體。

CSS 變量

by Jeffrey Jordan Way, via css-tricks.com

能定義諸如色彩值一類的變量

更好地支持 100% height

by JLR

設置了 100% height 的容器的頂部和底部真正附著在頁首和頁尾，頁面中間部分匹配內容并準確顯示滾動條。搜索“100% height css”能找到各種解決方法，但事情原本不該這么復雜。

可重復使用變量

by Neal Lindsay

比如:

@var mycolor = #0080FF

h1 { color: mycolor; }

div.containbox { border: 1px mycolor; }

瀏覽器一致性與定義順序

by JML

瀏覽器一致性非常重要。某些 CSS 在某些瀏覽器被忽略或部分忽略使 CSS 只有借助 JavaScript 才能正常使用。同時，對里面的 CSS 定義應該可以覆蓋全局定義。

一句話復原

by Chris Pitzer

很多設計者要寫40多行代碼才能清除瀏覽器默認 CSS 定義，應當有一個簡單的聲明一次性將所有 CSS 復原，比如：

body { clear-default-styles:true; }

圖形旋轉與反轉

by Stephen Bell

在設置圖形圓角效果時候，我們需要同一個圓角圖片的4個旋轉版本來實現。應該有一個簡單的聲明實現旋轉，如：

img .horiz { rotate:90; }

成組的 CSS 簡化定義

by Volkan G?rgülü, via css-tricks.com

如:

foo h1, #foo h2, #foo h3

改為:

foo [h1, h2, h3]

漸變

by Anonymous

以避免一條線一條線地實現漸變。

定位計算

by Anonymous

不使用 JavaScript 而是直接在 CSS 中實現：

left: ID1.Left + ID1.Width + 2px;

網格布局

by Kurt Krumme

table 布局曾經流行一時，因為 table 布局更接近網格布局的原理。CSS 的設置者們為什么要推出一個不倫不類的 box 模型？

div + css 在 Web 設計界已經紅得發紫，盡管 div 有眾多缺陷（比如垂直居中，比如在 IE 中的眾多 BUG），如果哪個設計師膽敢使用 table，被人查出源代碼，是會被恥笑的。然而譯者從不畏懼使用 table + css，且愿意告戒那些盲目追隨 div 并被折磨得半死的人，至少在目前，table 是被各種瀏覽器支持得最完美的容器對象。

新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。

使用 image 作 border

by Anonymous

應當可以用 image 作為 border，如：

border-right: url('image.png')

支持多個背景圖

by Brad

這個 CSS 功能非常有用，有了這個功能，完美實現 CSS 圓角就變得十分簡單了。

所有瀏覽器支持統一標準

by Anonymous

這里特指 IE<8 的版本。CSS 有成型的標準，但有些瀏覽器一定要搞一些自己的東西出來。

以上來自cb。大師們的期望果然很獨特，相當多的期望也非常有用，如果實現了，Web開發就是多么輕松愉快的一件事情啊！比如變量、清除定義和定位計算，是我認為非常有用的。目前IE下可以用一些IE特有的表達式，但用起來太復雜。

還是期望CSS3更好更強大。也期望各個瀏覽器盡快支持CSS3

————————————————

版權聲明：本文為CSDN博主「前端基礎開發」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/html886/article/details/104582007

評論(0) 瀏覽(2639)

012020-3

JavaScript中的this/call/apply/bind

文章目錄

一、this

1.什么是this

2.this 代表什么

3.綁定 this 的方法

4.this的指向

5.改變指向

二、Function.prototype.bind()

三、call/apply

1.定義

2.語法

3.異同

一、this

1.什么是this

this 關鍵字在大部分語言中都是一個重要的存在，JS中自然不例外，其表達的意義豐富多樣甚至有些復雜，深刻理解this是學習JS、面向對象編程非常重要的一環。

2.this 代表什么

this代表函數（方法）執行的上下文環境（上下文，類似與你要了解一篇文章，了解文章的上下文你才能清晰的了解各種關系）。

但在 JavaScript 中 this 不是固定不變的，它會隨著執行環境的改變而改變。

1.在方法中，this 表示該方法所屬的對象。

2.如果單獨使用，this 表示全局對象。

3.在函數中，this 表示全局對象。

4.在函數中，在嚴格模式下，this 是未定義的(undefined)。

5.在事件中，this 表示接收事件的元素。

6.類似 call() 和 apply() 方法可以將 this 引用到任何對象。

3.綁定 this 的方法

this的動態切換，固然為 JavaScript 創造了巨大的靈活性，但也使得編程變得困難和模糊。有時，需要把this固定下來，避免出現意想不到的情況。JavaScript 提供了call、apply、bind這三個方法，來切換/固定this的指向。

4.this的指向

1.在一般函數方法中使用 this 指代全局對象

function test(){
　　　　this.x = 1;  //這里this就是window
　　　　console.log(this.x);
　　}
　　test(); // 1

JS規定，函數中的this，在函數被調用時確定，它指函數當前運行的環境。

2.作為對象方法調用，this 指代上級對象

var x =3;
function test(){
　　alert(this.x);
}
var o = {
  x:1,
  m:test 
};
o.m(); // 1

如果函數作為對象的方法時，方法中的 this 指向該對象。

3.作為構造函數調用，this 指代new 出的對象

function test(){
　　　　console.log(this);
　　}
　　var o = new test();
       test();
//可以看出o代表的不是全局對象

new關鍵詞的作用是調用某個函數并拿到其中的返回值，只是調用過程稍特殊。在上面的代碼實例中。test函數被new關鍵詞調用時，內部依次執行了以下步驟:

（1）創建一個空對象。

（2）將這個空對象的原型，指向這個構造函數的prototype。

（3）將空對象的值賦給函數內部的this（this就是個空對象了）。

（4）執行函數體代碼，為this這個對象綁定鍵值對。

（5）返回this，將其作為new關鍵詞調用oop函數的返回值。

所以構造函數中的this，依舊是在構造函數被new關鍵詞調用時確定其指向，指向的是當前被實例化的那個對象。

4.箭頭函數中的this
箭頭函數是ES6的新特性，最重要的特點是它會捕獲其所在上下文的this作為自己的this，或者說，箭頭函數本身并沒有this，它會沿用外部環境的this。也就是說，箭頭函數內部與其外部的this是保持一致的。

this.a=20
var test={
    a:40，
    init:()=>{
        console.log(this.a)
        function go(){
            this.a=60
            console.log(this.a)
        }
        go.prototype.a=50
        return go
    }   
}

var p=test.init()
p()
new (test.init())()
//輸出 20 60 60 60

5.改變指向
this的動態切換，固然為 JavaScript 創造了巨大的靈活性，但也使得編程變得困難和模糊。有時，需要把this固定下來，避免出現意想不到的情況。JavaScript 提供了call、apply、bind這三個方法，來切換/固定this的指向。

bind方法和apply、call稍有不同，bind方法返回一個新函數，以后調用了才會執行，但apply、call會立即執行。

二、Function.prototype.bind()
bind()方法主要就是將函數綁定到某個對象，bind()會創建一個函數，函數體內的this對象的值會被綁定到傳入bind()中的第一個參數的值，例如：f.bind(obj)，實際上可以理解為obj.f()，這時f函數體內的this自然指向的是obj；

示例：

function f(y, z){
    return this.x + y + z;
}
var m = f.bind({x : 1}, 2);
console.log(m(3));
//6

這里bind方法會把它的第一個實參綁定給f函數體內的this，所以這里的this即指向{x : 1}對象，從第二個參數起，會依次傳遞給原始函數，這里的第二個參數2，即是f函數的y參數，最后調用m(3)的時候，這里的3便是最后一個參數z了，所以執行結果為1 + 2 + 3 = 6分步處理參數的過程其實是一個典型的函數柯里化的過程（Curry）。

三、call/apply
1.定義
每個函數都包含兩個非繼承而來的方法：call()方法和apply()方法。

call和apply可以用來重新定義函數的執行環境，也就是this的指向；call和apply都是為了改變某個函數運行時的context，即上下文而存在的，換句話說，就是為了改變函數體內部this的指向。

2.語法
call()

調用一個對象的方法，用另一個對象替換當前對象，可以繼承另外一個對象的屬性，它的語法是：

Function.call(obj[, param1[, param2[, [,...paramN]]]]);
1
obj：這個對象將代替Function類里this對象
params：一串參數列表

說明：call方法可以用來代替另一個對象調用一個方法，call方法可以將一個函數的對象上下文從初始的上下文改變為obj指定的新對象，如果沒有提供obj參數，那么Global對象被用于obj。

apply()

和call()方法一樣，只是參數列表不同，語法：

Function.apply(obj[, argArray]);

obj：這個對象將代替Function類里this對象
argArray：這個是數組，它將作為參數傳給Function

說明：如果argArray不是一個有效數組或不是arguments對象，那么將導致一個TypeError，如果沒有提供argArray和obj任何一個參數，那么Global對象將用作obj。

3.異同
相同點

call()和apply()方法的相同點就是這兩個方法的作用是一樣的。都是在特定的作用域中調用函數，等于設置函數體內this對象的值，以擴充函數賴以運行的作用域。

一般來說，this總是指向調用某個方法的對象，但是使用call()和apply()方法時，就會改變this的指向，看個例子：

function add(a, b) {
    return a + b;
}

function sub(a, b) {
    return a - b;
}

console.log(add.call(sub, 2, 1));//3

評論(0) 瀏覽(2630)

012020-3

看懂設計（一）：菲茲定律在UI設計中的實際應用

ui設計分享達人

菲茲定律在交互設計中的應用是很普遍和廣泛的，有時候在我們設計界面之時，不知不覺就應用了菲茲定律，但是我們卻未察覺。

關于菲茲定律的具體內容，可以說是大家耳熟能詳，甚至在學生時代就有所了解：從一個起始位置移動到最終目標點所需的時間由兩個參數來決定，到目標的距離（D）和目標的大?。╓），可以用數學公式表達為：

在當今互聯網背景下簡單來解釋說，就是大而近的目標區域意味著用戶用需要耗費太大的精力即可輕易點擊或者關注到目標，反之，小而遠的目標區域則意味著用戶將耗費一些時間和動作才能觸及到目標。在一般情況下，讓用戶耗費時間和動作的操作，會使人產生負面的用戶體驗。

以上說的，其實是對菲茲定律表象的解釋，每個人在網上也會搜到很多類似的解釋。當你搜索時會發現，關于對菲茲定律的應用，網上絕大多數的資料都是在以PC端界面作為定律的解釋，但移動界面卻少之又少，這里面的一部分原因是菲茲定律提出的時間，一部分也是因為在移動端的設計中，菲茲定律會變得很零散和瑣碎，很難真正用幾句話來總結，這篇文章也是我第一次試著在移動端的交互設計的范疇內對菲茲定律的應用進行簡單的總結。

1. 讓按鈕更大一些

我在這一部分分了幾種情況，分別進行討論，其一呢，就是fab button。在現有的fab button中，大家會發現，雖然按照正常iOS的設計規范，一般按鈕的大小都會被設計為88px，但是在設計fab button時，我們一般都會選擇大一些的尺寸，例如100px、110px、120px。

其二就是頁面內功能按鈕的大小，我們在做界面設計的時候，都知道做到統一性，但很少去深入地想，界面統一的背后是在像用戶傳達一個什么意思。

舉個例子，這是【洋蔥數學】和【360家庭防火墻】的登錄界面，市面上的登錄界面大多大同小異，基本組成就是賬號+密碼+按鈕（或手機號+按鈕等）的組合。

那我們來思考一個問題：為什么在手機號只有11位已經確定的情況下，輸入框和【下一步】按鈕還要做這么長，接近通欄的一個樣式。

我試著來找到這個問題的答案，第一個，是對于品牌設計規范的執行，對邊距是有一定要求的，也就是我們常說的保持頁面元素的統一性；第二個，即是對菲茲定律的應用，在這個頁面中，最核心的兩個功能【輸入】和【下一步】給予他們一個足夠的大小，會讓用戶的注意力更加集中，避免被分散精力。

2. 讓相關聯的信息內容距離更近

這也和設計原則中的親密性相一致。依舊可以用我們常見的信息輸入界面來加以印證。這兩個界面是我隨手做的，對比一下即可看出優劣。

在相關性比較強的功能中，拉近彼此距離，既能夠給信息一個清晰的層級，更能夠減少用戶的操作成本。

3. 界面的邊界會讓用戶操作更加精準和容易

在研究交互界面的時候，我們總聽到一個說法，“界面的邊界是無限的”，它當然不是在說界面是無限大的，對于一塊屏幕來說，在進行操作的時候，無論是PC的鼠標光標，還是移動屏幕的手指，在操作到界面邊緣時，因為無法延伸，所以最精準。

這也是我們看絕大多數fab button彈出的菜單是在界面邊緣，而不是在界面中央的原因。

除此之外，還有在很多安卓手機中，卸載app時會讓用戶把要卸載的app拖拽到屏幕上邊緣的區域進行卸載，這樣相比給一個【X】按鈕，會更加精準，而且拖拽的操作也會給用戶更多思考的空間和時間，減少誤操作的概率。

但是，這個但是很重要，不要把所有既定的法則都奉為圭臬，所有事物都要辯證著看，在沒有限定條件的情況下，菲茲定律的應用不會有任何問題，但是如果加以條件的限定，就不是這么簡單了。

簡單舉個例子：在進行刪除等負向操作時，很多app會把確認刪除等操作做得離你的上一步操作區域更遠，或者讓確認按鈕更加不明顯，這是在幫助用戶，或者說希望用戶在做負向操作時，有更多的思考空間和時間，規避誤操作的影響。

在《看懂設計》這個系列里，我會選擇性地對在交互設計中常常被應用的設計心理學、方法論等進行簡潔有案例的解析，例如大家耳熟能詳的交互設計7大定律、斯金納箱理論、邊際效應、錨定效應、格式塔理論等等讓大家盡可能地在實際案例中找到它們的應用，而不是讓這些方法論成為我們腦海中的空中樓閣，知道、聽說過，但是不會應用。

轉自：站酷-鹿爺不是咸魚

評論(0) 瀏覽(3512)

012020-3

純JS對頁面表格進行EXCEL導出（完整導出，包含頁面樣式）

純JS對頁面表格進行EXCEL導出

1.中間部分在style標簽那種可以使用css樣式對表格進行任意樣式的修改

2.在tableid.innerHTML中可以對表格中的內容進行修改替換（其中放的內容就是導出后的表格內容）

3.需要引入xlsx.full.min.js文件

4.tableid為為表格的id

5.sheetName為下載后的文件名稱

base64(excelFile) {

return window.btoa(unescape(encodeURIComponent(excelFile)))

},

tableToExcel(tableid, sheetName) {

var uri = 'data:application/vnd.ms-excel;base64,';

var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +

'xmlns=" gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'

+ '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'

+ '</x:ExcelWorkbook></xml><![endif]-->' +

' <style type="text/css">' +

' .ivu-table td{\n' +

' /background-color: #FFFFFF;/\n' +

' /color: #fff;/\n' +

' /border:1px solid #FFFFFF;/\n' +

' }\n' +

' /每行的基本樣式/\n' +

' .ivu-table-row td {\n' +

' color: #000000;\n' +

' min-width:50px;\n' +

' }\n' +

' /頭部th/\n' +

' .ivu-table-header th{\n' +

' color:\t#FFFFFF;\n' +

' font-weight: bold;\n' +

' background-color: rgb(98,167,249);\n' +

' min-width:50px;' +

' border:1px solid #FFFFFF;' +

' position: relative; \n' +

' top: expression(this.offsetParent.scrollTop); \n' +

' z-index: 300; \n' +

' }\n' +

' /偶數行/\n' +

' .ivu-table-stripe-even td{\n' +

' background-color: #ffffff!important;\n' +

' }\n' +

' /奇數行/\n' +

' .ivu-table-stripe-odd td{\n' +

' background-color:#F0FFFF!important;\n' +

' }\n' +

' /選中某一行高亮/\n' +

' .ivu-table-row-highlight td {\n' +

' background-color: #d63333!important;\n' +

' }' +

'</style>' +

'</head><body ><table class="excelTable">{table}</table></body></html>';

if (!tableid.nodeType) tableid = document.getElementById(tableid);

tableid.innerHTML = tableid.innerHTML.replace('暫無篩選結果','')

var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};

var a = document.createElement("a");

a.download = sheetName + ".xls";

a.href = uri + this.base64(this.format(template, ctx));;

a.click();

},

format (s, c) {

return s.replace(/{(\w+)}/g,

function (m, p) {

return c[p];

});

}

評論(0) 瀏覽(3774)

012020-3

淺談數據可視化及經驗分享（上）

ui設計分享達人

結合學習的可視化知識以及自身的經驗寫下了這篇關于數據可視化的分享

轉自：站酷-四喜sixi

評論(0) 瀏覽(2728)

012020-3

10天，5個百度Doodle，成千上萬的抗“疫”英雄

ui設計分享達人

他們是“最美逆行者”

前幾天，當大家打開百度首頁時，可能發現了一些小變化：搜索框上方不再是熟悉的紅藍標志，而是展現出了一系列人物形象。

這些人物都是一直奮戰在抗擊新冠肺炎疫情一線的“最美逆行者”——我們想用這樣的方式，向他們致敬。

2月9日-2月10日，致敬抗疫醫護人員

2月11日-2月12日，致敬抗疫志愿者

2月13日-2月14日，致敬抗疫建設者

2月15日-2月16日，致敬抗疫專家組

2月17日-2月18日，致敬抗疫解放軍

當大家點擊這些 Doodle 圖片時，會進入相關的戰“疫”專題內容頁，在這里可以實時了解抗疫英雄的資訊動態。

醫護人員、志愿者、建設者、專家組、解放軍，他們用堅定的信念和堅毅的身軀，為這場戰斗筑起了最堅固的防線，守護著無數人的生命安全。我們向這些英雄致敬！

此前，我們向廣大網友發起了“抗疫英雄系列 Doodle”征集活動，希望各界設計師用手中的畫筆為抗疫英雄們創作特別的百度 Doodle，讓更多人看見疫情中的勇氣與希望。

最終，五組致敬 Doodle 在百度首頁上線。除此之外，我們還收到了26幅來自百度網友投稿的設計作品。謝謝大家的用心創作！

一起來欣賞吧!

蔡依彤

林文煌

劉昱

輕撫淡抹素人妝

相超

蔡依彤

林文煌

麥芽

董一孛

林文煌

劉昱

姚思思

趙會娟

不將就

李小蘭

李鈺

林文煌

孫紅花

陶澤崧

嚴安琪

張晶

馮勝方

高旭

林文煌

楊曉婧

張晶

在這場疫情狙擊戰中，不論是什么角色、什么崗位，都能貢獻自己獨特的力量。而這些精美的 Doodle 設計作品，正向人們傳達了必勝的信心和能量。我們衷心感謝所有設計師的用心創作.

除了通過百度 Doodle 為抗疫工作鼓勁，我們還運用技術的力量，專為疫情防控研發了各種產品和服務，希望為大家帶來實用有效的幫助，為戰“疫”貢獻一份力量。

我們成立了3億元的疫情及公共衛生安全攻堅專項基金，用于支持新型冠狀病毒等新疾病的治愈藥物篩選、研發等一系列抗擊疫情工作。

我們上線了“拒絕野味”的搜索提示，在百度 APP 搜索“蝙蝠”、“果子貍”、“穿山甲”、“豪豬”、“狍子”、“蛇”、“野豬”等關鍵詞時，大家都能看到“不可食用”的警告。

從百度“問醫生”免費在線咨詢，到新冠肺炎智能自測工具；從“疫情小區”地圖，到患者同乘查詢；從免費開放智能外呼平臺，到 AI 體溫檢測落地北京清河火車站……百度一直在行動。

當所有的決心、愛心和信心匯聚在一起，我們知道，陰霾和灰暗一定會被驅散，春暖花開的日子一定會到來。眾志成城，我們共渡難關！

轉自：站酷-百度BMD

評論(0) 瀏覽(2609)

012020-3

10部好片，評分9+，給你腦洞一個解釋

ui設計分享達人

探索全球頂尖設計好物

大部分人今年過年基本的生活狀態如下

如大家所知疫情緊急，

我們雖心系前線卻無力支援，

盡量避開人群不出門也算為國家做了些許貢獻。

但是宅家除了刷短視頻玩游戲，

作為設計師的童鞋們，

咋能不趁此長假好好充實自己呢

（學技能估計太難了），

在此推薦幾部經典的設計片，

娛樂的同時，也豐富下自己的設計知識。

01

《Abstract: The Art of Design》

《抽象：設計的藝術》

這是由Netflix公司出品的一部文化創意紀錄片，

豆瓣評分高達9.4，紀錄片總共8集，

每一集都探訪一位全球頂尖的設計師，

涉及插畫、建筑、汽車、攝影、平面、室內、場景、球鞋等領域，

用獨特的拍攝敘述手法展示設計師的創作過程，

揭開世界設計師非凡創意的藝術理念。

此片由《連線》雜志的主編Scott Dadich 創作并擔綱制片，并由奧斯卡最佳紀錄片導演Morgan Neville和Elizabeth Chai Vasarhelyi執導，

每一集都可以欣賞到電影畫面般的浸入感。

02

《The Genius of Design》

《設計天賦》

此片是BBC英國廣播公司

播出的一系列關于產品設計紀錄片，

一共包括五集，每集60分鐘，

通過采訪各知名設計師及相關的設計評論者，

講述產品設計的歷史和未來。

不管你喜歡Dieter Rams的隱忍

還是Phillipe Stark的奔放，

每個從事產品設計工作的朋友都能從這部紀錄片得到一些啟發。

03

《Modern Masters》

《現代藝術大師》

此片由BBC英國廣播公司

推出的一檔電視系列節目，

總共4集，分別介紹了20世紀四位重要的藝術大師：

安迪·沃霍爾（Andy Warhol）、馬蒂斯（Henri Matisse）、畢加索（Pablo Picasso）和達利（Salvador Dali）的工作與生活。

通過走訪四位藝術家們生前的居所、

藝廊及博物館等地，

向觀眾展示了他們偉大的藝術貢獻以及驚人的后世影響力。

你會發現，麥當娜的專輯封面、米菲兔的文具、

甚至是你家的沙發和電話，也許就來源于這四位大師的創作……

04

《Simon Schama's Power of Art》

《藝術的力量》

此片是由BBC英國廣播公司推出年度紀錄片，

總共8集。

講述卡拉瓦喬、貝尼尼、倫勃朗、雅克、透納、梵高、畢加索以及羅斯科八位藝術家的生平。

該系列結合了戲劇化的重塑、壯觀的攝影技術，

以及Simon Schama獨特而富有個性化的敘事，

全面剖析藝術大師們孕育和誕生藝術品時扣人心弦的故事。

這部紀錄片榮獲國際艾美獎最佳藝術節目、

2007年第60屆英國電影電視藝術學院獎最佳攝影紀實類等多項國際大獎。

05

《Design for Life》

《創意生活》

這是一檔BBC真人秀設計師比賽節目，共6集。

國際知名設計師Phillipe Starck

尋找英國最有前途的新人設計師。

通過全國選拔，

12名懷抱熱情與夢想的設計師來到到巴黎史塔克設計學院學習，

他們的目標是把自己的設計思路變成真實的產品。

Phillipe Starck設計了一系列任務，

挑戰設計師們的才華創意，但最后的贏家只有一個，

走到最后的人將獲得和世界頂尖設計師一起工作的機會，

準備面試的設計師們更要好好看一看喔。

06

《Objectified》

《設計面面觀》

這是一部以工業設計為主題的長篇獨立紀錄片。

展示了創造工業產品流程的實錄片斷，

并記錄了與世界頂尖設計師們的交談與討論。

采訪到的設計師們包括：

紐約現代藝術館館長Paola Antonelli，

慕尼黑BMW首席設計師Chris Bangle，

巴黎兄弟設計組合Ronan & Erwan Bouroullec，

美國明尼阿波利斯市Walker藝術中心平面設計師Andrew Blauvelt等世界最具影響力的設計師。

導演Gary Hustwit用洞察深切的鏡頭

記錄了這些在我們身邊隨處可見的工業設計產品，

看似稀松平常的設計背后，

卻是設計師們傾盡全力的良苦用心。

作為從事工業設計的童鞋來說，

自己的專業領域能被拍成紀錄片也是一件感到自豪的事。

07

《Urbanized》

《城市化》

Gary Hustwit 紀錄片設計三部曲的最后一部，

著重記錄一座城市的規劃與設計，

突出了致力于解決城市問題和提出對策的世界頂尖建筑師、規劃師、決策者等人。

世界上一半以上的人口生活在城市地區，

到2050年這個比例將變為75%以上。

雖然一些城市正在經歷爆炸式的增長，

但其他一些城市卻處在正在壓縮的過程中。

在住房、流動性、公共空間、民眾參與、經濟發展和環境政策之間取得平衡的挑戰正迅速成為一個普遍關注的問題。

中國的城市化進程也是如此，

因此觀看該片，會有更深刻的體會。

08

《我在故宮修文物》

由中國中央電視臺出品的一部三集文物修復類紀錄片，紀錄故宮里稀世珍奇文物的修復過程和修復者的生活故事，

把工匠精神這件嚴肅的事講得細膩、

溫軟且富有人情味。

該片是一部內蘊優裕的紀錄片，

在一個個對于文物修復師而言的稀松日常里，

我們能夠看到比修復鐘表、青銅器、木器、古琴更多的東西。

片中提到一句“修復文物是穿越古今與千百年前進行對話的特殊職業和生命體驗”，

在故宮神秘的身影下，這似乎更令人感到驚艷。

作為中國設計師，更應好好觀看，

正所謂，民族的，才是世界的。

09

《デザインあ》

《??！設計》

《啊！設計》是NHK一檔經典設計節目，

每一集邀請重量級設計師講述設計的秘訣，

深澤直人、仲條正義、祖父江慎、伊東豐雄，柴田文江……

雖是面向兒童，但視角獨特、充滿對思維的啟發，

贊嘆日本設計教育的同時也讓我們反思。

這部片放到大學設計系的課程都不為過，

因為很多一些基本的設計常識，

即使已經就業的童鞋可能都不了解，

值得設計師好好觀看。

10

《夢と狂気の王國》

《夢與狂想的王國》

該片為日本的一部紀錄片，

由砂田麻美執導，探秘吉卜力手繪動畫創作過程，

展現了宮崎駿、高畑勛、鈴木敏夫，

三位老人以及新時代年輕人對動畫的執著與熱愛。

關于宮崎駿、吉卜力的紀錄片已經很多了。

《夢與狂想的王國》則是選取了宮崎駿創作封筆之作《起風了》和高畑勛創作《輝夜姬物語》的這段時間為記錄對象，

著力表現了兩人的友誼歷史和之后的創作分歧。

宮崎駿乘坐火車去看自己的試片會。

看完后，他走上臺只說了一句話，

“對不起，生平第一次看自己的電影哭了?！?

相信看完后，大家都會想再刷一遍宮崎駿的電影。

這10部紀錄片，都是設計片中的經典，

可以收藏起來反復的觀看，

每個設計階段都會有不一樣的感悟。

片子通過搜索都可以找到片源，

找不到的可以在后臺回復（紀錄片），

會推送片源鏈接。

最后希望大家身體健健康康的，

祝福祖國早日抗疫勝利，加油！

轉自：站酷-Hang5174

評論(0) 瀏覽(2689)

« 1 ... 7 8 9 10

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合