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

目前正在瀏覽文章標籤：RWD

Apple Vision Pro 內的 Safari 前端與 UI 設計雷區大公開

2024 年 1 月底 2 月初，蘋果的空間運算設備 Apple Vision Pro 終於媒體解禁與美國開賣，這個禮拜的社群到處都是戴著滑雪鏡般外型的機體，徜徉虛擬實境世界的短影片。目前已經知道很重要的 3 點:現階段還沒有中文輸入法，而且下載 app 需要準備美區的 Apple 帳號。有些系統 UI 介面只有停止的時候才會顯示，沒辦法邊走邊用，視窗會「留在原地」，需要用手捏著視窗才能把視窗帶著走，但走動的時候，捏著的視窗會變半透明的，移動太...

繼續閱讀

使用者介面網頁設計視覺設計

#apple#css#css3#HTML5#ios#RWD#UI

表格框線異常變粗之謎，調整了瀏覽器縮放比例是其中原因之一

以前會碰到一個惱人的網頁設計怪問題，要重現問題很簡單，就是調整電腦瀏覽器縮放設定(用Ctrl+滾輪，或是從瀏覽器工具列裡面選)，或是調整 Windows 的縮放設定(例如顯示設定>變更文字、應用程式與其他項目的大小)，只要不是 100%，網頁就會顯示得怪怪的，例如表格/儲存格的框線會粗細不一，如以下擷圖:Windows，有一條橫線特別粗macOS Monterey 接一般的 PC 螢幕，橫線跟直線都有幾條特別粗macOS Ventura 的 Macbook Air，有幾條直...

繼續閱讀

網頁設計

#css#RWD

各部會線上登記振興加碼券竟然用了這個 真的把我嚇傻了

又是內容農場標題產生器…三倍券推出後，文化部、體育署、農委會、客委會也推出各種加碼券，前幾天看到聯合新聞網的一篇新聞砸2千萬建網站、傳簡訊 農遊券最燒錢，新聞內文摘要如下：– 農遊券：網站建置再加上行銷、中籤簡訊費用，合計高達2000萬餘元，– 動滋券：花1100萬元建置網站– 藝FUN券：App建置系統花費745萬元– 客委會：用155萬元的環境系統設計費新聞內文備份(點擊之後會在新視窗開大圖)：UDN聯合報的記者用標題騙殺全國看...

繼續閱讀

數位行銷科技看新聞會與事實脫節科技新聞解析網頁設計

#api#app#google#inappbrowser#map#RWD#振興券

三小招提升網頁 PageSpeed 分數，優化網頁開啟速度與 Web Vitals 指標

有在追蹤使用者體驗的各種心理學研究，應該都有聽過網頁開啟速度的 X 秒原則，從西元二零零幾年到現在，在各種文獻都有不同的 X 數值，總之網頁開啟速度盡量越快越好。Google 也說過載入速度會當作SEO排名因素之一(Official Google Webmaster Central Blog: Using page speed in mobile search ranking)，網站好不容易導流得到曝光，內容好不好先不論，卻敗在開啟速度，有點可惜，所以花時間調校，對於網站經營還是能有一丁點幫助...

繼續閱讀

網頁設計

#cloudflare#google#js#pagespeed#RWD#SEO#webfont

iPadOS 讓 iPad 可以接滑鼠了，游標偵聽事件能用了嗎？網頁選單要大改嗎？

Apple 在2019年6月的 WWDC 開發者大會發佈了 iPadOS 和 iOS 13 的預覽版，所謂的 iPadOS 就是把 iPad 的 iOS 作業系統另外獨立出來，一國兩制….有點敏感。總之版本 13之後，蘋果手機跟平版的作業系統各有不同的名字，還有不同的功能宣傳頁面。這些酷炫的 iPadOS 新功能，想起從前有支令我印象深刻的 Apple 廣告，一個有錢的小孩帶著 iPad Pro 和 Apple Pencil 四處奔波學習、體驗生活，過了豐富的一天，然後回家時鄰居問他「嘿？你...

繼續閱讀

使用者介面網頁設計

#apple#ios#mobile#RWD

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

使用者在電腦上使用先進的網頁瀏覽器，如 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

Apple Watch 除了讓設計師隨身接收改稿通知，還有當捉姦神器，還有什麼用途?

Apple Watch 是什麼？就是品牌行銷的常見案例，專門考驗信仰的蘋果公司出的，貼身裝置程度介於手機和內褲之間的智慧型穿戴裝置。甚至 2017 年的出貨量超過瑞士鐘錶業的總出貨量，這種電子手錶到底有什麼厲害的？上圖這個蘋果官網的截圖，做這行的人看了都超幹的訊息，可是美國蘋果官網就是用這個文案，台灣版只是照翻而已…電子手錶除了用來看時間之外，正面一整塊都是觸控螢幕，還可以跟 iPhone 連線，功能跟 iPhone 連動是很有意...

繼續閱讀

3C電子產品

#apple#hardware#RWD

用 css 解決產品列表清單掉一格的情況

我們上網時偶爾會看到上圖左這種情況，應該是一塊一塊排好的內容，卻出現異樣的空白?有時候這個是設計風格，為了體現品牌的自由風氣，並特意強調那兩個落單區塊的獨特性，並且為了視覺上的平衡美感所做的處理，甚至還經過 A/B test 與各種 UX 實驗，除了可以達到最佳的轉換率，還可以引起討論話題…但我想此例純粹就是個小失誤而已。(ps.上圖案例網頁不是我做的，只是上網時剛好逛到而已。)在上圖右我們把每個塊狀元素的區域劃分出...

繼續閱讀

網頁設計

#css#css3#RWD

下一頁

近期熱門 Hot Posts

最新發布 New Posts

    Contact Me

    E-Mail

    Open Email Client

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

    加 LINE 好友

    FB Messenger/Instagram 私訊

    FB Messenger IG 小盒子

    Telegram 私訊

    傳訊息到 Telegram