欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

首頁(yè)

子類對(duì)象實(shí)例化全過(guò)程

seo達(dá)人

標(biāo)準(zhǔn)格式注意:

super()和this()調(diào)用語(yǔ)句不能同時(shí)在一個(gè)構(gòu)造器中。

super()或this()調(diào)用語(yǔ)句只能作為構(gòu)造器中的第一句出現(xiàn)。原因:

無(wú)論通過(guò)哪個(gè)構(gòu)造器創(chuàng)建子類對(duì)象,需要保證先初始化父類。

目的是,當(dāng)子類繼承父類后,“繼承”父類所有的屬性和方法,因此子類有必要知道父類如何為對(duì)象進(jìn)行初始化。

從結(jié)果上看:繼承性

子類繼承父類以后,就獲取了父類中聲明的屬性或方法。

創(chuàng)建子類的對(duì)象,在堆空間中,就會(huì)加載所父類中聲明的屬性。

從過(guò)程上看:

當(dāng)我們通過(guò)子類的構(gòu)造器創(chuàng)建子類對(duì)象時(shí),我們一定會(huì)直接或間接的調(diào)用其父類的構(gòu)造器,進(jìn)而調(diào)用父類的父類的構(gòu)造器,…直到調(diào)用了java.lang.Object類中空參的構(gòu)造器為止。正因?yàn)榧虞d過(guò)所的父類的結(jié)構(gòu),所以才可以看到內(nèi)存中父類中的結(jié)構(gòu),子類對(duì)象才可以考慮進(jìn)行調(diào)用。

強(qiáng)調(diào)說(shuō)明:

雖然創(chuàng)建子類對(duì)象時(shí),調(diào)用了父類的構(gòu)造器,但是自始至終就創(chuàng)建過(guò)一個(gè)對(duì)象,即為new的子類對(duì)象。


html內(nèi)聯(lián)元素和塊級(jí)元素的基本概念及使用示例

前端達(dá)人

html標(biāo)簽分為兩種,內(nèi)聯(lián)元素和塊級(jí)元素,首先我們先了解一下內(nèi)聯(lián)元素和塊級(jí)元素的概念:



塊級(jí)元素:一般是其它元素的容器,可容納內(nèi)聯(lián)元素和其它塊級(jí)元素,塊級(jí)元素排斥其它元素與其位于同一行,可設(shè)置寬度(width)高度(height)屬性,正常流中的塊級(jí)元素會(huì)垂直擺放。常見(jiàn)塊狀元素為“div”



內(nèi)聯(lián)元素(行內(nèi)元素):內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素,是塊級(jí)元素的后代,它允許其他內(nèi)聯(lián)元素與其位于同一行,不能設(shè)置高度(height)和寬度(width)。常見(jiàn)內(nèi)聯(lián)元素為“a”。



根據(jù)塊級(jí)元素的概念我們可以理解為塊級(jí)元素前后帶有換行符,也就相當(dāng)于元素前后加了一個(gè)<br>標(biāo)簽。我們可以把塊級(jí)元素想象成一個(gè)塊或一個(gè)矩形,所以塊級(jí)元素能設(shè)置高度寬度屬性



新建一個(gè)前端學(xué)習(xí)qun438905713,在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者,大家相互幫助,相互解答,并且還準(zhǔn)備很多學(xué)習(xí)資料,歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。

例:

css文件:

 



復(fù)制代碼



代碼如下:




div1{ 

width:200px; 

height:200px; 

background:#666 



div2{ 

width:200px; 

height:200px; 

background:#F00 

}





html文件: 

 



復(fù)制代碼



代碼如下:





<div id="div1"> 

div1 

塊級(jí)元素排斥其他元素與其位于同一行 

</div> 

<div id="div2"> 

div2 

塊級(jí)元素排斥其他元素與其位于同一行 

</div>





顯示效果: 



兩個(gè)div元素不位于同一行



 



根據(jù)內(nèi)聯(lián)元素的概念,我們可以理解為內(nèi)聯(lián)元素前后沒(méi)有換行符。我們可以把內(nèi)聯(lián)元素想象成一條線,所以它不能設(shè)置height屬性和width屬性。



塊級(jí)元素(block element)標(biāo)簽



address -地址

blockquote - 塊引用

center – 居中對(duì)齊

dir -目錄列表

div - 常用塊級(jí)容易,也是CSS layout的主要標(biāo)簽

dl - 定義列表

fieldset - form控制組

form - 交互表單

h1 - 大標(biāo)題

h2 - 副標(biāo)題

h3 - 3級(jí)標(biāo)題

h4 - 4級(jí)標(biāo)題

h5 - 5級(jí)標(biāo)題

h6 - 6級(jí)標(biāo)題

hr - 水平分隔線

isindex - input prompt

menu - 菜單列表

noframes - frames可選內(nèi)容,(對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容

noscript - 可選腳本內(nèi)容(對(duì)于不支持script的瀏覽器顯示此內(nèi)容)

ol - 排序表單

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表



內(nèi)聯(lián)元素(inline element)



a - 錨點(diǎn)

abbr - 縮寫(xiě)

acronym - 首字

b - 粗體(不推薦)

bdo - bidi override

big - 大字體

br - 換行

cite - 引用

code - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)

dfn - 定義字段

em - 強(qiáng)調(diào)

font - 字體設(shè)定(不推薦)

i - 斜體

img - 圖片

input - 輸入框

kbd - 定義鍵盤(pán)文本

label - 表格標(biāo)簽

q - 短引用

s - 中劃線

samp - 定義范例計(jì)算機(jī)代碼

select - 項(xiàng)目選擇

small - 小字體文本

span - 常用內(nèi)聯(lián)容器,定義文本內(nèi)區(qū)塊

strike - 中劃線

strong - 粗體強(qiáng)調(diào)

sub - 下標(biāo)

sup - 上標(biāo)

textarea - 多行文本輸入框

tt - 定義打字機(jī)文本

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

版權(quán)聲明:本文為CSDN博主「前端學(xué)習(xí)線路」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接:https://blog.csdn.net/webxuexi168/article/details/104382660

CSS簡(jiǎn)單實(shí)現(xiàn)圣杯布局和雙飛翼布局

seo達(dá)人

一、你能學(xué)到什么?

①如何使用css變量 ②實(shí)現(xiàn)圣杯布局和雙飛翼的簡(jiǎn)單思路 ③了解浮動(dòng)和margin的特性



css變量設(shè)置(兩個(gè)布局都有的部分)

:root{

    / 左邊欄寬度 /

    --lw:300px;

    /負(fù)左邊欄寬度/

    --lwf:-300px;

    / 右邊欄寬度 /

    --rw:400px;

    /負(fù)左邊欄寬度/

    --rwf:-400px;

    / 高度 /

    --height:300px;

}



二、圣杯布局的html和css代碼

html部分

  <div class="holyGrail">

    <div class="hg_main">main</div>

    <div class="hg_left">left</div>

    <div class="hg_right">right</div>

  </div>



css 實(shí)現(xiàn)對(duì)應(yīng)的四個(gè)class

.holyGrail {

    height: var(--height);

    / 留出左右兩欄的布局 為了字體不被覆蓋/

    padding-left: var(--lw);

    padding-right: var(--rw);

}

.hg_main{

    width:100%;

    float: left;

    height: var(--height);

    background-color: blanchedalmond;

}

.hg_left{

    position: relative;

    left: var(--lwf);

    float: left;

    margin-left: -100%;

    width:var(--lw);

    height: var(--height);

    background-color: blueviolet;

}

.hg_right{

    float: left;

    margin-right: var(--rwf);

    width:var(--rw);

    height: var(--height);

    background-color: brown;

}





三、雙飛翼布局的html和css代碼

html部分

<div class="doubleWing">

    <div class="dw_main">

      <div class="dw_con">main</div>

    </div>

    <div class="dw_left">left</div>

    <div class="dw_right">right</div>

  </div>



css 實(shí)現(xiàn)對(duì)應(yīng)的五個(gè)class

.doubleWing{

    padding-right: var(--rw);

}

.dw_left{

    float: left;

    margin-left: -100%;

    width:var(--lw);

    height: var(--height);

    background-color: blueviolet;

}

.dw_main{

    width:100%;

    float: left;

    height: var(--height);

    background-color: blanchedalmond;

}

.dw_con {

margin-left: var(--lw);

}

.dw_right{

    float: left;

    margin-right: var(--rwf);

    width:var(--rw);

    background-color: brown;

    height: var(--height); 

}



四、學(xué)會(huì)兩個(gè)布局的注意點(diǎn)

圣杯布局

在最外邊的類(holyGrail)左右要留出左欄和右欄的寬度(使用padding-left,padding-right)

中間的div.hg_main放在最上面,優(yōu)先渲染,中間div自適應(yīng),width為100%

左中右欄的div都設(shè)置浮動(dòng),左欄通過(guò)margin-left:-100%移動(dòng)到和中間的div同一起點(diǎn),然后通過(guò)position: relative;

left: -(左欄的寬度);會(huì)移動(dòng)到最外層div的左內(nèi)邊距的區(qū)域(中間div的左邊)

右欄可以通過(guò)margin-right:-(右欄的寬度);移動(dòng)到最外層div的右內(nèi)邊距的區(qū)域(中間div的右邊)

雙飛翼布局

在中欄的div再加一個(gè)div,設(shè)置margin-left:左欄的寬度,這樣可以省略左欄的div使用postion和left的屬性移動(dòng)

最外層的div可以不用預(yù)留左欄的位置了

五、兩個(gè)布局的對(duì)比的優(yōu)缺點(diǎn)

布局 優(yōu)點(diǎn) 缺點(diǎn)

圣杯 無(wú)多余dom 當(dāng)中間的寬度小于左右的寬度時(shí),結(jié)構(gòu)混亂

雙飛翼 可以支持各種寬度,通用性強(qiáng)較強(qiáng) 需要多加一層dom

代碼下載地址

記得一定要自己去實(shí)現(xiàn)一下


html+css基礎(chǔ)教程入門(mén)篇之css選擇器詳細(xì)解讀

前端達(dá)人

CSS 選擇器分組



CSS選擇器分組,可以把定義相同屬性的不同標(biāo)簽做為一組處理,縮短了CSS樣式編寫(xiě)的時(shí)間和CSS樣式表的大小。



例如希望h2和p標(biāo)簽的字體顏色都設(shè)置為黑色,則可以寫(xiě)成:



h2,p{color:black;}

通過(guò)分組,可以將相同屬性的樣式“壓縮”在一起,這樣就可以得到更簡(jiǎn)潔的樣式表。例如:



/ no grouping /

h1 {color:blue;}

h2 {color:blue;}

h3 {color:blue;}

h4 {color:blue;}

h5 {color:blue;}

h6 {color:blue;}



/ grouping /

h1, h2, h3, h4, h5, h6 {color:blue;}



當(dāng)有多個(gè)標(biāo)簽有相同屬性時(shí),可以抽出相同屬性進(jìn)行分組,不同的屬性另外書(shū)寫(xiě)樣式。



除了使用標(biāo)簽來(lái)進(jìn)行相同標(biāo)簽CSS選擇外,還可以使用類選擇器來(lái)選擇。



類選擇器前面使用符號(hào).



(1)基本使用



為了將類選擇器的樣式與元素關(guān)聯(lián),必須將 class 指定為一個(gè)適當(dāng)?shù)闹?。例如?br />


