iPhone X 適配 手Q H5頁面通用解決方案

騰訊ISUX :目前的 H5 頁面可以分為通欄頁面和非通欄頁面兩種,每種頁面都可能有底部操作欄,具體如下: 一. 通欄頁面 頂部通欄 某些業務的一級頁面多數使用了頂部通欄 banner 的效…

微信小程序官方設計規范(附PSD+Sketch源文件)

UI妹兒(ID:UIfaner):上周,U妹剛完成了一個微信小程序項目設計,這是U妹做過的第3個小程序,早在去年小程序還未開放時,就設計了第1個小程序,在小程序正式開放后,設計了第2個,在U妹做第3個…

響應式圖片解決方案

如今開發一個網站不是響應式都不好意思拿出來,那么作為響應式中的重要一環「響應式圖片」你又是如何解決的呢? 網站的平均加載已經到了近 2MB 并在不斷地增加中,其中圖片占據了絕大多數流量(…

CSS | 實現下劃線的N個姿勢

下劃線?一般在文檔中常被用作增強注意,在過去打字機時代,下劃線成為了唯一的一種文字強調方式,具體的操作方法是在已經打出來的文字上面退格,再在同樣的地方打出下劃線。

提高設計還原度!寫給設計師的iOS前端教程(一)

@小乖乖老爸?:你是不是有這樣的經歷?自己覺得還不錯的設計,等工程師做出來,放在手機上一看,怎么看都不對勁。當你有這種疑惑的時候,就是設計還原度的問題了。想提高設計還原度,盡可能縮小設計稿與完成品之間…

響應式Web設計 – 布局

寫在前面 去年上半年,我開始著手推動項目中響應式設計的落地。以官網優化需求為契機,主動去做了響應式的頁面設計,也說服了產品、設計和開發的相關同事一起把它上線落實,但不幸的是,由于各種方面的原因

谷歌字體安裝指南,并在網頁上使用 Google Web font

現時有很多網站流行使用網頁字體,這些字體大部分來自?Google?Font 提供的700+免費字體,對于網頁設計師和前端人員來說,是個很棒的字體庫,設計師可以使用字體庫提供的免費字體來網頁設計,而前端…

超贊的響應式圖像解決方案

自從2010年Ethan Marcotte開始討論響應式網頁設計,開發者和設計師們競相尋求處理響應式圖片的方法。這的確是一個棘手的問題?,因為我們對同一個網站在眾多設備寬度下,使用同一圖像源。…

如何做一個讓人聞風喪膽的 H5?(內有干貨)

前言 最近火熱的有聲娛樂平臺 APP,企鵝 FM,在8月28日鬼節前夕,聯合《盜墓筆記》推出了“勇敢者的游戲”活動。作為一個 UI 工程師,在這個移動互聯網叱咤風云的時代,每次看到朋友圈…

玩轉HTML5移動頁面——優化篇

承接上文《玩轉HTML5移動頁面(動效篇)》,上次說的是讓頁面動起來的一些小技巧。 而頁面動起來的根基是功能可用的頁面,因此有必要分享一些優化細節的技巧和方向,熟悉掌握一些方法論還是會對…

玩轉HTML5移動頁面——動效篇

作為一名前端,在拿到設計稿時你有兩種選擇: 1.快速輸出靜態頁面 2.加上高級大氣上檔次狂拽炫酷屌炸天的動畫讓頁面動起來 作為一個有志向的前端,當然是選2啦!可是需求時間又很短很短,怎么辦呢?

五大技巧幫你提速響應式網頁設計項目

沒有哪個成功的Web項目是在設計師和開發無法流暢溝通的前提下搞定的,協作才是做好項目的基礎。 我曾看到經驗豐富的設計師和開發者因為溝通不暢和誤會導致項目失敗,也見過新手設計師和開發團隊一起通過高…

騰訊移動端H5頁面設計實戰分享

編者按:十年精華輸出,從用戶研究、創意剖析、繪制方法、項目管理等實體案例出發,《騰訊網UED體驗設計之旅》將帶你經歷一場體驗設計之旅。本文節選自該書,重點介紹了基于HTML5技術的移動Web頁面的設計…

界與面-移動網站設計經驗談

移動端網站是指運用HTML技術運行在手機瀏覽器或內置瀏覽器內的webAPP。很多人現在口中總說“H5, 適配站”,其實這種叫法是不準確的。

多案例詳解H5移動端頁面設計

去年JDC出了不少優秀的武媚娘…不,H5呢,大家都很拼,同時當然也積累了一些經驗和教訓,今天結合咱們的實戰案例,從字體,排版,動效,音效,適配性,想法這幾個方面好好聊一聊關于H5的設計,希望對同學們有…