- css一開始要先宣告語系@charset "utf-8";
因為在編譯、轉譯、上版（系統也許會針對自動合併，自動化執行一些合併行為），
過程中可能會造成『中文註解』被編譯成亂碼，
造成CSS原本的註解，有開始但是沒結束，頁面就會破版。
最一勞永逸的方式，還是只用英文或數字撰寫。
2019年10月4日 星期五
［感想］好的CSS與樣板框架的寫法
2019年6月10日 星期一
【筆記】 IOS 人機界面Guideline
視覺設計需閱讀的篇章：
iOS設備的各種屏幕尺寸
圖像大小與分辨率
iOS用於在屏幕的分辨率分別有@ 1x，@ 2x和@ 3x。
假設有一個100px×100px的標準分辨率（@ 1x）圖像。該圖像的@ 2x版本為200px×200px，@ 3x版本為300px×300px。
設計高分辨率時應注意：
- 使用8px-by-8px網格。
網格保持線條清晰，確保內容在所有尺寸下盡可能清晰，需要較少的修飾和銳化。將圖像邊界捕捉到網格，以最小化縮小時可能出現的半像素和模糊細節。
- 使用適當的格式製作藝術作品。
通常，對位圖/柵格圖稿使用去隔行PNG文件。PNG支持透明度，因為它是無損的，壓縮工件不會模糊重要細節或改變顏色。對於需要陰影，紋理和高光等效果的複雜藝術品來說，它是一個不錯的選擇。將JPEG用於照片。它的壓縮算法通常比無損格式產生更小的尺寸，並且在照片中更難辨別偽像。但是，照片般逼真的應用程序圖標在PNG中看起來效果最佳。將PDF用於需要高分辨率縮放的字形和其他平面矢量圖稿。
- 將8位調色板用於不需要完整24位顏色的PNG圖形。
使用8位調色板可減小文件大小而不會降低圖像質量。此調色板不適用於照片。 - 優化JPEG文件以在大小和質量之間找到平衡。
可以壓縮大多數JPEG文件，而不會導致生成的圖像明顯降級。即使少量壓縮也可以節省大量磁盤空間。嘗試對每個圖像進行壓縮設置，以找到產生可接受結果的最佳值。
- 為圖像和圖標提供替代文本標籤。
替代文字標籤在屏幕上不可見，但它們讓VoiceOver可以直觀地描述屏幕上的內容，使視力障礙人士更容易導航。
Multitasking Size Classes：
在iPad上，當您的應用程序以多任務配置運行時，大小類也適用。
一般佈局注意事項
- 確保主要內容以其默認大小清除。
除非他們選擇更改大小，否則人們不應該水平滾動來閱讀重要文本，或者縮放以查看主要圖像。
- 在整個應用中保持整體一致的外觀。
通常，具有類似功能的元素應該看起來相似。
- 使用視覺重量和平衡來傳達重要性。
大件物品吸引眼球，看起來比較小物品更重要。較大的物品也更容易點擊，這在應用程序用於分散注意力的環境時尤為重要，例如在廚房或健身房。通常，將主要項目放置在屏幕的上半部分中，並且在從左到右的讀取上下文中 - 靠近屏幕的左側。
- 使用對齊可以簡化掃描並與組織和層次結構進行通信。
對齊使應用程序看起來整潔有序，幫助人們在滾動時集中註意力，並使查找信息變得更加容易。縮進和對齊還可以指示內容組如何相關。
- 如果可能，支持縱向和橫向。
人們更喜歡在不同的方向使用應用程序，因此最好能夠滿足這種期望。
- 為交互式元素提供充足的觸摸目標。
嘗試為所有控件保持44pt x 44pt的最小可點擊區域。
- 在多個設備上預覽您的應用。
您可以使用模擬器（Xcode附帶）來預覽您的應用程序並檢查裁剪和其他佈局問題。如果您的應用支持橫向模式，請確保您的佈局看起來很棒，無論設備是向左還是向右旋轉。全屏iPhone不支持倒置肖像模式。某些功能（如寬彩色圖像）最適合在實際設備上預覽。
- 在較大的設備上顯示文本時應用可讀性邊距。
這些邊距使文本行足夠短，以確保舒適的閱讀體驗。
動畫
在網站中加入動畫會增加活潑度，但動畫不是有加就好，就像一面牆不是有顏色就叫漂亮。IOS 官方Guiildline 在動畫的項目中提到4點建議。
- 明智地使用動畫和動作效果。
不要為了使用動畫而使用動畫。過度或無償的動畫可能會讓人感到脫節或分心，特別是在沒有提供身臨其境體驗的應用中。iOS使用運動效果（例如視差效果）在主屏幕和其他區域創建深度感。這些效果可以增加理解和享受，但過度使用它們會使應用程序感到迷失方向並且難以控制。
動畫會吸引使用者目光與注意力，一個視覺畫面中最好只有一個物件在動作。兩個以上會令人分心，如果動畫是在要操作的按鈕或是連結上，反而會增加使用者判斷時間，甚至操作錯誤。 - 力求現實主義和信譽。
人們傾向於接受藝術許可，但是當運動沒有意義或似乎違背物理定律時，他們會感到迷失方向。例如，如果某人通過從屏幕頂部向下滑動來顯示視圖，則他們應該能夠通過向後滑動來解除視圖。
這段翻譯成白話文的意思就是，創新是好的，但有些約定俗成的操作行為，還是必須貼近的使用者的習慣。
- 使用一致的動畫。
熟悉，流暢的體驗讓用戶保持參與。他們習慣於iOS中使用的微妙動畫，例如平滑過渡，設備方向的流暢變化和基於物理的滾動。除非您正在創建沉浸式體驗，例如游戲，否則自定義動畫應與內置動畫相媲美。
這與設計師在挑選顏色與繪製ICON時需要注意的細節相同，使用者是在IOS系統下進行操作，IOS內建了許多通用APP，所以IOS的使用者每天在使用手機的時候，已經默默地被訓練這些暗示性的操作行為（滑動手勢、快速鍵、動畫暗示...），在設計瀏覽網站與APP，如果使用的動畫與iOS中使用動畫是一致的，使用者就可以更快熟悉介面操作。
- 使動畫可選。
在輔助功能首選項中啟用減少運動的選項時，您的應用應最小化或消除應用程序動畫。有關指導，請參閱Motion。
這項在網頁上能否做到我並不了解，但如果是製作PP的話，這應該要注意，讓使用者可對此進行控制。
顏色
顏色傳遞活力，提供視覺連續性，傳達狀態信息，響應用戶操作提供反饋以及幫助人們將數據可視化。IOS提到了下列注意事項：
- 明智地使用顏色進行交流。
當謹慎使用時，提高注意重要信息的顏色力量會增強。
例如，當出於非關鍵原因在應用程序中的其他地方使用紅色時，警告人們關鍵問題的紅色三角形變得不那麼有效。
這個例子就像是以前遇過的甲方，活動頁面上到處都要強調，強調的方法就是加大、加粗、變紅色，完稿之後設計師絕對堅決否認那是自己的作品啊XDDD。
- 在整個應用中使用補色。應用中的顏色應該很好地協同工作，而不是衝突或分散注意力。例如，如果粉彩對於應用程序的樣式至關重要，請使用一組協調的粉彩。
- 通常，選擇與您的應用徽標協調的有限調色板。微妙地使用顏色是傳達品牌的好方法。
- 考慮選擇色調顏色以指示整個應用程序的交互性。在Notes中，交互元素為黃色。在日曆中，交互式元素為紅色。如果您定義表示交互性的色調顏色，請確保其他顏色不與之競爭。
- 提供兩種版本的色調，以確保它在明暗模式下都很好看。當您使用系統顏色作為色調時，您可以自動支持高對比度。
- 避免對交互式和非交互式元素使用相同的顏色。如果交互式和非交互式元素具有相同的顏色，則人們很難知道在哪裡挖掘。
- 考慮藝術品和半透明度如何影響附近的顏色。藝術品的變化有時需要改變附近的顏色，以保持視覺連續性並防止界面元素變得過於強大或不足。例如，地圖在使用地圖模式時會顯示淺色方案，但在激活衛星模式時會切換為深色方案。放置在半透明元素後面或應用於半透明元素（如工具欄）時，顏色也會顯得不同。
- 在各種照明條件下測試應用程序的配色方案。根據房間的氛圍，時間，天氣等，室內和室外的照明都有很大差異。當您的應用在現實世界中使用時，您在計算機上看到的顏色看起來並不總是一樣。始終在多種光照條件下預覽您的應用，包括在晴天戶外，以查看顏色的顯示方式。如有必要，調整顏色以在大多數用例中提供最佳的觀看體驗。
- 考慮True Tone顯示如何影響顏色。True Tone顯示器使用環境光傳感器自動調整顯示器的白點，以適應當前環境的照明條件。主要關注閱讀，照片，視頻和遊戲的應用可以通過指定白點適應性樣式來增強或削弱此效果。有關開發人員指南，請參閱UIWhitePointAdaptivityStyle。
- 考慮如何在其他國家和文化中看到您對顏色的使用。例如，在某些文化中，紅色表示危險。在其他人看來，紅色具有積極的內涵。確保應用中的顏色發送相應的消息。
避免使用讓人們難以察覺應用內容的顏色。例如，色盲人可能無法區分某些顏色組合，而對比度不足會導致圖標和文本與背景混合併使內容難以閱讀。有關指導，請參閱顏色和對比度。
2018年3月29日 星期四
【筆記】UI + UX + 程式，概念性文章與書籍
在此備註一些概念性文章，有些文章、書籍或許很老，但正確有效的做事方式，應該是萬變不離其宗的。就像是2005年出版的 Don’t Make Me Think , 很多書中的觀念，我認為到現在依然適用。
2018年3月19日 星期一
【筆記】1.1 檔案與參數命名的規則
檔案、參數命名有很多方式，其中區隔單字的方式像是
- 駝峰命名法
- 小駝峰式命名法：textColorDark
- 大駝峰式命名法：TextColorDark
- 連字號 - ：text-color-dark
- 下底線 _ ：text_color_dark
多年以來自己一直採用全小寫 + 下底線命名：text_color_dark，無論是資料夾、檔名、或是參數名。看似偏好一套規則適用所有類型，其實是金魚腦，記得不多又容易忘...QAQ
不過也因此一直沒發現一件事，在CSS的語法裡，屬性命名大小寫視為相異，例如：
TextColorDark
textColorDark
2017年12月31日 星期日
2018年的19個網頁設計趨勢
原文出處：19 web design trends for 2018
https://webflow.com/blog/19-web-design-trends-for-2018
年底了，照例觀察一下明年的設計趨勢發展，並且記錄心得。
https://webflow.com/blog/19-web-design-trends-for-2018
年底了，照例觀察一下明年的設計趨勢發展，並且記錄心得。
- 更普遍的互動和動畫
頁面中加入更多微互動的動畫，但這些動畫並不會分散使用者的注意力。
在網頁一開始出現的時候，區塊顯示、點選導覽以後跳到頁面下方，這些呈現方式是直接，甚至可說是粗魯的。區塊直接啪一下的出現在面前，完全的功能導向但也完全的沒有美感。
現在使用者習慣看到，本來隱藏的區塊在點選了某個功能之後，緩緩的漸亮然後浮現，或是以滑動的方式呈現， 這造就了一種優雅的節奏，也提升了使用上的舒適感。
2016年12月31日 星期六
2017 18個網站設計趨勢
2016年末，自然要來看一下，明年的設計趨勢發展。
這篇文章提到了18項2017年的設計趨勢：
附上原文出處，方便查看原文。
這裡列出其中幾項，作為自己未來設計時的首要考量：
這篇文章提到了18項2017年的設計趨勢：
18 web design trends for 2017
https://webflow.com/blog/18-web-design-trends-for-2017附上原文出處，方便查看原文。
這裡列出其中幾項，作為自己未來設計時的首要考量：
內容優先
任何排版佈局都只是為了讓使用者專注在應該閱讀的項目，而且不影響閱讀速度。
這點在台灣的網頁非常難以實現，客戶與老闆從來沒有在想客戶要看到什麼，在客戶與老闆雙重要求：
『大一點』
『紅色』
『加粗』
『加閃亮亮』....
一大堆花俏搶眼各種顏色都上了同一個頁面之下，重點早就不知道被淹沒到哪裡去了。
2016年12月30日 星期五
RWD時， font-size 的單位
很久很久以前，web designer 只要考慮IE6 7 8 的時候，字體單位，只要用px就萬事OK。
有一天， 一個叫賈伯斯的人，拿出了一台iPad，從此....
有一天， 一個叫賈伯斯的人，拿出了一台iPad，從此....
px
優點：PhotoShop與CSS 通用
缺點：在移動裝置無擴充性
em
優點：在移動裝置有彈性
缺點：
- PhotoShop上沒有em，從PhotoShop 的 px 轉換 em 要用猜的
- 巢狀結構時具有繼承性（如下圖：第二層變成 2*2 = 4em）
rem
優點：
- CSS3新增的一個相對單位（root em，根em）
- 移動裝置上有彈性
- 不繼承
- 透過設定，能簡易與 px 換算
缺點：
- PhotoShop上沒有em，從PhotoShop 的 px 轉換 em 要用猜的
- 巢狀結構時具有繼承性（如下圖：第二層變成 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*/
2015年4月13日 星期一
2015 SEO
- 別在網頁堆砌關鍵字：
過度堆砌，除了關鍵字排名降低外，嚴重的話更可能導致黑站。
關鍵字的密度，在整篇文章的5%以內為佳。
- 徹查網站中的重複內容：
網站建置很流行再架設另一「手機版」，也是導致內容重覆的因素。
應以自適應網頁設計RWD(Responsive Web Design)來架設網站。
- 不要再隱藏關鍵字了：
利用將文字與網頁背景設置成同一顏色就達到視覺上的「隱藏」效果，對搜尋引擎是無效的，此舉可能導致黑站。
- 加強網站的內容：
- 合理的置放網頁廣告：
Panda熊貓演算法對這樣的狀況也祭出關鍵排名波動的管制動作。
網站優化=CLOUDS
- Content optimization： 內容為王， 內容優化要讓你的網站充滿誘人的內容
- 原創的獨特性
- 快速且經常性
- Layout optimization： 編排優化， 就是讓各種browser、各種解析度、各種狀況下都能讓你的網站賞心悅目
- Objective optimization： 目的優化， 就是讓網站能夠達成您賦與的目的， 電子商務網站要能夠增加成交量， 靠廣告維生的能夠讓網友去點選廣告， 不同類型網站有不同的目的要達成
- User-interface optimization： 使用者界面優化， 許多網站沒有考慮人機界面， 往往讓人不想停留， 流失掉許多應有的流量
- Display optimization： 顯示反應優化， 也就是讓你的網站快速回應， 不能顯示一頁都要等幾分鐘
- Search-engine optimization： 這個就不必再提了， 我們整個站都在談搜尋引擎優化
所以， SEO只是網站優化的一部分， 做完CLOUDS才是真正的網站優化!!
2015年3月31日 星期二
【筆記】APP UI 製作流程規範
關於置版
- 如果是共用同樣的UI，先做 Android 再做 IOS
- 起始製作畫布用2@：
- Android：720x1134
- IOS：640x1136
- 所有單位，全部用偶數
- 将垂直面和水平面都设置为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
|
同螢幕高
| |||
Photoshop做圖置圖注意事項
- 起始製作畫布用2@：
- Android：720x1134(不含狀態列)
- IOS：640x1136 (包含狀態列)
- 所有單位，全部用8的倍數
- 用混合效果產生的陰影、框線，必須為2的倍數
- 點陣圖必須化為智慧型物件
- 形狀
- 必須採用向量，並勾選『對齊邊緣』
- 為8的倍數
- 圖層命名方式：
- 全部採用英文
- 一個頁面，一個資料夾，資料夾前加 - (減號)
- 底線區隔
- 全部小寫
- 屬性_頁面_功能_序號_狀態.png(jpg)
- 例：btn_index_music_00_normal.png
屬性
|
頁面/共用區塊
|
功能
|
序號
|
狀態
| |
範例
|
btn
|
index
|
music
|
00
|
normal
|
說明
|
|
|
music
play
pause
|
|
- 按鈕命名方式有2種
按鈕按下時有變化，要製作兩張圖
|
按鈕只要製作一張圖
|
 |  |
Android
|
IOS
| |
PSD解析度
|
72
|
72
|
起始製作畫布
|
720x1230(扣除上方.狀態列的高度)
|
640x1136(含狀態列的高度)
→ 先做android → 再用延展背景的方式拉大到750x1334
→ 等比縮放到 640 x 1136
→ 調整物件相對位置
|
各單元高度
|  |  |
物間起算點(x,y)
|
|
包含狀態列
|
背景圖高度
|
不含：
|
全螢幕，包含：
|
輸出圖檔命名方式
|
 |
|
PS外掛
cut and slice me
輸出起始值
|
1個步驟：
|
2個步驟：
|
使用字體
|
只使用
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 按下時，改背景樣式
|
相關配套(宣傳)圖片
- Android圖片資源、螢幕擷取畫面和影片 https://support.google.com/googleplay/android-developer/answer/1078870?hl=zh-Hant
- IOS圖片資源、螢幕擷取畫面和影片
iOS Human Interface Guidelines > Icon and Image Design
- 列表說明
說明
|
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
|
訂閱：
文章 (Atom)