<h1 class="important">This heading is very important.</h1>

<p class="important">This paragraph is very important.</p>

在樣式表中定義:



.important {color:red;}

這樣定義后,class為important的h1和p標(biāo)簽的字體顏色也就都是紅色。



(2)結(jié)合元素選擇器



類選擇器可以結(jié)合元素選擇器來(lái)使用。



例如,您可能希望只有段落顯示為紅色文本:



p.important {color:red;}

這個(gè)樣式表示的是,所有class為important ,且為p標(biāo)簽的元素中的字體為紅色。其他標(biāo)簽的無(wú)效。



(3)CSS 多類選擇器



一個(gè)標(biāo)簽可以定義多class,則這個(gè)標(biāo)簽有這多個(gè)class的所有屬性,例如:



<p class="important warning">This paragraph is a very 

important warning.</p>





.important {font-weight:bold;}

.warning {color:red;}



例子中為p標(biāo)簽定義了important和warning兩個(gè)class,所以p標(biāo)簽的字體是加粗且字體顏色是紅色的。

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

版權(quán)聲明:本文為CSDN博主「前端學(xué)習(xí)線路」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接:https://blog.csdn.net/webxuexi168/article/details/104349157

關(guān)于javascript跳轉(zhuǎn)與返回和刷新頁(yè)面

seo達(dá)人

javascript中window.open()與window.location.href的區(qū)別

window.open(‘index.html’) 表示新增一個(gè)窗口打開(kāi) index.html 這個(gè)頁(yè)面,并不刷新

location.href(‘index.html’) 表示在當(dāng)前窗口重定向到新頁(yè)面,打開(kāi)并刷新 index.html 這個(gè)頁(yè)面



window.location 是 window 對(duì)象的屬性,用來(lái)替換當(dāng)前頁(yè),也就是重新定位當(dāng)前頁(yè)

而window.open 是 window 對(duì)象的方法,是用來(lái)打開(kāi)一個(gè)新窗口的函數(shù)



// 打開(kāi)新頁(yè)面

// 注意:有些瀏覽器的安全設(shè)置會(huì)將window.open()屏蔽,例如避免彈出廣告窗

window.open('./index.html');



// 在原窗口打開(kāi)新頁(yè)面

window.location.href="./index.html";



window.open()詳解



window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')





參數(shù)解釋: 三個(gè)參數(shù)

window.open 彈出新窗口的命令;

‘page.html’ 彈出窗口的文件名;

‘newPage’ 彈出窗口的名字(不是文件名),非必須,可用空’'代替;

height=100 窗口高度;

width=400 窗口寬度;

top=0 窗口距離屏幕上方的象素值;

left=0 窗口距離屏幕左側(cè)的象素值;

toolbar=no 是否顯示工具欄,yes為顯示;

menubar=no 是否顯示菜單欄,yes為顯示;

scrollbars=no 是否顯示滾動(dòng)欄,yes為顯示;

resizable=no 是否允許改變窗口大小,yes為允許;

location=no 是否顯示地址欄,yes為允許;

status=no 是否顯示狀態(tài)欄內(nèi)的信息(通常是文件已經(jīng)打開(kāi)),yes為允許;



常用的js返回與刷新頁(yè)面

在此用a標(biāo)簽舉例





<a href="javascript: history.back(-1)">返回上一頁(yè)</a> 

<a href="javascript:history.go(-1)">返回上一頁(yè)</a> 

<a href="javascript:history.go(-2)">返回前兩頁(yè)</a> 

<a href="javascript:location.reload()">刷新當(dāng)前頁(yè)面</a> 

<a href="javascript:" onclick="self.location=document.referrer;">返回上一頁(yè)并刷新</a> 





js





// 刷新當(dāng)前頁(yè)面

window.location.Reload();

self.location.reload();

window.location.href = window.location.href;


耍好控件 | 了解圖標(biāo)落地,讓前端再愛(ài)你一次

鶴鶴

文中涉及到的所有工具與插件,考慮到部分小伙伴可能下載外網(wǎng)資源太慢,我已將相關(guān)插件全部打包整理完畢,可在公眾號(hào)中領(lǐng)取!

如期而至,這是標(biāo)簽欄控件總結(jié)的第二期。

 

 

這一期我們來(lái)聊一聊標(biāo)簽欄中的關(guān)鍵元素——圖標(biāo)。在此之前,如果你還沒(méi)有了解標(biāo)簽欄的平臺(tái)規(guī)范,可以回顧:《沒(méi)弄懂標(biāo)簽欄之前,先不談?dòng)脩趔w驗(yàn)》

 

圖標(biāo)其實(shí)存在于界面中的許多地方,但因?yàn)檫@一期主要分析標(biāo)簽欄,所以我會(huì)借標(biāo)簽欄中較主流的圖標(biāo)樣式,總結(jié)一套圖標(biāo)制作與落地方法。這些方法在圖標(biāo)制作過(guò)程中都是相通的,大家可以舉一反三。

 

 

一、標(biāo)簽欄圖標(biāo)規(guī)范

 

1.1 圖標(biāo)樣式

 

圖標(biāo)具體樣式風(fēng)格的定義是非常主觀的,網(wǎng)絡(luò)上也流傳著許多的教程教大家如何設(shè)計(jì)五花八門(mén)的圖標(biāo),所以在這里我就不再贅述了。我主要來(lái)總結(jié)一下基礎(chǔ)的標(biāo)簽欄圖標(biāo)一般有哪些樣式變化。

 

我調(diào)研了諸多的應(yīng)用程序,發(fā)現(xiàn)主流的APP標(biāo)簽欄樣式變化,大致分為以下五種。其中最占比最多的是“由線型轉(zhuǎn)面型”。

 


 

調(diào)研的應(yīng)用程序中,所有使用到線性圖標(biāo)的應(yīng)用程序,都將描邊粗細(xì)限制在1pt-2pt之間。

 

 

1.2 圖標(biāo)視覺(jué)大小

 

上一期我們講到,iOS定義了一套標(biāo)簽欄圖標(biāo)的尺寸規(guī)范。

 

 


iOS在這里所定義的尺寸并不是圖標(biāo)文件最后輸出的尺寸,而是給設(shè)計(jì)師作圖時(shí),針對(duì)不同圖標(biāo)形狀的參考尺寸,目的是為了讓圖標(biāo)的視覺(jué)大小看上去一致。

 

那么為什么iOS會(huì)根據(jù)不同的圖標(biāo)形狀給出不同的圖標(biāo)尺寸呢?因?yàn)?0px*50px的正方形比50px*50px的圓形面積更大,所以正方形的視覺(jué)大小也會(huì)大于圓形。為了統(tǒng)一圖標(biāo)的視覺(jué)大小,正方形要做適當(dāng)?shù)?strong style="outline:0px;margin:0px;padding:0px;">面積收縮處理。(矩形同理)

 

 

于是我們看到許多平臺(tái)都推出了圖標(biāo)輔助網(wǎng)格規(guī)范。其實(shí)如果遵從“面積相等”原理,理論上所有的圖標(biāo)網(wǎng)格都應(yīng)該由下面這一套推理公式得出(以Material Design 標(biāo)準(zhǔn)圖標(biāo)網(wǎng)格為例):

 

 

但實(shí)際情況是,不同平臺(tái)的圖標(biāo)輔助網(wǎng)格規(guī)范建議尺寸都有一定的差異。原因就在于,雖然有時(shí)候我們參考“面積相等”原則對(duì)圖標(biāo)視覺(jué)尺寸進(jìn)行了規(guī)范,但項(xiàng)目落地后發(fā)現(xiàn)視覺(jué)上可能還是有一些不協(xié)調(diào),所以最終設(shè)計(jì)師還是會(huì)憑借自己的主觀判斷再進(jìn)行微調(diào)。

 
記?。汉玫脑O(shè)計(jì)作品是理性的設(shè)計(jì)理論與設(shè)計(jì)師本身感性的碰撞結(jié)果,二者缺一不可。

 

1.3 圖標(biāo)輸出尺寸

 

iOS規(guī)定標(biāo)簽欄圖標(biāo)的輸出尺寸統(tǒng)一為31pt*28pt;Material Design規(guī)定標(biāo)簽欄圖標(biāo)的輸出尺寸統(tǒng)一為24dp*24dp。

 

但我們發(fā)現(xiàn),在借助了圖標(biāo)網(wǎng)格解決了圖標(biāo)視覺(jué)大小的問(wèn)題之后,每一個(gè)不同形狀的圖標(biāo),尺寸其實(shí)是不同的。為了方便前端落地,我們?cè)谳敵銮袌D文件時(shí),要保持每一個(gè)圖標(biāo)文件的輸出尺寸是相同的。該怎么辦呢?

 

于是我們將一組圖標(biāo)都放置在一個(gè)比圖標(biāo)本身略大的相同尺寸容器中。而圖標(biāo)與這個(gè)容器之間的空白像素,正好也幫助我們規(guī)避了圖標(biāo)落地后,切圖邊緣像素可能被截?cái)嗟默F(xiàn)象發(fā)生,所以我們稱這個(gè)區(qū)域?yàn)?strong style="outline:0px;margin:0px;padding:0px;">“安全邊距”。

 

 

對(duì)于安全邊距的規(guī)定:Material Design全平臺(tái)規(guī)定圖標(biāo)的安全間距統(tǒng)一2dp;iOS則根據(jù)不同的圖標(biāo)使用場(chǎng)景給出的不同的圖標(biāo)網(wǎng)格和圖標(biāo)安全間距。


二、靜態(tài)圖標(biāo)


標(biāo)簽欄的圖標(biāo)一般分為靜態(tài)圖標(biāo)和動(dòng)態(tài)圖標(biāo)兩種。


靜態(tài)圖標(biāo)的實(shí)現(xiàn)方法相對(duì)容易,可以與前端溝通確定本次項(xiàng)目交付的標(biāo)簽欄圖標(biāo)文件是采用位圖還是矢量圖。如果是位圖建議交付.png格式文件;如果是矢量圖建議交付.svg格式文件。


2.1 位圖圖標(biāo)

 

使用位圖時(shí)請(qǐng)注意以下兩點(diǎn):

 

1)不同項(xiàng)目環(huán)境輸出的切圖套數(shù)不同

 

· 交付iOS原生的標(biāo)簽欄圖標(biāo)切圖需要 @1x/@2x/@3x 三種倍率的切圖文件;


· 交付Android原生的標(biāo)簽欄圖標(biāo)切圖需要 @1.5x/@2x/@3x/@4x 四種倍率的切圖文件(@0.75x和@1x切圖層分別用于ldpi和mdpi分辨率設(shè)備,但這些設(shè)備現(xiàn)在幾乎已退出市場(chǎng),所以可不考慮,但最終視項(xiàng)目真實(shí)需求確定。);


