JSP的刨根問底

• 一.概念
• 二.原理
• 三.腳本
• 四.內(nèi)置對象
• 五.注釋
• 六.編譯指令
• 作用
• 格式
• 分類
• 七.動作指令
• 作用







• 分類






這篇文章從一個初學(xué)者的角度，復(fù)習(xí)一波JSP。
















一.概念
Java Server Pages： java服務(wù)器端頁面

可以理解為：一個特殊的頁面，其中既可以指定定義html標(biāo)簽，又可以定義java代碼
用于簡化書寫?。。?br /> 二.原理
本質(zhì)是一個Servlet

三.腳本
定義：Jsp定義java代碼的方式

<% 代碼 %>：定義的java代碼，在service方法中。service方法中可以定義什么，該腳本中就可以定義什么。
<%! 代碼 %>：定義的java代碼，在jsp轉(zhuǎn)換后的java類的成員位置。
<%= 代碼 %>：定義的java代碼，會輸出到頁面上。輸出語句中可以定義什么，該腳本中就可以定義什么。
四.內(nèi)置對象
對象名 實(shí)現(xiàn)接口或繼承類 作用
PageContext 當(dāng)前頁面共享數(shù)據(jù)，還可以獲取其他八個內(nèi)置對象
request HttpServletRequest 一次請求訪問的多個資源(轉(zhuǎn)發(fā))
session HttpSession 一次會話的多個請求間
application ServletContext 所有用戶間共享數(shù)據(jù)
response HttpServletResponse 響應(yīng)對象
page Object 當(dāng)前頁面(Servlet)的對象 this
out JspWriter 輸出對象，數(shù)據(jù)輸出到頁面上
config ServletConfig Servlet的配置對象
expection Throwable 異常對象
五.注釋
1.html注釋
<!-- -->:只能注釋html代碼片段
2.jsp注釋
<%-- --%>：可以注釋所有

六.編譯指令
作用
用于配置JSP頁面，導(dǎo)入資源文件

格式
<%@ 指令名稱 屬性名1=屬性值1 屬性名2=屬性值2 ... %>
分類
1.page
配置JSP頁面的
1. contentType：等同于response.setContentType()
*設(shè)置響應(yīng)體的mime類型以及字符集
* 設(shè)置當(dāng)前jsp頁面的編碼（只能是高級的IDE才能生效，如果使用低級工具，則需要設(shè)置pageEncoding屬性設(shè)置當(dāng)前頁面的字符集）
2.import：導(dǎo)包
3. errorPage：當(dāng)前頁面發(fā)生異常后，會自動跳轉(zhuǎn)到指定的錯誤頁面
4.isErrorPage：標(biāo)識當(dāng)前也是是否是錯誤頁面。
* true：是，可以使用內(nèi)置對象exception
* false：否。默認(rèn)值。不可以使用內(nèi)置對象exception
2.include
頁面包含的。導(dǎo)入頁面的資源文件

 <%@include file="top.jsp"%>
3.導(dǎo)入資源
導(dǎo)入資源

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  prefix：前綴，自定義的
1
七.動作指令
作用
動作指令與編譯指令不間，編譯指令是通知 Servlet 引擎的處理消息，而動作指令只是運(yùn)行時的腳本動作。編譯指令在將JSP 編譯成 Servlet 時起作用:處理指令通常可替換成 Java腳本，是 JSP腳本的標(biāo)準(zhǔn)化寫法。

分類
指令 作用
jsp:forward 執(zhí)行頁面轉(zhuǎn)向，將請求的處理轉(zhuǎn)發(fā)到下一個頁面。
jsp:param 用于傳遞參數(shù)，必須與其他支持參數(shù)曲標(biāo)簽一起使用。
jsp:include 用于動態(tài)引入一個 JSP 頁面。
jsp:plugin 用于下載 JavaBean 或 Applet 到客戶端執(zhí)行。
jsp:useBean 使用 JavaBean。
jsp:setProperty 修改 JavaBean 實(shí)例的屬性值。
jsp:getProperty 獲取 JavaBean 實(shí)例的屬性值。
具體細(xì)節(jié)：
jsp:forward：
動作把請求轉(zhuǎn)到另外的頁面?？梢赞D(zhuǎn)發(fā)靜態(tài)的HTML頁面，也可以轉(zhuǎn)發(fā)動態(tài)的JSP頁面，或者轉(zhuǎn)發(fā)到容器中的servlet jsp:forward標(biāo)記只有一個屬性page。 page屬性包含的是一個相對URL。 page的值既可以直接給出，也可以在請求的時候動態(tài)計算。

jsp:param
用于設(shè)定參數(shù)值，這個指令不能單獨(dú)使用 可以與以下三個指令結(jié)合使用：
jsp:include :用于將參數(shù)值出入被導(dǎo)入頁面
jsp:forword ： 用于將參數(shù)值傳入被轉(zhuǎn)向頁面
jsp:plugin ： 用于將參數(shù)值傳入頁面中javaBean的實(shí)例

jsp:include
（拿目標(biāo)頁面插入原有頁面）該動作是一個動態(tài)的include指令，也用于帶入某個頁面，他不會導(dǎo)入被include頁面的編譯指令，僅僅導(dǎo)入頁面的body內(nèi)容插入到本頁面
該動作把指定文件插入正在生成的頁面。其語法如下：　　 flush：用于指定輸出緩存是否轉(zhuǎn)移到被導(dǎo)入的文件中， true：包含在被導(dǎo)入的文件中 false：包含在源文件中
前面已經(jīng)介紹過include指令，它是在JSP文件被轉(zhuǎn)換成Servlet的時候引入文件，而這里的jsp:include動作不同，插入文件的時間是在頁面被請求的時候。j
sp:include動作的文件引入時間決定了它的效率要稍微差一點(diǎn)，而且被引用文件不能包含某些JSP代碼（例如不能設(shè)置HTTP頭），但它的靈活性卻要好得多。
jsp:plugin

用于下載服務(wù)器端的javaBean或applet到客戶端）
jsp:plugin動作用來根據(jù)瀏覽器的類型，插入通過Java插件運(yùn)行Java Applet所必需的OBJECT或EMBED元素。

<jsp:plugin  
  type="bean | applet"   : 被執(zhí)行的java程序的類型
  code="classFileName" ：被執(zhí)行的文件名，必須以  .class 結(jié)尾
  codebase="classFileDirectoryName"   ：被執(zhí)行文件的所在目錄
  [ name="instanceName" ] :給程序起一個名字用來標(biāo)識該程序
  [ archive="URIToArchive, ..." ] ：指向一些要預(yù)先載入的將要使用到的類
  [ align="bottom | top | middle | left | right" ] ：
  [ height="displayPixels" ]
  [ width="displayPixels" ]
  [ hspace="leftRightPixels" ] 
  [ vspace="topBottomPixels" ]
  [ jreversion="JREVersionNumber | 1.1" ]   ：能正確運(yùn)行改程序必須的JRE的版本
  [ nsplug inurl="URLToPlugin" ]  
  [ iepluginurl="URLToPlugin" ] >
  [ <jsp:params>
  [ <jsp:param name="parameterName" value="{parameterValue | <%= expression %>}" /> ]+
  </jsp:params> ]
  [ <jsp:fallback> text message for user </jsp:fallback> ]  ：當(dāng)不能正確顯示該Applet時，顯示該指令中的文本提示
 <jsp:plugin>










