UI設計基礎知識和JavaScript

時間 2019-12-07

原文原文鏈接

【PS基礎案例】javascript

人物修圖。調整畫布大小，創建3個圖層，並列放到畫布中，用修補工具修掉中間的人物，再用橡皮章蓋掉邊緣的人物，而後扣出人物，放上新的藍天，用橡皮擦調整透明度，擦掉水天交接的地方，而後調整色階，最後點第三個圖層，編輯，內容識別比例，把腿部拉長，而後用濾鏡，液化，修飾臉型。java

森林光線。選擇，色彩範圍，高光，新建圖層，複製，徑向模糊，若是光感不強則繼續新建複製，滿意後合併圖層調整色階，還能夠調整光的位置，經過橡皮擦擦掉不天然的光線。函數

表情包。鋼筆和橢圓工具的綜合運用，ctrl+r打開標尺，用標尺比着畫。GIF。工具

各類蒙版，邁克爾。先弄一我的影，而後依次打開圖片，建立剪切蒙版，而後經過漸變進行調整，最後加上文字。蒙版一共有4種，直接建立蒙版，經過黑白灰影響畫面顏色的明暗對比，建立剪切蒙版，如邁克爾的那個例子，在通道中創建蒙版，用來扣對比度比較明顯的有頭髮絲的人物，在左下角還有個按鈕，以快速蒙版方式編輯，能夠對所選區域作一些邊緣的處理。字體

透視原理，變形金剛。經過扭曲變形造成立體感，複製多個圖層，擦掉下部，而後打開另外一個圖層，經過濾鏡素描畫，造成素描效果，擦掉擋住手的部分，而後打開另外一個圖層，經過圖層效果的顏色疊加，疊加成灰色，而後拖動位置，造成陰影，擦掉多餘部分。網站

光束的製做。複製一個黑色背景，而後新建一個圖層，打開漸變色選擇第二個，兩頭都選白色，按住shitf橫向拉到頭，而後ctrl+t，拉到畫圖的一半，而後複製圖層，選擇水平反轉，調整位置造成光束，而後合併圖層，ctrl+t上下拉長，透視，上面左右兩個角拉到中間。spa

通道扣圖，通道，選擇對比明顯的顏色，而後複製圖層進行編輯，圖像調整反相，調整色階增長對比度，而後用前景色爲白色的畫筆，塗掉黑色部分，而後將通道做爲選擇載入，以後回到圖層直接建立蒙版。設計

頭髮變成樹林。先扣圖，頭髮能夠簡略扣，而後刪除多餘部分，選擇通道，選擇對比度明顯的顏色，複製圖層，調整色階，ctrl左鍵點擊圖層的小圖案創建選區，回到原來圖層，創建蒙版，而後把另外一個圖片打開，調整大小，放好位置後創建剪切蒙版，調整橡皮透明度擦掉多餘部分。對象

老虎人。不考慮頭髮扣出人臉，選擇，調整邊緣，調整智能半徑，選擇，存儲選區，而後打開老虎，扣出面部，選擇，調整邊緣，重複剛纔操做，但不是選區，而是新建圖層，老虎拖到人臉上，而後CTRL+t進行調整，讓其對齊，選擇人物，點圖層通道路徑右邊的按鈕，複製圖層，下面的一欄選擇新建，而後在新建出的人物種進行模糊，高斯模糊，而後保存，回到老虎，複製兩個，點通道，ctrl左鍵點剛纔保存的圖，回到一個老虎，建立蒙版，用前景色爲黑色的畫筆擦掉眼睛和嘴巴，而後選擇另外一個老虎，建立蒙版，ctrl+I變爲黑色，而後用前景色爲白色的畫筆擦掉鬍子邊緣，而後複製一我的物，調到最上方，選擇柔光。圖片

動做。窗口，動做，建立新動做。

下雪。先打開動做。打開圖片，創建圖層，填充爲黑色，濾鏡，像素化，點狀化，單元格的大小決定雪花的大小，圖象，調整，閾值，閾值的大小決定雪花的速度，濾鏡，模糊，動感模糊，決定間距和方向。最後選擇濾色。