· 交付web項(xiàng)目的切圖需要試情況而定,一般常用 @2x 切圖,因?yàn)锧2x向下適配@1x、向上適配@3x,都不會(huì)產(chǎn)生太大的圖片失真。但有時(shí)候前端小哥會(huì)要求用到其他倍率切圖,所以最終以具體需求而定。

 

請(qǐng)注意:這里我所提到的倍率全都是“絕對(duì)倍率”,這個(gè)概念非常關(guān)鍵。

 

“絕對(duì)倍率”指的是:以上所有的倍率都是針對(duì) @1x 設(shè)計(jì)稿下的輸出倍率尺寸。而當(dāng)你使用@2x作圖時(shí),為了保證“絕對(duì)倍率”不變,你的切圖輸出倍率就應(yīng)該設(shè)置為 @0.5x/@1x/@1.5x 。

 

如果你在@2x下作圖,卻依然保持輸出 @1x/@2x/@3x 的切圖,那你輸出的文件尺寸最終其實(shí)是 @2x/@4x/@6x。

 

有一點(diǎn)繞的話,我們以Sketch導(dǎo)出位圖切圖為例:

 

 

所以如果你日常使用的是Sketch,也是用Sketch原生導(dǎo)出工具,那你的切圖預(yù)設(shè)應(yīng)該根據(jù)你的作圖尺寸而定,見(jiàn)下表:

 

 

如果你日常使用的是PS,用Cutterman切圖,那么Cutterman會(huì)自動(dòng)識(shí)別你當(dāng)前的畫(huà)板,然后根據(jù)它的寬(橫屏情況下是高)來(lái)設(shè)定它的基準(zhǔn)分辨率。那么你在任何情況下輸出 @1x/@2x/@3x 的切圖,其實(shí)都是“絕對(duì)倍率”,不用像Sketch當(dāng)中一樣換算。前提是“設(shè)置當(dāng)前畫(huà)布為:Auto(自動(dòng)識(shí)別)”。

 

 

假設(shè)你在@2x下作圖,執(zhí)意不管不顧“絕對(duì)倍率”,又忘了交代前端人員手動(dòng)處理切圖尺寸的話,那你所有的切圖尺寸實(shí)際都是設(shè)計(jì)稿所需圖標(biāo)尺寸的2倍。就算前端小哥幫你手動(dòng)處理了切圖尺寸,每一張切圖所包含的像素信息,都比項(xiàng)目真實(shí)所需的要多很多,完全就是在徒增所需切圖文件的大小。

 

2)注意切圖文件大小

 

切記,公司的線上項(xiàng)目中,用戶從服務(wù)器下載的每一單位的流量都是要公司花錢(qián)的,所以許多項(xiàng)目管理者都是很在意控制線上文件大小的。于是壓縮切圖是UI必備的技能之一。

 

雖然圖標(biāo)的文件大小一般只有幾KB,但是項(xiàng)目大了難免積少成多,所以在真實(shí)項(xiàng)目中,不管任何切圖我都會(huì)手動(dòng)壓縮一次。

 

這里推薦一個(gè)壓縮.png文件大小,但幾乎不會(huì)產(chǎn)生失真的免費(fèi)網(wǎng)站 tinypng

 

 

2.2 矢量圖

 

位圖切圖會(huì)面臨交付的倍率圖過(guò)多、容易失真、文件大小難控制等問(wèn)題,但對(duì)于矢量圖,這些問(wèn)題都得到了解決。目前.svg矢量圖落地也在項(xiàng)目中越來(lái)越流行了。UI可以在Sketch或Ai中制作。

 

一般與前端人員對(duì)接有在線圖標(biāo)庫(kù)對(duì)接與本地文件對(duì)接兩種。

 

在線矢量圖標(biāo)庫(kù)有很多,國(guó)內(nèi)比較流行的是阿里巴巴矢量圖標(biāo)庫(kù)-iconfont;本地對(duì)接就是直接將文件發(fā)送給前端人員,他們會(huì)自行進(jìn)行項(xiàng)目文件的管理與調(diào)用。

 

如果.svg切圖輸出后,與設(shè)計(jì)稿中樣式不符,請(qǐng)注意排查以下三點(diǎn):

 

1、svg不支持漸變顏色填充;

2、svg不支持描邊,請(qǐng)將所有的描邊輪廓化。Sketch中可通過(guò)“圖層-輪廓化”(快捷鍵??O);Ai中可通過(guò)“對(duì)象-路徑-輪廓化描邊”;

3、要確保一組圖標(biāo)的文件尺寸一致,需在圖標(biāo)下方增加一個(gè)透明方形,和圖標(biāo)一同導(dǎo)出。


 

  

三、動(dòng)態(tài)圖標(biāo)

 

為了提升用戶體驗(yàn)和產(chǎn)品趣味性,動(dòng)效微交互的標(biāo)簽欄圖標(biāo)也越來(lái)越流行了。

 

 

動(dòng)效在前端落地的方法其實(shí)有很多:

 

· 前端代碼直接實(shí)現(xiàn):代碼是很強(qiáng)大的,但通常用代碼直接寫(xiě)復(fù)雜動(dòng)效會(huì)很浪費(fèi)項(xiàng)目時(shí)間。簡(jiǎn)單維度的動(dòng)效如位移、透明度、大小變化等可以借助代碼,但復(fù)雜動(dòng)效就不要去打擾前端小哥了;

· 直接剛gif:這已經(jīng)是老舊技術(shù)時(shí)代的動(dòng)畫(huà)解決方案了,文件大且請(qǐng)求文件也需要時(shí)間,有時(shí)候無(wú)法給用戶及時(shí)的觸控反饋。再者它是位圖的原因,在高分辨率屏幕上縮放容易失真。

· png序列幀:我們知道,動(dòng)畫(huà)是一張一張的靜態(tài)圖交替變化形成的。如果將每一幀動(dòng)畫(huà)都拆分成一張圖片,就有了png序列幀。所以一套動(dòng)畫(huà)的png序列幀往往非常多,文件大小自然就變大了。所以后來(lái)也有團(tuán)隊(duì)引進(jìn)了雪碧圖的方式,但文件大小依然不樂(lè)觀。并且同樣是位圖的原因,高分辨率屏幕容易失真。

· Facebook Pop/Rebound/Keyframes:Facebook Pop/Rebound是Facebook給iOS和Android提供的常用動(dòng)畫(huà)預(yù)設(shè),是較早將動(dòng)效代碼化的開(kāi)源技術(shù)方案,但動(dòng)畫(huà)效果預(yù)設(shè)只有彈簧/衰減等一些簡(jiǎn)單樣式。后來(lái)Facebook又推出了Keyframes,允許設(shè)計(jì)師自己在Ae中自定義動(dòng)畫(huà)并導(dǎo)出,然后交付給前端人員。

· Lottie動(dòng)畫(huà):和Facebook Keyframes相同,都是結(jié)合Ae輸出動(dòng)畫(huà)代碼。但是Lottie更厲害的地方在于,它比起Facebook Keyframes來(lái)支持的Ae樣式更多,例如蒙版、遮罩、修剪路徑等等。

 

所以綜上所述,落地標(biāo)簽欄動(dòng)態(tài)圖標(biāo),目前最可行的還是Lottie動(dòng)畫(huà)。

 

3.1 Lottie的背景

 

Lottie是Airbnb開(kāi)源的一個(gè)跨平臺(tái)動(dòng)畫(huà)庫(kù)。表現(xiàn)層面它是一張圖片,但實(shí)現(xiàn)的方式是通過(guò)代碼,所以它是矢量的。很花式的動(dòng)畫(huà)也可以把文件大小做到非常小。

 

UI與前端對(duì)接是通過(guò)交付一個(gè)json代碼文件。

 

如果這是你第一次接觸Lottie,再好不過(guò)的體驗(yàn)方法就是玩一玩阿里提供的一站式動(dòng)畫(huà)平臺(tái):犸良動(dòng)畫(huà) 。它最底層采用的技術(shù)就是Lottie,只是被阿里二次封裝了許多預(yù)設(shè)的動(dòng)畫(huà)效果,你可以自定義其中的元素與參數(shù),然后試著導(dǎo)出你的第一個(gè)json文件~

 

3.2 Lottie如何上手

 

接下來(lái)是簡(jiǎn)單粗暴的UI與前端對(duì)接實(shí)現(xiàn)Lottie動(dòng)畫(huà)落地的全步驟參考。在此之前,想要全方位了解Lottie的相關(guān)信息,請(qǐng)參閱Lottie官方說(shuō)明文檔

 

· 步驟一:安裝Ae和bodymovin

 

制作Lottie動(dòng)畫(huà),首先你必需兩個(gè)工具:Ae和bodymovin插件。

 

Ae版本要求為Ae CC2014。又因?yàn)閾?jù)很多設(shè)計(jì)師反饋,目前bodymovin在漢化后的Ae中使用會(huì)出現(xiàn)諸多問(wèn)題,所以后面的教程都是基于Ae英文版。如果你漢化了Ae,最好在需要制作Lottie動(dòng)畫(huà)時(shí)取消漢化。

 

然后獲取bodymovin。bodymovin插件更新至今,版本已非常多,并不一定版就適用于你當(dāng)前的項(xiàng)目,因?yàn)榍岸耸褂玫腷odymovin解析包可能無(wú)法解析你用版bodymovin插件輸出的json文件。

 

 

一旦確定使用Lottie,前端人員會(huì)在GitHub查詢Lottie相關(guān)文檔的,所以UI只需要配合前端確定一下合適的bodymovin插件版本就可以了。最終走查時(shí),一定要確保當(dāng)前bodymovin輸出的動(dòng)畫(huà)在項(xiàng)目所需要運(yùn)行的所有環(huán)境中可運(yùn)行,才說(shuō)明UI使用的bodymovin插件和前端使用的bodymovin解析包版本是兼容的。

 

獲取了bodymovin后,將bodymovin拖入到ZXP Installer中,ZXP Installer會(huì)自動(dòng)識(shí)別插件安裝到Ae。

 

 

安裝完成后,就可以在AE的“窗口-擴(kuò)展”中看到bodymovin啦~

 

 

· 步驟二:將Sketch或Ai中的文件導(dǎo)入Ae

 

如果你技術(shù)嫻熟,當(dāng)然也可以直接在Ae中繪制圖案動(dòng)畫(huà)。但如果你還是習(xí)慣先在其他軟件中繪制好基礎(chǔ)圖案,再到Ae中制作動(dòng)畫(huà),那你需要了解如何將圖案導(dǎo)入Ae。

 

Ai和Ae都是Adobe旗下的工具,所以Ae是可以完美解析.ai文件的,如果你是使用Ai作圖,可直接存儲(chǔ)為.ai文件,再在Ae中打開(kāi)。

 

 

如果你使用的是Sketch,可以先導(dǎo)出為.svg,再用Ai打開(kāi)該.svg文件,轉(zhuǎn)換存儲(chǔ)格式為.ai,最后到Ae中打開(kāi)。

 

當(dāng)然,Sketch還有直接和Ae對(duì)接的插件,AEUX(前身Sketch2AE)。需要在Sketch和Ae中同時(shí)安裝AEUX插件,Sketch負(fù)責(zé)傳送,Ae負(fù)責(zé)接收。具體的使用方法可以在官網(wǎng)教程中查看,我就不再贅述了。

 

 

