2018年7月23日 星期一

【SCSS】2.3 @import (引用)

這和css的 import 概念是一樣的，用法也類似。這裡用bootStrap當範例：





閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年7月17日 星期二

【SCSS】2.2 註解種類


  1. //編譯後會消失
  2. /content/編譯後會出現在.css內
  3. /**/編譯後為.css的註解

閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年7月1日 星期日

【SCSS】2.1 資料夾與檔案命名

本來想依照BootStrap建立資料及與相關檔案，但是他的架構實在太龐大，不適合連注音都看不懂的幼幼班。媽媽說學習要按部就班，先學爬在學走！！所以先從小的架構開始寫起。
閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年6月20日 星期三

【SCSS】2.0 學習日誌


以下是一邊看著BootStrap（天書呀QAQ），一邊查看各種資源(包含活生生的工程師們)，試圖轉碼出來的心路歷程。


寫學習日誌是因為深知自己是金魚腦，就算現在試成功了以後也還是會忘。


為了方便找資源的夥伴們快速左轉（掩面），說明一下目前自身能力



會的 不會的
  1. HTML熟
  2. CSS熟
  3. 具有RWD排版概念
 除了左邊的，其他程式全都不會
閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年6月5日 星期二

【筆記】1.7 VS Code 外掛 Live Sass Compile Config

撰寫SCSS， Live Sass Compile Config 外掛是絕對必要的存在，
這也是我當初從眾多軟體中決定使用 VS Code 的主因，
在此簡述一下 Live Sass Compile Config 的優點以及設定

1. 自動偵錯
安裝之後，編寫SCSS Code的過程中，
 Live Sass Compile Config 會自動檢查程式碼是否正確，
如果編譯正確，在畫面下方出現綠色的『success』
如果編譯錯誤，則出現紅色的『error』

閱讀更多 »
Posted by 於 沒有留言:
標籤： ,

2018年6月2日 星期六

【筆記】1.6 VS code使用習慣設定-清除句尾空白

在coding的時候，寫著寫著就會變這樣



對於頁尾空白總覺得有點逆毛
這時候只要到VS code修改設定，操作方式如下
進入：檔案 > 喜好設定 > 設定



這時會進入這個畫面



在搜尋框打上 files.trimTrailingWhitespace，然後把選項打勾



從此以後存檔時就會自動清除句尾空白（舒心～～



PS：如果無法立即使用，試試關掉VS code後再重開。






Posted by 於 沒有留言:
標籤：

2018年5月25日 星期五

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


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



閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年5月1日 星期二

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

在sublime，我安裝的外掛有

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

Alignment
程式碼對齊

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

Emmet
程式速寫

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

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

閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年4月30日 星期一

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

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

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



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

閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年4月17日 星期二

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

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

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

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

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


閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年4月1日 星期日

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

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

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


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

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

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


閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年3月29日 星期四

【筆記】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

Posted by 於 沒有留言:
標籤：

2018年3月19日 星期一

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



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

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


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

TextColorDark
textColorDark


閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年2月10日 星期六

【筆記】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的默認插入行為。
Safari的默認插入行為



閱讀更多 »
Posted by 於 沒有留言:

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 於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)