jsp:useBean
useBean：用于在jsp頁面中初始化一個java實(shí)例（如果多個jsp中需要重復(fù)使用某段代碼，可以把這段代碼定義成java類在頁面中引用）
jsp:useBean動作用來裝載一個將在JSP頁面中使用的JavaBean。這個功能非常有用，因?yàn)樗沟梦覀兗瓤梢园l(fā)揮Java組件重用的優(yōu)勢，同時也避免了損失JSP區(qū)別于Servlet的方便性。
jsp:useBean動作最簡單的語法為：<jsp:useBean id=“JavaBean的名稱” class=“package.class"包名.類名” scope=“有效范圍”/>

這行代碼的含義是：“創(chuàng)建一個由class屬性指定的類的實(shí)例，然后把它綁定到其名字由id屬性給出的變量上”。不過，就象我們接下來會看到的，定義一個scope屬性可以讓Bean關(guān)聯(lián)到更多的頁面，它可接受四個值：request、session、page、application。此時，jsp:useBean動作只有在不存在同樣id和scope的Bean時才創(chuàng)建新的對象實(shí)例，同時，獲得現(xiàn)有Bean的引用就變得很有必要。
獲得Bean實(shí)例之后，要修改Bean的屬性既可以通過jsp:setProperty動作進(jìn)行，也可以在Scriptlet中利用id屬性所命名的對象變量，通過調(diào)用該對象的方法顯式地修改其屬性。這使我們想起，當(dāng)我們說“某個Bean有一個類型為X的屬性foo”時，就意味著“這個類有一個返回值類型為X的getFoo方法，還有一個setFoo方法以X類型的值為參數(shù)”?！　∮嘘P(guān)jsp:setProperty動作的詳細(xì)情況在后面討論。但現(xiàn)在必須了解的是，我們既可以通過jsp:setProperty動作的value屬性直接提供一個值，也可以通過param屬性聲明Bean的屬性值來自指定的請求參數(shù)，還可以列出Bean屬性表明它的值應(yīng)該來自請求參數(shù)中的同名變量。
在JSP表達(dá)式或Scriptlet中讀取Bean屬性通過調(diào)用相應(yīng)的getXXX方法實(shí)現(xiàn)，或者更一般地，使用jsp:getProperty動作。
注意，包含Bean的類文件應(yīng)該放到服務(wù)器正式存放Java類的目錄下，而不是保留給修改后能夠自動裝載的類的目錄。例如，對于Java Web
Server來說，Bean和所有Bean用到的類都應(yīng)該放入classes目錄，或者封裝進(jìn)jar文件后放入lib目錄，但不應(yīng)該放到servlets下。
id:javaBean的實(shí)例名 class： javaBean的實(shí)現(xiàn)類 scope：指定javaBean實(shí)例的生存范圍
page：javaBean僅在該頁面有效 request：javaBean在本次請求中有效 session：
javaBean在本次session內(nèi)有效 application：
javaBean在本應(yīng)用內(nèi)一直有效　　下面是一個很簡單的例子，它的功能是裝載一個Bean，然后設(shè)置/讀取它的message屬性。
關(guān)于jsp:useBean的進(jìn)一步說明　　 使用Bean最簡單的方法是先用下面的代碼裝載Bean： 　 <jsp:useBean id=“name” class=“package.class” />
然后通過jsp:setProperty和jsp:getProperty修改和提取Bean的屬性。 不過有兩點(diǎn)必須注意?！　?第一，我們還可以用下面這種格式實(shí)例化Bean： <jsp:useBean …> 　　Body 　　</jsp:useBean>
它的意思是，只有當(dāng)?shù)谝淮螌?shí)例化Bean時才執(zhí)行Body部分，如果是利用現(xiàn)有的Bean實(shí)例則不執(zhí)行Body部分。正如下面將要介紹的，jsp:useBean并非總是意味著創(chuàng)建一個新的Bean實(shí)例。
第二，除了id和class外，jsp:useBean還有其他三個屬性，即：scope、type、beanName。
id：命名引用該Bean的變量。如果能夠找到id和scope相同的Bean實(shí)例，jsp:useBean動作將使用已有的Bean實(shí)例而不是創(chuàng)建新的實(shí)例。
class：指定Bean的完整包名。
scope：指定Bean在哪種上下文內(nèi)可用，可以取下面的四個值之一：page、request、session和application。　　默認(rèn)值是page，表示該Bean只在當(dāng)前頁面內(nèi)可用（保存在當(dāng)前頁面的PageContext內(nèi)）。
request表示該Bean在當(dāng)前的客戶請求內(nèi)有效（保存在ServletRequest對象內(nèi)）。
session表示該Bean對當(dāng)前HttpSession內(nèi)的所有頁面都有效。
最后，如果取值application，則表示該Bean對所有具有相同ServletContext的頁面都有效。
scope之所以很重要，是因?yàn)閖sp:useBean只有在不存在具有相同id和scope的對象時才會實(shí)例化新的對象；
如果已有id和scope都相同的對象則直接使用已有的對象，此時jsp:useBean開始標(biāo)記和結(jié)束標(biāo)記之間的任何內(nèi)容都將被忽略。
type：指定引用該對象的變量的類型，它必須是Bean類的名字、超類名字、該類所實(shí)現(xiàn)的接口名字之一。請記住變量的名字是由id屬性指定的。
beanName：指定Bean的名字。如果提供了type屬性和beanName屬性，允許省略class屬性。

jsp:setProperty
jsp:setProperty用來設(shè)置已經(jīng)實(shí)例化的Bean對象的屬性，有兩種用法。
首先，你可以在jsp:useBean元素的外面（后面）使用jsp:setProperty，　　　　…

第二種用法是把jsp:setProperty放入jsp:useBean元素的內(nèi)部，　…

jsp:setProperty動作有下面四個屬性：name：表示要設(shè)置屬性的是哪個Bean?！　roperty：表示要設(shè)置哪個屬性。有一個特殊用法：如果property的值是""，表示所有名字和Bean屬性名字匹配的請求參數(shù)都將被傳遞給相應(yīng)的屬性set方法?！　alue：value屬性是可選的。該屬性用來指定Bean屬性的值。字符串?dāng)?shù)據(jù)會在目標(biāo)類中通過標(biāo)準(zhǔn)的valueOf方法自動轉(zhuǎn)換成數(shù)字、boolean、Boolean、byte、Byte、char、Character。例如，boolean和Boolean類型的屬性值（比如“true”）通過Boolean.valueOf轉(zhuǎn)換，int和Integer類型的屬性值（比如"42"）通過Integer.valueOf轉(zhuǎn)換?！　alue和param不能同時使用，但可以使用其中任意一個?！　aram：param是可選的。它指定用哪個請求參數(shù)作為Bean屬性的值。如果當(dāng)前請求沒有參數(shù)，則什么事情也不做，系統(tǒng)不會把null傳遞給Bean屬性的set方法。因此，你可以讓Bean自己提供默認(rèn)屬性值，只有當(dāng)請求參數(shù)明確指定了新值時才修改默認(rèn)屬性值?！　±纾旅娴拇a片斷表示：如果存在numItems請求參數(shù)的話，把numberOfItems屬性的值設(shè)置為請求參數(shù)numItems的值；否則什么也不做。　　　　如果同時省略value和param，其效果相當(dāng)于提供一個param且其值等于property的值。進(jìn)一步利用這種借助請求參數(shù)和屬性名字相同進(jìn)行自動賦值的思想，你還可以在property（Bean屬性的名字）中指定“”，然后省略value和param。此時，服務(wù)器會查看所有的Bean屬性和請求參數(shù)，如果兩者名字相同則自動賦值。　　下面是一個利用JavaBean計算素數(shù)的例子。如果請求中有一個numDigits參數(shù)，則該值被傳遞給Bean的numDigits屬性；numPrimes也類似。　　JspPrimes.jsp


