---
tags: 2021 程式體驗營 team20
---
# 第三週小組任務 | Team20

### 第一題 討論香水電商版型攻略

一起討論你觀察到香水電商在 Mobile、PC 上有哪些變化，以及你預期會如何做，有哪幾個細節有卡住，透過小組力量一起解除疑惑！

### 第二題 RWD網站樣式觀察

觀察 [StockSnap 免費圖片官網](https://stocksnap.io/) 在 Mobile、iPad、PC 樣式上有什麼明顯的變化

---

## 小組討論
* 國家隊第20組

參與組員： A-Lu、yu shiuan chang、li li

* 香水電商版型攻略及StockSnap網站分析心得：
<br><br>

>[name=A-Lu 分享][color=darkblue]
第一題還在龜，這邊先擬答第二題：
>
> **[StockSnap 免費圖片官網](https://stocksnap.io/) 在 Mobile、iPad、PC 樣式上有什麼明顯的變化**
>
>* **mobile相較於pc**
> 首頁：
> 1.上方選單在mobile版中收成(雙層)漢堡清單
> 2.限時特惠(10photo free)在mobile版中從banner區獨立出來
> 3.常用分類標籤列在mobile中不顯示
>*pc和mobile共通的是滑到表尾就會冒更多圖出來，我感覺表尾形同虛設XD
> 圖片頁：
>1.圖片資訊選擇了作者、下載、和加入最愛 作精簡呈現，其餘捨棄
>2.右方推銷(?)欄位改為橫式與較少張數，而非直接往下放置，節省版面與建立較佳閱讀節奏
>3.表尾熱門搜尋字、精選、和其他頁面三欄由橫改直，內容由多欄改為獨立置中
>4.這邊 兩圖同為手機版，但在較大的手機中(425px)呈現為單行，較小的手機(375px以下)呈現為雙行，且前段靠頭後段靠尾
>
>
>pc和mobile共通的是相較於首頁的圖海，下段相關圖片的呈現在內頁頗為精簡
>
>* **pad相較於pc**
>首頁：
>1.限時特惠、常用標籤的處置與mobile邏輯相仿
>2.表頭沒有縮成漢堡清單、但all photos與trending被捨棄
>圖片頁：
>1.依循mobile的邏輯，垂直排列並精簡內容
>2.下載跟加入最愛兩個按鈕橫向並列
>3.表尾熱門搜尋字、精選、和其他頁面 三欄由橫改直，內容則維持多欄顯示
>
>
>* **覺得特別之處**是這種圖片長寬尺寸各異的時候(圖海)可以維持某個固定高度排列(但不是寫死高度)，同時在縮放或各種排列組合下都可以滿足頭尾對齊間距固定，不知道是怎麼做到的
>f12之下縮放頁面發現所有圖片的高度都被反白並且更動，
>此外按f12找到這個神奇的東西：-webkit-text-size-adjust: 100%;
>試著搜尋-webkit-是什麼找到[這個](https://www.twblogs.net/a/5b8d714c2b717718833e037e)

>[name=yu shiuan chang 分享][color=yellow]
># 1. 香水電商版型攻略
>還在切中～目前遇到比較困擾的問題就是oocss的部分，常常切到一半發現好像又都寫在一起，就在猶豫是不是要把他們拆開，然後就是跟sass一些用法還不是很熟練，需要一直看筆記來寫
># 2. [StockSnap 免費圖片官網](https://stocksnap.io/) 在 Mobile、iPad、PC 樣式上有什麼明顯的變化
>## menu部分
>**pc** 
>**pad** 
>**phone** 
>PC變Pad的時候，有些按鈕會縮進。。。裡（這效果有點酷，不知道怎麼做的），phone則是出現漢堡包
>ps.當menu滑到banner一半時，會變色，這效果也很厲害！！！
>
>
>## content部分
>**pc** 
>**pad** 
>**phone** 
>pc變pad時，類別選擇的按鈕列消失了，廣告變置中，圖片也縮成2,3張ㄧ排，phone圖片縮成1~2張一排

>[name=li li 分享][color=olive]
>### 一、香水電商版型攻略
>
>還沒有頭緒哩，看了組員A-Lu的手繪稿，覺得水很深。預期會先回顧老師的直播，在引導之下做出來。
>
>### 二、 StockSnap網站樣式觀察
>無論是手機、平板還是電腦版，StockSnap都有一個很酷的設計---nav bar的顏色皆有兩種變化。如果是在header按下選單，背景是紫色的；如果來到圖片瀏覽的內容區，背景就會變淺色。這種低調卻講求細節的樣式設計，是第一次觀察到，覺得斯巴拉西。此外，圖片內容皆會隨著卷軸下滑自動加載，確保有源源不絕的圖片載入。點選左上方的相機圖示，即可回到頁面最上方。如同組員A-Lu的觀察，自動加載圖片的功能，讓footer資訊的擺放顯得雞肋了，而且手速不快，會點不著。以下個別就3種版型設計，點出個別差異:
>
>**PC**
>
圖片會自適應大小排列，每行皆有多張圖。header和內容之間，有分類圖示，這是平板和手機沒有的。<br>
>**iPad**
>
隨著頁面變窄，每行展示的圖片數量變少了。<br>
類別區是整齊的兩列式呈現。<br>
>**Mobile**
>
>右上方出現了漢堡選單，此外，適應寬度變窄，文字分行。<br>
>
>原本最上方橫幅顯示的nav bar，做成漢堡選單後，變成直列呈現。保有三個點點的質感設計。<br>
>
>不同於header深紫配色，淺色底能更好呈現各種色彩的圖像。<br>
>
>因為圖片不斷加載，不好捕捉的footer區，內容直列呈現。pinterest的logo雖有置中，免不了一種落單的寂寥感。
>
---
↓ 討論內容截圖