普通圖，72分辨率，RGB。打印的話，CMYK，300分辨率。

【AI應用】

圖層上畫圖自動生成小分組，能夠直接設置顏色和描邊。
要創建剪切蒙版的話和PS不一樣，要把畫的形狀放在上面，原圖放在下面，而後直接點一個圖片,SHITF點另外一個，點擊右鍵，創立剪切蒙版，是在圖片上直接點，不是點右邊圖層的小框。

字體效果。打字，對象，擴展，能夠分解爲好多小點，能夠經過拖動來改變字體。而後複製一個，再畫一個圓，擋住字體的一部分，而後右鍵圓，置於底層，複製幾個圓。而後右鍵字，取消編組，分別選擇一個字SHIFT圓，而後從窗口打開路徑查找器，選擇交集，而後拖動到原字體上，能夠改變顏色和透明度來達到預期的效果。

圓角直線。窗口，描邊，圓頭端點。

地球小圖案。新建，800*600畫布，打開圖片，新建3個圖層，畫矩形，800*600，把背景蓋住，把圖片拖上來，在圖層3上建橢圓128*128，填充無，描邊黑，6pt，再建106*106，倆圓選中，水平居中對齊，而後選擇裏面的小圓，用剪刀工具把它分割成幾塊，而後選擇不要的刪掉，而後窗口描邊圓頭端點，再建橢圓180*60，搭在一塊兒，而後全選，旋轉，而後畫直線，用剪刀切割，最後再畫3個圓，兩個淡黃色一個橘黃色，而後把一個淡黃和橘黃經過路徑查找器減去頂層，把小月牙和圓分別疊加上去，而後置於底層。最後經過矩形圓形工具畫出小圖案。另外一個圖，下面的藍梯形，能夠先畫矩形，而後拉成梯形，最後用直接選擇工具上面轉換後面的圓弧，慢慢調整。其餘的同第一個。

【平面設計】

排版基礎。排版設計的四元素，背景，主體，文字，裝飾。
基本類型。骨骼型（網頁設計），中心型，滿版型，上下分割型，左右分割型，中軸型（電商排版），曲線型，傾斜型，對稱型，重心型，三角型，並置型，自由型，四角型

前期練習必定要注意留白問題！！
按文字排列規律，用戶閱讀習慣從上到下，從左到右。
明確主題標題，經過顏色，粗細，字號，色塊。
注意行距和間距。
裝飾框的運用，讓文案有裝飾性。
文案過少的狀況下經過外文來湊。
排版不要太過一致，讓重點醒目。
文案與背景要分明。

全部印刷品都要留3mm出血，分辨率都是300.
企業VI。
VI設計通常包括基礎部分和應用兩大部份內容。
logo。表象性，表徵性，借喻性，標識性，卡通化，幾何形構成，漸變推移。
名片標準尺寸。90*54,90*50,90*45。可是加上出血上下左右各2，因此製做尺寸必須設定爲94*58,94*54,94*48。色彩模式爲CMYK，影像檔300dpi以上。

【項目流程】

成立項目組，項目經理牽頭組建團隊，項目經理作計劃表，開項目啓動會，交互設計師作原型稿，UI設計人員豐富，H5開發。

網頁設計分類。功能型網頁設計（B/S軟件用戶端），形象型網頁設計（品牌形象站），信息型網頁設計（門戶站）。
網頁設計經歷如下幾個階段。根據消費者的需求，市場的情況，企業自身的狀況等進行綜合分析，從而創建起營銷模型。以業務目標爲中心進行功能策劃，製做出欄目結構關係圖。以知足用戶體驗設計爲目標。以網頁精美化設計爲目標，調整，使用合理的顏色，字體，圖片，樣式進行頁面設計美化，根據用戶反饋，進行頁面設計調整，以達到最優效果。