jsp:getProperty
jsp:getProperty動作提取指定Bean屬性的值，轉(zhuǎn)換成字符串，然后輸出。
jsp:getProperty有兩個必需的屬性，即：name，表示Bean的名字；property，表示要提取哪個屬性的值。

END?。?！有什么意見可以提出來！
長路漫漫，JAVA為伴?。?！
————————————————
版權(quán)聲明：本文為CSDN博主「福爾摩東」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_43688587/article/details/105017469

如何用CSS使label標(biāo)簽等寬？

3.添加好后頁面上所有的label標(biāo)簽會變?yōu)?00pxv

JavaScript中的混淆器

隨著 AJAX 和富界面技術(shù)的發(fā)展，Javascript 在 Web 應(yīng)用上的重要性越來越高，Javascript 代碼的復(fù)雜性、功能和技術(shù)含量也越來越高，對Javascript 代碼保護(hù)的需要也越來越迫切。



壓縮 compress： 去掉空格，換行，注釋等，格式緊湊，節(jié)約存儲空間。



混淆 obfuscate/garble：替換變量名或方法名，讓js不容易看懂。也做到了壓縮的效果。



加密 encrypt：一般用eval方法加密，效果與混淆相似。也做到了壓縮的效果。





我們可以通過工具進(jìn)行混淆，通過工具也是目前最好的方式。推薦一個很好的混淆工具： JSObfuscator By Unest

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

版權(quán)聲明：本文為CSDN博主「劉亦楓」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/liuyifeng0000/article/details/105004732





各行各業(yè)的設(shè)計師每天都在和顏色打交道，UI 設(shè)計師設(shè)計用戶界面也不例外。

用戶界面是一個設(shè)計師用理性思維解決用戶感性需求的窗口。如果對色彩的運(yùn)用不加以克制，界面可能會顯得花哨而沒有主次；但過于拘謹(jǐn)又容易使界面保守，難以激發(fā)用戶情緒。所以如何讓色彩的搭配平衡，是 UI 設(shè)計師需要修煉的一課。

但色彩畢竟是感性的元素，我們總是仰慕一些對色彩天賦異稟的設(shè)計師，總能不拘繩墨給作品帶來驚艷的視覺效果。我們難以偷習(xí)他們的天賦，但或許你有沒有想過，干脆我們另辟蹊徑，用理性推導(dǎo)來制定一套色彩系統(tǒng)？

那么今天我用我的項(xiàng)目示例，教給大家一個科學(xué)推導(dǎo)顏色搭配的方法。也許能夠帶你發(fā)現(xiàn)一些色彩背后的數(shù)學(xué)秘密。

區(qū)分顏色模式

在此之前我們需要先熟悉一下顏色模式。

在 PS 菜單欄的「圖像-模式」下可以看到非常多的顏色模式：RGB、CMYK、Lab 等等。那是因?yàn)?PS 是一個需要滿足設(shè)計行業(yè)水平領(lǐng)域的軟件，要解決各類設(shè)計師需求，所以涵蓋的顏色模式非常豐富。

但 UI 大多數(shù)時候需要關(guān)注的是線上場景，成果的展示渠道一般是自發(fā)光設(shè)備。所以弄明白垂直領(lǐng)域軟件 Sketch 中的幾種顏色模式，其實(shí)就足夠了，分別是 RGB、HSB 和 HSL。

RGB 是指通過 R（Red：紅）、G（Green：綠）、B（Blue：藍(lán)）三個顏色通道的變化以及它們相互之間的疊加得到各式各樣的顏色。三個通道分別有「0-255」這 256 個值，這些值分別代表著各通道的亮度層級。

雖然 RGB 在機(jī)器表現(xiàn)上很友好，但并不夠人性化。因?yàn)槿藗兣袛囝伾?，往往是通過「這是什么顏色？是不是太鮮艷了？亮了還是暗了？」這樣的感官維度，而很難通過紅綠藍(lán)的亮度層級去判斷。所以人們后來基于 RGB 衍生出了 HSB 模式和 HSL 模式。

HSB 是指通過 H（Hue：色相）、S（Saturation：飽和度）、B（Brightness：明度）來控制顏色。Hue（色相）的取值范圍是色環(huán)上 0-360° 的圓心角度；而 Saturation（飽和度）與 Brightness（明度）是在 0-100% 的量占比。

HSL 中的 H、S 與 HSB 相同，都是指 Hue（色相）、Saturation（飽和度）。但 L 所指的則是 Lightness（亮度）。

HSL 和 HSB 稍微有一些不同，我們在兩個顏色模式下輸入相同的數(shù)值，會發(fā)現(xiàn)顏色實(shí)際是不一樣的。雖然 H、S 指代的都是色相和飽和度，但 L（Lightness：亮度）與 B（Brightness：明度）分別被認(rèn)為是「顏色中白色的量」和「顏色中光線的量」。

Lightness 和 Brightness 的概念要深度研究下去的話其實(shí)是計算機(jī)算法領(lǐng)域的問題了，感興趣的朋友可以查閱更多資料，但我個人認(rèn)為對于 UI 來說沒有太大必要。

關(guān)于 HSB、HSL 的使用場景，記住以下兩點(diǎn)即可：

• 前端 CSS 代碼里支持的是 HSL，而不是 HSB。如果和前端對接時，UI 給到的是 HSB 的色值，那么最終落地的顏色效果會與設(shè)計稿有出入。
• 我們接下來講到的配色推導(dǎo)，是基于 HSB 顏色模式的，因?yàn)樗菀桌斫?，?shù)值變化在色系坐標(biāo)中的產(chǎn)生的結(jié)果更加直觀。

配色推導(dǎo)

支付寶 Alipay Design 團(tuán)隊提出過一個配色原則：

以同色系配色為主導(dǎo)，多色搭配為輔。

同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個場景中，具有非常好的延展性。

那么知道了這個原則，我們又該如何科學(xué)、合理地得出產(chǎn)品的色彩系統(tǒng)呢？接下來我就用我的一個項(xiàng)目示例給大家做講解。

步驟一：找到符合產(chǎn)品調(diào)性的品牌色

我負(fù)責(zé)的該項(xiàng)目主要業(yè)務(wù)與高校支付、繳費(fèi)相關(guān)，所以希望整個產(chǎn)品視覺風(fēng)格首先要給用戶帶來安全感。又因?yàn)橹饕脩羧后w是高校師生居多，新潮、年輕化是主要用戶的一大標(biāo)簽，所以我們選擇了用飽和度較高的藍(lán)色來作為品牌色。

最終選擇品牌色的 Hex 值為 #1585FF ，HSB = （211,92,100）。

步驟二：提取24色

選定了品牌色之后，以品牌色的 H（色相）為基礎(chǔ)，不斷地遞增、遞減 15，在 0-360 之間可以得出 24 個顏色，也就是將 360° 色環(huán)分割為 24 份，可以得到 24 色。

為什么要提取 24 色，并且以 15 為公差呢？

我們知道，想得到鄰近色、類似色、互補(bǔ)色這一系列的顏色，我們就會使用到色環(huán)。

• 鄰近色：色相差值 15° 以內(nèi)的顏色為鄰近色;
• 類似色：色相差值 30° 以內(nèi)的顏色為類似色;
• 互補(bǔ)色：色相差值 180° 的顏色為互補(bǔ)色。

而 24 色色板是幫助我們提取輔助色的便捷工具。

步驟三：找到同色系配色

