很現實的，由於行動裝置介面空間有限，可比用寸土寸金來形容。以網頁或是APP來說，純裝飾的圖形在畫面上實在太過奢侈，為了在小小的空間裡，塞入更多的資訊，設計形態產生改變，小小的圖形開始代表著一個操作按鈕。
自從行動裝置問世之後，使用者接收訊息的方式，也漸漸從純文字轉向圖像閱讀。設定界面，以前只有文字項目，現在項目的前方則會增加小圖示，圖形+文字這樣的做法，讓文字閱讀與圖像閱讀的使用者，不但增加了美觀，更增加了可讀性。
2019年6月2日 星期日
【筆記】icon 字體：Font Awesome，免費 / 付費版都有
Font Awesome 2018極受歡迎的開源ICON字體，進入網站就會看到各式各樣的扁平ICON，點綴在簡約的漸層畫布上，至2019/06站上的ICON字體共有5,099枚，其中可免費使用的有1,515枚。
很現實的，由於行動裝置介面空間有限，可比用寸土寸金來形容。以網頁或是APP來說，純裝飾的圖形在畫面上實在太過奢侈，為了在小小的空間裡，塞入更多的資訊，設計形態產生改變，小小的圖形開始代表著一個操作按鈕。
自從行動裝置問世之後，使用者接收訊息的方式，也漸漸從純文字轉向圖像閱讀。設定界面，以前只有文字項目，現在項目的前方則會增加小圖示，圖形+文字這樣的做法，讓文字閱讀與圖像閱讀的使用者，不但增加了美觀，更增加了可讀性。
很現實的，由於行動裝置介面空間有限，可比用寸土寸金來形容。以網頁或是APP來說，純裝飾的圖形在畫面上實在太過奢侈，為了在小小的空間裡，塞入更多的資訊，設計形態產生改變，小小的圖形開始代表著一個操作按鈕。
自從行動裝置問世之後，使用者接收訊息的方式，也漸漸從純文字轉向圖像閱讀。設定界面，以前只有文字項目，現在項目的前方則會增加小圖示，圖形+文字這樣的做法，讓文字閱讀與圖像閱讀的使用者，不但增加了美觀，更增加了可讀性。
2019年4月1日 星期一
Wacom 數位筆無法按壓選取
今天更新驅動程式後，發現Wacom 數位筆無法按壓選取，這簡直是不斷逆毛摸，超令人爆青筋。查了許久發現要改設定
打開數位板程式設定：
打開數位板程式設定：
- 選擇其他所有程式
- 選擇鏡射
- 下方使用Windows Ink ，取消勾選
2016年5月22日 星期日
電子報設計原則
電腦瀏覽
- 不使用div排版，請使用table來編排
使用table來配置img和text。原因很簡單，因為table tag歷史悠久，它是最能被大多數email client辨識的tag，容錯率高。
- 不使用css seletor，請使用inline-css
因為在<head>中設置的style，可能會被收信系統刪除，為了確保你要的樣式可以正常地被呈現，請將css個別地寫在tag行內。
- 圖片(img)之來源(src)請設為「絕對路徑」
- 圖片(img)請務必設置正確的width和height屬性，alt屬性亦然
- 不使用影片及flash相關tag
- 無法使用 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/。 - 不使用javascript
在近年來垃圾廣告郵件氾濫的時代，即使你是一家正常發送電子報給會員的電子商務網站，也請加入這個功能，以免被spam
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)