【筆記】1.5 SCSS 和 Sass 的差異比較

	SCSS	SASS
共同優點	具有變數，簡單邏輯程式、函式...等等 語法比css簡潔（很多東西不用重複寫 具有擴充性與更多彈性 適合大型專案 兼容CSS
共同缺點	進入門檻高 維護門檻高 初學者成本高 團隊協作成本提升 學之前還是要先懂css
適合對象	設計師	工程師
優點	和css相似，使用{ } 與；對於設計師來說容易上手 Bootstrap使用scss，是個很好的學習範本	程式碼縮短非常多，層次直觀 來自Python, Ruby的工程師，甚至可以用類似符號的語法編寫道具 對使用CoffeeScript的人來說，能自然的編寫mixins，函數，以及重複使用的東西 兼容SCSS
缺點		學習門檻高 安裝環境複雜 巢狀多層的時候，CSS會變得很難維護，不好讀
支援	變數、@mixin、@extend	變數、@mixin、@extend
引入@minxin	前面寫@include	前面加「+」就可以載入mixin
寫Mixin	須用｛｝將內容包住	無
寫巢狀繼承	須在繼承的父元素裡面撰寫class與class的css

【筆記】Sublime + VS code， UI 會裝的外掛

在sublime，我安裝的外掛有

package control
優先安裝，才能裝其他外掛

Alignment
程式碼對齊

AutoFileName
自動帶入，例如css要選圖片時，會自動帶出路徑>檔名

Emmet
程式速寫

Trailing Spaces
存檔時，自動去除頁尾多餘空白（完全救了我的強迫症

LiveReload
chrome也要裝擴充，存檔時自動F5

【筆記】1.4 VSCode 安裝延伸模組

安裝這些延伸模組，可以加速你的工作效率，每個人都會有自己最順手的套件組，你的不需要和我的一樣。

VSCode的外掛安裝方式，比sublime方便許多。有容易了解的介面，每一個延伸模組前都有自己的LOGO方便辨識。



以下是我安裝的套件。套件數量過多，也許會降低效能

【筆記】1.3 和 sublime 初相識的因緣和為何現在要移情別戀 VS code。

一開始在使用編輯器這點我承認自己並沒有忠誠度可言，不然其他設計師你們搜尋UltraEdit 、editPlus、Notepade++，你真的覺得有差嗎？？

一直到被推坑sublime，真是讓我驚呆了，編輯器居然可以安裝外掛，而且有非常多佛心外掛，在使用後會讓對版面龜毛毛的設計師感到舒心～～（花花開），像是自動排整齊啦、儲存的時候自動清除多餘空白、Emmet （打縮寫指令按下Tab自動完成）....

有了這些強大外掛的幫忙，不但寫程式的速度變快了，出錯的機率也變少了呢～～

sublime 的好處族繁不及備載，用google大神搜一下，讀10頁也看不完，就是因為輕量又如此好用，所以我才會拜倒石榴裙下，一拜就是5-6年，但最近我卡關了...因應工作需求，我需要學習一個新玩意兒叫做SCSS，之後再說為何選SCSS而不是SASS 或是 LESS。

【筆記】1.2 程式編輯器從 sublime 跳槽到 VS code

自寫網頁以來，換過非常多種編輯器（版本就不寫了...數字太敏感），年代順序如下

• DreamWeaver
• UltraEdit 
• editPlus
• Notepade++
• sublime
• VS code

每一次的更換都是因為工程師強力推坑

