廣告篇幅希望是大的還是小的?要是醒目還是低調的?面對這些需求時,得再微調抑或是一場彼此最不願面對的---大改(拭淚)。
但通常呢,我們會先有個兼具「設計美感」與「流暢動線」的最佳方案,來提供客戶做為參考。(畢竟前面有提到過這次的案例對於需求面較為模糊的~)

像這樣的小細節,也算是一種眉角吧~
在採取最佳方案的提出時,一方面能加速定稿的速度;二來是能給一些沒有方向的需求者們,更為具像的想法,並引導著他們更接近心目中最想展現樣子。

 

電腦版原廣告模板圖

電腦原廣告模板圖

 

初稿的樣式往往視為引導,畢竟口說的描述,是需要藉由具象的呈現才能促進溝通的,而在來來回回的討論下...最後最後,終於熬出了需求與專業間的平衡。

我們將廣告區塊設置在比較不影響整體視覺的邊框區域,畢竟廣告對網站而言是一個非常態性的呈現欄。而也顧慮到誠意的展現,就將它放置於主導覽列的旁邊,整體上,同時達到了既醒目也不失美感效果。

 

電腦版首頁

電腦版首頁示意圖

新媒體展露-最佳動線

在原先紙本的的內容中,沒有所謂的系統化。或許是紙本的延展方式不多,在成本上也須控制預算,在種種的限制下,僅能靠著緊密的排版,勉強的排出擁擠且複雜的頁面。

 

原紙本雜誌示意圖

原紙本雜誌示意圖

 

但「數位化」為一新穎前端詞彙,怎可在數位化後,卻仍承接著原先的缺點呢?

在反覆的翻閱下,發現其實雜誌內的展現分成了兩種:一種是大家最常看見的圖文圖文並排,一體成形的敘述型文章;另一種則是文章中帶有一些延伸性小議題,透過著下小標的方式帶領讀者們有另一層更深的見解。如此的發現,對於一般人來說,或許是一種不起眼,但任何小細節對我們來說,都可能是開啟大秘寶的關鍵鑰匙!

在發現小不同後,更為重要的是:特性的運用!
對於有延伸性的小標文章,我們利用了網頁的夾層式構想,將內容層層遞進的分成一個個不同主題的大專欄,每一個都是一個獨立的資料夾。

擊點後,映入眼簾的首層專欄,開始擁有了屬於自己的照片slider,在下方搭配著簡易導言說明整個專欄核心,但顧及有些專欄的導言相對攏長,便加上了個「展開全文」來做一個可收納的延展效果。一旁順勢放了三個輔助小工具,個別輔助讀者回到:引言、小標目錄區、最上方三個起始頁面。

向下滑動後,並排著的第二層資料夾,是由上一層資料夾的專欄主題,分散而來,並以一份文章夾帶一條照片slider的形式去作呈現。如此,更詳細的為整個專欄的小標題做更進一步的延伸與闡述。用意是在於:讓整體架構的呈現,如老師帶學生一般,以師長的至高作為引領;再分別讓每位學生各自發展。
而這樣分開呈現的形式,不僅能改善在閱讀面的冗長乏味,也使得在不繁雜的情況下,每個小標的照片展示量能達到提升。

 

專欄頁

專欄頁

 

擁有轉換夾層式的舒適閱讀後,接著,要來說些更細部的事情了~
那就是---關於文章中的照片slider呈現!不知道大家有沒有發現圖中slider條狀帶列跟我們常見有些許的不同呢?而為了脫穎而出,我們是如何別出心裁?

以下的兩個小巧思是我們致勝的觀點,大家注意聽好囉~
我們擁有:

 

有別於以往常見的樣式,我們在擊點上施了點小魔法~
照片列經由點選時,會以燈箱跳出來的方式呈現,以技術來說,這是一個平凡且簡單的設計。但,我們卻以這為基底,加上了“獨立圖說”,讓每張照片都可以擁有自己solo的獨場秀,也在右上方的欄位設置全螢幕、快速下載...等功能鍵,來優化使用者的最佳經驗。

 

燈箱slider

獨立燈箱slider示意圖

 

這用意是甚麼呢?通常,我們大多數所看到的slider呈現方式皆為一張照片在中心,而照片以外;slider框架以內的空間都會以全黑、全白的方式填滿著!至於固定高度後,我們便能更充分的運用框架中的空間。使照片在呈現上,是以「寬度」作為換張的方式移動,而非長、寬的尺寸限制下的張張凸顯。

 

slider滑動示意圖

slider滑動示意圖

  1. 「可點選獨立燈箱」slider!
  2. 「固定高度」slider!

 

除此之外也利用了我們的優勢,在後端以程式設定的方式,來做截圖、裁切。就憑著這點,就足以讓使用者在呈現照片時,少掉兩道手續,並在設計上展現出:如何更貼近使用者的心。

講完專欄,別以為我們對另一文章的呈現會如同大眾,我們可是很用心的呢~
根據使用者的瀏覽習慣來說,每當讀到一篇有興趣的文章時,都會有想將它列印以及收藏的衝動,這就像買書一樣,所以我們在文章的右上角設立了由左至右分別設立 – 收藏(僅會員擁有)、列印、PDF檔下載(僅VIP會員擁有)三個快捷鍵,以客戶的想法中提煉出,不同身分下的瀏覽者所擁有的:「需求區隔」,藉此在分級之餘,也能不失優雅的貼近著使用者行為。

 

一般文章

一般文章示意圖

 

再來,會員方案的呈現也是規劃中很大的一個重點!
相信現代人對於閱讀繁雜的規章一定有很大的障礙,在面對多字的敘述時,離開的機率相對於簡明扼要的規範還要高出很多。正所謂:明瞭的條列讓讀者快入會;雜亂的敘述使想入會的成累贅!!!

所以條列比對成必備。

 

會員方案

會員方案展示圖

 

但,條列人人會,那我們憑什麼讓人崇拜來下跪?這就繼續讓我們繼續看下去...。

瞭解更多...