2017年12月31日 星期日

2018年的19個網頁設計趨勢

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

  1. 更普遍的互動和動畫
    頁面中加入更多微互動的動畫，但這些動畫並不會分散使用者的注意力。
    在網頁一開始出現的時候，區塊顯示、點選導覽以後跳到頁面下方，這些呈現方式是直接，甚至可說是粗魯的。區塊直接啪一下的出現在面前，完全的功能導向但也完全的沒有美感。

    現在使用者習慣看到，本來隱藏的區塊在點選了某個功能之後，緩緩的漸亮然後浮現，或是以滑動的方式呈現， 這造就了一種優雅的節奏，也提升了使用上的舒適感。
閱讀更多 »
Posted by 於 沒有留言:
標籤： ,

2017年12月23日 星期六

2018設計趨勢心得


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

    以www.agoda.com的表單來說
pc 行動裝置


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




Posted by 於 沒有留言:
標籤：

2017年12月22日 星期五

2017設計時常出現的錯誤

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

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


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


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

2016年12月31日 星期六

2017 18個網站設計趨勢

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

18 web design trends for 2017

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

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

  1. 內容優先


    任何排版佈局都只是為了讓使用者專注在應該閱讀的項目，而且不影響閱讀速度。

    這點在台灣的網頁非常難以實現，客戶與老闆從來沒有在想客戶要看到什麼，在客戶與老闆雙重要求：
    『大一點』
    『紅色』
    『加粗』
    『加閃亮亮』....
    一大堆花俏搶眼各種顏色都上了同一個頁面之下，重點早就不知道被淹沒到哪裡去了。
      
閱讀更多 »
Posted by 於 沒有留言:
標籤： ,

2016年12月30日 星期五

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*/


Posted by 於 沒有留言:
標籤： ,

2016年5月22日 星期日

電子報設計原則

電腦瀏覽
  1. 不使用div排版，請使用table來編排
    使用table來配置img和text。原因很簡單，因為table tag歷史悠久，它是最能被大多數email client辨識的tag，容錯率高。
  1. 不使用css seletor，請使用inline-css
    因為在<head>中設置的style，可能會被收信系統刪除，為了確保你要的樣式可以正常地被呈現，請將css個別地寫在tag行內。
  1. 圖片(img)之來源(src)請設為「絕對路徑」
  2. 圖片(img)請務必設置正確的width和height屬性，alt屬性亦然
  3. 不使用影片及flash相關tag
  4. 無法使用 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/。
  5. 不使用javascript
EDM文末加入一個「取消訂閱此電子報」的連結
在近年來垃圾廣告郵件氾濫的時代，即使你是一家正常發送電子報給會員的電子商務網站，也請加入這個功能，以免被spam
Posted by 於 沒有留言:
標籤： ,

2016年3月21日 星期一

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

手機輸入法造成的問題：
  1. 常常會自動校正
  2. 自動首字轉大寫
  3. 自動加空格
解決方法：

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


Posted by 於 沒有留言:
標籤：

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才是真正的網站優化!!
Posted by 於 沒有留言:
標籤： ,

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


Posted by 於 沒有留言:
標籤： , ,
訂閱： 文章 (Atom)