同色系是指與品牌色 H（色相）一致，通過改變 S（飽和度）與 B（明度）變化產(chǎn)生的色組。同色系色組的推導(dǎo)需要借助拾色板坐標(biāo)。

我們建立一個基于 S（飽和度）與 B（明度）的平面坐標(biāo)系，設(shè)定當(dāng)前品牌色為色值為（S?，B?），連接品牌色色值點(diǎn)與右上純白點(diǎn)（0，100）、右下純黑點(diǎn)（100，0），得到兩條線段。

我們各在兩條線段上均分取得 5 個點(diǎn)坐標(biāo)（包含首位兩點(diǎn)）。這樣兩條線段一共就會產(chǎn)生 11 個（S，B）坐標(biāo)值，對應(yīng)著 11 個同色系色組。

經(jīng)過上圖的計算，我們可以得到基于品牌色的同色系色階。

步驟四：多色搭配

用于搭配的輔助色應(yīng)滿足以下兩個條件：

• 和品牌色有明顯區(qū)分：盡量避免所選輔助色感官上給用戶視覺區(qū)別與品牌色差距不大，傳遞的調(diào)性太過一致；
• 不能過于突兀：根據(jù)色彩原理來說，互補(bǔ)色是最能與品牌色本色產(chǎn)生視覺感官對比的顏色，但可能會有些突兀。為了讓顏色的輔助起到豐富畫面的作用，而不是反而讓整個版面顯得不和諧，所以我們選擇互補(bǔ)色的鄰近色作為輔助色，而不要直接使用互補(bǔ)色。

于是根據(jù)以上條件，基于品牌色可衍生出 3 個輔助色：一個與品牌色傳遞調(diào)性有明顯區(qū)分的類似色；兩個互補(bǔ)色的鄰近色。

步驟五：感官明度校準(zhǔn)

經(jīng)過計算后，我們已經(jīng)得出了品牌色和三個輔助色。

可以看出，雖然我們提取出的輔助色明度色值都一致，但因?yàn)轭伾旧碜詭У母泄倜鞫葘傩杂兴鶇^(qū)別。為了讓輔助色和品牌色的感官明度盡量一致，我們要對第一次提取出的輔助色進(jìn)行感官明度校準(zhǔn)。

校準(zhǔn)方式是：依次在輔助色上疊加一層純黑圖層，將該純黑圖層顏色模式調(diào)整為 Hue（色相），就可以通過無彩色系下的明度色值，進(jìn)行對比。

這樣我們終于得到以品牌色為基準(zhǔn)的 3 個輔助色了。

步驟六：全色系輸出

將得到的輔助色依次進(jìn)行步驟三的計算，可以得到輔助色的同色系色階。

但因?yàn)槊鞫冗^低時，顏色已經(jīng)非常接近于黑色，色相在肉眼上幾乎已經(jīng)趨于一致。所以刪除最左邊的三種同色系顏色。最后得到基于品牌色推導(dǎo)出的全色系色階色板。

總結(jié)

完成了以上的工作，當(dāng)然還不算結(jié)束。一套標(biāo)準(zhǔn)的色彩系統(tǒng)還會包含中性色規(guī)范、顏色的使用規(guī)范等等。但相信解決了大部分的需求，剩下的工作也難不倒大家了。畢竟以上的方式只是給大家提供了一個理性科學(xué)的方法，色彩的使用最終還是要融合設(shè)計師個人的共情能力。

比如許多產(chǎn)品有了一套自己的色彩方案后，設(shè)計師還會根據(jù)具體的業(yè)務(wù)場景去賦予 icon、卡片背景等元素不一樣的色彩方案。

希望這個方法能夠帶你發(fā)現(xiàn)一些色彩背后的數(shù)學(xué)秘密。

文章來源：優(yōu)設(shè)    作者：UCD耍家

很多同學(xué)投票想看看設(shè)計師的草稿本，今天就來滿足大家了！我們來看看六位淘寶設(shè)計師的草稿本們，有些是紙質(zhì)派，有些是電子黨，Here we go！

草稿本是設(shè)計師工作生活必不可少的工具，比起正兒八經(jīng)的作品集，設(shè)計師的草稿本其實(shí)也是十分有趣的，它是設(shè)計師腦海里千奇百怪想法的隨手記錄。

Shiyu：本人是被脅迫公開草稿本的卑微設(shè)計師

手繪裝備：iPad Pro+Procreate

以下是被迫營業(yè)現(xiàn)場對話

△ 給「老同學(xué)」的公眾號形象草稿

老同學(xué)：「好久不見~我記得你畫畫挺好的~幫畫個形象唄~我現(xiàn)在在做一個公眾號，需要*&%￥#……你明白吧？你就簡單畫一畫就好~謝謝啦」

我：「….」

△ 給「朋友」畫的頭像草稿

朋友：「好久不見~我記得你之前幫誰誰畫的那個頭像挺不錯的~也幫我畫一個唄~我現(xiàn)在在做blablabla，需要*&%￥#……你明白吧？很簡單吧~謝謝啦」

我：「….」

Dajing：我的草稿本就是平時畫畫原型圖或者需要做文檔整理規(guī)范的時候拿出來畫畫草圖，對我來說我的草稿本是幫我理清思路的一個很好的助手。

手繪裝備：A4點(diǎn)格草稿本+馬克筆

 △ 智能配色草稿

△ 中后臺加框草稿

Dajing：里面有當(dāng)時做中后臺框架的時候?qū)Ш降脑?，還有之前做智能配色的時候HSB色環(huán)推演的草圖，還有些文檔維度整理草圖，畫出來方便查看也便于直觀梳理自己的邏輯。

Wanru：畫畫是我記錄生活、尋找靈感的一種方式。

手繪裝備：MUJI筆記本、水彩、鉛筆、馬克筆等等…

△ 沖繩旅行水彩

Wanru：水彩是我最喜歡的繪畫形式，非常浪漫，食物也是我擅長畫的題材。這是在沖繩旅行時的第一頓晚餐，新鮮的海鮮和爽口的啤酒也具有明亮的顏色，讓人忍不住想去表達(dá)。燒肉店的杯墊被我?guī)Я嘶貋?，日本的平面設(shè)計做得很好，是很好的素材～

△ 電影小漫畫

用小漫畫記日記的習(xí)慣已經(jīng)很多年了，我是非常喜歡漫威的，這是13年《鋼鐵俠3》上映和兩個朋友看電影的場景。這個場景必須用美漫的風(fēng)格了！偶爾會嘗試各種畫畫風(fēng)格。

△ 隨手小速寫

偶爾會畫些小速寫，勾一些人物、小物品、小動物，速寫可以很好地練習(xí)造型能力。

Zoey：作為一個熱愛喝奶茶、追番和打手游的肥胖又無助的設(shè)計師，感覺累了就在草稿本上放空自己。

手繪裝備：iPad Pro+Procreate & Sketches Pro

△ 記錄日常生活的草稿

Zoey：我很喜歡用草稿本記錄自己的生活（食物為主），喜歡的電影角色也會簡單畫下來。

△ 二次元小畫

作為半個二次元 ，草稿本當(dāng)然也被滿屏的羞恥占領(lǐng)~ 這兩張草稿是我畫的Persona 5里面的人物，因?yàn)槲覀€人真的特別喜歡P5 ，對于自己喜歡的事情即便996也會熬夜畫下去~

Dribbble 經(jīng)歷了資本入駐、創(chuàng)始人出走之后，最大的事情應(yīng)該就是這次改版吧？這個全球最大、最有影響力的設(shè)計師社區(qū)的每一個動作都必然會牽扯著每個設(shè)計從業(yè)者的注意力，新版背后到底有哪些變化？這些變化又是出于什么樣的想法來修改的？看看 Dribbble 的官博是怎么說的吧：