針對客戶需求須要注意的幾點。
建設網站的目的。欄目規劃及每一個欄目的表現形式和功能要求。網站主體色調，客戶性別喜愛，聯繫方式，舊版網址，偏好網址。根據行業和客戶要求，那些要着重表現。是否分期建設，考慮後期的兼容性。客戶是否有強烈建設網站的慾望。網站類型。

企業站主體色彩搭配最好不要超過3種。能夠適當點綴。
先把內容充實上，再分區塊，再定色調，再處理細節。
全局考慮，把能填的都填上，佔位置，而後定基調，分模塊設計，最後調整不滿意的局部細節。
總結，網頁設計應簡潔明瞭，從用戶體驗出發。

網頁，必須是72分辨率。
目前通用的頁面大小爲1000px（如今最好作1200px），畫布大小能夠自定義（1400,1440不等，最大1920）。
最上面標準頭，最下面標準尾是硬性要求。頭下面通常是廣告，再下面是內容區。
內容區需求不明確的話，排關於咱們。產品。新聞動態。
通常三張廣告圖，需求不明確的狀況下，就能夠是企業介紹，產品案例，企業文化或社會責任。

內容區。通欄，能夠鋪滿畫布，但內容不能超過頁面大小。兩欄，版塊與版塊的空隙最少20px，能夠等分也能夠不等分。三欄四欄最好等分。

網頁正文一概採用宋體12號字（如今基本都用微軟雅黑，選擇無），微軟雅黑和黑體，主要是用做標題。
建議使用12+14號的混合搭配。
英文字體從10px開始能清晰使用，選擇空間很大，10px，11px，12,13都是常見的字體大小，字體使用系統自帶字體，例如Arial。
價格文字，cc0000，重要文字cc6600，常規文字333333，次級文字666666.

注意：頁面小標題有點擊效果的最右邊要留空間，點擊效果區域不要超出範圍。

[使用JS的三種方式]

一、在HTML標籤中，直接內嵌JS(並不提倡使用):
<button onclick="alert('小婊砸！你真點啊！')">有本事點我呀！</button>
>>> 不符合W3C關於內容與行爲分離的要求！！！

二、在HTML頁面中，使用<script></script>包裹JS代碼：
<script type="text/javascript">
// JS代碼
</script>
>>> Script標籤能夠放到頁面的任何位置。

三、引入外部的JS文件：
<script language="JavaScript" src="js/01.js"></script>

[注意事項]
① <script></script>能夠嵌入到頁面的任意位置。可是，位置的不一樣會致使JS代碼的執行順序不一樣；
好比： <script></script> 放到<body>前面，則JS代碼會在頁面加載以前就執行；

② 引入外部的JS代碼，<script></script>必須是成對出現的標籤。並且，標籤中不能再有任何的JS代碼。

<script type="text/javascript">

JS中的多行註釋。 Ctrl+shift+/

// JS中的單行註釋。 Ctrl+/
//document.write("<h1 style='color:red;'>姜浩真帥！！</h1>");

【JS中的變量】
一、JS中變量聲明的寫法：
var num = 10; // 使用var聲明的變量，屬於局部變量，只在當前做用域內有效；
num = 10; // 不用var聲明的變量，默認爲全局變量，在整個JS文件中都有效；
var x=8,y,z=10; // 使用一行語句，同時聲明多個變量。上式中，y屬於已聲明，可是未賦值狀態，結果爲undefined；

[聲明變量的注意事項]
① JS中全部變量的聲明，均使用var關鍵字。變量具體是什麼數據類型，取決於給變量賦值的類型；

② JS中同一個變量，能夠在屢次不一樣賦值時，修改變量的數據類型；
var a = 10; // 從初始聲明是，a屬於整數型；
a = "haha"; // 重複賦值時，整數型的a被修改成字符串類型；

③ 變量可使用var聲明，也能夠不使用var聲明。
[區別] 使用var聲明爲局部變量，不使用var聲明爲全局變量；

④ 只用var聲明，可是不賦值。結果爲undefined；
例如： var a; // a爲undefined。
可是，若是不聲明也不賦值的a，直接使用會報錯；