·步驟三:制作動(dòng)效并輸出

 

和靜態(tài)圖標(biāo)同理,為了保證落地時(shí)圖標(biāo)視覺(jué)大小一致,一組動(dòng)效圖標(biāo)輸出的文件尺寸應(yīng)該是相同的。所以在你制作動(dòng)畫(huà)之前需要確定合成文件的尺寸。Lottie官方建議:因?yàn)長(zhǎng)ottie輸出的是矢量動(dòng)畫(huà),所以建議以@1x輸出動(dòng)效,前端人員在任何屏幕上放大并不會(huì)失真。

 

 

在制作之前請(qǐng)務(wù)必詳細(xì)閱讀Lottie所支持的Ae參數(shù)文檔,以免辛苦做出的動(dòng)效,前端無(wú)法解析。特別提醒:原生環(huán)境中bodymovin是不支持解析Ae表達(dá)式的。

 

完成制作動(dòng)效后,就可以通過(guò)bodymovin導(dǎo)出動(dòng)效了。

 

  

·步驟四:預(yù)覽與交付

 

導(dǎo)出完成后在你的目的地文件夾中將存在一個(gè).json文檔,如果你的動(dòng)效中還使用了位圖,系統(tǒng)還會(huì)自動(dòng)生成一個(gè)images文件夾。這些都是你需要交付給與你對(duì)接的前端開(kāi)發(fā)人員的文件。

 

 

.json文件中記錄的動(dòng)效代碼UI不需要過(guò)多關(guān)心,但是其中兩個(gè)信息你是一定要了解的。它們是你與前端對(duì)接溝通和獲悉文件信息的一些關(guān)鍵參數(shù)。

 

 

UI自檢動(dòng)效或其他相關(guān)人員需要預(yù)覽動(dòng)效的時(shí)候,可以用LottieFiles,拖入.json文件即可預(yù)覽。iOS和Android還可以下載LottieFiles APP,掃描預(yù)覽頁(yè)中的二維碼即可在移動(dòng)端預(yù)覽。

 

四、總結(jié)

 

整個(gè)制作圖標(biāo)的流程我已經(jīng)全部整理出來(lái)了。首先要注意圖標(biāo)的規(guī)范,然后制作位圖、矢量、動(dòng)效圖標(biāo)時(shí)的注意點(diǎn),我?guī)缀醢盐以谡鎸?shí)項(xiàng)目中踩過(guò)的坑都告訴大家了。剩下的創(chuàng)造性的環(huán)節(jié)就交給你了!

 轉(zhuǎn)自:站酷-UCD耍家 

交互設(shè)計(jì):如何做到驚喜?

鶴鶴

保持好奇,巧妙融合,追求卓越,自然而然


上一篇,探討了如何做到品質(zhì)。這一篇,探討下如何做到驚喜。

一家之言,未必全面,甚至未必正確。歡迎交流探討。


01
交互設(shè)計(jì)的驚喜,是什么?

之前的文章,有簡(jiǎn)單定義過(guò)交互設(shè)計(jì)的“驚喜”,即為:超出用戶預(yù)期,并讓用戶開(kāi)心。

具體而言有兩類,分別是:小驚喜、大驚喜。

1 小驚喜

所謂小驚喜,是指一些頗具趣味性或人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。


先說(shuō)趣味性。常見(jiàn)的有兩類,第一類是比較好玩的動(dòng)效,第二類是一些小功能。第二類有時(shí)也會(huì)包含第一類。

動(dòng)效這塊,大家比較熟悉的,有 iPhone 上刪除應(yīng)用前圖標(biāo)的抖動(dòng),仿佛是嚇的發(fā)抖,也可能是在搖頭求饒;還有移動(dòng)端登錄 B 站、輸入密碼時(shí),動(dòng)畫(huà)人物的捂眼捂臉動(dòng)作。

(B 站登錄頁(yè)面)

小功能這塊,也可以分成兩類。一類是隱藏的小功能,一類是有趣的小功能。


很多隱藏功能,頭幾次用的時(shí)候,多少會(huì)有一些驚喜之感。

比如在訂閱號(hào)消息列表頁(yè),某個(gè)公眾號(hào)你已經(jīng)幾個(gè)月沒(méi)看過(guò),對(duì)它失去了興趣和信任。這時(shí),嘗試長(zhǎng)按這個(gè)公眾號(hào)的頭像或名稱,會(huì)呼出一個(gè)包含“刪除消息”和“取關(guān)”功能的彈窗。

(訂閱號(hào)消息列表)

還有些隱藏功能,既能讓用戶覺(jué)得驚喜和方便,又能引發(fā)用戶思考。這種思考,可能會(huì)讓用戶感嘆設(shè)計(jì)之妙,也可能也會(huì)給用戶一種猜對(duì)謎語(yǔ)的欣喜之感。

比如用墨刀的時(shí)候,嘗試按數(shù)字鍵 1,會(huì)呼出“內(nèi)置組件”這個(gè)使用頻率非常高的功能,會(huì)讓人覺(jué)得墨刀很聰明。

如果再仔細(xì)看一下,會(huì)發(fā)現(xiàn),“內(nèi)置組件”的縮略圖標(biāo),和其他 4 個(gè)諸如“我的組件”、“圖標(biāo)”等功能的縮略圖標(biāo),并成一列。這 5 個(gè)縮略圖標(biāo)的排列順序(上到下),和它們快捷鍵("、"鍵和數(shù)字鍵1、2、3、4)的排列順序(左到右),是完全一致的。不得不說(shuō),這是一個(gè)簡(jiǎn)單又巧妙的設(shè)計(jì)。


再比如朋友圈里,某個(gè)不熟的好友每天都發(fā)集贊的小廣告,搞的我們不勝其煩。長(zhǎng)按其頭像,會(huì)呼出設(shè)置權(quán)限(屏蔽等)的功能。

有意思的是,長(zhǎng)按好友名字,則不會(huì)呼出這個(gè)功能。要知道點(diǎn)擊頭像或名字是都能進(jìn)入好友主頁(yè)的;另外剛才那個(gè)例子,長(zhǎng)按公眾號(hào)頭像或名字,也都能呼出取關(guān)的彈窗。

個(gè)人的理解,生活中,我們用力長(zhǎng)按一個(gè)人,通常是表達(dá)強(qiáng)烈不滿,比如打架時(shí)。比起長(zhǎng)按名字,長(zhǎng)按頭像更像是長(zhǎng)按真人,所以也更能表達(dá)我們的不滿。


說(shuō)完隱藏的小功能,再說(shuō)下有趣的小功能。比如微信聊天里的扔骰子、石頭剪刀布,微信給朋友發(fā)生日快樂(lè)后漫天飄落的蛋糕,拍照軟件里的貼紙,等等。

最后說(shuō)下帶有人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。常見(jiàn)的有如下類型:幫助弱勢(shì)、關(guān)照情緒、表達(dá)情感、保護(hù)隱私。


幫助弱勢(shì)這塊,比如 iPhone 的輔助功能,里面有針對(duì)視力障礙的放大鏡功能、有針對(duì)不識(shí)字群體的旁白功能。

關(guān)照情緒這塊,很重要的一點(diǎn),就是避免引起用戶的負(fù)面情緒。比如微信的刪好友是單方面刪除,被刪時(shí)我們很難察覺(jué)到,而且微信也不會(huì)通知我們。個(gè)人覺(jué)得,微信之所以不通知我們,其中一點(diǎn),就是不給我們添堵。類似的還有,微信消息沒(méi)有“已讀”功能,這就大大減輕了接收者的回復(fù)壓力。

表達(dá)情感這塊,比較為人所知的例子,5 月 20 號(hào)這天,微信紅包的限額,從 200 元升到了 520 元。還有一個(gè)例子,在微信聊天里發(fā)一個(gè)“ohh”,長(zhǎng)按并點(diǎn)翻譯,結(jié)果也是一個(gè)驚喜。

保護(hù)隱私這塊,比如借助 iPhone 的“引導(dǎo)式訪問(wèn)”功能,可以讓小朋友只能訪問(wèn)你的某個(gè)視頻應(yīng)用來(lái)看動(dòng)畫(huà)片。再比如別人用你電腦的時(shí)候,如果你不想讓對(duì)方看到你的微信,就可以通過(guò)手機(jī)微信來(lái)鎖定或退出電腦版微信。

2 大驚喜

所謂大驚喜,是指那些系統(tǒng)性大創(chuàng)新,并且能夠引領(lǐng)潮流、代表未來(lái)的交互設(shè)計(jì)。通常而言,這些大驚喜,最開(kāi)始給用戶的感覺(jué),就是酷。

iPhone 就是典型例子之一 。

2007 年的初代 iPhone,帶來(lái)了當(dāng)時(shí)的大屏幕:3.5 寸屏幕,以及純觸摸屏,和極為靈敏的觸控體驗(yàn)。

2011 年,Siri 同 iPhone 4S 一起問(wèn)世,為我們帶來(lái)了語(yǔ)音交互。如今,在 100 元就能買(mǎi)到品牌類智能音響的情況下,依靠語(yǔ)音交互的智能音響也在慢慢走入尋常百姓家。

也許后喬布斯時(shí)代的 iPhone 創(chuàng)新不如以前,但不可否認(rèn)的是,時(shí)至今日,iPhone 依然在引領(lǐng)潮流,在給我們大驚喜。比如這幾年流行的手機(jī)無(wú)線充電和以 AirPods 為代表的極簡(jiǎn)的無(wú)線耳機(jī)。

以上是比較廣為人知的交互設(shè)計(jì),還有一些不太為人所知的設(shè)計(jì)。比如在家里網(wǎng)購(gòu)一條床單,但是不知道床的尺寸,家里又沒(méi)有尺子。這時(shí),打開(kāi) iPhone 里的測(cè)距儀這款 App,就可以量出床的尺寸,會(huì)不會(huì)覺(jué)得有點(diǎn)酷。

(測(cè)距儀 App)

微信在引領(lǐng)潮流方面也有一些建樹(shù),比如極大的普及了二維碼和掃一掃。小程序作為一種體驗(yàn)接近原生 App、同時(shí)又不用下載的產(chǎn)品,也正在引領(lǐng)新一輪的潮流。

還有一個(gè)比較酷的功能,就是以圖搜圖。筆者最早用過(guò)百度和谷歌的相關(guān)功能,主要是在電腦上搜索相似的圖片,使用頻率極低。

假設(shè)一個(gè)場(chǎng)景,比如在路上看到一個(gè)陌生人的外套很好看,但又不好意思上前問(wèn),就可以拿起手機(jī),利用淘寶的拍立淘功能,拍張照就能馬上看到相同或相似的商品。

如果淘寶上沒(méi)有搜到類似商品,還可以用微信的掃一掃識(shí)物。和拍立淘相比,區(qū)別之處有兩點(diǎn)。第一,不用拍,直接能識(shí)別,不過(guò)通常得等 1-3 秒;第二,識(shí)物結(jié)果里面,除了商品,可能還會(huì)有百科詞條和資訊。