在過去的10年當(dāng)中，Dribbble 已經(jīng)成長成為一個全球性的社區(qū)，成千上萬的人從這里獲得啟發(fā)和靈感，助力設(shè)計，而我們從最初分享設(shè)計作品小樣的創(chuàng)意社區(qū)，逐步成長為一個全球設(shè)計師產(chǎn)品和作品集展示和社交的平臺。在此，而我們也第一次開始問自己一個簡單的問題：【我們到底是在做些什么？】

今天，我們很高興宣布，我們在過去的10年當(dāng)中首次進(jìn)行了徹底的重設(shè)計。

Dribbble 的新時代

在過去十年當(dāng)中，我們所設(shè)計的 Dribbble 頁面的特點(diǎn)，是將設(shè)計師的作品和內(nèi)容放在首位，所以叫我們不追隨潮流，采用了極簡風(fēng)格的設(shè)計，即使潮流來來去去，它們也只是 Dribbble 展示內(nèi)容的一部分。我們提供了一幅未經(jīng)修飾的畫布，這樣就可以和最瘋狂最激進(jìn)的設(shè)計探索相輔相成。不過，這么多年來，Dribbble 這種「隱形」的設(shè)計，在視覺美學(xué)上確實(shí)和時代脫節(jié)了。這次，我們創(chuàng)建了一套有著一致樣式的設(shè)計和代碼庫，用以替代以往不斷修改、龐大且不一致的代碼。

「我們新的設(shè)計系統(tǒng)旨在保持整個視覺和諧的同時，展示你的創(chuàng)造力?！?

如今，我們正在改進(jìn) Dribbble 的界面，以更加干凈的布局、統(tǒng)一的設(shè)計系統(tǒng)、更加簡化的配色方案、更加輕便的代碼庫（加載也更加迅速），以及全新配置的文件，來更好地幫你將作品推到最前沿，正確而合理地展示你的創(chuàng)作和個性。

我們新的設(shè)計系統(tǒng)旨在保持整個視覺和諧的同時，展示你的創(chuàng)造力。它是你分享設(shè)計作品和創(chuàng)造力的理想畫布，而新的美學(xué)特質(zhì)也可以更好地反應(yīng)此刻我們的公司的氣質(zhì)。

全新的設(shè)計師個人頁面

在進(jìn)行重設(shè)計的時候，我們明確知道，我們要完全重新思考社交化的設(shè)計師作品展示，并且將創(chuàng)意更大化地呈現(xiàn)。對于 Dribbble Pro 用戶和 Pro Business 訂閱者，你現(xiàn)在擁有一個全新的、經(jīng)過全面修改的設(shè)置和配置頁面，可以在 Dribbble 上充分展示自己的個性，

你的頁面，你的個性

Pro 用戶和 Pro Business 用戶可以通過上傳你自己的首圖和定制化的歡迎語，來個性化你的個頁面。

你還會注意到，你的個人頁面還可以上傳更大的照片，這可以讓你的作品對于頁面的訪客、你的客戶、招聘設(shè)計師的企業(yè)人事而言，看起來都是非常出挑的。新的網(wǎng)格布局是可以自定義的，因此你可以充分完美地設(shè)置和展示內(nèi)容。

此外，我們還修改了「關(guān)于我們」這個部分，新版當(dāng)中，這個部分你可以將所有的個人信息匯集到一起，以便完整而充分地展示你的個人經(jīng)歷、展示簡歷和技能。

尋求工作機(jī)會？

如果你正在尋求工作機(jī)會，新的信息發(fā)送組件，確保了你的客戶或者招聘企業(yè)可以一鍵聯(lián)系到你，他們可以直接從你的個人資料頁向你發(fā)送信息，非常輕松地和你取得聯(lián)系。

面向所有人的新個人頁面

當(dāng)然，并非是只有 Pro 和 Pro Business 用戶才能擁有高度定制化的個人頁面，無論你是普通用戶、內(nèi)容創(chuàng)作者還是內(nèi)容策劃人，Dribbble 上每個普通用戶的個人頁面也都會升級。尚未訂閱 Pro 服務(wù)的設(shè)計師會注意到，他們的個人頁面會更加簡潔，而設(shè)計作品會以更加聚焦的形式，吸引到每一個訪客的目光。

全新的收藏頁

我們將以往的帶有分享功能的收藏合集頁（之前叫 Buckets）給翻新了，你可以精心策劃整頁內(nèi)容和案例，從一個情緒板到完整的項(xiàng)目，這意味著，借助這個收藏頁功能，你可以更加輕松地在 Dribbble 上尋找和搜集靈感。

給策劃人的個人頁面

現(xiàn)在，我們可以非常自豪地宣布，即使你并沒有將 Dribbble 作品給分享出來，每個人也都會擁有一個策劃人頁面，你可以在其中搜集和整理自己喜歡的作品，來展示你的個人品味，通過保存別人的作品，來創(chuàng)建新的合集，我們會自動將它添加到你的個人頁資料頁當(dāng)中，讓全世界的同好因?yàn)槠肺欢P(guān)注你。

升級發(fā)現(xiàn)頁

我們在整個改版設(shè)計過程中，面臨最大的挑戰(zhàn)，其實(shí)是圖片網(wǎng)格，因?yàn)檫@是絕大多數(shù)用戶每天瀏覽圖片、發(fā)現(xiàn)設(shè)計靈感的地方，我們有意識地去弱化 Dribbble 本身 UI，避免喧賓奪主，讓每個用戶的作品成為視覺焦點(diǎn)，減少噪音。

當(dāng)然，我們還未完成…

2020 年才剛剛開始，我們迫不及待地想要展示我們計劃中的一切。從案例研究到更好的視頻支持，再到作品集展示，擺在我們眼前的改版路線圖足以證明我們的雄心，所有的這一切都是為了讓全球的設(shè)計師能夠從中獲益，走向成功。請期待我們進(jìn)一步的改版升級吧！

文章來源：優(yōu)設(shè)    作者：Dribbble

快速變化的技術(shù)每年都在影響著設(shè)計趨勢。作為設(shè)計師，我們需要時刻保持關(guān)注，對設(shè)計趨勢擁有較高的敏感度，不斷學(xué)習(xí)，擴(kuò)充自己的設(shè)計技能，目的是為了跟上的市場環(huán)境?；谖业恼{(diào)研，經(jīng)驗(yàn)和觀察，我甄選了在2020年你將會看到的最為關(guān)鍵的8個UI/UX設(shè)計趨勢。讓我們一起來看看吧。

動效插圖

插圖被應(yīng)用到APP中已經(jīng)有很長一段時間了，它們在最近幾年的演變令人印象深刻。插圖作為一種非常流行的設(shè)計元素，為我們產(chǎn)品的整體產(chǎn)品增加了情感化體驗(yàn)。插圖非常能抓人眼球，尤其是在融入動效后會顯得更加的自然，將產(chǎn)品帶入生活的氣息，使得產(chǎn)品功能更加突出，同時也增添了更多的細(xì)節(jié)和個性。

△ Welcome to Swiggy by Saptarshi Prakash

△ Onboarding animations — Virgil Pana

另一個好處是使用動效后，能抓住用戶的注意力使其能夠更加沉浸在你的產(chǎn)品中。動效同樣是講好品牌故事，產(chǎn)品或者服務(wù)最有影響力的途徑之一。

微交互

微交互存在與每一個網(wǎng)頁或者app界面中。每當(dāng)打開你最喜歡的那些應(yīng)用時，都有機(jī)會看到它們，比如像Facebook中就有大量不同的微交互，我認(rèn)為「Like」功能就是一個完美的例子。有時，我們幾乎意識不到它的存在，因?yàn)樗鼈兎浅５牟伙@眼，非常自然地融到界面中去了。但是，如果當(dāng)你把這些微交互移除掉的話，你又會非?？斓淖⒁獠⒛芨惺艿揭恍┓浅Ｖ匾臇|西丟失了。