⑤ 同一變量名，能夠屢次使用var聲明。可是，後面的var並無任何卵用。第二次在使用var聲明時，只會被理解爲普通的賦值操做。

二、變量名的命名要求：
① 變量名，只能有字母、數字、下劃線組成；
② 開頭不能是數字；
③ 變量名區分大小寫，大寫字母與小寫字母爲不一樣變量；

三、變量名的命名規範：
① 要符合小駝峯法則(駱駝命名法)：
首字母小寫，以後每一個單詞的首字母大寫；
myNameIsJiangHao √
② 或者使用匈牙利命名法：
全部字母小寫，單詞之間用_分隔；
my_name_is_jiang_hao √
③ mynameisjianghao × 能用，可是不規範。

四、 JS中的數據類型：>>>>>>重點！！！！！！
Undefined：未定義。已經使用var聲明的變量，可是沒有賦值。 var a;
Null: 表示空的引用。
Boolean：布爾類型。表示真假，只有兩個值： true/flase
Number: 數值類型。能夠是正數，也能夠是小數；
String：字符串類型。用""或''包裹的內容，稱爲字符串；
Object: 對象類型，後續講解。。。

五、【經常使用的數值函數】
① isNaN():判斷一個變量或常量，是不是NaN(not a num 非數值);
使用isNaN()判斷時，會嘗試使用Number()函數進行轉換，若是最終結果可以轉爲數字，則不是NaN，結果爲false。

② Number()函數：將其餘類型的數據，嘗試轉爲數值型；
[字符串類型]
>>> 字符串爲純數值字符串，會轉爲對應的數字； "111"->111
>>> 字符串爲空字符串，會轉爲0； ""->0
>>> 字符串包含任何其餘字符時，都不能轉； "1a"->NaN
[Boolean類型]
true->1 false->0
[Null/Undefined]
Null->0 Undefined->NaN
[Object]

③ ParseInt(): 將字符串轉爲整數類型；
>>> 純數值字符串，能轉。
"12"->12; "12.9"->12(小數轉化時，直接抹掉小數點，不進行四捨五入)
>>> 空字符串，不能轉。 ""->NaN
>>> 包含其餘字符的字符串，會截取第一個非數值字符串前的數字部分；
"123a456"->123; "a123b456"->NaN
>>> ParseInt()只能轉字符串，轉其餘類型，全是NaN。

[Number函數與ParseInt函數的區別] >>>>>>重點！！！！！！！
1. Number函數能夠轉各類數據類型，ParseInt函數只能轉字符串；
2. 二者在轉字符串時，結果不徹底相同。(詳見上面解釋)

④ ParseFloat：將字符串轉爲數值型；
轉換規則與ParseInt相同，只是若是有小數，則保留小數點；若是沒有小數，則依然是整數；
"12.5" -> 12.5; "12"->12

⑤ typeof: 檢測變量的數據類型：
字符串->String 數值->Number true/false->Boolean
未定義->Undefined 對象/NUll->object 函數->function
// var num = 11;
// alert(typeof(num));

[JS中經常使用的輸入輸入語句]

1. document.write(); 將()中的內容，打印輸出到留言器屏幕上；

使用時需注意：除變量/常量外的全部內容，必須放到""中。變量和常量必須放到""外面；
若是同時又變量和字符串，必須用+連接；
eg: document.write("左手中的紙牌"+left+"<br/>");

2. alert(); 使用彈窗輸出；
彈窗警告，()中的內容與上述要求相同。

3. promt(); 彈窗輸入；
接受兩部分參數：
① 輸入框上面的提示內容，可選；
② 輸入框裏面的默認信息，可選；
當只寫一部分時，表示輸入框上面的提示內容；

能夠定義變量，接收輸入的內容。點擊肯定按鈕，變量將被賦值爲輸入的內容；點擊取消按鈕，變量將被賦值爲null；

輸入內容時，默認接收的數據類型都是字符串！！！！！

