2015年4月13日 星期一

2015 SEO

  1. 別在網頁堆砌關鍵字:
過度堆砌,除了關鍵字排名降低外,嚴重的話更可能導致黑站。
關鍵字的密度,在整篇文章的5%以內為佳。

  1. 徹查網站中的重複內容:
網站建置很流行再架設另一「手機版」,也是導致內容重覆的因素。
應以自適應網頁設計RWD(Responsive Web Design)來架設網站。

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

  1. 加強網站的內容:


  1. 合理的置放網頁廣告:
Panda熊貓演算法對這樣的狀況也祭出關鍵排名波動的管制動作。



網站優化=CLOUDS

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

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

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

2015年3月31日 星期二

【筆記】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
同螢幕高






Photoshop做圖置圖注意事項


  1. 起始製作畫布用2@:
    1. Android:720x1134(不含狀態列)
    2. IOS:640x1136 (包含狀態列)
  2. 所有單位,全部用8的倍數
  3. 用混合效果產生的陰影、框線,必須為2的倍數
  1. 點陣圖必須化為智慧型物件
  2. 形狀
    1. 必須採用向量,並勾選『對齊邊緣
    2. 8的倍數
  1. 圖層命名方式:
    1. 全部採用英文
    2. 一個頁面,一個資料夾,資料夾前加 -  (減號)
    3. 底線區隔
    4. 全部小寫
    5. 屬性_頁面_功能_序號_狀態.png(jpg)
    6. 例:btn_index_music_00_normal.png

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


    1. 按鈕命名方式有2種
按鈕按下時有變化,要製作兩張圖
按鈕只要製作一張圖






Android
IOS
PSD解析度
72
72
起始製作畫布
720x1230(扣除上方.狀態列的高度)
640x1136(含狀態列的高度)
→ 先做android
→ 再用延展背景的方式拉大到750x1334
→ 等比縮放到 640 x 1136
→ 調整物件相對位置
各單元高度
物間起算點(x,y)
  1. 不含狀態列
包含狀態列
背景圖高度
不含:
  1. 狀態列
  2. nav
全螢幕,包含:
  1. 狀態列
  2. 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 按下時,改背景樣式





















相關配套(宣傳)圖片




  1. IOS圖片資源、螢幕擷取畫面和影片
iOS Human Interface Guidelines > Icon and Image Design


  1. 列表說明
說明
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