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

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

《 Good Product Manager / Bad Product Manager 》中文化

什麼才是最難的事?》收錄一則“產品經理指南”[註1],內容主要界定好壞PM的標準。該篇指南緣起於作者Ben Horowitz當時任職Netscape產品經理部主管(現任安霍創投合夥人),發覺部屬各自表述工作職掌,沒有統一做法,才領悟到業界從未有人明確定義產品經理的職責。為了進行內部訓練,寫下這篇流傳一時的文章。

Read More

玩運彩討論區文章列表:APP V.S手機版

討論區是玩運彩非常重要的功能,可說是網站的基石,隨著這些年行動裝置的盛行,討論區也在修正調整適合在行動裝置的操作模式,當然也有討論區APP,並且持續開發、優化著,然而當我認為討論區APP在行動裝置使用體驗上更優於手機版時,卻在測試或訪談時也陸續獲得"討論區手機版比APP好用"的回饋。

Read More

ios介面指南02

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

Read More

底部導航(Bottom Navigation)與抽屜式導航(Navigation Drawer)的對決!

導航,依據Android的設計規範定義:是指用來引導用戶在應用程序中移動,說白話一點,就是如何讓你的產品用戶能找到他的目的地,而一個設計理想的導航,除了能突顯出產品核心外,更能有效快速的引導用戶完成任務。

移動裝置的導航模式目前常見的有抽屜式導航(Navigation drawer)、標籤式導航(Tab Bar、Bottom navigation)、導覽式導航(List、Springboard、Card)等等,而本篇文章這次想探討的是最常被拿來比較的Navigation drawer與Bottom navigation。

Read More