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

ios介面指南02

本篇指南閱讀接續ios介面指南01,為“視覺設計”與“圖標圖像”重點整理。指南內容偏向介面佈局內應該注意的尺寸設置,並包含圖標與文字等等,裝置螢幕尺寸越來越多樣,必須設計一個佈局與適應性良好的介面,自適應每個裝置螢幕尺寸,必要時皆包含橫向、縱向螢幕切換,在閱讀時保持流暢度。

Read More

ios介面指南01

ios人機界面指南中,主題與介面要點已簡單概略整個ios介面設計的大方向,然後再利用幾個分類章節詳細說明應用概念,目前預計使用四個篇幅來完成ios介面指南的閱讀重點,分類如下:

1.介面要點、欄位/視窗/控制元件、2.應用架構與用戶互動、3.視覺設計與圖標圖像、4.結論與其他(系統功能與擴展)

Read More

After Effects 的第一堂課


After Effects 的第一堂課:事前準備

與DragonBones相比,光用看的差不多就知道After Effects複雜的程度,本篇會是接近無聊的事前準備過程,勢必要先了解軟體操作的一些皮毛(也就是概念、邏輯),在實際製作上才能更快上手;After Effects不像製作APP或撰寫網頁的軟體介面,有更多交錯性與相互應用,操作方式可能稍微不是那麼好理解(聚集龐大的功能),可以偷偷變更成中文介面,指令名稱會與Adobe系列類似。

Read More

骨架動畫DragonBones

圖片來源:Dragon Bones

骨架動畫軟體常用於遊戲與動畫的製作,也稱作計算式動作軟體,比起flash的沒落,骨架動畫反而崛起盛行,功能不斷推層出新,其內容包含了flash基礎、3D應用概念,並能導入Html5使用,雷亞日前推出的新遊戲(Sdorica萬象物語),大量運用此技術來研發,神魔之塔、刀塔傳奇也都非常仰賴骨架動畫所帶來的動態表現,在手遊市場逐漸變成趨勢。

Read More

Madhead神魔之塔&行銷

圖片來源:神魔之塔遊戲截圖

Madhead為2008年創立的香港手遊公司,開發與營運皆一手包辦,於2013年推出的神魔之塔聞名亞洲地區,遊戲上市10個月就創下了600萬次的下載紀錄,穩佔台灣市場,目前在巴哈姆特人氣排名高居不下,顛覆了手遊只有數個月的生命週期。(曾經有集團想以7000萬美元收購Madhead的股份) Read More

韓國遊記

第一次跟旅行團遊韓國,節省在行程安排上非常多的準備事項,起初認為跟團在旅遊行程會很倉促,但最後感覺是非常不錯的小團歡樂行,導遊精通中日韓歷史,可以直接切入重點,從首爾近郊開始沿路了解當地的年代背景、韓國人的生活觀念與文化、特色美食,時程上安排很寬裕,有不少的自由行時間,團員們幾乎是年輕學生與家長,在整個過程添加不少趣味。

Read More

銀行APP

打開網銀APP,通常是做即時性的操作,外出可便利使用的綁定支付、轉帳繳費功能等等,網銀APP優先考慮的應該是功能性與介面引導的問題,可以讓使用者順利完成正在操作的項目,Play商店至目前還沒有破4分的網銀APP出現,所以大多介面體驗都停留在普通程度,也顯少看到介面更新改版(有功能性方面的更新),陸續有更新的APP,幾乎是整個汰換成全新介面,如行動生活家APP、土銀網路銀行web,銀行體系漸漸也意識到線上服務的重要性。

Read More