△ Menu toggle close animation — Aaron Iker

△ Tab bar active animation — Aaron Iker

一般來說，在UI/UX中即使非常小和細(xì)節(jié)處的設(shè)計都可能會帶來巨大的沖擊力。微交互就是完美的證明，細(xì)節(jié)和對它的關(guān)注能極大的改善產(chǎn)品的整體體驗(yàn)，并讓產(chǎn)品體驗(yàn)上升一個臺階。每年，新設(shè)備的發(fā)布伴隨著新的機(jī)會，能給產(chǎn)品塑造新品牌和創(chuàng)造富有創(chuàng)意的微交互。

3D圖形

3D圖形設(shè)計幾乎無處不在，比如在電影，游戲或者運(yùn)營廣告里等等。3D圖形設(shè)計早在10年前就出現(xiàn)了然后一直在不斷提升和進(jìn)化。手機(jī)和web技術(shù)進(jìn)展迅猛，新的web瀏覽器能力打開了3D設(shè)計新世界的大門，這給了設(shè)計師們在web和手機(jī)界面中創(chuàng)造炫酷3D設(shè)計的機(jī)會。

△ 3D flip menu by Minh Pham

△ Car health report UI by Gleb Kuznetsov

創(chuàng)造并整合這些3D創(chuàng)意設(shè)計到web和手機(jī)界面中需要特殊的技能和花費(fèi)大量的工作，但這些付出會得到回報。

△ Apple AirPods Pro landing page

3D設(shè)計對于產(chǎn)品和服務(wù)來說，具有非常大的吸引力，例如在交互上能夠支持用戶360度查看產(chǎn)品，從而大大提升整個的產(chǎn)品體驗(yàn)。

在2020年會有更多的品牌利用3D渲染模型的產(chǎn)品和服務(wù)去模仿線下購物體驗(yàn)。

VR設(shè)計

VR技術(shù)在2019年有一個巨大的飛躍。最近的一年我們激動地看到了頭戴式設(shè)備有了非常大的發(fā)展，尤其是在游戲領(lǐng)域。我們需要記住的是，游戲行業(yè)經(jīng)常在引領(lǐng)著新技術(shù)的發(fā)展并落地到實(shí)際的產(chǎn)品設(shè)計中。研究表明，VR也不例外，在Oculus Quest于2019年推出后，許多機(jī)會為其他行業(yè)打開了大門。Facebook CEO 扎克伯格已經(jīng)測試了激動人心的手部交互功能，并正式宣布將在2020年初為Quest進(jìn)行更新。

△ Oculus Quest — hand interaction feature

△ PlayStation Virtual Reality Website Design by Kazi Mohammed Erfan

索尼和微軟計劃在2020年夏季發(fā)布他們的新設(shè)備，這就給VR技術(shù)帶來巨大的機(jī)會和發(fā)展空間。

學(xué)習(xí)VR 可以閱讀優(yōu)設(shè)這個專題：https://www.uisdc.com/zt/vr-design

AR設(shè)計

在最近幾年，我們能看到在AR（增強(qiáng)現(xiàn)實(shí)）這塊有了很大的進(jìn)步和驚喜。世界引領(lǐng)著科技公司在AR開發(fā)方面進(jìn)行了巨大的投入，所以我們應(yīng)該期待這項(xiàng)技術(shù)在2020年有更大的成長和發(fā)展。蘋果公司也發(fā)布了他們自己的AR套件叫AR KIT3來幫助設(shè)計師和開發(fā)者在他們的產(chǎn)品中打造AR體驗(yàn)。

△ Apple ARKit 3 by Apple

△ Public transit app by Yi Li

△ House of Plants AR Concept by Nathan Riley

在AR空間里會有無限的機(jī)會和創(chuàng)意去打造一個新的品牌和激動人心的體驗(yàn)。為AR做UI設(shè)計會在2020年成為一大趨勢，這就要求設(shè)計師們在面對創(chuàng)造AR產(chǎn)品體驗(yàn)前，應(yīng)該去準(zhǔn)備和抓緊學(xué)習(xí)新的工具，原型之類的知識。

學(xué)習(xí)AR 可以閱讀優(yōu)設(shè)這個專題：https://www.uisdc.com/zt/ar-design

新擬物化設(shè)計

一般來說，擬物化設(shè)計是指以現(xiàn)實(shí)風(fēng)格/方式創(chuàng)造出來與現(xiàn)實(shí)中的物體相匹配的設(shè)計元素。不斷發(fā)展的VR/AR技術(shù)以及在各大最流行設(shè)計平臺（Dribbble,Behance等）上展示的設(shè)計作品趨勢來看，預(yù)示著擬物化的回歸，但這次換了個更現(xiàn)代，更酷略微高大上的名字叫「新擬物風(fēng)」（也叫Neumorphism）。

△ Skeuomorph Mobile Banking | Dark Mode by Alexander Plyuto

△ Simple Music Player by Filip Legierski

△ Sleep Cycle App — Neumorphism Redesign by Devanta Ebison

你可能注意到了：Neumorphism代表了豐富細(xì)節(jié)和明確的一種設(shè)計風(fēng)格。高光，投影，發(fā)光，這些細(xì)節(jié)非常令人印象深刻。Neumorphism風(fēng)格已經(jīng)鼓舞了全世界一大批的設(shè)計師創(chuàng)作作品，它也會成為2020年最大的設(shè)計趨勢。

學(xué)習(xí)新擬物風(fēng)可以閱讀優(yōu)設(shè)這個專題：https://www.uisdc.com/zt/neumorphism

不對稱布局

最近一年我們也注意到一種不對稱風(fēng)格正在快速發(fā)展。傳統(tǒng)基于「模板」的布局肯定會消失。這種設(shè)計趨勢給2020年的設(shè)計帶來了更多的差異化。合適的不對稱風(fēng)格將會在我們的作品中增多一大批不同的性格，火力以及個性，所以設(shè)計不再單純的基于模板。

△ Limnia Fine Jewelry Grid — Zhenya Rynzhuk

△ Carine fashion store — selection screen concept — Dawid Tomczyk

當(dāng)設(shè)計這種不對稱風(fēng)格時，設(shè)計師擁有非常多的選項(xiàng)以及巨大的發(fā)揮空間。但是，想設(shè)計好這種不對稱風(fēng)格需要大量的練習(xí)，它絕不是將元素隨機(jī)的擺放在網(wǎng)格中，而應(yīng)該小心使用和實(shí)現(xiàn)它們，時刻需要把用戶的訴求考慮到設(shè)計中。我們并不想讓用戶迷失在我們的產(chǎn)品中，對嗎？

用戶故事

故事在整個用戶體驗(yàn)中扮演著非常重要的角色。你可能經(jīng)常會在著落頁看到它作為品牌介紹，產(chǎn)品或者一個新的服務(wù)。講故事就是利用創(chuàng)意的形式把信息傳遞給用戶。這可以通過強(qiáng)大的視覺元素來呈現(xiàn)（字體，插畫，高清圖片，顏色，動畫，交互元素）。

△ A+WQ / Young Lab Page Story of The Week Animation by Zhenya Rynzhuk

