整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
核類型 寫法
Trident(IE) -ms-columns IE瀏覽器使用的內(nèi)核
Webkit(Chrome/Safari) -webkit-columns 蘋果公司自己的內(nèi)核，也就是蘋果的Safari瀏覽器使用的內(nèi)核;
google的chrome也使用webkit作為內(nèi)核; 360安全瀏覽器也是WebKit內(nèi)核(Chrome)
Gecko(Firefox) -moz-columns 目前最主流的Gecko內(nèi)核瀏覽器是Mozilla Firefox
Presto(Opera) -o-columns 目前Opera采用的內(nèi)核
在Dreamweaver軟件代碼提示中內(nèi)置了以上四種私有屬性前綴
Konqueror(linux) -khtml-columns KDE開發(fā)的內(nèi)核,常見的KHTML內(nèi)核的瀏覽器：Konqueror
W3C columns
是先寫私有的CSS3屬性, 再寫標(biāo)準(zhǔn)的CSS3屬性。
-webkit-transform:rotate(-3deg); /*為Chrome/Safari*/
-moz-transform:rotate(-3deg); /*為Firefox*/
-ms-transform:rotate(-3deg); /*為IE*/
-o-transform:rotate(-3deg); /*為Opera*/
transform:rotate(-3deg); /*為nothing*/去掉CSS3前綴 rotate:旋轉(zhuǎn)
360安全瀏覽器是基于WebKit內(nèi)核(Chrome)的瀏覽器
360的極速瀏覽器基于IE內(nèi)核和webkit內(nèi)核(Chrome)的雙核瀏覽器
瀏覽器內(nèi)核查詢網(wǎng)站:http://ie.icoa.cn/
私有屬性可用于:
border-radius(圓角矩形)
div{
width:200px;height:120px;
border:2px solid #000000;
background-color:#FFFF00;
border-radius:20px; /* CSS3中的圓角矩形 */
-moz-border-radius:20px; /* mozilla中的圓角矩形 */
-webkit-border-radius:20px; /* Safari 3中的圓角矩形 */
}opacity(透明度)
.opacity{
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity:0.5; /* 支持opacity的瀏覽器*/
}簡單解釋，IE使用私有屬性filter:alpha(opacity=50)(也可寫成冒號(hào)filter:alpha(opacity:50))，Moz Family使用私有屬性-moz-opacity:0.5，
而標(biāo)準(zhǔn)的屬性是opacity, 后面的數(shù)值是透明度，使用小數(shù)表示的數(shù)值
以上直接可以簡化:
.opacity{
filter:alpha(opacity:30); opacity:0.3; /*兼容所有的瀏覽器 */
}以上實(shí)例可見:javascript|運(yùn)動(dòng)基礎(chǔ)及實(shí)例|淡入淡出
漸進(jìn)增強(qiáng)(先保證低版本瀏覽器)
.transition{
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}優(yōu)雅降級(jí)(先保證高版本瀏覽器)
.transition{
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}如何決定:
根據(jù)你的用戶所使用的客戶端的版本來做決定?
在在各類產(chǎn)品中，圓角的設(shè)計(jì)越來越多，而本文是關(guān)于卡片圓角的思考和應(yīng)用，一起來看看~
我們最熟悉的蘋果公司在使用圓角卡片最早卡已追溯到1981年，當(dāng)時(shí) Apple 的天才程序員 Bill Atkinson 正向團(tuán)隊(duì)展示他是如何用一種聰明的方法——可以在僅有 68000 處理器的 Lisa 和 Macintosh 機(jī)器上快速畫出圓和橢圓。
Steve Jobs 看了之后有另外的想法，他說：“圓和橢圓都不錯(cuò)，但是能畫出帶圓角的四邊形嗎？我們現(xiàn)在也能畫出嗎？”
Bill Atkinson 回答說很難做到，而且他認(rèn)為并不真需要圓角四邊形，Steve Jobs 就立刻強(qiáng)烈回應(yīng)了：“到處都是圓角四邊形！看看這個(gè)房間周圍就知道了！”并且還帶著 Bill Atkinson 出去轉(zhuǎn)看可以碰到多少圓角四邊形，最后 Bill Atkinson 被說服，第二天下午就拿出了滿意的結(jié)果。
目錄：
首先我們縱觀2018年當(dāng)下各大廠商發(fā)布的手機(jī)，在工業(yè)設(shè)計(jì)上來看基本都采用了更加柔和的圓角設(shè)計(jì)。例如iPhone、SAMSUNG、小米、VIVO等等。
在屏幕設(shè)計(jì)上同樣選擇了圓角設(shè)計(jì)，在細(xì)節(jié)之處也保持了高度的統(tǒng)一，例如：在攝像頭位置的連接處同樣采用了圓角弧度作為過渡。
我們以iPhone為例：
可見圓角設(shè)計(jì)的應(yīng)用已經(jīng)成為硬件工業(yè)設(shè)計(jì)的中的非常重要的設(shè)計(jì)語言。
不止是手機(jī)的工業(yè)硬件設(shè)計(jì)上采用了大量的圓角，各大廠商的手機(jī)系統(tǒng) UI 也大量采用了圓角設(shè)計(jì)。大家最熟悉的可能就是 iOS 系統(tǒng)里的圓角設(shè)計(jì)，自2007年隨著 iOS 7 的發(fā)布，Apple 將 iOS 上的標(biāo)志性的圓角標(biāo)輪廓做了更新，將工業(yè)設(shè)計(jì)中的曲線連續(xù)概念應(yīng)用到了視覺設(shè)計(jì)上，一直延續(xù)至今，在 iOS 12 全面應(yīng)用。
除了 iOS ，Android 的各大廠商也紛紛使用圓角設(shè)計(jì)，例如 SAMSUNG 的 ONE UI，都是采用了圓角的設(shè)計(jì)語言。
以及國內(nèi)的 MIUI 10 的系統(tǒng)界面設(shè)計(jì)同樣使用了圓角作為設(shè)計(jì)語言。
相對(duì)于其他圖形，人類的眼睛更容易識(shí)別圓角矩形而不是直角矩形，因?yàn)槿嗽谘劬Φ纳順?gòu)造上中央凹(fovea centralis，是視網(wǎng)膜中視覺最敏銳的區(qū)域)在處理圓形時(shí)最快，而處理矩形邊緣則需要涉及大腦中更多的“神經(jīng)影像工具”[1]。所以，人眼處理圓角更容易，因?yàn)樗鼈兛雌饋肀绕胀ň匦胃咏趫A。
例如 App Store today頁面，通過圓角的卡片設(shè)計(jì)用戶可以快速識(shí)別內(nèi)容，但如果換成直角的話則會(huì)提升它的識(shí)別成本。
在巴羅(Barrow)神經(jīng)學(xué)研究所完成的關(guān)于“角(corners)”的科學(xué)研究發(fā)現(xiàn)，“角的突顯性感知與角的度數(shù)的線性變化，銳角比鈍角產(chǎn)生更強(qiáng)的虛幻的突顯性”[2]。換句話說，角越銳利，看起來就越顯而易見。而角出現(xiàn)的越凸顯，就越多對(duì)視覺過程產(chǎn)生影響。
例如西瓜視頻改版中，將“銳角”的播放按鈕改成了“圓角”的播放按鈕，較少了銳角對(duì)用戶的視覺影響。
相對(duì)于銳角，圓角顯得更加柔和，具有安全感。尖銳的圖形或者物品更容易應(yīng)用在警惕性的場景里，會(huì)給人予以警示或者傷害。例如危險(xiǎn)的標(biāo)示：
圓角自身的圖形屬性則更加柔和、舒適，給人一種安全感和親密。例如在設(shè)計(jì)玩具的時(shí)候會(huì)采用大量的圓角設(shè)計(jì)，來讓家長對(duì)其放下戒備心，讓家長覺得這是安全的，可以給孩子玩。
試想哪個(gè)家長會(huì)給孩子一把刀子玩？
現(xiàn)在的少兒用戶群體增長也帶來了不可避免的趨勢，針對(duì)少兒用戶，由于群體的特殊性，少兒應(yīng)用 app 中使用了大量的圓角設(shè)計(jì)，例如 ABC mouse 中控件都使用了大圓角的設(shè)計(jì)，使界面顯得富有童趣，且安全可靠。
圓角在使用地圖或圖表的場景中具有的得天獨(dú)厚的優(yōu)勢，圓角的弧度能夠更加平滑的連續(xù)的引導(dǎo)用戶的視線，符合用戶的頭部與眼睛的自然運(yùn)動(dòng)，而銳角則會(huì)迫使用戶的視線進(jìn)行強(qiáng)制轉(zhuǎn)折，其中容易造成用戶的停頓。
例如北京的地鐵地圖，在折線處都采用了圓角設(shè)計(jì)，具有很強(qiáng)的引導(dǎo)性，來幫助用戶快速查詢各個(gè)地鐵站點(diǎn)。
在一些具有引導(dǎo)性、指向性的圖標(biāo)中大量使用圓角曲線，例如：高德地圖的導(dǎo)航界面，轉(zhuǎn)彎 icon 的轉(zhuǎn)折點(diǎn)使用了圓角作為過渡，引導(dǎo)用戶視線。
在卡片上的應(yīng)用中，由于邊緣圓角向內(nèi)指向矩形的中心更加明顯，所以更加凸顯卡片內(nèi)的內(nèi)容。
如圖例：
當(dāng)多個(gè)卡片并排時(shí)，帶圓角的卡片具有更強(qiáng)的內(nèi)部指向性，且相鄰的兩條線差異化較大，我們可以清楚分辨他們的邊界線，所以更加容易被分辨；而同樣大小的直角矩形的內(nèi)部指向性較弱以及臨近的兩根“線”更加相似，分辨起來會(huì)相對(duì)困難一些。
例如 nice 的好貨頁面，通過簡單的修改我們?cè)俅伪容^一下直角與圓角在實(shí)際中的應(yīng)用，我們可以看到，在識(shí)別直角卡片的時(shí)候我們需要耗費(fèi)更多的精力，而圓角卡片則不要耗費(fèi)過多的精力，且由于圓角的內(nèi)指向性，圓角卡片能夠更好的承托卡片內(nèi)的內(nèi)容。
從以上分析中我們得知了圓角卡片的優(yōu)勢，那么現(xiàn)在我們將通欄卡片和圓角卡片做一下比對(duì)，看一看它們各自都有什么優(yōu)勢。
通欄式卡片比圓角卡片的空間利用率高，同等情況下通欄式卡片的可承載更多內(nèi)容。
圓角卡片需要在規(guī)范好的內(nèi)容區(qū)之內(nèi)，卡片的內(nèi)容與卡片邊緣還需要一定的間隔距離，導(dǎo)致了內(nèi)容區(qū)域的縮小，而通欄卡片則沒有這樣的煩惱。
圓角卡片比通欄式卡片的視覺識(shí)別性更好，原因如上我們提到的人眼識(shí)別原型更加容易，而識(shí)別直角則不易被識(shí)別。所以說我們需要突出或者區(qū)別內(nèi)容的時(shí)候首選圓角卡片。例如故宮展覽、微博、知乎、餓了么：
通欄式卡片比圓角卡片的沉浸感更強(qiáng)，因?yàn)閳A角更容易被識(shí)別，而直角則不容易的被察覺。我們觀察我們常用的 app 中的“feed流”幾乎都是通欄式卡片。例如：same、豆瓣、LOFTER、等。
而圓角則希望你能夠快速識(shí)別卡片上的內(nèi)容，并能夠與周圍的元素有所區(qū)分，強(qiáng)調(diào)卡片內(nèi)的內(nèi)容，所以圓角卡片常常打斷用戶的沉浸感，目的性更強(qiáng)一些。例如豆瓣的書影音、途家的首頁、keep 的課程頁面、京東金融的個(gè)人頁面。
由于圓角看片的自身屬性，我們可以看出圓角卡片并適合沉浸感較強(qiáng)的頁面當(dāng)中，上圖中都是為了盡可能的突出內(nèi)容的主題或功能。
我們?cè)賮砘仡櫼幌卤酒诘姆窒恚瑨侀_設(shè)計(jì)潮流的因素之外，我們要核心記住以下3點(diǎn)：
通欄卡片和圓角卡片區(qū)別我們可以簡單理解為：通欄卡片利用空間更加充分，而圓角卡片的識(shí)別性更好，最后我們?cè)儆涀∫稽c(diǎn)，通欄卡片的沉浸感較強(qiáng)。
參考鏈接：
本文由 @姜正 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
語法
box-shadow:h-shadow v-shadow blur spread color inset;
屬性值 | 特點(diǎn) |
h-shadow | 必需，水平陰影位置，可負(fù) |
v-shadow | 必需，垂直陰影位置，可負(fù) |
blur | 可選，模糊距離（虛實(shí)） |
spread | 可選，陰影尺寸（大?。?/p> |
color | 可選，陰影顏色rgba(0,0,0,.3) |
inset | 可選，將外部陰影（outset）改為內(nèi)部陰影 |
語法
text-shadow：h-shadow v-shadow blur color；
語法
border-radius：length;
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
