新浪微博UWP UI意見征求

各位園主，卑職最近在忙一些新浪微博UWP的事兒，其中有一些UI上的design和實現，拿出來見見公婆，請大家給個意見: 您是喜歡A還是B。麻煩直接回在評論區了，寫A或B，願意多寫幾句意見的更歡迎！

先說PC端吧。

方案A：

方案B:

 

區別是：

1）窗口標題條顏色（灰色 vs. 橘黃色）；

2）分割線顏色（灰色 vs. 橘黃色）；

3）+按鈕的位置（左上角 vs.下方）

在XAML code里，這兩種方式其實很容易調整，也就花2分鍾：

<Grid x:Name="NavigatorLeftBar" Grid.Row="0" Width="56" Background="#FFF6F6F6">

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto"/>

        <RowDefinition/>

    </Grid.RowDefinitions>

<Grid Grid.Row="1" VerticalAlignment="Top">

    <Grid.RowDefinitions>

        <RowDefinition Height="44"/>

       <RowDefinition Height="56"/>

       <RowDefinition Height="56"/>

       <RowDefinition Height="56"/>

       <RowDefinition Height="56"/>

       <RowDefinition Height="56"/>

    </Grid.RowDefinitions>

</Grid>

看你是想把那個大大的+號放在第一行還是第三行了。當然還要調整一下行高。

原來的開發者在代碼里用了MVVM，大概每個Button長這個樣子：

<WeiboControls:TabbarControl Grid.Row="1" x:Name="lefttimeLineTabbar" IsChecked="{x:Bind VM.HomeCheck,Mode=TwoWay}" Text="{x:Bind VM.Home}" NormalImageStrUri="{StaticResource imgStr_tabbar_home}" CheckImageStrUri="{StaticResource imgStr_tabbar_home_selected}" GroupName="tabBarLeftGroup" cal:Message.Attach="[Event Click]=[Action ChangedViewItem(0)]" Click="lefttimeLineTabbar_Click" Tag="0"/>

雖然在這篇文章中，https://msdn.microsoft.com/en-us/library/windows/apps/xaml/mt628050.aspx，微軟並不建議用MVVM，但是無所謂啦，只要developer覺得寫代碼舒服以后好維護就可以。就本人來說，我根本不用MVVM，code behind挺好的，當然Model還是要有，VM和事件處理直接在code behind里就搞定了，便於閱讀理解維護，開發速度還快，因為省了不少代碼。

 

再看看手機端的UI。

方案A在左側；方案B在右側。

區別是：

1）狀態條顏色(灰色 vs. 橘黃色)

2）標題條分割線顏色 (灰色 vs.橘黃色)

 

  

手機上的StatusBar的顏色可以這樣搞起：

if (UAPPlatformHelper.IsStatusBarPresent)

{

StatusBar statusBar = StatusBar.GetForCurrentView();

statusBar.ForegroundColor = Colors.Black;

statusBar.BackgroundColor = grayColor;

statusBar.BackgroundOpacity = 1;

}

注意那個BackgroundOpacity，如果設置為0的話，你的設置就沒用，顏色不能透出。

麻煩大家給個意見，投個票。謝謝！是不是都在回家的路上了~ 預祝春節快樂！

 

ms-uap