△ Free Sketch Template :: Mimini by Tran Mau Tri Tam

講故事可以幫助產(chǎn)品創(chuàng)造出品牌和用戶之間積極的情感連接。講故事可以為你的產(chǎn)品創(chuàng)造出非常多的記憶點(diǎn)，讓用戶感受到自己就是產(chǎn)品或服務(wù)的一部分，他們便會更加愿意使用你的產(chǎn)品。話雖如此，講故事也是一種非常有效的營銷手段，它可以極大地提高你的產(chǎn)品/服務(wù)的銷量。講故事作為一種非常成功的手段，將在2020年繼續(xù)發(fā)揚(yáng)光大。

總結(jié)在2020年非常值得關(guān)注的8個設(shè)計趨勢

1. 動態(tài)插圖

通過把動畫和插圖進(jìn)行結(jié)合，我們可以使得設(shè)計變得更加突出，并把它帶入用戶的日常生活，為產(chǎn)品賦予了的細(xì)節(jié)和個性化。

2. 微交互

微交互被證明是可以在當(dāng)用戶注意到他們是能夠帶來非常大的驚喜體驗(yàn)，它能夠有效的提升整個產(chǎn)品的用戶體驗(yàn)并把產(chǎn)品的品質(zhì)提升一個等級。

3. 3D圖形的應(yīng)用

新的瀏覽器技術(shù)打開了3D圖形應(yīng)用的大門，能夠給設(shè)計師帶來非常大的創(chuàng)意機(jī)會去打造讓人驚嘆的3D圖形設(shè)計應(yīng)用到網(wǎng)頁和手機(jī)APP中。

4. 虛擬現(xiàn)實(shí)

游戲行業(yè)將迎來新的變革，新的技術(shù)能夠應(yīng)用到產(chǎn)品設(shè)計中。

5. 增強(qiáng)現(xiàn)實(shí)

在AR空間中擁有無限的機(jī)會去創(chuàng)造新的品牌和令人激動的新體驗(yàn)。為AR技術(shù)服務(wù)的UI設(shè)計將在2020年成為主要趨勢，設(shè)計師需要位為之準(zhǔn)備并去學(xué)習(xí)新的工具，原型，當(dāng)真的需要你去做一款A(yù)R應(yīng)用時就需要用到。

6. 新擬物風(fēng)

AR/VR技術(shù)不斷發(fā)展，以及在各大流行設(shè)計平臺上大量涌現(xiàn)的寫實(shí)設(shè)計作品預(yù)示著擬物風(fēng)的回歸，但只是這次換了個新的更加現(xiàn)代化的名字。

7. 不對稱布局

運(yùn)用不對稱布局能讓設(shè)計創(chuàng)意變得擁有更多選項(xiàng)和機(jī)會。雖然，設(shè)計一個成功的不對稱布局需要投入大量的練習(xí)和時間。

8. 講故事

講故事就是利用創(chuàng)意形式把信息傳遞給用戶。講故事是一個非常好的營銷工具，可能會大大增長產(chǎn)品的銷售額或服務(wù)。

文章來源：優(yōu)設(shè)    作者：彩云譯設(shè)計

最近關(guān)于新擬物化 Neumorphism 的風(fēng)太大，簡直是傳遍大江南北無人不知。對于它的看法大家也都眾說紛紜，大部分的觀點(diǎn)都集中于：第一看過去非常的高大上，再仔細(xì)琢磨一下就感覺只能是飛機(jī)稿中的戰(zhàn)斗稿。對此我表示非常的理解，畢竟在國內(nèi)體制下的用戶界面設(shè)計基本都延續(xù)商業(yè)設(shè)計的命脈──低效能、不實(shí)用、不能帶來良好轉(zhuǎn)化的東西統(tǒng)統(tǒng)給我丟掉，哪怕是用戶體驗(yàn)也是建立在商業(yè)目標(biāo)驅(qū)動下的存在。

盡管觀點(diǎn)如此，我還是想為新擬物化這位誕生在不平凡 2020 年的新生兒稍稍正個身，它并非空穴來風(fēng)，也并非完全無法落地使用，相反如果合理加以優(yōu)化應(yīng)該能達(dá)到意想不到的雙贏效果。

新擬物化的由來

一切的開始都源于一個叫 Alexander Plyuto 的設(shè)計師在各平臺發(fā)布了一個他的新作品──「Skeuomorph Mobile Banking（擬物化手機(jī)銀行）」。

在去年末的時候這名設(shè)計師還一直沿用 Skeuomorph（擬物化）這個名詞來命名自己的一系列設(shè)計作品，直到 HYPE4 的 CEO-Michal Malewicz 寫了一篇關(guān)于此風(fēng)格的文章，并賦予了它一個新名詞 Neumorphism（New+Skeuomorphism），自此之后大家就都照著這個新名詞進(jìn)行傳播了。

在詳解新風(fēng)格之前，先讓我們回憶一下這些年移動端用戶界面設(shè)計風(fēng)格的演變歷程。自 2013 年蘋果推出了 iOS7 之后開始刮起的扁平風(fēng)潮，所有走在設(shè)計前沿的大廠都開始不約而同地對自己家的 app 進(jìn)行了大刀闊斧的改版。

這扁平風(fēng)一刮就是 7 年，仔細(xì)分析一下就能明白為何 ta 如此長壽：內(nèi)容優(yōu)先的認(rèn)知簡約，不僅拓展性強(qiáng)且具有能的特性，解放了一大堆「手活」不是那么好的設(shè)計師，讓他們有更多時間專注在設(shè)計解決問題的命題上。

但就算一個風(fēng)格再適應(yīng)市場的需求，用戶和時代還是會對它逐漸疲憊，審美疲勞和新的市場需求都會催生新的變革。

新擬物化設(shè)計語言解析

1. 新擬物化≠輕擬物

第一次看到這個風(fēng)格介紹的時候險些以為就是曾經(jīng)的輕擬物重返江湖了，但仔細(xì)看看原設(shè)計師輸出的設(shè)計原則，發(fā)現(xiàn)確實(shí)是完全不同的 2 種定義。

輕擬物從本質(zhì)上來說是 Y 軸面原質(zhì)化層級分離的，而新擬物是在 Y 軸面不分離的情況下物理化擬態(tài)。

來看一個輕擬物與新擬物卡片的比對：

從上圖可以感受到新擬物在保留輕質(zhì)感的同時，更貼近事物的物理還原，但真實(shí)感與舒適度帶來的代價就是它的辨識度和對比度明顯較其他風(fēng)格低了很多，這也是它被大家吐槽飛機(jī)稿中的戰(zhàn)斗稿的重要原因之一。

2. 新擬物化控件示例

原設(shè)計師對新擬物化的「淺色版」控件規(guī)范如下，基本涵蓋了核心的界面設(shè)計控件，整體對于控件的定義就在于良好使用投影和漸變來打造物理化界面肌理。

另外還有可以良好適配當(dāng)前流行黑色模式的「黑色版」。

新擬物化的改良與應(yīng)用

在了解新擬物化的設(shè)計語言特點(diǎn)之后，大家應(yīng)該都發(fā)現(xiàn)這種風(fēng)格的設(shè)計是有一定局限性的，它并不適用于一部分商業(yè)產(chǎn)品，大部分時候也不適合全局控件應(yīng)用。那么如果我們想要把新擬物化應(yīng)用到我們的落地項(xiàng)目設(shè)計中，需要注意哪些地方，并進(jìn)行什么樣的改良呢？

1. 深淺模式疊加解決弱可視難題