【JS中的運算符】

一、算術運算(單目運算符)
+ 加、- 減、* 乘、 / 除、 % 取餘、++ 自增、-- 自減

+：有兩種做用，連接字符串/加法運算。當+兩邊全爲數字時，進行加法運算，
當+兩邊有任意一邊爲字符串時，起連接字符串的做用，連接以後的結果爲字符串。
>>>>其餘運算符都會自動轉化成數字進行運算，若是轉化不了則爲NaN；
/：結果會保留小數點。

【a++和++a的異同】
① 相同點：不管a++仍是++a，運算完之後，a的值均會+1；
② 不一樣點：a++，先用a的值去運算，再把a+1；
++a，先把a+1，再用a+1之後的值去運算。

二、賦值運算
= 賦值 += -= *= /= %=

+=：a+=b；至關於 a=a+b；可是，前者的運算效率要比後者快，因此
推薦使用+=的寫法；

三、關係運算
== 等於、 === 全等、 != 不等、！== 不全等、>、<、>=、<=

>>> 關係運算符，運算以後的結果，只能是Boolean類型；
>>> 判斷一個數字是否處於某個區間，必須用&&連接；
a<10 && a>0 √ 10>a>0 X
>>> ===：嚴格等於；要求不但要類型相同，值也必須相同；類型不一樣，
結果直接爲false；類型相同，再進行下一步判斷；
==：等於；類型相同，與===效果同樣。類型不一樣時，會先嚐試
將兩邊轉爲數字，而後再進行判斷。
可是，有個別特例，如：Null==false X Null==Undefined √

四、條件運算符(多目運算)
a>b?true:false

有兩個重要符號：？和：
當？前面部分，運算結果爲true時，執行：前面的代碼；
當？前面部分，運算結果爲false時，執行：後面的代碼；

冒號兩邊能夠爲數值，則整個式子可用於賦值。
冒號兩邊能夠直接爲代碼塊，將直接執行代碼。
多目運算符能夠多層嵌套。

五、位運算符、邏輯運算符
&& 與、|| 或、！非
&& 兩邊都成立，結果爲true。
|| 兩邊有任意一邊成立，結果爲true。

六、運算符的優先級
() 小括號最高
！ ++ -- 單目運算符
* / %
+ -
> < >= <=
== !=
&& //與和或同時存在時，與比或高
||
= += -= *= /= 最低的是各類賦值

【JS中的分支結構】

【if-else結構】
一、結構的寫法：
if(判斷條件){
//條件爲true時，執行if的{}
}else{
//條件爲false時，執行else的{}
}
二、注意事項：
① else{}語句塊。能夠根據狀況進行省略。
② if和else後面的{}能夠省略，可是省略{}後，if和else後面
只能跟一條語句(因此，並不建議省略{})；

三、 if的()中的判斷條件，支持的狀況：重點！！！！
① Boolean：true爲真，false爲假。
② String：空字符串爲假，全部非空字符串爲真；
③ Number：0爲假，一切非0數字爲真；
④ Null/Undefined/NaN：全爲假。
⑤ Object：全爲真。

【多重if、階梯if結構】
一、結構寫法：
if(條件一){
// 條件一成立，執行的操做
}else if(條件二){
// 條件一不成立，而且條件二成立，執行的操做
}else{
// 上述全部條件都不成立時，執行的操做
}

二、多重if結構中，各個判斷條件是互斥的，只能選擇其中
一條路執行，遇到正確選項並執行完之後，直接跳出結構，
再也不判斷後續分支；

【嵌套if結構】一、結構的寫法： if(條件一){ //條件一成立 if(條件二){ //條件一成立而且條件二成立 }else{ //條件一成立而且條件二不成立 } }else{ //條件一不成立 } 二、在嵌套if結構中，若是省略{}，則else結構永遠屬於離他最近的一個if結構。三、嵌套結構能夠多層嵌套，可是通常不推薦超過3層。能用多重if結構的通常不推薦使用嵌套if。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。