02
交互設(shè)計(jì):如何做到驚喜?

個(gè)人覺(jué)得,有 4 個(gè)要點(diǎn):既要有好奇心,又要有卓越心;既要天馬行空,又要保持自然。

聽(tīng)起來(lái)可能有點(diǎn)亂,且聽(tīng)筆者一一道來(lái)。


1 保持好奇心

筆者觀察身邊讀小學(xué)的小孩,發(fā)現(xiàn),當(dāng)大人聊天時(shí),特別是談?wù)聲r(shí),小孩特別喜歡坐在旁邊聽(tīng),而且聽(tīng)的很認(rèn)真。小孩有時(shí)也會(huì)說(shuō)兩句,或是問(wèn)問(wèn)題,或是發(fā)表自己的看法。

看得出來(lái),小孩對(duì)成年人的世界,懷有極大的好奇心。實(shí)際上,不止于成年人的世界,小孩對(duì)周遭世界都有比較強(qiáng)烈的好奇心。

整體而言,成年人對(duì)周遭世界的好奇心,遠(yuǎn)不如小孩。我們互聯(lián)網(wǎng)從業(yè)者也不例外。

好奇心和交互設(shè)計(jì),有什么關(guān)系?

交互設(shè)計(jì),某種程度上,也是一種創(chuàng)作。好的創(chuàng)作,一定來(lái)自生活。這就需要我們?nèi)ビ^察生活。

觀察生活,非常重要的一點(diǎn),就是好奇心,對(duì)周遭人、事、物要有足夠的好奇心。

比如上文提到的例子,在 iPhone 上刪除應(yīng)用前,應(yīng)用圖標(biāo)會(huì)抖。這種抖是一種趣味隱喻,既可以理解成嚇的發(fā)抖,也可以理解成搖頭求生。如果對(duì)生活沒(méi)有足夠的好奇心,是很難留意到這種生活細(xì)節(jié),并把它們作為一種隱喻運(yùn)用到交互設(shè)計(jì)中的。

以上是關(guān)于好奇心,還有一種特質(zhì),也是在小孩身上表現(xiàn)突出,同時(shí)也和本文主題有關(guān),那就是:童趣。

還是上文的例子,在 B 站 App 上輸入登錄密碼時(shí),動(dòng)畫(huà)人物會(huì)捂眼睛。這個(gè)設(shè)計(jì),可能不會(huì)打動(dòng)所有用戶,但至少一部分用戶會(huì)覺(jué)得比較有趣。如果我們內(nèi)心沒(méi)有一點(diǎn)童趣,可能也會(huì)覺(jué)得,這個(gè)設(shè)計(jì),沒(méi)啥意思。

玩是人的天性。對(duì)于比較好玩的交互設(shè)計(jì),大部分人是比較容易產(chǎn)生共鳴的。實(shí)際上,據(jù)筆者觀察,我們大部分從業(yè)者是有童趣的。我們比較缺的,是好奇心。

那么,怎樣判斷自己是否擁有足夠的好奇心,其標(biāo)志是什么?

個(gè)人觀點(diǎn),有兩個(gè)標(biāo)志。第一,是對(duì)與個(gè)人利益無(wú)關(guān)的生活小事的關(guān)注,遠(yuǎn)多于對(duì)個(gè)人利益本身的關(guān)注。第二,觀察和思考,遠(yuǎn)多于評(píng)價(jià)和自大;追本和溯源,遠(yuǎn)多于偏見(jiàn)和傲慢。

為什么會(huì)提到個(gè)人利益?

因?yàn)?,通常而言,個(gè)人利益,尤其是短期利益(比如少花時(shí)間設(shè)計(jì)和修改原型),往往會(huì)和用戶體驗(yàn)存在一個(gè)此消彼長(zhǎng)的關(guān)系。

如果過(guò)于關(guān)注個(gè)人利益,不僅很難照顧到用戶體驗(yàn),甚至?xí)τ脩趔w驗(yàn)。至于給用戶帶來(lái)驚喜,就更無(wú)從談起了。

回到現(xiàn)實(shí)當(dāng)中。在時(shí)代洪流面前,好奇心的兩個(gè)標(biāo)志,顯得很難,該如何實(shí)現(xiàn)?

關(guān)鍵在于找到背后的源動(dòng)力。這個(gè)源動(dòng)力,在筆者看來(lái),有兩點(diǎn),分別是:求知若渴、淡泊寧?kù)o。


求知若渴,可以源源不斷的驅(qū)動(dòng)我們?nèi)ビ^察、去思考萬(wàn)事萬(wàn)物的規(guī)律和聯(lián)系。

淡泊寧?kù)o,正如諸葛亮在《誡子書(shū)》中所說(shuō),“非淡泊無(wú)以明志,非寧?kù)o無(wú)以致遠(yuǎn)”。人的心力和精力終歸是有限的,如果我們沉迷名利、物欲、享樂(lè),就難有興趣和精力去琢磨萬(wàn)事萬(wàn)物了。

所以,只要找回自己童年的那種求知若渴,同時(shí)修身養(yǎng)性到淡泊寧?kù)o,這份好奇心,就會(huì)回來(lái)。

2 巧妙融合

某種程度上,很多帶給我們驚喜的交互設(shè)計(jì),都是一種巧妙融合。

筆者把這種巧妙融合,初步分成了三類,分別是:簡(jiǎn)單融合、直接融合、委婉融合


簡(jiǎn)單融合,最常見(jiàn)的就是隱藏功能。把一個(gè)較為簡(jiǎn)單的操作動(dòng)作,比如長(zhǎng)按、雙擊、下拉、左滑等,和一個(gè)合適的功能,融合在一起。用電腦時(shí)我們常說(shuō)的快捷鍵,也屬于這一類。

通常而言,操作對(duì)應(yīng)什么功能,講究的是合適,并無(wú)固定章法束縛。比如在微信朋友圈,發(fā)表文字的功能可以靠長(zhǎng)按(相機(jī)圖標(biāo))喚起,設(shè)置權(quán)限的功能也可以靠長(zhǎng)按(好友頭像)喚起。所以,簡(jiǎn)單融合這塊,可供我們發(fā)揮的空間很大。

另外,簡(jiǎn)單融合最常見(jiàn)的形式——隱藏功能,既實(shí)現(xiàn)了界面的簡(jiǎn)潔,又帶來(lái)了一定驚喜。

簡(jiǎn)單融合,既簡(jiǎn)單,又實(shí)用。建議大家充分開(kāi)發(fā)這一塊。

直接融合,是指將生活中的趣味性,直接搬到軟件中,搬到交互設(shè)計(jì)中。比如微信聊天中的扔骰子、石頭剪刀布,以及漂流瓶、抽獎(jiǎng)等。

這一類融合,有點(diǎn)像商場(chǎng)里的電玩城,雖然我們不會(huì)經(jīng)常去玩,但確實(shí)比較好玩。

委婉融合,是指用明喻或隱喻的手法,將生活中微不足道的一些細(xì)節(jié),移植到交互設(shè)計(jì)中。

這種移植,有時(shí)是直白的。比如 Mac 上打開(kāi)應(yīng)用時(shí),其圖標(biāo)會(huì)在 dock 欄里有規(guī)律的彈跳,這會(huì)讓我們聯(lián)想到皮球的彈跳。

這種移植,有時(shí)是隱晦的。比如 iPhone 上刪除應(yīng)用前,其圖標(biāo)會(huì)抖。這種抖,是害怕還是求饒,任憑我們想象。

這種移植,有時(shí)是無(wú)聲的。比如在朋友圈,要想呼出隱藏的設(shè)置權(quán)限功能,只能長(zhǎng)按頭像,長(zhǎng)按名字則不行。這個(gè)設(shè)計(jì),不乏想象空間。如果不嘗試長(zhǎng)按名字,則不會(huì)發(fā)現(xiàn)這個(gè)細(xì)節(jié)。

委婉融合,有時(shí)會(huì)帶一些趣味性。更為重要的是,它能夠引發(fā)我們的思考和想象,所以是一種很出彩的融合。這種融合,也會(huì)賦予交互設(shè)計(jì),一種禪的味道。

整體而言,筆者非常推薦委婉融合。

3 追求卓越

如果目標(biāo)是小驚喜,則保持好奇心、并做到巧妙融合,基本足矣。

如果目標(biāo)是大驚喜,則需要雄心壯志,需要舍我其誰(shuí),需要追求卓越。

日常工作中,可能會(huì)有這樣的對(duì)話。“這個(gè)動(dòng)效/功能,實(shí)現(xiàn)不了”。

大驚喜里的幾個(gè)例子,比如初代 iPhone 的觸控體驗(yàn),iPhone 里的測(cè)距儀,微信的掃一掃識(shí)物。這種設(shè)計(jì),意味著要修一條最好的長(zhǎng)城,背后往往有很多技術(shù)難題要攻克,有很多臟活累活要做。

如果團(tuán)隊(duì)文化就是做出最優(yōu)秀的交互設(shè)計(jì),那么,“實(shí)現(xiàn)不了”這句話,估計(jì)就聽(tīng)不到了。取而代之的,可能是:“還在研究中”,“下個(gè)大版本能上”。

4 自然而然

提到驚喜,還有一款值得研究和學(xué)習(xí)的產(chǎn)品,那就是錘子手機(jī)的 Smartisan OS。

個(gè)人觀點(diǎn),在小驚喜方面,Smartisan OS 頗有建樹(shù)。在大驚喜方面,Smartisan OS 也進(jìn)行了一些值得學(xué)習(xí)的探索。

先說(shuō)小驚喜,比如華麗而細(xì)膩的桌面翻頁(yè)動(dòng)畫(huà),比如四指橫劃桌面可以切換桌面背景。還有一些貼心的小功能,比如靜音可以設(shè)置時(shí)間,比如方便的長(zhǎng)截屏。

(靜音可設(shè)置時(shí)間)

(長(zhǎng)截屏)

再說(shuō)大驚喜。2016 年 10 月發(fā)布的一步和大爆炸,是比較大比較系統(tǒng)的功能,在當(dāng)時(shí)也很新。錘子公司也一直有宣傳這兩個(gè)功能。所以相對(duì)而言,這兩個(gè)功能是 Smartisan OS 的大驚喜。

筆者的備用機(jī)是錘子手機(jī),身邊也有朋友在用錘子手機(jī)。以一步為例,這個(gè)功能,筆者體驗(yàn)過(guò)很多次。但平常很少用,身邊朋友的情況也類似。

(一步)

根據(jù)使用情況和主觀感受,個(gè)人覺(jué)得,一步這個(gè)大驚喜,還存在進(jìn)步空間,主要有兩個(gè)方面。

第一,宏觀層面。一步作為新生事物,好比一顆新種子。種子破土而出時(shí),是一顆嫩芽,而不是一棵大樹(shù)。新生的一步功能繁多,猶如一棵破土而出的大樹(shù),一方面有違自然規(guī)律,另一面因?yàn)楣δ芊倍?,很多用戶無(wú)法一下子看懂,看不懂可能就不想用了。