新擬物的按鈕肌理很多是建立在素色白板上的淺色按鈕，如果繼續(xù)沿用淺色按鈕，且不說色弱用戶的可視問題，普通用戶的操作行為也會大打折扣，所以這里我們建議將新擬物的深淺模式疊加來使用，如下圖：

2. 局部高光使用解決層級難辨問題

如果將新擬物化全控制使用，確實(shí)容易造成界面層級混亂的問題，因?yàn)楫吘顾脑O(shè)計語言就是 Y 軸面不分離的設(shè)計定義，但如果我們合理選擇它來作為局部高光，應(yīng)該大部分情況下還是不錯的。如下圖，我們僅在銀行卡部分使用新擬物化（深淺雙模式均可用），其他的控件部分保持扁平，使用 2 個風(fēng)格相融合的方式可以良好保障層級的劃分：

3. 拿什么解決開發(fā)崩潰的問題？

之前看到很多文章在轉(zhuǎn)發(fā)一個生成新擬物化 css 代碼的網(wǎng)站：Neumorphism.io，說是用這個就可以輕松解決開發(fā)的問題。

然而事實(shí)的真相總是令人落淚的，這個網(wǎng)站提供的 css 代碼只是網(wǎng)頁代碼，移動端是完全用不了的。而且就算有對應(yīng)的 css 代碼，對于開發(fā)來說也是遠(yuǎn)不夠的，他們還是要寫框架來支持這套 css 代碼，不然是跑不起來的。所以我們要如何解決開發(fā)小哥哥手寫新擬物化設(shè)計稿崩潰的問題呢？

很簡單，就是給他們切圖。按鈕的軟點(diǎn)擊切兩張狀態(tài)圖，卡片背景只需要切一張，ppduck 壓縮走一波，對 app 性能的影響基本可以忽略不計（因?yàn)樯衔奈乙舱f過了這種風(fēng)格不大可能大面積或者全界面應(yīng)用）。

至于新擬物風(fēng)不適用的場景大家應(yīng)該都心知肚明了，信息承載大，層級關(guān)系復(fù)雜，我就不一一舉例了，基本就涵蓋了大部分現(xiàn)在市面上主流的產(chǎn)品的大部分場景。但即便如此我們還是需要對新的設(shè)計保有一絲激情與希望，不要輕易的去否定，畢竟新生事物總是有它的魅力與獨(dú)到之處。

文章來源：優(yōu)設(shè)    作者：Nana的設(shè)計錦囊

在一個asp.net 的項(xiàng)目中，前端通過ajax將富文本中的文字內(nèi)容post到服務(wù)端的一個ashx中，在ashx中嘗試讀取參數(shù)值時，

結(jié)果報錯：“從客戶端中檢測到有潛在危險的 Request.Form 值”

#事故分析
由于在asp.net中，Request提交時出現(xiàn)有html代碼字符串時，程序系統(tǒng)會認(rèn)為其具有潛在危險的值。會報出“從客戶端 中檢測到有潛在危險的Request.Form值”這樣的Error。

而富文本中的內(nèi)容是包含html代碼的，所以...

#解決方案：
1、前端對富文本字符串進(jìn)行encodeURI編碼，服務(wù)端進(jìn)行HttpUtility.UrlDecode解碼操作；
前端代碼：

var str = '<p><span style="color: #00B0F0;"><em><strong>我想留在你的身邊，</strong></em></span><br/></p><p><span style="color: #7030A0;"><strong><span style="text-decoration: underline;">深情款款多么可憐；</span></strong></span></p>';
    $(function() {
        $.ajax({
            type: "post",
            url: "TestHandle.ashx",
            data: { Title: 'jack', Content: encodeURI(str) },
            success: function (data) {
                $("#div").html(data);
            }
        });
    });
后端代碼：

    public void ProcessRequest(HttpContext context)
    {
        string str = context.Request["content"];
        string content = HttpUtility.UrlDecode(str);
        context.Response.ContentType = "text/plain";
        context.Response.Write(content);
    }
效果圖：

2、前端不以form的方式提交，直接以json方式提交，服務(wù)端從request的body中讀取數(shù)據(jù)，然后反序列化，得到信息；
前端代碼：

    var str = '<p><span style="color: #00B0F0;"><em><strong>我想留在你的身邊，</strong></em></span><br/></p><p><span style="color: #7030A0;"><strong><span style="text-decoration: underline;">深情款款多么可憐；</span></strong></span></p>';
    var temp = { Title: 'jack', Content: str };
    $.ajax({
        type: "post",
        url: "TestHandle.ashx",
        contentType:"application/json;charset=utf-8",
        data: JSON.stringify(temp),
        success: function (data) {
            $("#div").html(data);
        }
    });
后端代碼：

    string bodyText;
    using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream))
    {
        bodyText = bodyReader.ReadToEnd();
    }
    dynamic bodyObj = JsonConvert.DeserializeObject(bodyText);
 
    context.Response.ContentType = "text/plain";
    context.Response.Write(bodyObj.Content);
效果圖：

#其他場景的解決方案：
1、aspx頁面，當(dāng)前頁面進(jìn)行form提交
打開當(dāng)前.aspx頁面，頁頭加上代碼：validateRequest=”false”，如：

<%@ Page Language="C#" ValidateRequest="false" AutoEventWireup="false" CodeFile="default.aspx.cs" Inherits="default" %>
該方法不推薦，還有一種修改web.config配置文件的方法，強(qiáng)烈不推薦，就不寫在這里了；

2、在ASP.NET MVC中的解決方案
1）、針對某個實(shí)體類的單個字段設(shè)置 [AllowHtml] ，這樣提交的時候，系統(tǒng)就會放過該字段。

2）、前端代碼：

    var str = '<p><span style="color: #00B0F0;"><em><strong>我想留在你的身邊，</strong></em></span><br/></p><p><span style="color: #7030A0;"><strong><span style="text-decoration: underline;">深情款款多么可憐；</span></strong></span></p>';
    $(function () {
        $.ajax({
            type: "post",
            url: "Home/Test",
            data: { Title: 'jack', Content: str },
            success: function (data) {
                $("#div").html(data.ok);
            }
        });
    });
3）、后端代碼：

    public class NewInfo
    {
        public string Title { get; set; }
        [AllowHtml]
        public string Content { get; set; }
    }
 #寫在最后
 該文只是淺顯的總結(jié)一下，其中涉及的xss方面，沒有詳細(xì)考慮，歡迎指正！

前言

開發(fā)中，經(jīng)常會用到j(luò)s的Array數(shù)組的各種迭代函數(shù)map()，filter()，some()，every()，forEach()，find() findIndex()，也是在ES6中新增一些遍歷函數(shù)。同樣是不是也是一道面試題，說說ES6新增的一些新特性？？？？



?開始正文some()函數(shù)



?一、對some()函數(shù)的定義：



some()：用于檢測數(shù)組中的元素是否滿足指定條件（函數(shù)提供）；

some()方法會依次執(zhí)行數(shù)組中的每一個元素：



如果有一個元素滿足條件，則表達(dá)式返回true，剩余的元素不會再執(zhí)行檢測。

如果沒有滿足條件的元素，則返回false。

注意：



some()不會對空數(shù)組進(jìn)行檢測。

some() 不會改變原始數(shù)組。

?二、瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個瀏覽器的版本號。



?三、語法



array.some(function(currentValue,index,arr),thisValue)

1

參數(shù)說明：



?三、示例



<script>

var ages = [4, 12, 16, 20];



function checkAdult(age) {

    return age >= document.getElementById("ageToCheck").value;

}



function myFunction() {

    document.getElementById("demo").innerHTML = ages.some(checkAdult);

}

</script>