Glyphs

平時設計任務常用工具為 Illustrator,製作介面或圖形必備的好幫手;這次試用的 Glyphs 為字體設計專用,預覽官方展示操作,針對字體繪製有多種功能對應,完成後也可匯入 Illustrator,或許也能繪製非字體的複雜圖形,就來體驗一下製作效果如何。

Read More

Principle

Principle 是一套高度擬真的原型製作軟體(high-fidelity prototyping),適合做平移、縮放、旋轉等簡易補間動畫,有效率的完成APP、WEB類畫面過場效果,本篇主要將 Principle 效果應用於扁平類動態,利用任務中BANNER、網頁宣傳提案,實際模擬展示。

Read More

藍湖 Lanhu

體驗後覺得是一套不錯的協作平台,可做PM、設計、工程開發上溝通使用,Lanhu 也支援 Sketch 官方版本、iOS/Android編碼樣式產生、互動原型等功能,整體來說像是 Zeplin 與 Invision 的小合體。

Read More

Android APP + SVG

自上一篇文章 iOS APP + SVG 測試,SVG效果載入 iOS 算成功一半,還需要測試更多載入狀況,接著繼續研究 Android APP,使用 Android Studio 實測,方向同樣為讀取 SVG、JSON 圖檔為主,經歷 iOS 研究過程,Android 應該也是可行的。

【 Android Studio 】

大致先了解開發環境與介面,主程式安裝後所佔空間不大,整體操作下來還算簡易,有方便圖形介面、框架編寫所見即所得的設計視窗。

Read More

iOS APP + SVG

svg 確實可運用於網頁,一般讀取、匯入即可顯示,效果可透過 svg <path> 路徑變化,或 CSS animation 動畫屬性控制;那 svg 也能在 APP 顯示嗎?使用 Xcode 測試,往“能否讀取svg圖檔”方向,嘗試研究看看。另外也測試由 adobe AE 所匯出的 json 檔是否也用於 iOS APP。

Read More

文章觀點評論:防止誤觸按鈕(1)

評論:How to Prevent Users from Mistapping Icon Buttons

【手機版web按鈕】

近期執行的任務剛好有類似案例,就拿手機版web按鈕來論述,於各個不同頁面中添加“轉贈彩幣”按鈕,此功能目的是希望提升轉幣操作的便利性,而添加的頁面,並未全區都針對手機使用者放大元素,按鈕則有特定使用族群,從不同面向來發表個人觀點

Read More

SVG+CSS

svg已普遍在網頁中使用,是一種向量圖片,可藉由樣式表或程式碼控制,縮放不失真且變化自由度高,可使用軟體(如illustrator)自行繪製、網路提供的元件素材(material design)或線上製作svg動態圖,可於大部分瀏覽器顯示。例如要製作一個圓,樣式表為標籤添加border-radius屬性,svg則為特定標籤<circle>,並添加專用屬性如座標cx、cy與半徑r,兩者圖形本質同樣是使用編碼製作,svg能有更多外型變化優勢。

Read More

新手設計家

在寫這篇文章時,室內已經進入清掃收尾階段,目前正在處理客廳四扇落地玻璃門,第一次更換紗網,靠一支短短教學影片看完就上,跟廠商拿了材料,很生手的完成影片中每個步驟,成果看起來還行。在此之前,以為只需要測量好門框長寬,結果到了採買現場,才知道紗網可能沒有零售、壓條也有分粗細,甚至連門把都沒有統一規格(就算把現有門把拆下至現場比對也不同),店家解釋每批手把生產規格都會有誤差,即使是同款也一樣。居家維修對於新手來說,在動工之前不外乎就是上網看看部落格分享、教學影片,以打帶跑模式緩慢進行每個細節處理。 Read More

CSS樣式表

階層樣式表,簡稱CSS,用於改變HTML文檔模型中的各個元素(瀏覽器則將文檔模型視覺化呈現),CSS可變更HTML網頁標籤屬性,如區塊大小與顯示位置、間距與外型、字體與匯入樣式(svg、json)等等,或使用動畫屬性(transition)製作轉場效果,帶給網頁多元且自由的視覺優化。

HTML標籤可自由定義類別名,在每個類別名添加CSS屬性來控制樣式,標籤本身也帶有特定屬性,如常用的<div>標籤自帶區塊屬性(block)、<h1>標籤則有32px字級與粗體屬性(font-weight);若以編寫一個icon為例,大致來說就是選擇HTML標籤 > 添加CSS類別名 > 樣式表內給予相關屬性讓它看起來像一個圖標。

See the Pen
xerYdj
by wenchi (@wenchi06)
on CodePen.

( HTML標籤種類有很多如按鈕、文字、表單、區塊、選擇器等等,皆有固定用途,類別名可依需求再添加複數;如上圖中每項屬性與值,為標籤做宣告)

Read More