在商言商

網站設計新趨勢
網站設計新趨勢

過去幾年,一成不變的網頁佈局(layout)已開始令人疲乏,幸而 Flexbox 以及 CSS Grid!(Chrome、Firefox 預計於今年三月開始支援)等技術的出現,讓版面設計變得更靈活彈性,為設計師、工程師帶來更寬廣的揮灑空間,今年將可看到更多網站打破慣有的「對稱」、「秩序」守則,形形色色,層層疊疊的網頁佈局肯定精彩。不過不變的大原則是,設計的重點是要烘托「內容」,內容才是骨肉、才是人們光臨網站的主因,因此設計的尺度上也需斟酌,天馬行空之餘,別反客為主,奪走內容的風采。

Jun
19
2017

圖越大越好?不是所有的使用者都跟你想得一樣!

在做產品設計驗證前,通常我們會先試著想像或限縮產品的使用者是哪一種人?有何種樣貌?以設計出符合使用者需求的設計;但很多時候,產品很難指向單一種特定的使用者。 以痞客邦部落格服務的使用者來說,可以基本分為「部落客」與「讀者」兩種類型;不過,部落格可以創作內容涵蓋的範圍非常廣泛且沒有限制,食衣住宿行育樂都有(光是站方規劃的文章類型就有 40 種分類提供部落客選擇),而每種文章類型的「部落客」與「讀者」需求也都會有所不同,筆者最近所參與的研究專案裡就遇到類似問題。   先從提出研究假設開始吧 這個研究專案裡主要研究對象是平時有瀏覽部落格文章習慣的讀者,我們分別找了兩種讀者來進行研究,一種是喜歡閱讀美食文章的讀者,另一種則是愛好看電影影評的讀者。為什麼會選定兩種讀者進行研究呢? 我們提出的假設是:美食的讀者在閱讀行為上,喜好廣泛概略性的瀏覽內容;而電影影評的讀者則偏好深度品嚐文字...
  • Jan 31 , 2018

    網頁設計趨勢的翻轉

    網頁設計趨勢 可以反映當時的技術、使用者習慣、裝置、美學與設計思維的不同,相當有趣並值得探討。 我們可以看到  響應式網頁設計(RWD) 越來越流行,許多網站皆改為此方式來設計,除了對移動裝置用戶更友善外,甚至也影響 Google 的搜尋排行。接著,讓我們透過 UXPin  針對今年度所見的趨勢整理而成的文章。   UI 模板(patterns)激增   在響應式設計的風潮下,似乎每個網站看起來都一樣。不過,造成這樣的現象,除了響應式設計外,還有其他原因,譬如市場上出現大量的套版網站與工具(如 WordPress 等)。不過,相似排版與視覺的模板並非不好,這只是市場上出現大量好用的 UI 模板後,我們考量它所帶來的效益(省成本或可更專注於內容等)而產生的必然的現象而已。   另外,這些模板的發展都相當的成熟,要有極大的創新確實也相對...
  • Jan 31 , 2018

    網站媒體視覺案例分享

    更為精闢的文字與豐富大量的媒體視覺(於網頁中大量運用影片呈現),將是一項新興網頁的設計趨勢。許多人認為,這是一種具有爭議且十分冒失的展現方式,因為文字內容才是最為重要的傳遞資訊,不僅閱讀性高且更易於複製。 但,亦有一群人打破這種想法,支持以新興的酷炫手法及觀點,誘發存在於人性之中的好奇心,藉影片的多元面傳遞內容。 不管如何,相信你一定注意到近來,包含影片等豐富視覺媒體,並扔掉文字內容的網站出現得越加頻繁。毫無疑問的,這種做法有它的支持與反對者,就當前而言,雖無法斷定其是否是一種合理且有益的方式,但無可置疑的是,如此的呈現方式能讓網站看起來更現代、精美、創新及別具風味,而未來,也唯有時間才能夠發現它所存在的問題與缺陷。 在此我們收集了一些網頁設計的案例,它們皆倚靠相當大量的影片與圖片設計而成,視覺的衝擊十分豐富,且不是以常規的文字所設計而成。   帶有影片的網頁設計案例 M...
  • Jan 31 , 2018

    為了使用者體驗,什麼是對的?什麼又是錯的?

    錯誤的用字可能會造成不好的使用者體驗;一個不明確的按鈕文字或陌生的名詞會讓使用者感到挫折。為了確保能使用正確的文字,可以藉由以下幾項不同的工具與技術來協助我們。   Google Trends 如果你正在決定要用哪個用字或詞,並且你也不知道哪個比較好,這時候你可以嘗試使用 Google Trends 。 譬如下例: Log in Log on Sign in Sign on 只要在網站中輸入這些字或詞(用逗號分開),Google Trends 則會比較這群字詞被使用的頻率。另外,檢索結果也會自動找出一些句子,例如 “facebook log in” 或  “can’t sign in.” 等。 我們馬上來看看 Google Trends 檢索上述範例的結果:   看來 “sign ...
  • Jan 31 , 2018

    正確設計404錯誤頁面的方法技巧

    404 錯誤頁面是什麼? HTTP 404 錯誤意味著連結指向的網頁不存在,即原始網頁的URL失效,這種情況經常會發生,很難避免。 隨著網站的不斷發展,網站本身的架構會不斷變化,頁面和內容會在設計過程中不斷調整,被重新定向。網站本身的優化,往往不可避免地讓一部分內容不再那麼容易被使用者找到,當用戶開啟的時候,就是 404 頁面了。 絕大多數使用者害怕看到這個頁面,這意味著這個連結所對應的頁面已經不復存在,或者搜尋結果出錯了。但是,如果 能夠正確設計 404 頁面 ,反而能夠充分利用它解決使用者的問題,給你的網站帶來更多的訪客和流量。   建立一個網站最佳內容清單 使用者雖然沒有按照預期找到他們想要的頁面和內容,但這並不意味著整個流程就走入了死胡同,如果你著力於建立優質的內容,那麼應該在 404 頁面為使用者推薦最佳的網站內容。 相比於單獨留下一個碩大無比的404,更好的選...
  • Jan 31 , 2018

    RWD介紹

    什麼是RWD(Responsive Web Design)? 隨著每種新技術的到來,設計師屢屢面臨著新的挑戰。截至2014年初,手機的上網次數首次超過了電腦的次數。一旦技術成熟,使人們能在任何他們喜歡的地方使用網路,從電腦到行動裝置的這種轉變是不可避免的。現在趨勢已經改變,設計師正在處理一系列新的限制和挑戰。   網站設計師所面臨的挑戰是如何開發能跨越行動裝置和電腦的網站,實現從一個裝置到另一個裝置的無縫過渡。這才只是第一個挑戰,後面緊接而來的還有其他幾千個挑戰,比如我們如何在較小的裝置上實現閱讀、導航、滾動、調整大小、平移等最佳使用方式。   RWD 一詞的起源 在2010年,網頁設計師 Ethan Marcotte 寫了一篇具有先見之明的文章,從中,他創造了“響應式網頁設計”一詞,   「我們可以將它們視為網路體驗中的一部分...
  • Jun 19 , 2017

    激發靈感的 50 套網頁配色方案,連色票都附上囉!

    色彩搭配對網頁視覺起著最直接的影響,所以設計師們總是對此十分謹慎且難以抉擇… 一群洞察至此的海外設計師就整理出了以下 50 套網頁配色方案,而且每一套都附有色值,希望以此激發大家的設計靈感,讓各位網頁設計師早日告別焦慮與無限期加班——   文章來源/  數英網 DIGITALING 編輯/ 宋那個 素材來源於/  Canvas NO.1 NO.2 NO.3 NO.4 NO.5 NO.6 NO.7 NO.8 NO.9 NO.10 NO.11 NO.12 NO.13 NO.14 NO.15 NO.16 NO.17 NO.18 NO.19 NO.20 NO.21 NO.22 NO.23 NO.24 NO.25 NO.26 NO.27 NO.28 NO.29 NO.30 NO.31 NO.32 NO.33 NO.34 NO...
  • Jun 19 , 2017

    圖越大越好?不是所有的使用者都跟你想得一樣!

    在做產品設計驗證前,通常我們會先試著想像或限縮產品的使用者是哪一種人?有何種樣貌?以設計出符合使用者需求的設計;但很多時候,產品很難指向單一種特定的使用者。 以痞客邦部落格服務的使用者來說,可以基本分為「部落客」與「讀者」兩種類型;不過,部落格可以創作內容涵蓋的範圍非常廣泛且沒有限制,食衣住宿行育樂都有(光是站方規劃的文章類型就有 40 種分類提供部落客選擇),而每種文章類型的「部落客」與「讀者」需求也都會有所不同,筆者最近所參與的研究專案裡就遇到類似問題。   先從提出研究假設開始吧 這個研究專案裡主要研究對象是平時有瀏覽部落格文章習慣的讀者,我們分別找了兩種讀者來進行研究,一種是喜歡閱讀美食文章的讀者,另一種則是愛好看電影影評的讀者。為什麼會選定兩種讀者進行研究呢? 我們提出的假設是:美食的讀者在閱讀行為上,喜好廣泛概略性的瀏覽內容;而電影影評的讀者則偏好深度品嚐文字...
  • 敏捷式設計法 - 商積影音行銷
    Dec 23 , 2016

    敏捷式設計法(Design Sprint Method)

    敏捷式設計法(Design Sprint Method),專屬設計團隊的Agile 你知道敏捷式開發法(Agile)嗎?, 這是在程式設計領域頗具盛名的開發方式,Google也依據相同的原理設計出一套敏捷式設計法(Design Sprint Method)讓設計團隊可以參考進而 發展出更有趣、多產且能適應的變通方法,一起來看看他的運作方法吧! Google 建議的團隊人數約 5~8 人,其中包含設計師、工程師、產品經理或相關領域專家 Sprint Master 就是團隊的Leader,需要對設計流程、UX 方法論、策略、激勵指導團隊技巧與談判有深度的瞭解。他們最大的任務即是: 1)定義設計的任務為何 2)組織團隊 3)帶領團隊跑完整個Sprint。 Sprint Master 還需將任務時程表規劃好,安排一個大桌子 “激勵討論",以及一些實用的小工具,例如:剪刀、紙、膠...

服務支援

refresh captcha
登入