JSP的刨根問(wèn)底

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







• 分類(lèi)






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
















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

可以理解為：一個(gè)特殊的頁(yè)面，其中既可以指定定義html標(biāo)簽，又可以定義java代碼
用于簡(jiǎn)化書(shū)寫(xiě)?。?！
二.原理
本質(zhì)是一個(gè)Servlet

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

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

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

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

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

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

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

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

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

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

<jsp:plugin  
  type="bean | applet"   : 被執(zhí)行的java程序的類(lèi)型
  code="classFileName" ：被執(zhí)行的文件名，必須以  .class 結(jié)尾
  codebase="classFileDirectoryName"   ：被執(zhí)行文件的所在目錄
  [ name="instanceName" ] :給程序起一個(gè)名字用來(lái)標(biāo)識(shí)該程序
  [ archive="URIToArchive, ..." ] ：指向一些要預(yù)先載入的將要使用到的類(lèi)
  [ 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時(shí)，顯示該指令中的文本提示
 <jsp:plugin>










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

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

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

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

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


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

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

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

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

JavaScript中的混淆器

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



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



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



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





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

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

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

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





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

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

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

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

區(qū)分顏色模式

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

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

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

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

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

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

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

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

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

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

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

配色推導(dǎo)

支付寶 Alipay Design 團(tuán)隊(duì)提出過(guò)一個(gè)配色原則：

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

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

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

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

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

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

步驟二：提取24色

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

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

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

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

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

步驟三：找到同色系配色

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

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

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

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

步驟四：多色搭配

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

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

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

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

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

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

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

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

步驟六：全色系輸出

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

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

總結(jié)

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

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

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

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

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

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

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

手繪裝備：iPad Pro+Procreate

以下是被迫營(yíng)業(yè)現(xiàn)場(chǎng)對(duì)話

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

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

我：「….」

△ 給「朋友」畫(huà)的頭像草稿

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

我：「….」

Dajing：我的草稿本就是平時(shí)畫(huà)畫(huà)原型圖或者需要做文檔整理規(guī)范的時(shí)候拿出來(lái)畫(huà)畫(huà)草圖，對(duì)我來(lái)說(shuō)我的草稿本是幫我理清思路的一個(gè)很好的助手。

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

 △ 智能配色草稿

△ 中后臺(tái)加框草稿

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

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

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

△ 沖繩旅行水彩

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

△ 電影小漫畫(huà)

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

△ 隨手小速寫(xiě)

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

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

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

△ 記錄日常生活的草稿

Zoey：我很喜歡用草稿本記錄自己的生活（食物為主），喜歡的電影角色也會(huì)簡(jiǎn)單畫(huà)下來(lái)。

△ 二次元小畫(huà)

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

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

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

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

Dribbble 的新時(shí)代

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

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

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

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

全新的設(shè)計(jì)師個(gè)人頁(yè)面

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

你的頁(yè)面，你的個(gè)性

Pro 用戶和 Pro Business 用戶可以通過(guò)上傳你自己的首圖和定制化的歡迎語(yǔ)，來(lái)個(gè)性化你的個(gè)頁(yè)面。

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

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

尋求工作機(jī)會(huì)？

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

面向所有人的新個(gè)人頁(yè)面

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

全新的收藏頁(yè)

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

給策劃人的個(gè)人頁(yè)面

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

升級(jí)發(fā)現(xiàn)頁(yè)

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

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

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

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

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

動(dòng)效插圖

插圖被應(yīng)用到APP中已經(jīng)有很長(zhǎng)一段時(shí)間了，它們?cè)谧罱鼛啄甑难葑兞钊擞∠笊羁?。插圖作為一種非常流行的設(shè)計(jì)元素，為我們產(chǎn)品的整體產(chǎn)品增加了情感化體驗(yàn)。插圖非常能抓人眼球，尤其是在融入動(dòng)效后會(huì)顯得更加的自然，將產(chǎn)品帶入生活的氣息，使得產(chǎn)品功能更加突出，同時(shí)也增添了更多的細(xì)節(jié)和個(gè)性。

△ Welcome to Swiggy by Saptarshi Prakash

△ Onboarding animations — Virgil Pana

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

微交互

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

△ Menu toggle close animation — Aaron Iker

△ Tab bar active animation — Aaron Iker

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

3D圖形

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

△ 3D flip menu by Minh Pham

△ Car health report UI by Gleb Kuznetsov

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