第二,微觀層面。一步這棵新大樹(shù),結(jié)了很多不同的果子,比如拖拽圖片到其他應(yīng)用、切換后臺(tái)應(yīng)用、展示最近圖片/文件等。這些果子,是用戶真正需要的嗎?這個(gè)是要存疑的。

比如拖拽圖片到朋友圈就能發(fā)朋友圈這個(gè)設(shè)計(jì)。通常而言,我們發(fā)到朋友圈的圖片都是精挑細(xì)選的,會(huì)占用一定量的時(shí)間,比如旅游或聚會(huì)結(jié)束后發(fā)的照片。一步解決的是效率問(wèn)題。發(fā)朋友圈的時(shí)候,少點(diǎn)幾下這種效率問(wèn)題,優(yōu)先級(jí)是比較靠后的,我們沒(méi)那么在乎。

還有拖拽圖片/文件這個(gè)交互動(dòng)作,大家通常在電腦上用的比較多,在手機(jī)上是沒(méi)有這個(gè)習(xí)慣的,實(shí)際上應(yīng)用場(chǎng)景也少。在手機(jī)上,大家一般只習(xí)慣拖拽應(yīng)用圖標(biāo)。

還有切換后臺(tái)應(yīng)用這塊,大家第一個(gè)想到的,一定是系統(tǒng)自帶的,已經(jīng)用慣了。而且喚起速度比一步快,點(diǎn)擊面積也比一步大。

總的來(lái)說(shuō),微觀層面上,比較缺讓大家能馬上想到一步的功能點(diǎn)。

最后,總結(jié)一下。對(duì)于領(lǐng)先時(shí)代、引領(lǐng)潮流的交互設(shè)計(jì),需要做到自然。

具體而言,就是,大驚喜是一種系統(tǒng)性的大功能,好比一棵大樹(shù)。這棵大樹(shù),最好有一個(gè)從種子到果子的生長(zhǎng)過(guò)程,這樣最自然,生命力也會(huì)最旺盛。

因?yàn)?,從破土而出的嫩芽階段,就可以通過(guò)用戶反饋和數(shù)據(jù)來(lái)檢驗(yàn),這種嫩芽,是不是真的對(duì)用戶有價(jià)值。如果價(jià)值不大或沒(méi)有價(jià)值,還可以再調(diào)整。如果長(zhǎng)成大樹(shù)結(jié)滿果子,再去調(diào)整,就很難了。


結(jié)語(yǔ)

交互設(shè)計(jì)小細(xì)節(jié),如果有一定的趣味性或人文屬性,則是小驚喜。

系統(tǒng)性工程的交互設(shè)計(jì),如果最初感覺(jué)很酷,而且能引領(lǐng)潮流、代表未來(lái),則是大驚喜。

始終保持孩童身上那種非功利的好奇心,用心觀察并思考生活中的小事;

將生活小事和交互設(shè)計(jì)巧妙融合起來(lái);

以上兩點(diǎn),可以幫我們做出小驚喜類的交互設(shè)計(jì)。

追求卓越,獨(dú)立思考,做最酷最好的交互設(shè)計(jì);

酷是結(jié)果也好,是目標(biāo)也好,都不是最重要的。最重要的是,避免刻意和心切。醞釀大驚喜,猶如培養(yǎng)一個(gè)新生的孩子,需要投入極大耐心和精力,需要讓孩子自然成長(zhǎng)。沒(méi)有家長(zhǎng)會(huì)教半歲的孩子唱歌、把 3 歲的孩子送到高中念書(shū)。

再加上以上兩點(diǎn),可以幫我們做出大驚喜類的交互設(shè)計(jì)。

最后,用愛(ài)因斯坦的一句話來(lái)共勉。

想象力比知識(shí)更重要。


“抗擊肺炎”數(shù)據(jù)產(chǎn)品體驗(yàn)分析報(bào)告

鶴鶴

站在設(shè)計(jì)師的角度去分析這場(chǎng)戰(zhàn)疫下各大互聯(lián)網(wǎng)公司快速響應(yīng)產(chǎn)出的數(shù)據(jù)產(chǎn)品“抗擊肺炎”專題。

轉(zhuǎn)自:站酷-Yuki_yee

彈性布局(Flex)+骰子旋轉(zhuǎn)實(shí)例^v^

seo達(dá)人

彈性布局(Flex)

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,對(duì)于網(wǎng)頁(yè)布局來(lái)說(shuō)要求越來(lái)越高,而傳統(tǒng)的布局方案對(duì)于實(shí)現(xiàn)特殊布局非常不方便,比如垂直居中。

2009年,W3C 提出了一種新的方案----Flex 布局,可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前,它已經(jīng)得到了所有瀏覽器的支持,這意味著,現(xiàn)在就能很安全地使用這項(xiàng)功能。

下面是一些彈性布局的基本語(yǔ)法:

兩部分:


  1. 語(yǔ)法是添加到父容器上的

            display : flex;(彈性盒子的標(biāo)志哦!!?。?br />
            flex-direction: row; 布局的排列方向 (主軸排列方向)

                 row 默認(rèn)值,顯示為行。方向?yàn)楫?dāng)前文檔水平流方向,默認(rèn)情況下是從左往右。

                 row-reverse  顯示為行。但方向和row屬性值是反的

                 column  顯示為列

                 column-reverse 顯示為列。但方向和column屬性值是反的

            flex-wrap : nowrap; 是否進(jìn)行換行處理。

                 nowrap; 默認(rèn)值,不換行處理

                 wrap; 換行處理

                 wrap-reverse; 反向換行

            flex-flow : flex-direction flex-wrap 復(fù)合寫(xiě)法 (是有順序的)。

            justify-content ; 屬性決定了主軸方向上子項(xiàng)的對(duì)齊和分布方式。  

                flex-start : 子項(xiàng)都去起始位置對(duì)齊。

                flex-end : 子項(xiàng)都去結(jié)束位置對(duì)齊。

                center : 子項(xiàng)都去中心位置對(duì)齊。

                space-between : 表現(xiàn)為兩端對(duì)齊。多余的空白間距在元素中間區(qū)域分配,兩邊沒(méi)寬。 

                space-around : 邊緣兩側(cè)的空白只有中間空白寬度一半即每個(gè)塊都有左右間距。

                space-evenly :每個(gè)flex子項(xiàng)兩側(cè)空白間距完全相等。

            align-items : 每一行中的子元素上下對(duì)齊方式。

                stretch;默認(rèn)值,flex子項(xiàng)拉伸

                flex-start;容器頂部對(duì)齊

                center;容器居中對(duì)齊

                flex-end;容器底部對(duì)齊

            align-content : 跟justify-content相反的操作。側(cè)軸的對(duì)齊方式。(最少需要兩行才能看出效果,因?yàn)樗嵌嘈械囊粋€(gè)上下對(duì)齊方式)

                默認(rèn):多行下,有幾行就會(huì)把容器劃分為幾部分,默認(rèn)就是stretch拉伸的。

                值跟justify-content取值是相同的。


  2. 語(yǔ)法是添加到子容器上的?

            order : 排序(值越大越后)

                0:默認(rèn)值      eg:1234

                1:放在后面    eg:1342

                -2:放在前面   eg:2134

            flex-grow : 擴(kuò)展 ( 想看到擴(kuò)展的效果,必須有空隙 )

                0 : 默認(rèn)值 , 不去擴(kuò)展

                0.5:占空隙的一半

                1 : 去擴(kuò)展 , 會(huì)把空白區(qū)域全部沾滿

             ( 注:子元素會(huì)按照設(shè)置的比例值來(lái)分配空隙,如果比例值總和小于1,那么會(huì)有空隙,如果比例值總和大于等于1,那么就沒(méi)有空隙。)

            flex-shrink : 收縮

                正常默認(rèn)值是1

                0表示不收縮,.5收縮小一些,2收縮大一些。(大小是跟正??s放1進(jìn)行比較的)

            flex-basis : 跟flex-shrink/flex-grow很像。

                flex-shrink/flex-grow是設(shè)置一個(gè)比例值,flex-basis是設(shè)置一個(gè)具體值。

            flex : 一種復(fù)合寫(xiě)法

                flex-grow  flex-shrink  flex-basis

                flex:1;

                    flex : 1 1 0    

                flex:0;

                    flex : 0 1 0

            algin-self: 跟align-items操作很像,區(qū)別就是只是針對(duì)某一個(gè)子項(xiàng)。

                



    注:默認(rèn)情況下,在彈性盒子中的子元素的左右排列的。

    注:

        水平是主軸的時(shí)候:默認(rèn)情況下,當(dāng)寬高不寫(xiě)的時(shí)候,寬度由內(nèi)容決定,高度由父容器決定。

        垂直是主軸的時(shí)候:默認(rèn)情況下,當(dāng)寬高不寫(xiě)的時(shí)候,寬度由父容器決定,高度由內(nèi)容決定。



    注:當(dāng)子項(xiàng)的總寬度大于父容器的時(shí)候,會(huì)自動(dòng)收縮的(彈性的優(yōu)先級(jí)是大于自身固定大小的)

    注:當(dāng)子項(xiàng)的內(nèi)容已經(jīng)達(dá)到了父容器最小寬高的時(shí)候,就會(huì)出現(xiàn)溢出的現(xiàn)象。



    注:彈性布局中用的頻率比較多的語(yǔ)法:

        display : flex;

        flex-direction;

        justify-content;

        align-items;

        flex;



    注:彈性布局的優(yōu)勢(shì)是做一維布局,網(wǎng)格布局的優(yōu)勢(shì)是做二維布局。



    下面是彈性布局骰子案例代碼:



    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Document</title>

        <style>

            *{margin: 0;padding: 0;}

            ul{list-style: none;}

            a{text-decoration: none;}

            img{display: block;}



            .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}

            .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}



            .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}

            .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}

            .box2 div:nth-of-type(1){align-self: flex-start;}

            .box2 div:nth-of-type(2){align-self: flex-end;}



            .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}

            .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}

            .box3 div:nth-of-type(1){align-self: flex-start;}

            .box3 div:nth-of-type(3){align-self: flex-end;}



            .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}

            .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}

            .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}



            .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}

            .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}

            .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}



            .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}

            .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}

            .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}



            #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; 

            perspective: 500px;perspective-origin: right top;}

            #box .main{position: relative;width: 150px;height: 150px;margin: 125px;

            transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}

            #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;

            width: 150px;height: 150px;}

            #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;

            width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}

            #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;

            width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}

            #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;

            width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}

            #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;

            width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}

            #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;

            width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}



            #box:hover .main{transform:rotateY(360deg);}

        </style>

    </head>

    <body>

        <div id="box">

            <div class="main">

                <div class="box1">

                    <div></div>

                </div>

                <div class="box2">

                    <div></div>

                    <div></div>

                </div>

                <div class="box3">

                    <div></div>

                    <div></div>

                    <div></div>

                </div>

                <div class="box4">

                    <div>

                        <li></li>

                        <li></li>

                    </div>

                    <div>

                        <li></li>

                        <li></li>

                    </div>

                </div>

                <div class="box5">

                    <div>

                        <li></li>

                        <li></li>

                    </div>

                    <div>

                        <li></li>

                    </div>

                    <div>

                        <li></li>

                        <li></li>

                    </div>

                </div>

                <div class="box6">

                    <div>

                        <li></li>

                        <li></li>

                    </div>

                    <div>

                        <li></li>

                        <li></li>

                    </div>

                    <div>

                        <li></li>

                        <li></li>

                    </div>

                </div>

            </div>

        </div>

    </body>

    </html>




