要改的地方太多了，那就改天吧

目前正在瀏覽文章分類：網頁設計

思源黑體設計稿字體樣式與CSS font-weight 對照

有時候要照別人的設計稿按圖施工，在 Adobe 的軟體裡面，思源黑體的字體樣式是用 Light, Black, Medium…而網頁的 css font-weight 並無這些東西，打 font-weight:black 是顯示不出來的。版本比較新的 Adobe illustrator 有一個產生 CSS 的工具，外行人的想法就是以為導入一個工具之後就可以解決所有問題，但是有常識的人都知道這種「自動轉換」的東西通常有三大特點，一：很雷，二：超雷，三：雷到爆。以本例來說，需要知道 ai 檔...

繼續閱讀

網頁設計視覺設計

#webfont

Electron 實戰：讓 Mac 玩開心水族箱不用再每次按允許 Flash

聽說某些職業的人，都會被問說曾用技能解決什麼生活問題？讓我想到之前玩的一個東西，起頭又是想當年…大學電腦課有三寶：開心農場偷菜、開心水族箱撿寶、跑跑卡丁車尬車，結果還不到十年，已經人事物全非了，開心農場在2017結束營業，跑跑卡丁車在 Mac 跟手機上沒得玩，大家都在拼人生 Online。不過我還一直持續在玩 Facebook 的開心水族箱，幾乎每天都會登入日曆簽到，但後來覺得越來越難玩了…Facebook 上的 Flash 小遊戲會被瀏覽...

繼續閱讀

吃喝玩樂生活交通網頁設計

#facebook#flash#js

那些年，一起整人的瀏覽器擴充套件們

使用者在電腦上使用先進的網頁瀏覽器，如 Google Chrome 或 Firefox，因為這些瀏覽器可以安裝「擴充套件」，有時可讓使用者達成一些方便的功能，但網頁或 web 系統，可能就因為這些擴充套件，發生排版顯示，或是讓系統無法操作、購物網站無法下單等等的嚴重問題。一、廣告攔截的擴充套件讓正常內容也出不來當使用者都在網路上的時候，廣告也跟著出現在網路上了。網路有很多地方，以網頁來說，廣告是怎麼顯示在網頁上的？最單純的可...

繼續閱讀

數位行銷科技網頁設計軟體產品體驗

#css#form#google#RWD#Web

蘋果手錶 Apple Watch 竟然可以開網頁了，RWD 又要多調一種 了嗎？

2018/6 的蘋果開發者大拜拜上發表了 watch OS5，其中有頁簡報，一看就令網頁前端人員大驚失色，手錶竟然可以開網頁了！web 系統開發除了要把所有「人花一秒鐘」判斷的事情都寫成機器邏輯，滿足所有已存在＋所有使用者幻想的需求，然後只設計一版畫面，就能把所有的操作介面硬塞在一個小小的螢幕中，在所有裝置正常操作，那麼，現在要針對手錶做調整嗎？我們先來調查一下 Apple Watch 手錶有多大尾，根據市場研究公司 IDC 的 2018 Q...

繼續閱讀

使用者介面網頁設計

#apple#ios#mobile#RWD#watch

瀏海螢幕「又」來了，網頁設計人員準備好迎接痛楚了嗎？

蘋果在台灣時間 2017 年 9 月13 日發表了 iPhoneX，在此之前，其實許多手機廠商已經都在市面上發售超薄邊框+屏佔比極高+特殊螢幕切割形狀的手機，但是「蘋果出的」這四個字在消費性電子產品市場代表什麼意思，就不多廢話了。又過了一年，2018 年發生了什麼事呢？火影忍者的角色-佩恩六道的台詞，準備讓世界迎接痛楚？更多的 Android 手機廠商推出了更多瀏海螢幕的手機，而 2018 年蘋果發表的新手機，有新的顏色 XS、更大支的版本 X...

繼續閱讀

網頁設計

#apple#ios#iphone#RWD