△ Apple AirPods Pro landing page

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

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

VR設(shè)計(jì)

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

△ Oculus Quest — hand interaction feature

△ PlayStation Virtual Reality Website Design by Kazi Mohammed Erfan

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

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

AR設(shè)計(jì)

在最近幾年，我們能看到在AR（增強(qiáng)現(xiàn)實(shí)）這塊有了很大的進(jìn)步和驚喜。世界引領(lǐng)著科技公司在AR開(kāi)發(fā)方面進(jìn)行了巨大的投入，所以我們應(yīng)該期待這項(xiàng)技術(shù)在2020年有更大的成長(zhǎng)和發(fā)展。蘋(píng)果公司也發(fā)布了他們自己的AR套件叫AR KIT3來(lái)幫助設(shè)計(jì)師和開(kāi)發(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空間里會(huì)有無(wú)限的機(jī)會(huì)和創(chuàng)意去打造一個(gè)新的品牌和激動(dòng)人心的體驗(yàn)。為AR做UI設(shè)計(jì)會(huì)在2020年成為一大趨勢(shì)，這就要求設(shè)計(jì)師們?cè)诿鎸?duì)創(chuàng)造AR產(chǎn)品體驗(yàn)前，應(yīng)該去準(zhǔn)備和抓緊學(xué)習(xí)新的工具，原型之類(lèi)的知識(shí)。

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

新擬物化設(shè)計(jì)

一般來(lái)說(shuō)，擬物化設(shè)計(jì)是指以現(xiàn)實(shí)風(fēng)格/方式創(chuàng)造出來(lái)與現(xiàn)實(shí)中的物體相匹配的設(shè)計(jì)元素。不斷發(fā)展的VR/AR技術(shù)以及在各大最流行設(shè)計(jì)平臺(tái)（Dribbble,Behance等）上展示的設(shè)計(jì)作品趨勢(shì)來(lái)看，預(yù)示著擬物化的回歸，但這次換了個(gè)更現(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è)計(jì)風(fēng)格。高光，投影，發(fā)光，這些細(xì)節(jié)非常令人印象深刻。Neumorphism風(fēng)格已經(jīng)鼓舞了全世界一大批的設(shè)計(jì)師創(chuàng)作作品，它也會(huì)成為2020年最大的設(shè)計(jì)趨勢(shì)。

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

不對(duì)稱(chēng)布局

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

△ Limnia Fine Jewelry Grid — Zhenya Rynzhuk

△ Carine fashion store — selection screen concept — Dawid Tomczyk

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

用戶故事

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

△ 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ù)的一部分，他們便會(huì)更加愿意使用你的產(chǎn)品。話雖如此，講故事也是一種非常有效的營(yíng)銷(xiāo)手段，它可以極大地提高你的產(chǎn)品/服務(wù)的銷(xiāo)量。講故事作為一種非常成功的手段，將在2020年繼續(xù)發(fā)揚(yáng)光大。

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

1. 動(dòng)態(tài)插圖

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

2. 微交互

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

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

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

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

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

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

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

6. 新擬物風(fēng)

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

7. 不對(duì)稱(chēng)布局

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

8. 講故事

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

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

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

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

新擬物化的由來(lái)

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

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

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

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

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

新擬物化設(shè)計(jì)語(yǔ)言解析

1. 新擬物化≠輕擬物

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

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

來(lái)看一個(gè)輕擬物與新擬物卡片的比對(duì)：

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

2. 新擬物化控件示例

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

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

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

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

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

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

2. 局部高光使用解決層級(jí)難辨問(wèn)題

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

3. 拿什么解決開(kāi)發(fā)崩潰的問(wèn)題？

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

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

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

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

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

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

結(jié)果報(bào)錯(cuò)：“從客戶端中檢測(cè)到有潛在危險(xiǎn)的 Request.Form 值”

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

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

#解決方案：
1、前端對(duì)富文本字符串進(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);
效果圖：

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

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

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

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; }
    }
 #寫(xiě)在最后
 該文只是淺顯的總結(jié)一下，其中涉及的xss方面，沒(méi)有詳細(xì)考慮，歡迎指正！

前言

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



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



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



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

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



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

如果沒(méi)有滿足條件的元素，則返回false。

注意：



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

some() 不會(huì)改變?cè)紨?shù)組。

?二、瀏覽器支持

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



?三、語(yǔ)法



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

1

參數(shù)說(shuō)明：



?三、示例



<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>