PG：這個超好用的呀，換吧換吧！！
我：是嗎？沒試過不知道誒...
PG：我來幫你灌，滑鼠給我(開始下載安裝
我：呃...這麼積極，你是有抽成嗎？

設計師用 DreamWeaer寫網頁是多麼自然，但我多年工作經驗與 DreamWeaer 的相處其實只有短短2個月...不到。不是我愛叛逆不合群，或自以為比別人厲害....硬要使用專業軟體來展現自己的不專業XDDDD，只因當時配合的工程師說

【筆記】UI + UX + 程式，概念性文章與書籍

在此備註一些概念性文章，有些文章、書籍或許很老，但正確有效的做事方式，應該是萬變不離其宗的。就像是2005年出版的 Don’t Make Me Think , 很多書中的觀念，我認為到現在依然適用。

1. 如何聰明的提問
   中文版：https://ryanhanwu.gitbooks.io/how-to-ask-questions-the-smart-way/
   英文版：http://www.catb.org/~esr/faqs/smart-questions.html
2. 
   

【筆記】1.1 檔案與參數命名的規則

檔案、參數命名有很多方式，其中區隔單字的方式像是

• 駝峰命名法
• 小駝峰式命名法：textColorDark
• 大駝峰式命名法：TextColorDark
• 連字號 - ：text-color-dark
• 下底線 _ ：text_color_dark

多年以來自己一直採用全小寫 + 下底線命名：text_color_dark，無論是資料夾、檔名、或是參數名。看似偏好一套規則適用所有類型，其實是金魚腦，記得不多又容易忘...QAQ
不過也因此一直沒發現一件事，在CSS的語法裡，屬性命名大小寫視為相異，例如：

TextColorDark
textColorDark

【筆記】iPhone X 網站設計說明

文章來源：https://webkit.org/blog/7929/designing-websites-for-iphone-x/
Sep 22, 2017 by Timothy Horton


以下關於安全區域內嵌的部分已於2017年10月31日更新，以反映iOS 11.2測試版的變化。


Safari在新iPhone X的邊緣到邊緣顯示屏上精美地顯示網站。內容會自動嵌入顯示器的安全區域內，因此不會被圓角或設備的傳感器外殼遮擋。


在<body>或<html>元素上指定頁面background-color，讓頁面的其餘部分融入，對大多數網站而言這已經十分夠用了。


下圖為Safari的默認插入行為。

2018年的19個網頁設計趨勢

原文出處：19 web design trends for 2018
https://webflow.com/blog/19-web-design-trends-for-2018
年底了，照例觀察一下明年的設計趨勢發展，並且記錄心得。

1. 更普遍的互動和動畫
   頁面中加入更多微互動的動畫，但這些動畫並不會分散使用者的注意力。
   在網頁一開始出現的時候，區塊顯示、點選導覽以後跳到頁面下方，這些呈現方式是直接，甚至可說是粗魯的。區塊直接啪一下的出現在面前，完全的功能導向但也完全的沒有美感。
   
   現在使用者習慣看到，本來隱藏的區塊在點選了某個功能之後，緩緩的漸亮然後浮現，或是以滑動的方式呈現， 這造就了一種優雅的節奏，也提升了使用上的舒適感。

2018設計趨勢心得

1. 僅僅完成配色，不代表完成易用性設計
2. 界面漂亮，能增加使用者的耐心，但解決不了基本架構不良的問題
3. PC 與 手機是截然兩種不同的設計模式
   
   以www.agoda.com的表單來說

pc	行動裝置
單元區隔會使用框線 input 會保留框線 不介意左右兩欄	背景有底色，單元區隔用白色塊 input 只剩下底線 一列一欄訊息 input、按鈕有一定高度 input 的輸入，更在意操作時的動態提醒效果（title字體變小，變色，上移）

2017設計時常出現的錯誤

可視化層次結構可能無法幫助用戶理解其內容

1. 有色區塊太多，分散視覺重點
2. 物件太多，分散視覺重點
3. 文字顏色太淺難以閱讀
4. 區塊太緊密，無法閱讀 / 區塊太鬆散，沒有段落性
5. 標題與內容區隔太遠
6. 太多線條，造成畫面混亂
7. 單元區隔不夠
8. 畫面左右不平衡
9. 字體、配圖、間距...太大，造成不精緻，甚至畫面鬆散

缺少能指（解釋1）可能會降低交互性。


來源：維基百科符號學
（解釋1）符號學中，將指示符（sign），即是單一符號或符號系統根據其傳播模式而分類。所傳播之意味以使用的編碼而確定，並且將符號分成能指（Signifier）和所指（Signified）兩部分。廣義上，這種能指可以是一個字符、一個手勢、一段聲音或者是一切所見之物。但是一個能指和所指的對應關係，只有在一個集體共同認可才可以形成，而通常來說，這不僅與語言中的詞彙相關，且聯繫到語法。符號所代表的物事，也可能會因為社會和文化關係而帶有隱意。

2017 18個網站設計趨勢

2016年末，自然要來看一下，明年的設計趨勢發展。
這篇文章提到了18項2017年的設計趨勢：

18 web design trends for 2017

https://webflow.com/blog/18-web-design-trends-for-2017
附上原文出處，方便查看原文。

這裡列出其中幾項，作為自己未來設計時的首要考量：

1. 內容優先

   
   
   任何排版佈局都只是為了讓使用者專注在應該閱讀的項目，而且不影響閱讀速度。
   
   這點在台灣的網頁非常難以實現，客戶與老闆從來沒有在想客戶要看到什麼，在客戶與老闆雙重要求：
   『大一點』
   『紅色』
   『加粗』
   『加閃亮亮』....
   一大堆花俏搶眼各種顏色都上了同一個頁面之下，重點早就不知道被淹沒到哪裡去了。
     

RWD時， font-size 的單位

很久很久以前，web designer 只要考慮IE6 7 8 的時候，字體單位，只要用px就萬事OK。
有一天， 一個叫賈伯斯的人，拿出了一台iPad，從此....

px

優點：PhotoShop與CSS 通用

缺點：在移動裝置無擴充性

em

優點：在移動裝置有彈性

缺點：

1. PhotoShop上沒有em，從PhotoShop 的 px 轉換 em 要用猜的
2. 巢狀結構時具有繼承性（如下圖：第二層變成 2*2 = 4em）
   

rem

優點：

1. CSS3新增的一個相對單位（root em，根em）
2. 移動裝置上有彈性
3. 不繼承
4. 透過設定，能簡易與 px 換算

缺點：

2. PhotoShop上沒有em，從PhotoShop 的 px 轉換 em 要用猜的
3. 巢狀結構時具有繼承性（如下圖：第二層變成 2*2 = 4em）

目前採用rem，寫法如下

html { font-size:62.5%;} /*  相當於 10px*/

body { font-size:1.6rem; line-height: 1.5; font-family: "微軟正黑體", "Microsoft JhengHei";}

h1 { font-size: 4.0rem; } /* = 40px*/

h2 { font-size: 3.6rem; } /* = 36px*/

電子報設計原則

電腦瀏覽

1. 不使用div排版，請使用table來編排
   使用table來配置img和text。原因很簡單，因為table tag歷史悠久，它是最能被大多數email client辨識的tag，容錯率高。

2. 不使用css seletor，請使用inline-css
   因為在<head>中設置的style，可能會被收信系統刪除，為了確保你要的樣式可以正常地被呈現，請將css個別地寫在tag行內。

3. 圖片(img)之來源(src)請設為「絕對路徑」
4. 圖片(img)請務必設置正確的width和height屬性，alt屬性亦然
5. 不使用影片及flash相關tag
6. 無法使用 Media Queries
   @media screen and (min-width: 1200px) {
      // 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。
   }
   @media screen and (min-width: 768px) and (max-width: 979px) {
      // 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。    
   }...
   國外有一個網站專門蒐集各式各樣的 Media Queries 效果，網站名稱就叫做「Media Queries」，網址：http://mediaqueri.es/。
7. 不使用javascript

EDM文末加入一個「取消訂閱此電子報」的連結
在近年來垃圾廣告郵件氾濫的時代，即使你是一家正常發送電子報給會員的電子商務網站，也請加入這個功能，以免被spam

【解決】手機輸入法造成的問題

手機輸入法造成的問題：

1. 常常會自動校正
2. 自動首字轉大寫
3. 自動加空格

解決方法：

在 input 加入 autocapitalize="off" 與 autocorrect="off"，關閉自動大寫與自動校正。

2015 SEO

1. 別在網頁堆砌關鍵字：

過度堆砌，除了關鍵字排名降低外，嚴重的話更可能導致黑站。

關鍵字的密度，在整篇文章的5%以內為佳。

2. 徹查網站中的重複內容：

網站建置很流行再架設另一「手機版」，也是導致內容重覆的因素。

應以自適應網頁設計RWD(Responsive Web Design)來架設網站。

3. 不要再隱藏關鍵字了：

利用將文字與網頁背景設置成同一顏色就達到視覺上的「隱藏」效果，對搜尋引擎是無效的，此舉可能導致黑站。

4. 加強網站的內容：

5. 合理的置放網頁廣告：

Panda熊貓演算法對這樣的狀況也祭出關鍵排名波動的管制動作。

網站優化=CLOUDS

1. Content optimization： 內容為王， 內容優化要讓你的網站充滿誘人的內容
1. 原創的獨特性
2. 快速且經常性

2. Layout optimization： 編排優化， 就是讓各種browser、各種解析度、各種狀況下都能讓你的網站賞心悅目
3. Objective optimization： 目的優化， 就是讓網站能夠達成您賦與的目的， 電子商務網站要能夠增加成交量， 靠廣告維生的能夠讓網友去點選廣告， 不同類型網站有不同的目的要達成
4. User-interface optimization： 使用者界面優化， 許多網站沒有考慮人機界面， 往往讓人不想停留， 流失掉許多應有的流量
5. Display optimization： 顯示反應優化， 也就是讓你的網站快速回應， 不能顯示一頁都要等幾分鐘
6. Search-engine optimization： 這個就不必再提了， 我們整個站都在談搜尋引擎優化

所以， SEO只是網站優化的一部分， 做完CLOUDS才是真正的網站優化!!

【筆記】APP UI 製作流程規範

關於置版

1. 如果是共用同樣的UI，先做 Android 再做 IOS
2. 起始製作畫布用2@：
1. Android：720x1134
2. IOS：640x1136
3. 所有單位，全部用偶數
4. 将垂直面和水平面都设置为8dp变量

單位：px

	Android			IOS
	螢幕W x H	nav bg H	切圖bg (不含狀態列)	螢幕W x H	nav bg H	切圖bg (包含狀態列)
1@	360x615	48	360x567	320x480	64	同螢幕高
2@	720x1230	96	720x1134	640x960 750x1334	128	同螢幕高
3@	1080x1845	144	1080x1701	960x1440	192	同螢幕高
4@				1242x2208 (iphone 6plus)	192	同螢幕高

https://apple.stackexchange.com/questions/242614/ios-background-image-height-width-in-xcode-for-1x-2x-3x

https://www.zhihu.com/question/25288571

http://www.ui.cn/detail/25876.html

Photoshop做圖置圖注意事項

1. 起始製作畫布用2@：
1. Android：720x1134(不含狀態列)
2. IOS：640x1136 (包含狀態列)
2. 所有單位，全部用8的倍數
3. 用混合效果產生的陰影、框線，必須為2的倍數

4. 點陣圖必須化為智慧型物件
5. 形狀
1. 必須採用向量，並勾選『對齊邊緣』
2. 為8的倍數

6. 圖層命名方式：
1. 全部採用英文
2. 一個頁面，一個資料夾，資料夾前加 -  (減號)
3. 底線區隔
4. 全部小寫
5. 屬性_頁面_功能_序號_狀態.png(jpg)
6. 例：btn_index_music_00_normal.png

	屬性	頁面/共用區塊	功能	序號	狀態
範例	btn	index	music	00	normal
說明	btn ...按鈕 bg  ...背景 nav...上方選單 pic ...圖片	nav...Navigation Bar tool...tool bar header... 刊頭 footer … 頁尾 index...首頁	music play pause		normal  ...一般 pressed...壓下時 delete

7. 按鈕命名方式有2種

按鈕按下時有變化，要製作兩張圖	按鈕只要製作一張圖

7. 
   

	Android	IOS
PSD解析度	72	72
起始製作畫布	720x1230(扣除上方.狀態列的高度)	640x1136(含狀態列的高度) → 先做android → 再用延展背景的方式拉大到750x1334 → 等比縮放到 640 x 1136 → 調整物件相對位置
各單元高度
物間起算點(x,y)	不含狀態列	包含狀態列
背景圖高度	不含： 狀態列 nav	全螢幕，包含： 狀態列 nav
輸出圖檔命名方式	在同一個資料夾 檔名上增加倍數標示 以背景為例：	4個資料加 檔名相同 以背景為例：
PS外掛 cut and slice me 輸出起始值	1個步驟： 1080直接輸出	2個步驟： 640→1 + 2@ 960→2@→改名3@
使用字體	只使用 24 pt, 28 pt, 32 pt,  40 pt, 68pt google 建議避免使用bold	苹果字体规格： A：导航栏标题：medium 34px； B：按钮和表头：light 34px C：表格标签：Regular 28px； D：Tab页图标标签：Regular 20px
Y軸起始點	從 Navigation Bar 開始	從 The Status Bar  開始
按鈕允許的做法	o 分成文字、背景，2層 o 按下時，改文字樣式 x 按下時，改背景樣式	o 分成文字、背景，2層 o 按下時，改文字樣式 o 按下時，改背景樣式

5. 
   

相關配套(宣傳)圖片

1. Android圖片資源、螢幕擷取畫面和影片 https://support.google.com/googleplay/android-developer/answer/1078870?hl=zh-Hant

2. IOS圖片資源、螢幕擷取畫面和影片

iOS Human Interface Guidelines > Icon and Image Design

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1

3. 列表說明

說明	Android尺寸(px)	IOS尺寸(px)	格式
google play宣傳圖	1024 x 500	無	jpg、png
手機開啟APP時的loading頁	無	640   x 960 750   x 1334 960   x 1440 1242 x 2208(iphone 6plus)	jpg
APP在手機上的icon	接受各種形狀，圓角要自己做 512  x 512→google_play 192  x 192→xxxdpi 144  x 144→xxdpi 96    x 96  →xhdpi 72    x 72  →hdpi 48    x 48  →mdpi	只有正方形，圓角不要做 1024 x 1024→IOS商店用 512   x 512 180   x 180 152   x 152 120   x 120 76     x 76	png
APP操作畫面配貼，數張	1080 x 1845	960   x 1440	jpg

4.