竟然無法登入新系統報稅，2018 報稅季讓 Windows 的使用者都驚呆了…

因為 Windows 的字體在 4K 螢幕上面看了不舒服，去年不小心換了台 Mac 電腦，轉換有許多陣痛，陣痛之一就是之前那臺用了 N 年的晶片讀卡機在 Mac 沒法用，也懶得買新的，而且自然人憑證也要到期了，還在想說今年報稅要怎辦的時候，就看到了重大更新《台灣報稅系統優化 mac&linux系統與平板專用報稅網站正式上線》我這輩的年輕人真的很爽，不像長輩那代報稅還要用手寫、整理扣繳憑單，現在幾乎只要會登入然後按下一步就好了。報稅系...

繼續閱讀

使用者介面視覺設計軟體產品體驗

#UI

用 IFTTT Webhooks 讓網頁發訊息到 Line

之前照一篇 如何在 WordPress 有新留言時，透過 Line 通知站長？ – 踢踢五，使用 IFTTT 串接 WordPress RSS feed 和 Line notify，用了好幾個月也還算穩定，至少沒碰過什麼服務掛掉或三天兩頭維修的情況。那今天我有一個客製化的網站，沒有 RSS Feed，也不是 WordPress，想要在某些情況時，例如有人登入後台，或是 ajax 走到 response error 的那段的時候，我會接到 Line 通知，要怎麼做哩?去申請了 LINE Notify 的登錄服務，要填...

繼續閱讀

網頁設計軟體產品體驗

#js

在網頁輪播廣告播放背景影片

繼「這有個簡單的功能，評估一下」，這次是「有個簡單的功能，處理一下」系列，前陣子實作了一個常見的需求「在網頁的輪播廣告，放影片」，在製作時遇到許多細節問題與設計思維，值得寫一篇文章來分享。(施工前)(一)、影片只有一種嗎?本來有圖文混排的輪播廣告，現在多個「簡單的需求」要放影片，起手式要考慮的就是1.伺服器流量和頻寬問題2.瀏覽器相容性問題。小時候看一些虛擬主機，每年幾百塊台幣卻有無限流量、或是每個月流量...

繼續閱讀

網頁設計

#video

為了做 app 而做 app

上週末把之前做的超廢玩具網站 線上找電影和連續劇 首頁上的「本月免費線上看」片單更新一下，把一小塊改成用 vue.js 的 v-for 列表渲染來寫。更新完之後不知道為何，突然想說把 RWD 網頁做成 Android 的 APP ，就手滑花了台幣 763元+跨國交易費 30 元，弄到了一些 Line Points 點數跟一個 Google Play 開發者帳號。沒有硬漢的開 Android Studio 重頭刻一個，也沒有開 Android Studio 然後放個 webview 了事，也沒有用 cordova 或...

繼續閱讀

網頁設計軟體產品體驗

#app

三分鐘學會用 npm 相關套件在命令視窗編譯 SCSS

編譯 SCSS 除了用 Ruby-compass, Koala, Prepros, Dreamweaver CC 2017，還可以用功能也很強大、不會彈廣告、不用錢的 node.js + gulp 或 webpack，但是我覺得網路上的文章都太詳細冗長了，容易嚇壞一堆根本不想寫 code 卻又被逼著寫的視覺設計師。一直很佩服程式人十分鐘系列，可以把複雜的事情濃縮得比較易懂，也包含一堆關鍵字可以去深究。不過我就來幾篇三分鐘系列的速食文章吧。以下步驟全部以 Windows 10 環境為主起手式先安...

繼續閱讀

網頁設計

#css

上一頁
下一頁

近期熱門 Hot Posts

最新發布 New Posts

    Contact Me

    E-Mail

    Open Email Client

    LINE 私訊
    此為 LINE 官方帳號，僅用於連絡，不會群發訊息

    加 LINE 好友

    FB Messenger/Instagram 私訊

    FB Messenger IG 小盒子

    Telegram 私訊

    傳訊息到 Telegram