日歷

鏈接

個(gè)人資料

存檔

主站蜘蛛池模板: 大屁股大乳丰满人妻 | 国产伦精品一区二区三区四区视频_ | 国产一区精品在线观看 | 拔插拔插海外华人永久免费 | 91av在线免费视频 | 看黄网站在线 | 干日本少妇 | 玛雅精品福利视频在线导航 | 狠狠v欧美ⅴ日韩v亚洲v大胸 | 偷拍男女做爰视频免费 | 国产性一乱一性一伧一色 | 日本欧美亚洲 | 狠狠色狠狠色综合日日92 | 狂野欧美性猛xxxx乱大交 | 日韩精品91 | 久久黄色精品视频 | 久久久网页 | 国产一级特黄aaa大片 | 日本免费一级片 | 亚洲天堂欧美在线 | 美女黄免费 | 国产伦精品一区二区三区视频网站 | 亚洲免费av观看 | 超碰中文字幕在线 | 成人在线观看a | 国产理论一区二区三区 | 欧美无砖专区免费 | av午夜久久蜜桃传媒软件 | 国产天天操| 日韩一级免费毛片 | 8mav精品成人 | 亚洲浮力影院久久久久久 | 在线观看的网站 | 一区二区三区久久 | 黑丝美女一区二区 | 国产午夜精品无码 | 久久久久久97免费精品一级小说 | 综合久久影院 | 久久国产精99精产国高潮 | 天天玩天天干 | 久久99精品久久久久久久青青日本 | 337p日本欧洲亚洲大胆鲁鲁 | 亚洲欧美少妇 | 久草福利资源在线 | 欧美另类天堂 | 亚洲永久精品国产 | 欧美一级片在线视频 | 日韩人妻无码精品—专区 | 国产精品日韩精品欧美精品 | 亚洲一区二区福利视频 | 久久免费视频观看 | 性色做爰片在线观看ww | 国产精品久久久久久久妇女 | 哭悲在线观看免费高清恐怖片段 | 久久婷婷五月综合尤物色国产 | 在线播放av片 | 99色在线观看 | 91九色视频在线观看 | 亚洲一区二区三区偷拍女厕 | 亚洲精品一区二区三区香蕉 | 男生女生羞羞网站 | 国产大屁股喷水视频在线观看 | 日韩最新中文字幕 | 欧美va天堂va视频va在线 | 无码日韩精品一区二区免费暖暖 | 精品国产乱码久久久久久免费 | 特级西西444www大精品视频免费看 | 1000部夫妻午夜免费 | 91爱啪啪 | 欧美成人国产精品高潮 | 亚洲一区二区三区乱码aⅴ蜜桃女 | 欧美激情999 | 全黄激性性视频 | 国产精品久久久久9999小说 | 国产偷亚洲偷欧美偷精品 | 亚洲精选一区二区三区 | 欧美xxx性 | 国产男男同志互慰gvxxx | 一本色道久久综合狠狠躁 | 午夜av在线免费观看 | 国产精品高潮呻吟久久久 | 国产又黄又硬又湿又黄的播出时间 | 日本在线视频www鲁啊鲁 | 视频一区国产精品 | 自拍偷拍视频网 | 国产主播啪啪 | 窝窝视频在线 | 日日躁夜夜躁xxxxaaaa | 亚洲精品美女视频 | 亚洲国产精品久久精品怡红院 | 亚洲激情自拍偷拍 | 在线免费一区 | 五月天婷婷激情视频 | 妖精视频一区二区 | 91色国产| 软萌小仙自慰喷白浆 | yy111111少妇嫩草影院 | 在线看三级 | 国产女主播在线观看 | 狠狠干婷婷 | 特大黑人巨交吊性xx | 99视频久| 国内毛片毛片毛片 | 99自拍偷拍视频 | 日本不卡视频在线 | 在线看中文字幕 | 日韩av一区在线 | 99久久精品国产免费看不卡 | 欧美日韩在线免费观看 | 日本国产一区二区三区 | 双性人hdsexvideos | 国产精品亚洲一区二区在线观看 | 影音先锋久久久久av综合网成人 | 毛片aaaaa| 日韩蜜桃视频 | 少妇放荡的呻吟干柴烈火动漫 | 啪啪69xxⅹ偷拍 | 永久免费在线视频 | 亚洲一区二区三区四区五区乱码 | 国产精品美女一区二区 | 中文字幕丰满伦孑 | 国产一区2区3区 | av一二三四区 | 欧洲mv日韩mv国产 | 成人3d动漫一区二区三区 | 色婷婷综合久色aⅴ五区最新 | 风流少妇按摩来高潮 | 羞羞的网站在线观看 | 在线观看免费的av | 草视频在线 | 欧美午夜一区二区三区 | 少妇在线| 经典三级久久 | gv天堂gv无码男同在线观看 | 99久热re在线精品99 6热视频 | 国产在线看黄 | 久久国产精品久久精品国产 | 精品视频九九 | 11月流出美女撒尿偷拍在线播放 | 国产精品成人在线 | 亚洲综合成人亚洲 | 亚洲羞羞 | 中文字幕精品视频在线观看 | 扒开双腿疯狂进出爽爽爽视频 | 国产又色又刺激高潮视频 | 九九久久精品国产 | 亚洲精品av一二三区无码 | 国产女人40精品一区毛片视频 | 麻豆三级视频 | 免费黄色的网站 | 福利免费观看 | 少妇三级| 99re6在线视频精品免费 | 巨胸狂喷奶水视频www网站免费 | 国产精品久久久久777777 | 欧美日韩在线视频一区 | 精品国产影院 | 国产一级爱 | 欧美性xxxx在线播放 | 极品销魂美女特嫩bbb片 | 国产无遮挡裸体免费视频 | 国产精品蜜 | 无码国产精品一区二区vr老人 | 免费在线小视频 | 狠狠躁夜夜躁人人爽蜜桃 | 伊人伊成久久人综合网站 | 亚洲国产精品久久艾草 | 国产精品久久久爽爽爽麻豆色哟哟 | 日本伊人精品一区二区三区 | 欧美性猛交xxxx免费看 | 极品少妇的粉嫩小泬视频 | 成人羞羞视频免费看看 | 欧美xxxxx少妇| 国内自拍xxxx18 | 看全色黄大色黄女片18 | 疯狂做爰高潮videossex | 女女百合av大片一区二区三区九县 | 成人黄色片免费 | 九九国产精品无码免费视频 | 日韩精品免费一区二区三区 | 四个黑人玩一个少妇四p | 国产高潮刺激叫喊视频 | 精品一区视频 | 久久久久久国产精品亚洲78 | 天天干天天操天天爱 | 国产一区二区日本 | 日韩高清一级 | 在线免费观看小视频 | 国产精品久久久久久影院8一贰佰 | 国产成人久久久精品免费澳门 | 老女人伦理中文字幕 | 亚洲国产精品久久人人爱 | 91免费高清 | 91丨九色丨蝌蚪丨老版 | av无码精品一区二区三区宅噜噜 | 日韩激情网站 | 免费av在线网址 | 欧美日韩免费视频 | 天操夜夜操 | 久久亚洲精品成人无码 | 国产男女爽爽爽免费视频 | 夜夜高潮夜夜爽夜夜爱爱 | 久久一区二区三区四区 | 男人天堂社区 | 97精品人妻一区二区三区香蕉 | 79日本xxxxxxxxx18| 亚洲涩涩视频 | 欧美激情 国产精品 | 成人动漫综合网 | 99国内精品久久久久久久 | 91粉色视频 | 雨宫琴音一区二区三区 | 亚洲欧洲免费无码 | 日韩女优在线播放 | 亚洲精品午睡沙发系列 | 国产高清一级片 | 一区精品视频 | 免费夜色污私人影院在线观看 | 国产综合久久久久久鬼色 | 中文字幕视频一区二区 | 久久亚洲中文字幕不卡一二区 | av黄色免费 | 狠狠躁日日躁夜夜躁2022麻豆 | 99热最新在线 | 大桥未久亚洲精品久久久强制中出 | 亚洲婷婷网 | 97无码免费人妻超级碰碰夜夜 | 亚洲欧美日韩一区二区 | 中文字幕成人在线视频 | 韩国av网| 亚洲一区精品在线观看 | 国产精品视频在线观看免费 | 久久久噜噜噜www成人网 | 国产国产精品人在线视 | 国产精品久久久久无码av | 天天舔夜夜操 | 国产在线精品一区二区三区不卡 | 国产精品自拍区 | 国产第二页 | 亚洲美女福利视频 | 免费a视频| 欧美色爱综合网 | 91精品在线国产 | 亚洲另类伦春色综合图片 | 一边摸一边做爽的视频17国产 | 免费观看理伦片在线播放 | 国产va | 成人欧美日韩一区二区三区 | 国产91亚洲精品 | 两个人看的www免费视频中文 | 国产一区二区视频在线 | 国产清纯白嫩初高生在线播放性色 | 这里只有精品国产 | 亚瑟av亚洲精品一区二区 | 乱色精品无码一区二区国产盗 | 狠狠色噜噜狠狠狠888奇米 | 色播日韩 | 日本中文字幕在线大 | 大香伊人中文字幕精品 | 精品免费久久久 | 成年片黄色日本大片网站视频 | 九一视频污| 久久99精品久久久久久琪琪 | 91精品一久久香蕉国产线观看新通道 | 欧美人与禽猛交乱配 | www男人天堂 | 精品少妇一区二区三区免费观看 | 亚洲天天在线 | 日日噜噜夜夜狠狠va视频v | 亚洲欧美日本在线观看 | 国产精品久久久久久久妇女 | 丰满少妇xbxb毛片日本 | 欧美精品久久久久久久久 | 欧美激情一区二区 | 老司机午夜影院 | 能看av的网址 | 夜间福利在线观看 | 日本精品人妻无码77777 | 亚洲偷怕 | 国产999精品久久久久久绿帽 | 最近的中文字幕在线看视频 | 黄色在线观看国产 | 亚洲欧美综合一区二区三区 | 免费国精产品wnw2544 | 天美麻花果冻视频大全英文版 | 国产黄色成人 | 影音先锋中文字幕资源 | 日韩精品人成在线播放 | 中文字幕第4页 | 祥仔av免费一区二区三区四区 | 名人明星三级videos | 国产a三级 | 湿女导航福利av导航 | 国产精品久久久久久久蜜臀 | 狠狠色噜噜狠狠狠狠av | 国产天天操 | 搡老熟女老女人一区二区 | 97人人做人人添人人爱 | 国产第一页在线观看 | 99久久免费精品 | 又黄又爽又色成人免费体验 | 看毛片视频 | 亚洲成av人片一区二区三区 | 成人国内精品久久久久影院成人国产9 | 国产一区二区不卡在线 | 中文日韩亚洲欧美字幕 | 成av人片一区二区三区久久 | 99国产精品自在自在久久 | 亚洲精品av中文字幕在线在线 | 九九精品热 | 亚洲精品久久网白云av | 国产jjizz女人多水 | 国产情侣真实露脸在线 | 欧美性生活免费视频 | 国产亚洲色婷婷久久99精品 | 寂寞少妇让水电工爽hd | 91精品国自产拍天天拍 | 亚洲精品v日韩精品 | 国产又爽又黄视频 | av在线不卡免费 | 日本十八禁视频无遮挡 | 欧美一区二区三区在线观看 | 免费看片啪啪tv | 国产毛片视频 | 亚洲干| 国内精品写真在线观看 | 经典三级在线视频 | 欧美交换乱淫粗大 | 日韩精品中文字幕在线观看 | 中文字幕在线亚洲 | 四虎网址在线 | 国产精品久久久久久久9999 | 99视频免费| 夜夜嗨av久久av| 91亚洲日本aⅴ精品一区二区 | 欧美日韩久久婷婷 | 91福利专区 | 国产情侣草莓视频在线 | 丰满的少妇xxxxx人伦理 | 88国产精品视频一区二区三区 | 97国产免费 | 天堂√在线中文资源网 | 国内精品久久久久久久久电影网 | 日本少妇免费视频一三区 | 国产一级αⅴ片免费看 | 日本熟妇人妻xxxxx-欢迎您 | 欧美午夜精品久久久久久孕妇 | 福利片一区二区 | 欧美成人xxxxx | 午夜无码免费福利视频网址 | 在线天堂中文在线资源网 | 玩弄放荡人妻一区二区三区 | 欧美性jizz18性欧美 | 国产成人精品一区二区三区网站观看 | 黑人巨大无码中文字幕无码 | 日本激情小视频 | 日本十八禁视频无遮挡 | 日韩不卡视频在线观看 | 亚洲国产成人久久综合电影 | 女人两腿打开让男人添野外视频 | 一二三四区无产乱码1000集 | 色天天综合久久久久综合片 | 无码无遮挡又大又爽又黄的视频 | 伊人色在线视频 | 国产精品美女www爽爽爽 | 伊人888| 天天干天天色天天 | 91精品丝袜 | 人人妻人人妻人人人人妻 | 一本a道新久花碟 | 国产永久在线 | 精品女同一区二区三区 | 超污网站在线观看 | 99视频精品在线 | 国产一区二区三区高清在线观看 | 一本一本久久a久久精品综合不卡 | 日韩高清不卡一区 | 91福利视频网站 | 性生活毛片 | 亚洲专区免费 | 国产午夜精品一区二区 | 午夜影院日本 | 天干夜天干天天天爽视频 | 欧美绝顶高潮抽搐喷水合集 | 少妇被又大又粗又爽毛片久久黑人 | 国产边摸边吃奶边做爽视频 | 亚洲欧美国产精品久久久久久久 | 中文成人在线 | 亚洲乱码一区二区三区三上悠亚 | 亚洲国产欧美在线人成 | 欧美 日韩 国产精品 | 亚洲码中文 | 中文字幕亚洲乱码熟女在线 | 成人三级毛片 | 黄色免费一级 | 亚洲女人被黑人巨大进入 | 综合av| 中文字幕人妻丝袜乱一区三区 | 狂猛欧美激情性xxxx大豆行情 | 亚洲 国产 另类 精品 专区 | 国产精品视频免费播放 | 欧美成人ⅴideosxxxxx | 在线的av| 国产精品久久久18成人 | 色综合久久久久综合体桃花网 | 国产在热线精品av | 97超碰免费观看 | 欧美美女一区二区 | 精品资源成人 | 亚洲第一女人av | 亚洲人成影院在线观看 | 一边摸一边做爽的视频17国产 | 欧美射图| 无码精品视频一区二区三区 | 永久在线视频 | 黄色免费在线网站 | 国产人免费人成免费视频喷水 | jzjzz成人免费视频 | 少妇淫交裸体视频 | 草草视频网站 | 999精品视频在线 | 亚洲 欧美 另类人妖 | 色婷婷久久综合中文久久一本 | 高清免费视频日本 | 国产精品偷伦视频免费观看了 | 亚洲a视频在线观看 | 一本大道东京热无码 | 亚洲视频欧洲视频 | 白嫩嫩翘臀美女在线视频 | 极品尤物在线观看 | 成人涩涩日本国产一区 | 国产精品久久久久久网站 | 最新日韩av在线 | 色视频综合 | 亚洲精品国产第一综合99久久 | 欧美一区二区三区激情 | 国产美女精品aⅴ在线播放 国产美女精品人人做人人爽 | 无码精品人妻一区二区三区漫画 | 大胸美女拍拍18在线观看 | 综合久久婷婷 | 少妇做爰水狂喷 | 国产精品乱码一区二区三区 | 成人动漫视频在线观看 | 色噜噜狠狠狠综合曰曰曰 | 亚洲一区二区三区含羞草 | 国产成人无码区免费内射一片色欲 | 在线播放无码高潮的视频 | 久久久久国色av免费看图片 | 伊人第四色 | 午夜诱惑痒痒网 | 亚洲精品国产精品乱码不卡√香蕉 | 白嫩大乳丰满美女白嫩白嫩 | 麻豆私人影院 | 日韩精品免费在线视频 | 中文字幕一区二区三区精彩视频 | 精品国产一区二区国模嫣然 | 国产在线国偷精品产拍 | 狠狠做深爱婷婷久久综合一区 | 在线免费成人网 | 91精品国产综合久久久密臀九色 | 性色在线| 性生交大全免费看 | 日本少妇喂奶视频 | 成人91免费版 | 国产精品毛片久久久 | 成人网在线看 | 久久精品4 | 国内自拍xxxx18 | 久久精品女人天堂av免费观看 | 精区一品二品星空传媒 | 特大黑人娇小亚洲女 | 午夜成人1000部免费视频 | 国产乱码精品一区二区蜜臀 | 日韩欧美久久 | 久久精品国产精品亚洲艾草网 | 国产成人精品日本亚洲专区61 | 91五月色国产在线观看 | 久久亚洲国产精品日日av夜夜 | 欧美激情videos hd | 日本伦理一区二区三区 | 天堂久久精品忘忧草 | 性荡视频播放在线视频 | 最新国产在线视频 | 黄色国产大片 | 国产一区二区福利 | 日本精品视频一区 | 波多野结衣在线播放视频 | 国产一线二线在线观看 | 日韩视频免费看 | 狠狠躁夜夜躁人人爽视频 | 亚洲日韩av无码一区二区三区 | 午夜福利理论片在线观看 | 亚洲国产av一区二区三区 | 成人免费无码大片a毛片软件 | 国产日本视频 | 欧美第一页 | 国产在线视频一区 | 婷婷爱五月天 | 黑人糟蹋人妻hd中文字幕 | 国产欧美日韩精品丝袜高跟鞋 | 亚洲高清乱码午夜电影网 | 成人性生生活a | 激情综合五月婷婷 | 99久re热视频这里只有精品6 | 亚洲欧美婷婷六月色综合 | 全部孕妇毛片丰满孕妇孕交 | 中文字幕乱视频 | 国内丰满少妇猛烈精品播 | 伊人网在线免费观看 | 久久久免费观看 | 97免费公开视频 | 日韩 在线 中文 制服一区 | 亚洲欧美一区二区三区四区 | 欧美黄色片免费看 | 露脸内射熟女--69xx | 友田真希中文字幕在线视频中 | 黑人精品一区二区 | a级片视频网站 | 欧美疯狂做受xxxx高潮 | 尤物97国产精品久久精品国产 | 精品厕所偷拍各类美女tp嘘嘘 | 亚洲www啪成人一区二区麻豆 | 亚洲中文无码av永久不收费 | av久久天堂三区 | 中文字幕第十一页 | 国产成人精品三级麻豆 | 成人在线污 | 一区自拍| 91 在线观看| 国产看真人毛片爱做a片 | 乱子伦一区二区 | 日本肥老熟hd| 欧美日韩在线观看一区 | 中国性偷拍xxxⅹ | 日韩在线观看视频一区二区三区 | 亚洲日韩乱码中文字幕 | 五月深爱网 | 久久精品国产99久久6动漫亮点 | 综合激情亚洲 | 色狠狠av老熟女 | 激情综合色五月六月婷婷 | 女同一区二区免费aⅴ | 蜜桃av网站 | 毛片毛片毛片毛片 | 日韩在线观看精品 | 91超薄肉色丝袜交足高跟凉鞋 | 两性午夜刺激性视频 | 加勒比色综合久久久久久久久 | 夜夜天天操 | 国产麻豆剧果冻传媒星空视频 | 国产精品福利视频主播真会玩 | 怡红院av亚洲一区二区三区h | 永久免费视频 国产 | 97精品视频 | 久久免费精品国自产拍网站 | 影音先锋男人资源网站 | 日韩青青草| 国产巨乳在线观看 | 久久久久国产精品免费免费搜索 | 欧美高清videosex极品 | av中文字幕潮喷人妻系列 | 91国模| 午夜性刺激免费看视频 | 他也色在线 | 国产精品一二三四五 | 国产一区二区三区小说 | 日本激情网 | h肉动漫无码无修6080动漫网 | 欧美激情一区二区三区p站 欧美激情一区二区三区蜜桃视频 | 成人妖精视频yjsp地址 | 7777色鬼xxxⅹ欧美色妇 | 公的~yin之手筱田优中文字幕 | gogogo日本免费观看电视动漫 | 亚洲乱码av中文一区二区 | 亚洲午夜高清 | 男女无套免费视频网站 | 久久久免费精品视频 | 国产传媒毛片精品视频第一次 | 人人干人人模 | 国产精品伊人久久 | 偷窥自拍亚洲色图 | 久久亚洲精品国产精品紫薇 | a级毛片在线看日本 | 欧美一区视频在线 | 精品国产亚洲第一区二区三区 | 国产精品久久久一区 | 色综合天天综合网天天狠天天 | 天天干夜操 | 日日噜噜夜夜狠狠久久丁香五月 | 国产美女黄网站 | www17c亚洲蜜桃 | 成人性生交免费大片 | 夜夜导航 | 国产又粗又长又黄视频 | 日韩精品在线看 | 九九久久国产精品 | 在线免费观看a视频 | 人人妻人人爽人人做夜欢视频 | 日韩av片无码一区二区不卡电影 | 国产成人a∨激情视频厨房 国产精品无码一区二区三级 | 一级特黄特色的免费大片视频 | 夜夜爽夜夜叫夜夜高潮漏水 | 国产sm在线 | 国产亚洲精久久久久久蜜臀 | 性做爰过程免费视频美女按店 | 色狠狠av | 3bmm在线观看视频免费 | 羞羞午夜福利免费视频 | 波多野结衣久久精品 | 国产无精乱码一区二区三区 | 色综合天天网 | 古装做爰无遮挡三级聊斋艳谭 | 欧美区在线观看 | 亚洲色在线无码国产精品不卡 | 精品国产免费一区二区三区香蕉 |