整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
動(dòng)條的邊角。
最近我朋友問我，他說他使用CSS自定義的滾動(dòng)條，當(dāng)x軸和y軸都出現(xiàn)滾動(dòng)條的時(shí)候，它的右下角有個(gè)缺口是白色的缺口，挺難看的。他說他想把這玩意染成綠色的，問我有沒有辦法。
·我就先去看了一下系統(tǒng)自帶的滾動(dòng)條，把它放開看一下，你會(huì)發(fā)現(xiàn)系統(tǒng)自帶的滾動(dòng)條右下角的缺口是和盒子的背景的主色是一個(gè)色系，都是這種灰色。因?yàn)槭峭鈱雍凶拥臐L動(dòng)條，所以它跟隨外層盒子的背景色是同樣的顏色。
·然后我就去看了一下文檔，發(fā)現(xiàn)這一個(gè)缺口的地方是可以設(shè)置的，這個(gè)缺口學(xué)名叫做邊角，也就是滾動(dòng)條的邊角。
·然后我們看第三個(gè)案例，你會(huì)發(fā)現(xiàn)第三個(gè)盒子的右下角有一塊綠色的部分，這個(gè)綠色的部分就是滾動(dòng)條的邊角部分。
·然后看一下是怎么設(shè)置的，是通過web kit scuba corner對(duì)這個(gè)偽元素進(jìn)行設(shè)置背景色，就可以去修改這個(gè)邊角的顏色。
天大成給大家推薦的是【Corner Editor漢化版】，這是一款強(qiáng)大且便捷的PS腳本工具，界面簡(jiǎn)潔而強(qiáng)大，可以讓設(shè)計(jì)師輕松實(shí)現(xiàn)對(duì)形狀邊角的調(diào)整，極其便利。
這種好東西，第一時(shí)間扒下來分享給小伙伴們……
迫不及待的朋友們直接在文章底部，查看原文，免費(fèi)下載！
# PS腳本| Corner Editor
1.支持系統(tǒng)：Win/Mac系統(tǒng)
2.支持應(yīng)用：PS2017-2024及以上
設(shè)計(jì)師在做設(shè)計(jì)稿的時(shí)候，往往需要反復(fù)調(diào)整按鈕圖標(biāo)的圓角弧度，或根據(jù)不同的風(fēng)格設(shè)定選擇不同偏向的折角，這時(shí)候Corner Editor就是一款極其便利的工具，它可以輕松幫助設(shè)計(jì)師實(shí)現(xiàn)對(duì)形狀邊角的各種調(diào)整，而不必花費(fèi)過多的時(shí)間和精力。
# 安裝方法| Corner Editor
1、拷貝 Corner Editor.jsx 腳本文件粘貼到PS的腳本目錄下，如：
Win：...Adobe\Adobe Photoshop 2021\Presets\Scripts\
Mac：...應(yīng)用程序/Adobe Photoshop 2021/Presets/Scripts/
2、重啟Photoshop，文件 - 腳本 - Corner Editor
# 操作方法| Corner Editor
【不屈不撓】永不放棄，勇往直前，相信自己，你將走出一條屬于自己的道路……
查看原文：https://www.dcss.top/329.html
篇分析對(duì)比是基于各自官網(wǎng)最新的Material design與iOS Human Interface Guidelines文檔，官方文檔地址將在文末給出，供各位交流學(xué)習(xí)。
Material Design（以下簡(jiǎn)稱MD）是谷歌設(shè)計(jì)的一套視覺語言設(shè)計(jì)規(guī)范，也是Android Design演進(jìn)的一種設(shè)計(jì)規(guī)范。在MD開篇，谷歌公司就表達(dá)了自己的期望：創(chuàng)造一種視覺語言，能夠?qū)⒔?jīng)典的設(shè)計(jì)原則與創(chuàng)新的科學(xué)技術(shù)結(jié)合起來；開發(fā)一個(gè)能夠跨平臺(tái)使用的底層系統(tǒng)，保證用戶在不同平臺(tái)上都能夠擁有統(tǒng)一的體驗(yàn)。與此相適應(yīng)的MD規(guī)范的設(shè)計(jì)原則是：
iOS Human Interface Guidelines（以下簡(jiǎn)稱HIG）是蘋果公司針對(duì)iOS設(shè)計(jì)的一套人機(jī)交互指南，目的是為了使運(yùn)行在iOS上的應(yīng)用都能遵從一套特定的視覺以及交互特性，從而能夠在風(fēng)格上進(jìn)行統(tǒng)一。 iOS HIG規(guī)范的設(shè)計(jì)原則是：
本章主要從文檔結(jié)構(gòu)角度對(duì)兩份官方文檔進(jìn)行對(duì)比分析。希望能夠從全局視角出發(fā)，分析兩份設(shè)計(jì)規(guī)范編寫過程中的側(cè)重點(diǎn)。
從圖1中的文檔結(jié)構(gòu)中我們可以看出，在側(cè)重點(diǎn)上兩者是存在一定差異的，MD側(cè)重于規(guī)范軟件的視覺表現(xiàn)效果而HIC側(cè)重于最大化利用系統(tǒng)原生資源。
MD文檔中共有10個(gè)一級(jí)目錄，其中動(dòng)態(tài)效果，風(fēng)格，布局，要素以及模式這5個(gè)方面從本質(zhì)而言都是對(duì)軟件的視覺表現(xiàn)效果進(jìn)行約束。例如動(dòng)態(tài)效果中，文檔對(duì)material變形的動(dòng)態(tài)效果就作出了嚴(yán)格規(guī)定，輻射變換適用于圓形至方形而不能用于兩個(gè)相似的形狀。而在HIC文檔的11個(gè)一級(jí)目錄中，僅在“視覺設(shè)計(jì)”，“bar”，“視圖”與“控制”這四個(gè)主題中存在著對(duì)軟件的視覺表現(xiàn)效果進(jìn)行規(guī)范。在其余的部分，文檔更多的是在介紹該部分有哪些系統(tǒng)原生的功能與設(shè)計(jì)可以滿足對(duì)應(yīng)的需求，在鼓勵(lì)重用原生資源的同時(shí)，也支持設(shè)計(jì)師進(jìn)行原創(chuàng)。
本章選擇從按鈕這個(gè)基本元素入手，通過比較同一項(xiàng)目中具體的差異來分析兩者在設(shè)計(jì)思路上的差異。
整體來看，MD中對(duì)按鈕進(jìn)行了非常詳細(xì)的規(guī)范，即在一個(gè)確定的場(chǎng)景中以什么樣的方式使用哪一種按鈕是已經(jīng)確定了的。在文檔中，如圖2所示，按鈕依據(jù)表現(xiàn)形式（高度，形狀）被分為3類標(biāo)準(zhǔn)按鈕：Floating action buttons、 Flat buttons以及Raised buttons。在全局范圍內(nèi)，文檔首先對(duì)按鈕的風(fēng)格進(jìn)行了規(guī)范，包括文字形式，按鈕可達(dá)性要求，按鈕邊角弧度要求，密集度以及大小，具體詳見表1。而后在詳細(xì)介紹中，文檔對(duì)按鈕的的用途，透明度，行為又再次進(jìn)行了規(guī)范。
相較于MD中對(duì)按鈕的規(guī)范，HIG中的規(guī)范則更為寬松，在我看來甚至不能稱之為規(guī)范。在一開始文檔便說明了系統(tǒng)提供了非常多的預(yù)制按鈕樣式足以應(yīng)付大多數(shù)的情況，同時(shí)也支持設(shè)計(jì)人員對(duì)按鈕樣式進(jìn)行設(shè)計(jì)。隨后在具體介紹部分，文檔選擇了三個(gè)圖標(biāo)進(jìn)行了說明。HIG中按鈕
下面以系統(tǒng)按鈕（System button）作為示例進(jìn)行說明。經(jīng)過整理，我們將規(guī)范以表2的形式展現(xiàn)出來。對(duì)內(nèi)容進(jìn)行分析我們可以發(fā)現(xiàn)：HIG更側(cè)重功能性。在按鈕的規(guī)范中，文檔對(duì)外形并未做過多要求，僅僅在第四條對(duì)其邊界與背景的有無作了建議。于此同時(shí)，值得注意的是文檔對(duì)按鈕所承載的文字內(nèi)容作了3條規(guī)范：動(dòng)詞，大寫，簡(jiǎn)短。這也意味著在按鈕設(shè)計(jì)的時(shí)候我們無需過多考慮按鈕的是否足夠美觀，形狀設(shè)計(jì)是否與系統(tǒng)相適應(yīng)，而應(yīng)該側(cè)重于用戶是否能夠直觀地理解每一個(gè)按鈕背后代表的操作與操作帶來的結(jié)果。
3.對(duì)比分析
按鈕除了觸發(fā)交互動(dòng)作的顯性功能外，更重要是他具有的隱性作用：信息傳達(dá)，當(dāng)然，它同時(shí)也應(yīng)該兼具修飾功能。引用MD中對(duì)按鈕的定義“Buttons communicate the action that will occur when the user touches them”，我們可以知道按鈕主要的作用是對(duì)將會(huì)發(fā)生的事件進(jìn)行預(yù)告，告訴用戶按了以后會(huì)發(fā)生什么。
在隱性的修飾功能和信息傳達(dá)功能中，MD規(guī)范顯然更注重修飾功能的規(guī)范，對(duì)于每一個(gè)按鈕的大小，形式所處層級(jí)以及用途都有一個(gè)明確的規(guī)定，它希望通過一致的設(shè)計(jì)規(guī)范使按鈕這個(gè)元素能夠分工明確，表現(xiàn)統(tǒng)一。這樣一種設(shè)計(jì)最終能減少用戶在不同應(yīng)用和設(shè)備間切換時(shí)的學(xué)習(xí)成本，進(jìn)而增加了這種設(shè)計(jì)語言的易用性。
而HIG規(guī)范則相對(duì)而言更注重信息傳達(dá)的效率。在設(shè)計(jì)theme中第一位的是clarity，在按鈕這個(gè)元素中，這樣一種設(shè)計(jì)思想帶來的結(jié)果就是注重信息傳達(dá)效率，減少不必要的設(shè)計(jì)元素的干擾：慎用邊框與背景，放個(gè)清清楚楚的字在那里告訴用戶這是干嘛的就好了。
縱觀MD規(guī)范與HIG規(guī)范，我們會(huì)發(fā)現(xiàn)按鈕這一個(gè)元素所呈現(xiàn)出來的兩者的不同其實(shí)非常有代表性。如果說MD像一個(gè)事無巨細(xì)的媽媽，各個(gè)元素的分類，使用場(chǎng)景，大小，弧度，顏色風(fēng)格都設(shè)計(jì)地清清楚楚，那么HIG則更像是一個(gè)神經(jīng)大條的爸爸，我這有挺多東西你拿去用，差不多就是這樣做，但你別那樣做。這是非常明顯的區(qū)別，但下面我將從設(shè)計(jì)思路以及設(shè)計(jì)目標(biāo)的角度來說明兩者的不同。
MD規(guī)范是一種對(duì)設(shè)備內(nèi)虛擬世界的隱喻。它認(rèn)為手機(jī)是一個(gè)盒子，里面裝載了一個(gè)虛擬的三維世界，每一個(gè)物件都是以一種名為material的形式存在的，它具有長(zhǎng)度，寬度，厚度，同時(shí)也占據(jù)著一定的空間，同時(shí)通過光效投影的效果來表現(xiàn)不同物件的層級(jí)關(guān)系。這樣一種模擬是MD規(guī)范的設(shè)計(jì)基礎(chǔ)，也是其必須遵循的物理法則。在設(shè)備中，我們所有的操作都是在對(duì)Material進(jìn)行操作：切換一個(gè)Material，滑動(dòng)一個(gè)Material，按壓會(huì)使某些Material的高度發(fā)生變化，但始終不會(huì)穿過它下層的Material。這樣種模擬在交互體驗(yàn)上會(huì)給人一種非常自然的感覺，仿佛手機(jī)里面的東西就是真實(shí)存在的，就像辦公桌上的一疊疊紙一樣，我平時(shí)挪動(dòng)文件的時(shí)候會(huì)發(fā)生什么事情，在這里面就會(huì)發(fā)生什么事情。
HIG規(guī)范最初也是采用了擬物的思路，但目前它似乎讓設(shè)計(jì)回歸到了語言的本質(zhì)——傳遞信息，雖然也保存了暗喻這一原則。在HIG規(guī)范中，符號(hào)設(shè)計(jì)不再是對(duì)現(xiàn)實(shí)實(shí)物的精準(zhǔn)模擬，而是設(shè)計(jì)成象形文字一樣來暗示用戶符號(hào)所代表的意義。這樣一種思路的好處是在有限的用戶界面中減少了符號(hào)設(shè)計(jì)帶來的干擾信息，凸顯了應(yīng)用需要傳達(dá)的主要信息。在網(wǎng)上也看到有人說HIG的設(shè)計(jì)趨勢(shì)是“大而簡(jiǎn)，簡(jiǎn)而精”，對(duì)此我表示非常贊同。從App Store的改版中就能發(fā)現(xiàn)符號(hào)設(shè)計(jì)已經(jīng)被弱化或者說是簡(jiǎn)化，而且與此同時(shí)還增加了留白，增大了字體，使主要關(guān)注點(diǎn)都集中在了主要信息上。
雖說兩者都追求著一種一致性，但在我看來兩者的一致性擁有不同的含義。MD規(guī)范的一致性意味著不同設(shè)備間的一致性，這種一致性體現(xiàn)在視覺表現(xiàn)上。而HIG除了能保證視覺表現(xiàn)的一致性以外，更多是考慮應(yīng)用與系統(tǒng)間的一致性，這種一致性體現(xiàn)在功能上。
就MD而言，細(xì)致的規(guī)則能保證不同設(shè)備上視覺的一致性。在我看來，細(xì)致的規(guī)范要求就是為了應(yīng)對(duì)不同的設(shè)備間的差異。通過精確地相對(duì)位置和大小規(guī)定來保證在不同設(shè)備上同一個(gè)應(yīng)用能夠有相對(duì)一致的表現(xiàn)，不至于同一個(gè)應(yīng)用在兩個(gè)設(shè)備間表現(xiàn)差距過大而破壞了這種視覺上的一致性。
對(duì)HIG而言，有限的設(shè)備型號(hào)與統(tǒng)一風(fēng)格的預(yù)制符號(hào)保證了應(yīng)用在視覺上能保持一致性，這包括了兩方面，一是設(shè)備間的一致性，二是應(yīng)用與系統(tǒng)間的一致性。相較與MD規(guī)范而言，HIG規(guī)范本身針對(duì)的設(shè)備型號(hào)數(shù)量是有限的，其實(shí)從顯示屏的尺寸規(guī)格的角度上來講其實(shí)也就那么幾種屏幕尺寸，在布局上也不會(huì)相差太多，這為保證設(shè)備間的視覺一致性提供了基礎(chǔ)。同時(shí)，HIG也提供了較多的與系統(tǒng)符號(hào)風(fēng)格相一致的預(yù)制符號(hào)，這在一定程度上保證了應(yīng)用與系統(tǒng)間也能夠有一個(gè)較好的視覺表現(xiàn)一致性。
HIG規(guī)范也追求著應(yīng)用與系統(tǒng)在功能上保持一致性。HIG規(guī)范中著重介紹了各種系統(tǒng)原生功能與技術(shù)，同時(shí)推薦設(shè)計(jì)師在任何能夠用到原生功能和技術(shù)的時(shí)候應(yīng)用他們，比如指紋識(shí)別，面部識(shí)別，蘋果支付等。這就使得應(yīng)用與系統(tǒng)之間能夠在功能上保持一致性，例如我們用指紋解鎖應(yīng)用和用指紋解鎖系統(tǒng)在操作體驗(yàn)上是一樣的。
MD規(guī)范側(cè)重于視覺效果上的表達(dá)，所以更多的面向UI設(shè)計(jì)師以及視覺設(shè)計(jì)師。而HIG除了基本的視覺與交互規(guī)范，還有對(duì)功能和技術(shù)的介紹與引導(dǎo)。面向的則是程序設(shè)計(jì)師。
如果將產(chǎn)品比作一座商場(chǎng)，MD關(guān)注的是商場(chǎng)的柜臺(tái)、海報(bào)怎么布置好看，而HIG除此之外還涉及我的扶梯你應(yīng)該用在哪，我的觀光電梯你應(yīng)該用在哪。
從我的理解而言，MD的價(jià)值觀是自然，統(tǒng)一，和諧。他最初對(duì)手機(jī)內(nèi)部空間的模擬追求的是一種自然展現(xiàn)，在用戶第一次使用的時(shí)候就不會(huì)感覺到異樣，第一次使用就能接受他應(yīng)該是這樣，因?yàn)樗臀覀儸F(xiàn)實(shí)世界遵循著同一套物理法則。在兼容上它追求著應(yīng)用間與設(shè)備間的統(tǒng)一，不希望用戶因?yàn)橛布O(shè)備的不同而導(dǎo)致學(xué)習(xí)成本的增加，對(duì)同一個(gè)應(yīng)用產(chǎn)生陌生感。最后在藝術(shù)設(shè)計(jì)上，MD通過精確的數(shù)值保證了應(yīng)用的元素在設(shè)計(jì)出來后都能有一種和諧的美感。無論是顏色搭配還是層級(jí)設(shè)置，亦或是大小分配，都能給用戶一種欣賞藝術(shù)品般的體驗(yàn)。
HIG的價(jià)值觀則是簡(jiǎn)和精。簡(jiǎn)：減少設(shè)計(jì)帶來的干擾，凸顯主要功能與信息的價(jià)值，同時(shí)推進(jìn)系統(tǒng)原生功能在應(yīng)用內(nèi)的使用來簡(jiǎn)化某些步驟。精：聚焦于信息傳遞與邏輯呈現(xiàn)，讓用戶用最少的時(shí)間與精力理解他做了什么，在哪里，將會(huì)到哪。
文檔地址：
本文由 @hugooooo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 unsplash，基于 CC0 協(xié)議
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
